Replace jotai-urql with just urql

frontend/locales/en.json

@@ -39,7 +39,6 @@
       }
     },
     "app_sessions_list": {
-      "error": "Failed to load app sessions",
       "heading": "Apps"
     },
     "browser_session_details": {

frontend/package.json

@@ -38,11 +38,11 @@
     "jotai": "^2.6.4",
     "jotai-devtools": "^0.7.1",
     "jotai-location": "^0.5.2",
-    "jotai-urql": "^0.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
-    "ua-parser-js": "^1.0.37"
+    "ua-parser-js": "^1.0.37",
+    "urql": "^4.0.6"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.2",

frontend/src/atoms.ts

@@ -1,123 +0,0 @@
-// Copyright 2023 The Matrix.org Foundation C.I.C.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { AnyVariables, CombinedError, OperationContext } from "@urql/core";
-import { atom, WritableAtom } from "jotai";
-import { useHydrateAtoms } from "jotai/utils";
-import { AtomWithQuery, atomWithQuery, clientAtom } from "jotai-urql";
-import type { ReactElement } from "react";
-
-import { graphql } from "./gql";
-import { client } from "./graphql";
-import { err, ok, Result } from "./result";
-
-export type GqlResult<T> = Result<T, CombinedError>;
-export type GqlAtom<T> = WritableAtom<
-  Promise<GqlResult<T>>,
-  [context?: Partial<OperationContext>],
-  void
->;
-
-/**
- * Map the result of a query atom to a new value, making it a GqlResult
- *
- * @param queryAtom: An atom got from atomWithQuery
- * @param mapper: A function that takes the data from the query and returns a new value
- */
-export const mapQueryAtom = <Data, Variables extends AnyVariables, NewData>(
-  queryAtom: AtomWithQuery<Data, Variables>,
-  mapper: (data: Data) => NewData,
-): GqlAtom<NewData> => {
-  return atom(
-    async (get): Promise<GqlResult<NewData>> => {
-      const result = await get(queryAtom);
-      if (result.error) {
-        return err(result.error);
-      }
-
-      if (result.data === undefined) {
-        throw new Error("Query result is undefined");
-      }
-
-      return ok(mapper(result.data));
-    },
-
-    (_get, set, context) => {
-      set(queryAtom, context);
-    },
-  );
-};
-
-export const HydrateAtoms: React.FC<{ children: ReactElement }> = ({
-  children,
-}) => {
-  useHydrateAtoms([[clientAtom, client]]);
-  return children;
-};
-
-const CURRENT_VIEWER_QUERY = graphql(/* GraphQL */ `
-  query CurrentViewerQuery {
-    viewer {
-      __typename
-      ... on User {
-        id
-      }
-
-      ... on Anonymous {
-        id
-      }
-    }
-  }
-`);
-
-const currentViewerAtom = atomWithQuery({ query: CURRENT_VIEWER_QUERY });
-
-export const currentUserIdAtom: GqlAtom<string | null> = mapQueryAtom(
-  currentViewerAtom,
-  (data) => {
-    if (data.viewer.__typename === "User") {
-      return data.viewer.id;
-    }
-    return null;
-  },
-);
-
-const CURRENT_VIEWER_SESSION_QUERY = graphql(/* GraphQL */ `
-  query CurrentViewerSessionQuery {
-    viewerSession {
-      __typename
-      ... on BrowserSession {
-        id
-      }
-
-      ... on Anonymous {
-        id
-      }
-    }
-  }
-`);
-
-const currentViewerSessionAtom = atomWithQuery({
-  query: CURRENT_VIEWER_SESSION_QUERY,
-});
-
-export const currentBrowserSessionIdAtom: GqlAtom<string | null> = mapQueryAtom(
-  currentViewerSessionAtom,
-  (data) => {
-    if (data.viewerSession.__typename === "BrowserSession") {
-      return data.viewerSession.id;
-    }
-    return null;
-  },
-);

frontend/src/components/BrowserSession.tsx

@@ -13,12 +13,9 @@
 // limitations under the License.
 
 import { parseISO } from "date-fns";
-import { atom, useSetAtom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithMutation } from "jotai-urql";
 import { useCallback } from "react";
+import { useMutation } from "urql";
 
-import { currentBrowserSessionIdAtom, currentUserIdAtom } from "../atoms";
 import { FragmentType, graphql, useFragment } from "../gql";
 import {
   parseUserAgent,
@@ -56,39 +53,18 @@
   }
 `);
 
-export const endBrowserSessionFamily = atomFamily((id: string) => {
-  const endSession = atomWithMutation(END_SESSION_MUTATION);
-
-  // A proxy atom which pre-sets the id variable in the mutation
-  const endSessionAtom = atom(
-    (get) => get(endSession),
-    (get, set) => set(endSession, { id }),
-  );
-
-  return endSessionAtom;
-});
-
 export const useEndBrowserSession = (
   sessionId: string,
   isCurrent: boolean,
 ): (() => Promise<void>) => {
-  const endSession = useSetAtom(endBrowserSessionFamily(sessionId));
-
-  // Pull those atoms to reset them when the current session is ended
-  const currentUserId = useSetAtom(currentUserIdAtom);
-  const currentBrowserSessionId = useSetAtom(currentBrowserSessionIdAtom);
+  const [, endSession] = useMutation(END_SESSION_MUTATION);
 
   const onSessionEnd = useCallback(async (): Promise<void> => {
-    await endSession();
+    await endSession({ id: sessionId });
     if (isCurrent) {
-      currentBrowserSessionId({
-        requestPolicy: "network-only",
-      });
-      currentUserId({
-        requestPolicy: "network-only",
-      });
+      window.location.reload();
     }
-  }, [isCurrent, endSession, currentBrowserSessionId, currentUserId]);
+  }, [isCurrent, endSession, sessionId]);
 
   return onSessionEnd;
 };

frontend/src/components/BrowserSessionList.tsx

@@ -12,21 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
-import { atomFamily } from "jotai/utils";
-import { atomWithQuery } from "jotai-urql";
-import { useTransition } from "react";
+import { useState, useTransition } from "react";
+import { useQuery } from "urql";
 
-import { mapQueryAtom } from "../atoms";
 import { graphql } from "../gql";
-import { SessionState, PageInfo } from "../gql/graphql";
-import {
-  atomForCurrentPagination,
-  atomWithPagination,
-  FIRST_PAGE,
-  Pagination,
-} from "../pagination";
-import { isOk, unwrap, unwrapOk } from "../result";
+import { SessionState } from "../gql/graphql";
+import { FIRST_PAGE, Pagination, usePages, usePagination } from "../pagination";
 
 import BlockList from "./BlockList";
 import BrowserSession from "./BrowserSession";
@@ -72,52 +63,22 @@
   }
 `);
 
