refactor: system-info hook

apps/client/app/components/create-repository-form.tsx

@@ -9,11 +9,12 @@ import { Button } from "./ui/button";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
 import { Input } from "./ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
-import { getSystemInfoOptions, listRcloneRemotesOptions } from "~/api-client/@tanstack/react-query.gen";
+import { listRcloneRemotesOptions } from "~/api-client/@tanstack/react-query.gen";
 import { useQuery } from "@tanstack/react-query";
 import { Alert, AlertDescription } from "./ui/alert";
 import { ExternalLink } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+import { useSystemInfo } from "~/hooks/use-system-info";
 
 export const formSchema = type({
 	name: "2<=string<=32",
@@ -72,9 +73,7 @@ export const CreateRepositoryForm = ({
 		}
 	}, [watchedBackend, watchedName, form]);
 
-	const { data: systemInfo } = useQuery({
+	const { capabilities } = useSystemInfo();
-		...getSystemInfoOptions(),
-	});
 
 	return (
 		<Form {...form}>
@@ -120,11 +119,11 @@ export const CreateRepositoryForm = ({
 									<SelectItem value="azure">Azure Blob Storage</SelectItem>
 									<Tooltip>
 										<TooltipTrigger>
-											<SelectItem disabled={!systemInfo?.capabilities.rclone} value="rclone">
+											<SelectItem disabled={!capabilities.rclone} value="rclone">
 												rclone (40+ cloud providers)
 											</SelectItem>
 										</TooltipTrigger>
-										<TooltipContent className={cn({ hidden: systemInfo?.capabilities.rclone })}>
+										<TooltipContent className={cn({ hidden: capabilities.rclone })}>
 											<p>Setup rclone to use this backend</p>
 										</TooltipContent>
 									</Tooltip>

apps/client/app/hooks/use-system-info.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import { getSystemInfoOptions } from "~/api-client/@tanstack/react-query.gen";
+
+export function useSystemInfo() {
+	const { data, isLoading, error } = useQuery({
+		...getSystemInfoOptions(),
+		staleTime: 5 * 60 * 1000,
+		gcTime: 10 * 60 * 1000,
+		refetchOnWindowFocus: false,
+	});
+
+	return {
+		capabilities: data?.capabilities ?? { docker: false, rclone: false },
+		isLoading,
+		error,
+		systemInfo: data,
+	};
+}

apps/client/app/modules/volumes/routes/volume-details.tsx

@@ -5,7 +5,6 @@ import { useState } from "react";
 import {
 	deleteVolumeMutation,
 	getVolumeOptions,
-	getSystemInfoOptions,
 	mountVolumeMutation,
 	unmountVolumeMutation,
 } from "~/api-client/@tanstack/react-query.gen";
@@ -30,6 +29,7 @@ import { VolumeInfoTabContent } from "../tabs/info";
 import { FilesTabContent } from "../tabs/files";
 import { DockerTabContent } from "../tabs/docker";
 import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+import { useSystemInfo } from "~/hooks/use-system-info";
 
 export function meta({ params }: Route.MetaArgs) {
 	return [
@@ -60,9 +60,7 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 		refetchOnWindowFocus: true,
 	});
 
-	const { data: systemInfo } = useQuery({
+	const { capabilities } = useSystemInfo();
-		...getSystemInfoOptions(),
-	});
 
 	const deleteVol = useMutation({
 		...deleteVolumeMutation(),
@@ -115,7 +113,7 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 	}
 
 	const { volume, statfs } = data;
-	const dockerAvailable = systemInfo?.capabilities?.docker ?? false;
+	const dockerAvailable = capabilities.docker;
 
 	return (
 		<>