fix(eslint): resolve setState-in-effect errors in dashboard components (#1362)
- LanguageSwitcher: remove mounted state + useLayoutEffect pattern Portal renders directly based on open state (SSR-safe without client check) - UsageStats: replace stats-null check with isInitialLoad ref to avoid setState in effect body (cascading render issue)
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useLayoutEffect } from "react";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
import { useRouter, usePathname } from "next/navigation";
|
import { useRouter, usePathname } from "next/navigation";
|
||||||
import { Globe, X } from "lucide-react";
|
import { Globe, X } from "lucide-react";
|
||||||
@@ -15,12 +15,11 @@ function extractLangFromPath(pathname) {
|
|||||||
|
|
||||||
export default function LanguageSwitcher({ currentLang }) {
|
export default function LanguageSwitcher({ currentLang }) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [mounted, setMounted] = useState(false);
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const current = getLanguage(currentLang);
|
const current = getLanguage(currentLang);
|
||||||
|
|
||||||
useEffect(() => {
|
useLayoutEffect(() => {
|
||||||
setMounted(true);
|
setMounted(true);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@@ -91,7 +90,7 @@ export default function LanguageSwitcher({ currentLang }) {
|
|||||||
<span className="sm:hidden">{current.flag}</span>
|
<span className="sm:hidden">{current.flag}</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{mounted && open && createPortal(modal, document.body)}
|
{open && createPortal(modal, document.body)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useEffect, useMemo, useCallback } from "react";
|
import { useState, useEffect, useMemo, useCallback, useRef } from "react";
|
||||||
import { useSearchParams, useRouter } from "next/navigation";
|
import { useSearchParams, useRouter } from "next/navigation";
|
||||||
import { FREE_PROVIDERS, AI_PROVIDERS } from "@/shared/constants/providers";
|
import { FREE_PROVIDERS, AI_PROVIDERS } from "@/shared/constants/providers";
|
||||||
|
|
||||||
@@ -203,6 +203,7 @@ export default function UsageStats({ period: periodProp, setPeriod: setPeriodPro
|
|||||||
const [viewMode, setViewMode] = useState("costs");
|
const [viewMode, setViewMode] = useState("costs");
|
||||||
const [providers, setProviders] = useState([]);
|
const [providers, setProviders] = useState([]);
|
||||||
const [periodLocal, setPeriodLocal] = useState("today");
|
const [periodLocal, setPeriodLocal] = useState("today");
|
||||||
|
const isInitialLoad = useRef(true);
|
||||||
const period = periodProp ?? periodLocal;
|
const period = periodProp ?? periodLocal;
|
||||||
const setPeriod = setPeriodProp ?? setPeriodLocal;
|
const setPeriod = setPeriodProp ?? setPeriodLocal;
|
||||||
|
|
||||||
@@ -231,8 +232,12 @@ export default function UsageStats({ period: periodProp, setPeriod: setPeriodPro
|
|||||||
// Fetch filtered stats via REST when period changes
|
// Fetch filtered stats via REST when period changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// First load: show full spinner; subsequent: show subtle fetching indicator
|
// First load: show full spinner; subsequent: show subtle fetching indicator
|
||||||
if (!stats) setLoading(true);
|
if (isInitialLoad.current) {
|
||||||
else setFetching(true);
|
isInitialLoad.current = false;
|
||||||
|
setLoading(true);
|
||||||
|
} else {
|
||||||
|
setFetching(true);
|
||||||
|
}
|
||||||
|
|
||||||
fetch(`/api/usage/stats?period=${period}`)
|
fetch(`/api/usage/stats?period=${period}`)
|
||||||
.then((r) => r.ok ? r.json() : null)
|
.then((r) => r.ok ? r.json() : null)
|
||||||
|
|||||||
Reference in New Issue
Block a user