Use the URL to navigate tabs

Author: jerelmiller

src/application/App.tsx

@@ -1,11 +1,10 @@
 import { Suspense, useEffect, useState } from "react";
 import type { ReactNode } from "react";
 import type { TypedDocumentNode } from "@apollo/client";
-import { useReactiveVar, gql, useQuery } from "@apollo/client";
+import { gql, useQuery } from "@apollo/client";
 import { useMachine } from "@xstate/react";
 import { ErrorBoundary } from "react-error-boundary";
 
-import { currentScreen, Screens } from "./components/Layouts/Navigation";
 import { Queries } from "./components/Queries/Queries";
 import { Mutations } from "./components/Mutations/Mutations";
 import { Explorer } from "./components/Explorer/Explorer";
@@ -41,7 +40,7 @@ import { useActorEvent } from "./hooks/useActorEvent";
 import { removeClient } from ".";
 import { PageError } from "./components/PageError";
 import { SidebarLayout } from "./components/Layouts/SidebarLayout";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useMatches, useNavigate } from "react-router-dom";
 import { PageSpinner } from "./components/PageSpinner";
 
 const APP_QUERY: TypedDocumentNode<AppQuery, AppQueryVariables> = gql`
@@ -118,11 +117,11 @@ export const App = () => {
   });
 
   const navigate = useNavigate();
+  const matches = useMatches();
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [selectedClientId, setSelectedClientId] = useState<string | undefined>(
     data?.clients[0]?.id
   );
-  const selected = useReactiveVar<Screens>(currentScreen);
   const [embeddedExplorerIFrame, setEmbeddedExplorerIFrame] =
     useState<HTMLIFrameElement | null>(null);
 
@@ -156,6 +155,9 @@ export const App = () => {
     }
   }, [send, clients.length]);
 
+  // The 0 index is always the root route and the selected tab is index 1.
+  const tab = matches[1];
+
   return (
     <>
       <SettingsModal open={settingsOpen} onOpen={setSettingsOpen} />
@@ -166,16 +168,8 @@ export const App = () => {
       />
       <BannerAlert />
       <Tabs
-        value={selected}
-        onChange={(screen) => {
-          currentScreen(screen);
-
-          if (screen === Screens.Connectors) {
-            navigate("/connectors");
-          } else {
-            navigate("/");
-          }
-        }}
+        value={tab?.pathname ?? "/queries"}
+        onChange={navigate}
         className="flex flex-col h-screen bg-primary dark:bg-primary-dark"
       >
         <div className="flex items-center border-b border-b-primary dark:border-b-primary-dark gap-4 px-4">
@@ -196,15 +190,15 @@ export const App = () => {
           </a>
           <Divider orientation="vertical" />
           <Tabs.List className="-mb-px">
-            <Tabs.Trigger value={Screens.Queries}>
+            <Tabs.Trigger value="/queries">
               Queries ({client?.queries.total ?? 0})
             </Tabs.Trigger>
-            <Tabs.Trigger value={Screens.Mutations}>
+            <Tabs.Trigger value="/mutations">
               Mutations ({client?.mutations.total ?? 0})
             </Tabs.Trigger>
-            <Tabs.Trigger value={Screens.Cache}>Cache</Tabs.Trigger>
-            <Tabs.Trigger value={Screens.Connectors}>Connectors</Tabs.Trigger>
-            <Tabs.Trigger value={Screens.Explorer}>Explorer</Tabs.Trigger>
+            <Tabs.Trigger value="/cache">Cache</Tabs.Trigger>
+            <Tabs.Trigger value="/connectors">Connectors</Tabs.Trigger>
+            <Tabs.Trigger value="/explorer">Explorer</Tabs.Trigger>
           </Tabs.List>
           <div className="ml-auto flex-1 justify-end flex items-center gap-2 h-full">
             {client?.version && (
@@ -272,51 +266,42 @@ export const App = () => {
          */}
         <Tabs.Content
           className="flex flex-col flex-1"
-          value={Screens.Explorer}
+          value="/explorer"
           forceMount
         >
           <Explorer
             clientId={selectedClientId}
-            isVisible={selected === Screens.Explorer}
+            isVisible={tab?.pathname === "/explorer"}
             embeddedExplorerProps={{
               embeddedExplorerIFrame,
               setEmbeddedExplorerIFrame,
             }}
           />
         </Tabs.Content>
-        <Tabs.Content
-          className="flex-1 overflow-hidden"
-          value={Screens.Queries}
-        >
+        <Tabs.Content className="flex-1 overflow-hidden" value="/queries">
           <TabErrorBoundary remarks="Error on Queries tab:">
             <Queries
               clientId={selectedClientId}
               explorerIFrame={embeddedExplorerIFrame}
             />
           </TabErrorBoundary>
         </Tabs.Content>
-        <Tabs.Content
-          className="flex-1 overflow-hidden"
-          value={Screens.Mutations}
-        >
+        <Tabs.Content className="flex-1 overflow-hidden" value="/mutations">
           <TabErrorBoundary remarks="Error on Mutations tab:">
             <Mutations
               clientId={selectedClientId}
               explorerIFrame={embeddedExplorerIFrame}
             />
           </TabErrorBoundary>
         </Tabs.Content>
-        <Tabs.Content
-          className="flex-1 overflow-hidden"
-          value={Screens.Connectors}
-        >
+        <Tabs.Content className="flex-1 overflow-hidden" value="/connectors">
           <TabErrorBoundary remarks="Error on Connectors tab:">
             <Suspense fallback={<PageSpinner />}>
               <Outlet />
             </Suspense>
           </TabErrorBoundary>
         </Tabs.Content>
-        <Tabs.Content className="flex-1 overflow-hidden" value={Screens.Cache}>
+        <Tabs.Content className="flex-1 overflow-hidden" value="/cache">
           <TabErrorBoundary remarks="Error on Cache tab:">
             <Cache clientId={selectedClientId} />
           </TabErrorBoundary>

src/application/components/Layouts/Navigation.tsx

@@ -3,9 +3,9 @@ import {
   postMessageToEmbed,
   SET_OPERATION,
 } from "../Explorer/postMessageHelpers";
-import { currentScreen, Screens } from "../Layouts/Navigation";
 import IconRun from "@apollo/icons/default/IconRun.svg";
 import { Button } from "../Button";
+import { useNavigate } from "react-router-dom";
 
 interface RunInExplorerButtonProps {
   operation: string;
@@ -18,6 +18,8 @@ export const RunInExplorerButton = ({
   variables,
   embeddedExplorerIFrame,
 }: RunInExplorerButtonProps): JSX.Element | null => {
+  const navigate = useNavigate();
+
   return (
     <Button
       variant="secondary"
@@ -36,7 +38,7 @@ export const RunInExplorerButton = ({
             },
             embeddedExplorerIFrame,
           });
-          currentScreen(Screens.Explorer);
+          navigate("/explorer");
         }
       }}
     >

src/application/components/Queries/RunInExplorerButton.tsx

@@ -14,6 +14,10 @@ import * as ConnectorRequestPage from "./pages/connectors/$operationId/requests/
 export const router = createMemoryRouter(
   createRoutesFromElements(
     <Route path="/" element={<App />}>
+      <Route path="queries" />
+      <Route path="mutations" />
+      <Route path="cache" />
+      <Route path="explorer" />
       <Route path="connectors" element={<ConnectorsPage.Route />}>
         <Route index element={<ConnectorsIndexPage.Route />} />
         <Route
@@ -29,5 +33,6 @@ export const router = createMemoryRouter(
         </Route>
       </Route>
     </Route>
-  )
+  ),
+  { initialEntries: ["/queries"] }
 );