-const filterAtom = atom<SessionState | null>(SessionState.Active);
-const currentPaginationAtom = atomForCurrentPagination();
-
-const browserSessionListFamily = atomFamily((userId: string) => {
-  const browserSessionListQuery = atomWithQuery({
-    query: QUERY,
-    getVariables: (get) => ({
-      userId,
-      state: get(filterAtom),
-      ...get(currentPaginationAtom),
-    }),
-  });
-
-  const browserSessionList = mapQueryAtom(
-    browserSessionListQuery,
-    (data) => data.user?.browserSessions || null,
+const BrowserSessionList: React.FC<{ userId: string }> = ({ userId }) => {
+  const [pagination, setPagination] = usePagination();
+  const [pending, startTransition] = useTransition();
+  const [filter, setFilter] = useState<SessionState | null>(
+    SessionState.Active,
   );
-
-  return browserSessionList;
-});
-
-const pageInfoFamily = atomFamily((userId: string) => {
-  const pageInfoAtom = atom(async (get): Promise<PageInfo | null> => {
-    const result = await get(browserSessionListFamily(userId));
-    return (isOk(result) && unwrapOk(result)?.pageInfo) || null;
+  const [result] = useQuery({
+    query: QUERY,
+    variables: { userId, state: filter, ...pagination },
   });
-  return pageInfoAtom;
-});
-
-const paginationFamily = atomFamily((userId: string) => {
-  const paginationAtom = atomWithPagination(
-    currentPaginationAtom,
-    pageInfoFamily(userId),
-  );
+  if (result.error) throw result.error;
+  const browserSessions = result.data?.user?.browserSessions;
+  if (!browserSessions) throw new Error(); // Suspense mode is enabled
 
-  return paginationAtom;
-});
-
-const BrowserSessionList: React.FC<{ userId: string }> = ({ userId }) => {
-  const [pending, startTransition] = useTransition();
-  const result = useAtomValue(browserSessionListFamily(userId));
-  const setPagination = useSetAtom(currentPaginationAtom);
-  const [prevPage, nextPage] = useAtomValue(paginationFamily(userId));
-  const [filter, setFilter] = useAtom(filterAtom);
+  const [prevPage, nextPage] = usePages(pagination, browserSessions.pageInfo);
 
-  const browserSessions = unwrap(result);
   if (browserSessions === null) return <>Failed to load browser sessions</>;
 
   const paginate = (pagination: Pagination): void => {
@@ -145,6 +106,7 @@
       <label>
         <input
           type="checkbox"
+          disabled={pending}
           checked={filter === SessionState.Active}
           onChange={toggleFilter}
         />{" "}

frontend/src/components/CompatSession.test.tsx

@@ -15,7 +15,9 @@
 // @vitest-environment happy-dom
 
 import { create } from "react-test-renderer";
+import { Provider } from "urql";
 import { describe, expect, it, beforeAll } from "vitest";
+import { never } from "wonka";
 
 import { makeFragmentData } from "../gql";
 import { WithLocation } from "../test-utils/WithLocation";
@@ -24,6 +26,10 @@ import { mockLocale } from "../test-utils/mockLocale";
 import CompatSession, { FRAGMENT } from "./CompatSession";
 
 describe("<CompatSession />", () => {
+  const mockClient = {
+    executeQuery: (): typeof never => never,
+  };
+
   const baseSession = {
     id: "session-id",
     deviceId: "abcd1234",
@@ -42,9 +48,11 @@ describe("<CompatSession />", () => {
   it("renders an active session", () => {
     const session = makeFragmentData(baseSession, FRAGMENT);
     const component = create(
-      <WithLocation>
-        <CompatSession session={session} />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation>
+          <CompatSession session={session} />
+        </WithLocation>
+      </Provider>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
@@ -58,9 +66,11 @@ describe("<CompatSession />", () => {
       FRAGMENT,
     );
     const component = create(
-      <WithLocation>
-        <CompatSession session={session} />
-      </WithLocation>,
+      <Provider value={mockClient}>
+        <WithLocation>
+          <CompatSession session={session} />
+        </WithLocation>
+      </Provider>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });