diff --git a/apps/client/app/components/create-repository-form.tsx b/apps/client/app/components/create-repository-form.tsx index 573cd9a..d925ad3 100644 --- a/apps/client/app/components/create-repository-form.tsx +++ b/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({ - ...getSystemInfoOptions(), - }); + const { capabilities } = useSystemInfo(); return (
@@ -120,11 +119,11 @@ export const CreateRepositoryForm = ({ Azure Blob Storage - + rclone (40+ cloud providers) - +

Setup rclone to use this backend

diff --git a/apps/client/app/hooks/use-system-info.ts b/apps/client/app/hooks/use-system-info.ts new file mode 100644 index 0000000..b5e62f3 --- /dev/null +++ b/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, + }; +} diff --git a/apps/client/app/modules/volumes/routes/volume-details.tsx b/apps/client/app/modules/volumes/routes/volume-details.tsx index fad319a..892599f 100644 --- a/apps/client/app/modules/volumes/routes/volume-details.tsx +++ b/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({ - ...getSystemInfoOptions(), - }); + const { capabilities } = useSystemInfo(); 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 ( <>