mirror of
https://github.com/Buriburizaem0n/nezha-dash-v1.git
synced 2026-09-21 02:30:15 +00:00
fix: add service fetching and conditional rendering for service button
This commit is contained in:
+40
-22
@@ -20,7 +20,7 @@ import { SORT_TYPES } from "@/context/sort-context";
|
|||||||
import { useSort } from "@/hooks/use-sort";
|
import { useSort } from "@/hooks/use-sort";
|
||||||
import { useStatus } from "@/hooks/use-status";
|
import { useStatus } from "@/hooks/use-status";
|
||||||
import { useWebSocketContext } from "@/hooks/use-websocket-context";
|
import { useWebSocketContext } from "@/hooks/use-websocket-context";
|
||||||
import { fetchServerGroup } from "@/lib/nezha-api";
|
import { fetchServerGroup, fetchService } from "@/lib/nezha-api";
|
||||||
import { cn, formatNezhaInfo } from "@/lib/utils";
|
import { cn, formatNezhaInfo } from "@/lib/utils";
|
||||||
import type { NezhaWebsocketResponse, ServerGroup } from "@/types/nezha-api";
|
import type { NezhaWebsocketResponse, ServerGroup } from "@/types/nezha-api";
|
||||||
|
|
||||||
@@ -31,6 +31,16 @@ export default function Servers() {
|
|||||||
queryKey: ["server-group"],
|
queryKey: ["server-group"],
|
||||||
queryFn: () => fetchServerGroup(),
|
queryFn: () => fetchServerGroup(),
|
||||||
});
|
});
|
||||||
|
const { data: serviceData } = useQuery({
|
||||||
|
queryKey: ["service"],
|
||||||
|
queryFn: () => fetchService(),
|
||||||
|
refetchOnMount: true,
|
||||||
|
refetchOnWindowFocus: true,
|
||||||
|
refetchInterval: 10000,
|
||||||
|
});
|
||||||
|
const hasServices =
|
||||||
|
!!serviceData?.data?.services &&
|
||||||
|
Object.keys(serviceData.data.services).length > 0;
|
||||||
const { lastMessage, connected } = useWebSocketContext();
|
const { lastMessage, connected } = useWebSocketContext();
|
||||||
const { status } = useStatus();
|
const { status } = useStatus();
|
||||||
const [showServices, setShowServices] = useState<string>("0");
|
const [showServices, setShowServices] = useState<string>("0");
|
||||||
@@ -69,6 +79,12 @@ export default function Servers() {
|
|||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!hasServices) {
|
||||||
|
setShowServices("0");
|
||||||
|
}
|
||||||
|
}, [hasServices]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const checkInlineSettings = () => {
|
const checkInlineSettings = () => {
|
||||||
const isMobile = window.innerWidth < 768;
|
const isMobile = window.innerWidth < 768;
|
||||||
@@ -305,27 +321,29 @@ export default function Servers() {
|
|||||||
>
|
>
|
||||||
<MapIcon className="size-[13px]" />
|
<MapIcon className="size-[13px]" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
{hasServices && (
|
||||||
onClick={() => {
|
<button
|
||||||
setShowServices(showServices === "0" ? "1" : "0");
|
onClick={() => {
|
||||||
localStorage.setItem(
|
setShowServices(showServices === "0" ? "1" : "0");
|
||||||
"showServices",
|
localStorage.setItem(
|
||||||
showServices === "0" ? "1" : "0",
|
"showServices",
|
||||||
);
|
showServices === "0" ? "1" : "0",
|
||||||
}}
|
);
|
||||||
className={cn(
|
}}
|
||||||
"inset-shadow-2xs inset-shadow-white/20 flex cursor-pointer flex-col items-center gap-0 rounded-[50px] bg-blue-100 p-2.5 text-blue-600 transition-all dark:bg-blue-900 dark:text-blue-100",
|
className={cn(
|
||||||
{
|
"inset-shadow-2xs inset-shadow-white/20 flex cursor-pointer flex-col items-center gap-0 rounded-[50px] bg-blue-100 p-2.5 text-blue-600 transition-all dark:bg-blue-900 dark:text-blue-100",
|
||||||
"inset-shadow-black/20 bg-blue-600 text-white dark:bg-blue-100 dark:text-blue-600":
|
{
|
||||||
showServices === "1",
|
"inset-shadow-black/20 bg-blue-600 text-white dark:bg-blue-100 dark:text-blue-600":
|
||||||
},
|
showServices === "1",
|
||||||
{
|
},
|
||||||
"bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
|
{
|
||||||
},
|
"bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
|
||||||
)}
|
},
|
||||||
>
|
)}
|
||||||
<ChartBarSquareIcon className="size-[13px]" />
|
>
|
||||||
</button>
|
<ChartBarSquareIcon className="size-[13px]" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setInline(inline === "0" ? "1" : "0");
|
setInline(inline === "0" ? "1" : "0");
|
||||||
|
|||||||
Reference in New Issue
Block a user