fix: React hooks - variable declaration order and lazy initialization (#1017)

- Fixed variable declaration order in CLIToolsPageClient.js (functions before useEffect)
- Added lazy initialization for useState in BasicChatPageClient.js to read from localStorage
- Reduced ESLint errors by ~23%

Co-authored-by: yuangejiaozhu <leegajone@email.com>
This commit is contained in:
Jone 2026-05-12 10:25:29 +08:00 committed by GitHub
parent 17cab0ed52
commit c90cb8ebda
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 25 deletions

View file

@ -170,11 +170,29 @@ export default function BasicChatPageClient() {
const [providerGroups, setProviderGroups] = useState([]);
const [loadingData, setLoadingData] = useState(true);
const [loadError, setLoadError] = useState("");
const [sessions, setSessions] = useState([]);
const [activeSessionId, setActiveSessionId] = useState("");
const [activeProviderId, setActiveProviderId] = useState("");
const [sessions, setSessions] = useState(() => {
if (typeof window === "undefined") return [];
try {
const saved = safeParse(globalThis.localStorage.getItem(STORAGE_KEYS.sessions), []);
return Array.isArray(saved) ? saved.map((session) => ({
...session,
messages: Array.isArray(session.messages) ? session.messages : [],
})) : [];
} catch { return []; }
});
const [activeSessionId, setActiveSessionId] = useState(() => {
if (typeof window === "undefined") return "";
return globalThis.localStorage.getItem(STORAGE_KEYS.activeSessionId) || "";
});
const [activeProviderId, setActiveProviderId] = useState(() => {
if (typeof window === "undefined") return "";
return globalThis.localStorage.getItem(STORAGE_KEYS.activeProviderId) || "";
});
const [activeModelId, setActiveModelId] = useState("");
const [draft, setDraft] = useState("");
const [draft, setDraft] = useState(() => {
if (typeof window === "undefined") return "";
return globalThis.localStorage.getItem(STORAGE_KEYS.draft) || "";
});
const [attachments, setAttachments] = useState([]);
const [isSending, setIsSending] = useState(false);
const [streamingMessageId, setStreamingMessageId] = useState("");
@ -189,20 +207,7 @@ export default function BasicChatPageClient() {
const historyMenuRef = useRef(null);
useEffect(() => {
try {
const savedSessions = safeParse(globalThis.localStorage.getItem(STORAGE_KEYS.sessions), []);
setSessions(Array.isArray(savedSessions) ? savedSessions.map((session) => ({
...session,
messages: Array.isArray(session.messages) ? session.messages : [],
})) : []);
setActiveSessionId(globalThis.localStorage.getItem(STORAGE_KEYS.activeSessionId) || "");
setActiveProviderId(globalThis.localStorage.getItem(STORAGE_KEYS.activeProviderId) || "");
setDraft(globalThis.localStorage.getItem(STORAGE_KEYS.draft) || "");
} catch {
// Ignore storage errors.
} finally {
setIsHydrated(true);
}
setIsHydrated(true);
}, []);
useEffect(() => {

View file

@ -24,13 +24,6 @@ export default function CLIToolsPageClient({ machineId }) {
const [apiKeys, setApiKeys] = useState([]);
const [toolStatuses, setToolStatuses] = useState({});
useEffect(() => {
fetchConnections();
loadCloudSettings();
fetchApiKeys();
fetchAllStatuses();
}, []);
const fetchAllStatuses = async () => {
try {
const res = await fetch(ALL_STATUSES_URL);
@ -88,6 +81,13 @@ export default function CLIToolsPageClient({ machineId }) {
}
};
useEffect(() => {
fetchConnections();
loadCloudSettings();
fetchApiKeys();
fetchAllStatuses();
}, []);
const getActiveProviders = () => connections.filter(c => c.isActive !== false);
const getAllAvailableModels = () => {