feat: make a better hook for rpc calls

src/mainview/components/forms/mod.version.form.tsx

@@ -1,7 +1,7 @@
 import { useForm } from "@tanstack/react-form";
 import { UseMutateAsyncFunction, useQuery } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
 import * as v from "valibot";
+import { useRPC } from "@/mainview/hooks/use-rpc";
 import { Button } from "../ui/button";
 import { PopoverPrimitive } from "../ui/popover";
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
@@ -44,10 +44,10 @@ export function ModVersionForm({
   };
   handle: PopoverPrimitive.Handle<React.ComponentType>;
 }) {
-  const { electroview } = useRouteContext({ from: "__root__" });
+  const { rpc } = useRPC();
   const { data: modInfo } = useQuery({
     queryKey: ["modInfo", modid],
-    queryFn: () => electroview.rpc?.request.fetchModInfo({ modid }),
+    queryFn: () => rpc?.request.fetchModInfo({ modid }),
   });
   const defaultValues: { url: string | null } = {
     url:

src/mainview/components/ui/sidebar.tsx

@@ -1,7 +1,6 @@
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { keepPreviousData, useMutation, useQuery } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Loader2Icon } from "lucide-react";
 import * as React from "react";
@@ -27,6 +26,7 @@ import {
 import { Skeleton } from "@/mainview/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/mainview/components/ui/tooltip";
 import { useIsMobile } from "@/mainview/hooks/use-mobile";
+import { useRPC } from "@/mainview/hooks/use-rpc";
 import { DownloadIcon } from "./icons/download";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
@@ -70,9 +70,7 @@ function SidebarProvider({
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
 }) {
-  const { electroview } = useRouteContext({
-    from: "__root__",
-  });
+  const { rpc } = useRPC();
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React.useState(false);
 
@@ -143,14 +141,14 @@ function SidebarProvider({
   const { data: version } = useQuery({
     staleTime: 60_000,
     queryKey: ["version"],
-    queryFn: () => electroview.rpc?.request.getVersion(),
+    queryFn: () => rpc?.request.getVersion(),
     refetchOnMount: false,
     refetchOnWindowFocus: false,
     placeholderData: keepPreviousData,
   });
 
   const { data: availableUpdate } = useQuery({
-    queryFn: () => electroview.rpc?.request.getUpdate(),
+    queryFn: () => rpc?.request.getUpdate(),
     queryKey: ["availableUpdate"],
     staleTime: 60_000,
   });
@@ -160,14 +158,13 @@ function SidebarProvider({
     isPending: isDownloading,
     error,
   } = useMutation({
-    mutationFn: async () => electroview.rpc?.request.downloadUpdate(),
-    onMutate: () =>
-      electroview.rpc?.addMessageListener("updateFinished", ({ done }) => setCanApply(done)),
-    onSettled: () => electroview.rpc?.removeMessageListener("updateFinished", () => {}),
+    mutationFn: async () => rpc?.request.downloadUpdate(),
+    onMutate: () => rpc?.addMessageListener("updateFinished", ({ done }) => setCanApply(done)),
+    onSettled: () => rpc?.removeMessageListener("updateFinished", () => {}),
   });
 
   const { mutate: applyUpdate, isPending: isApplying } = useMutation({
-    mutationFn: async () => electroview.rpc?.request.applyUpdate(),
+    mutationFn: async () => rpc?.request.applyUpdate(),
   });
 
   return (
@@ -180,23 +177,23 @@ function SidebarProvider({
                 variant="ghost"
                 className="hover:text-yellow-700 dark:hover:text-yellow-300"
                 size="icon-sm"
-                onClick={() => electroview.rpc?.request.minimize()}
+                onClick={() => rpc?.request.minimize()}
               >
                 <MinimizeIcon className="size-4" />
               </Button>
               <Button
                 variant="ghost"
                 className="hover:text-green-700 dark:hover:text-green-300"
                 size="icon-sm"
-                onClick={() => electroview.rpc?.request.maximize()}
+                onClick={() => rpc?.request.maximize()}
               >
                 <MaximizeIcon className="size-4" />
               </Button>
               <Button
                 variant="ghost"
                 className="hover:text-destructive"
                 size="icon-sm"
-                onClick={() => electroview.rpc?.request.quit()}
+                onClick={() => rpc?.request.quit()}
               >
                 <XIcon className="size-4" />
               </Button>

src/mainview/hooks/use-all-versions.ts

@@ -1,10 +1,10 @@
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
+import { useRPC } from "./use-rpc";
 
 export const useAllVersions = () => {
-  const { electroview } = useRouteContext({ from: "__root__" });
+  const { rpc } = useRPC();
   return useQuery({
-    queryFn: () => electroview.rpc?.request.getAllVersions(),
+    queryFn: () => rpc?.request.getAllVersions(),
     queryKey: ["allVersions"],
     placeholderData: keepPreviousData,
     refetchOnWindowFocus: false,

src/mainview/hooks/use-installations.ts

@@ -1,10 +1,10 @@
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
+import { useRPC } from "./use-rpc";
 
 export const useInstallations = () => {
-  const { electroview } = useRouteContext({ from: "__root__" });
+  const { rpc } = useRPC();
   return useQuery({
-    queryFn: () => electroview.rpc?.request.getInstallations(),
+    queryFn: () => rpc?.request.getInstallations(),
     queryKey: ["installations"],
     placeholderData: keepPreviousData,
     refetchOnWindowFocus: false,

src/mainview/hooks/use-installed-versions.ts

@@ -1,10 +1,10 @@
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
+import { useRPC } from "./use-rpc";
 
 export const useInstalledVersions = () => {
-  const { electroview } = useRouteContext({ from: "__root__" });
+  const { rpc } = useRPC();
   return useQuery({
-    queryFn: () => electroview.rpc?.request.getInstalledVersions(),
+    queryFn: () => rpc?.request.getInstalledVersions(),
     queryKey: ["installedVersions"],
     placeholderData: keepPreviousData,
     refetchOnWindowFocus: false,

src/mainview/hooks/use-mod-mutations.ts

@@ -1,6 +1,6 @@
 import { useMutation, type UseMutateAsyncFunction } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
 import { compareVersions, parseVersion } from "@/lib/utils";
+import { useRPC } from "./use-rpc";
 
 export type RemoveModFunction = UseMutateAsyncFunction<
   { success: boolean; message?: string } | undefined,
@@ -41,11 +41,11 @@ export function useModMutations({
   updateDownloadingMod,
   removeDownloadingMod,
 }: UseModMutationsProps) {
-  const { electroview } = useRouteContext({ from: "__root__" });
+  const { rpc } = useRPC();
 
   const { mutateAsync: removeMod } = useMutation({
     mutationFn: async ({ modzip }: { modzip: string }) =>
-      electroview.rpc?.request.removeMod({ modzip: modzip, path }),
+      rpc?.request.removeMod({ modzip: modzip, path }),
     onSuccess: async (resp) => {
       if (resp?.success) {
         await refetchInstalledMods();
@@ -56,15 +56,15 @@ export function useModMutations({
   });
 
   const { mutate: cancelDownload } = useMutation({
-    mutationFn: async (modid: number) => electroview.rpc?.request.cancelModDownload({ modid }),
+    mutationFn: async (modid: number) => rpc?.request.cancelModDownload({ modid }),
     onSuccess: (_, modid) => {
       removeDownloadingMod(modid);
     },
   });
 
   const { mutateAsync: downloadMod } = useMutation({
     mutationFn: async ({ url, modid }: { url: string; modid: number }) =>
-      electroview.rpc?.request.installMod({ url, path, modid }),
+      rpc?.request.installMod({ url, path, modid }),
     onError: (_, options) => {
       removeDownloadingMod(options.modid);
     },
@@ -103,19 +103,19 @@ export function useModMutations({
 
         if (status === "completed" || status === "error" || status === "cancelled") {
           removeDownloadingMod(options.modid);
-          electroview.rpc?.removeMessageListener("downloadModProgress", handleProgress);
-          electroview.rpc?.removeMessageListener("downloadModStatus", handleStatus);
+          rpc?.removeMessageListener("downloadModProgress", handleProgress);
+          rpc?.removeMessageListener("downloadModStatus", handleStatus);
         }
       };
 
-      electroview.rpc?.addMessageListener("downloadModProgress", handleProgress);
-      electroview.rpc?.addMessageListener("downloadModStatus", handleStatus);
+      rpc?.addMessageListener("downloadModProgress", handleProgress);
+      rpc?.addMessageListener("downloadModStatus", handleStatus);
     },
   });
 
   const { mutate: downloadLatest } = useMutation({
     mutationFn: async (modid: number) => {
-      const modInfo = await electroview.rpc?.request.fetchModInfo({ modid });
+      const modInfo = await rpc?.request.fetchModInfo({ modid });
       const latestVersion = modInfo?.mod?.releases
         ?.sort(
           (a, b) => compareVersions(parseVersion(a.modversion), parseVersion(b.modversion)) || 0,

src/mainview/hooks/use-mod-queries.ts

@@ -1,6 +1,6 @@
 import { useQuery, keepPreviousData, useMutation } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
 import { useMemo } from "react";
+import { useRPC } from "./use-rpc";
 
 interface UseModQueriesProps {
   path: string;
@@ -9,12 +9,12 @@ interface UseModQueriesProps {
 }
 
 export function useModQueries({ path, debouncedSearch, debouncedVersions }: UseModQueriesProps) {
-  const { electroview } = useRouteContext({ from: "__root__" });
+  const { rpc } = useRPC();
 
   const { data: installedMods, refetch: refetchInstalledMods } = useQuery({
     queryKey: ["installedMods", path],
     queryFn: () =>
-      electroview.rpc?.request.getInstalledMods({
+      rpc?.request.getInstalledMods({
         path,
       }),
     staleTime: 10 * 60 * 1000,
@@ -23,7 +23,7 @@ export function useModQueries({ path, debouncedSearch, debouncedVersions }: UseM
   const { data: modsData } = useQuery({
     queryKey: ["mods", debouncedSearch, debouncedVersions],
     queryFn: () =>
-      electroview.rpc?.request.fetchMods({
+      rpc?.request.fetchMods({
         search: debouncedSearch,
         versions: debouncedVersions.map((v) => v.value),
       }),
@@ -40,7 +40,7 @@ export function useModQueries({ path, debouncedSearch, debouncedVersions }: UseM
     queryKey: ["modUpdates", modsString],
     queryFn: async () => {
       if (!modsString) return {};
-      return electroview.rpc?.request.fetchModUpdates({ modsString });
+      return rpc?.request.fetchModUpdates({ modsString });
     },
     enabled: !!modsString,
     staleTime: 5 * 60 * 1000,
@@ -62,7 +62,7 @@ export function useModQueries({ path, debouncedSearch, debouncedVersions }: UseM
   }, [installedMods, modsData]);
 
   const { mutate: openLink } = useMutation({
-    mutationFn: async (url: string) => electroview.rpc?.request.openLink({ url }),
+    mutationFn: async (url: string) => rpc?.request.openLink({ url }),
   });
 
   return {

src/mainview/hooks/use-mods.ts

@@ -1,8 +1,8 @@
 import { useQuery, keepPreviousData, useMutation } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
 import { useMemo, useReducer } from "react";
 import { initialFilterState, filterReducer, type SortingOption } from "@/mainview/types/mods";
 import useDebounce from "./use-debounce";
+import { useRPC } from "./use-rpc";
 
 interface UseModsReturn {
   // Query results
@@ -31,7 +31,7 @@ interface UseModsReturn {
 }
 
 export function useMods(path: string): UseModsReturn {
-  const { electroview } = useRouteContext({ from: "__root__" });
+  const { rpc } = useRPC();
   const [filterState, filterDispatch] = useReducer(filterReducer, initialFilterState);
 
   const { sorting, showOnlyInstalled, search, author, versions } = filterState;
@@ -44,7 +44,7 @@ export function useMods(path: string): UseModsReturn {
   const { data: installedMods, refetch: refetchInstalledMods } = useQuery({
     queryKey: ["installedMods", path],
     queryFn: () =>
-      electroview.rpc?.request.getInstalledMods({
+      rpc?.request.getInstalledMods({
         path,
       }),
     staleTime: 10 * 60 * 1000,
@@ -54,7 +54,7 @@ export function useMods(path: string): UseModsReturn {
   const { data: modsData } = useQuery({
     queryKey: ["mods", debouncedSearch, debouncedVersions],
     queryFn: () =>
-      electroview.rpc?.request.fetchMods({
+      rpc?.request.fetchMods({
         search: debouncedSearch,
         versions: debouncedVersions.map((v) => v.value),
       }),
@@ -73,7 +73,7 @@ export function useMods(path: string): UseModsReturn {
     queryKey: ["modUpdates", modsString],
     queryFn: async () => {
       if (!modsString) return {};
-      return electroview.rpc?.request.fetchModUpdates({ modsString });
+      return rpc?.request.fetchModUpdates({ modsString });
     },
     enabled: !!modsString,
     staleTime: 5 * 60 * 1000,
@@ -136,7 +136,7 @@ export function useMods(path: string): UseModsReturn {
 
   // Open link mutation
   const { mutate: openLink } = useMutation({
-    mutationFn: async (url: string) => electroview.rpc?.request.openLink({ url }),
+    mutationFn: async (url: string) => rpc?.request.openLink({ url }),
   });
 
   return {

src/mainview/hooks/use-rpc.ts

@@ -0,0 +1,9 @@
+import { useRouteContext } from "@tanstack/react-router";
+
+export const useRPC = () => {
+  const { electroview } = useRouteContext({ from: "__root__" });
+
+  return {
+    rpc: electroview.rpc,
+  };
+};

src/mainview/hooks/use-servers.ts

@@ -1,10 +1,10 @@
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
+import { useRPC } from "./use-rpc";
 
 export const useServers = () => {
-  const { electroview } = useRouteContext({ from: "__root__" });
+  const { rpc } = useRPC();
   return useQuery({
-    queryFn: () => electroview.rpc?.request.getServers(),
+    queryFn: () => rpc?.request.getServers(),
     queryKey: ["servers"],
     placeholderData: keepPreviousData,
     refetchOnWindowFocus: false,

src/mainview/hooks/use-worlds.ts

@@ -1,10 +1,10 @@
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useRouteContext } from "@tanstack/react-router";
+import { useRPC } from "./use-rpc";
 
 export const useWorlds = () => {
-  const { electroview } = useRouteContext({ from: "__root__" });
+  const { rpc } = useRPC();
   return useQuery({
-    queryFn: () => electroview.rpc?.request.getWorlds(),
+    queryFn: () => rpc?.request.getWorlds(),
     queryKey: ["worlds"],
     placeholderData: keepPreviousData,
     refetchOnWindowFocus: false,