feat: replace TokenRegistry with useSyncExternalStore (#24)

endv-bogdanb · Jul 30, 2023 · 918d600 · 918d600
1 parent 4f0e439
commit 918d600
Show file tree

Hide file tree

Showing 19 changed files with 248 additions and 192 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/src/features/ProtectedRoute.tsx b/src/features/ProtectedRoute.tsx
@@ -1,8 +1,8 @@
 import { Navigate, Outlet } from "react-router";
-import { useSession } from "@utils";
+import { tokenSlice } from "@utils";
 
 export function ProtectedRoute() {
-  const session = useSession();
+  const session = tokenSlice.useSlice();
 
   if (!session?.token || !session.refreshToken) {
     return <Navigate to={""} />;

diff --git a/src/features/Root.tsx b/src/features/Root.tsx
@@ -2,12 +2,12 @@ import { useEffect, useState } from "react";
 import { Link, Outlet } from "react-router-dom";
 import { Divider, Space } from "@mantine/core";
 import { Layout } from "@components/Layout";
-import { getPublicUrl, httpClient, TokenRegistry, useSession } from "@utils";
+import { getPublicUrl, httpClient, tokenSlice } from "@utils";
 
 export function Root() {
   const [version, setVersion] = useState<string | null>(null);
 
-  const session = useSession();
+  const session = tokenSlice.useSlice();
 
   useEffect(() => {
     const ab = new AbortController();
@@ -43,7 +43,7 @@ export function Root() {
               to=""
               onClick={(e) => {
                 e.preventDefault();
-                TokenRegistry.reset();
+                tokenSlice.dispatch({ type: "reset" });
               }}
             >
               logout

diff --git a/src/features/apollo/ApolloLogin.tsx b/src/features/apollo/ApolloLogin.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { gql, useMutation } from "@apollo/client";
 import { Login } from "@components";
-import { TokenRegistry } from "@utils";
+import { tokenSlice } from "@utils";
 
 const LOGIN_MUTATION = gql`
   mutation Login($username: String!, $password: String!) {
@@ -23,11 +23,15 @@ export function ApolloLogin() {
         try {
           const { data } = await login({ variables: value });
 
-          console.log(data);
+          tokenSlice.dispatch({
+            type: "set",
+            payload: {
+              token: data.token,
+              refreshToken: data.refreshToken,
+              user: data.user,
+            },
+          });
 
-          TokenRegistry.token = data.token;
-          TokenRegistry.refreshToken = data.refreshToken;
-          TokenRegistry.user = data.user;
           navigate("users");
         } catch (e) {
           console.log("err", e);

diff --git a/src/features/gql/GqlLogin.tsx b/src/features/gql/GqlLogin.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { Login } from "@components";
 import { loginResSchema, TLoginReq, TLoginRes } from "@models";
-import { httpClient, TokenRegistry } from "@utils";
+import { httpClient, tokenSlice } from "@utils";
 
 async function login(variables: TLoginReq): Promise<TLoginRes> {
   const { data } = (await httpClient("gql/", {
@@ -29,9 +29,16 @@ export function GqlLogin() {
       onLogin={async (value) => {
         try {
           const data = await login(value);
-          TokenRegistry.token = data.token;
-          TokenRegistry.refreshToken = data.refreshToken;
-          TokenRegistry.user = data.user;
+
+          tokenSlice.dispatch({
+            type: "set",
+            payload: {
+              token: data.token,
+              refreshToken: data.refreshToken,
+              user: data.user,
+            },
+          });
+
           navigate("users");
         } catch (e) {
           console.log("err", e);

diff --git a/src/features/query/QueryLogin.tsx b/src/features/query/QueryLogin.tsx
@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { useMutation } from "@tanstack/react-query";
 import { Login } from "@components";
 import { loginResSchema, TLoginReq } from "@models";
-import { httpClient, TokenRegistry } from "@utils";
+import { httpClient, tokenSlice } from "@utils";
 
 export function QueryLogin() {
   const navigate = useNavigate();
@@ -26,9 +26,14 @@ export function QueryLogin() {
         try {
           const data = await login.mutateAsync(value);
 
-          TokenRegistry.token = data.token;
-          TokenRegistry.refreshToken = data.refreshToken;
-          TokenRegistry.user = data.user;
+          tokenSlice.dispatch({
+            type: "set",
+            payload: {
+              token: data.token,
+              refreshToken: data.refreshToken,
+              user: data.user,
+            },
+          });
 
           navigate("users");
         } catch (e) {

diff --git a/src/features/swr/SwrLogin.tsx b/src/features/swr/SwrLogin.tsx
@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import useSWRMutation from "swr/mutation";
 import { Login } from "@components";
 import { loginResSchema, TLoginReq } from "@models";
-import { httpClient, TokenRegistry } from "@utils";
+import { httpClient, tokenSlice } from "@utils";
 
 export function SwrLogin() {
   const navigate = useNavigate();
@@ -30,9 +30,14 @@ export function SwrLogin() {
             throw data;
           }
 
-          TokenRegistry.token = data.token;
-          TokenRegistry.refreshToken = data.refreshToken;
-          TokenRegistry.user = data.user;
+          tokenSlice.dispatch({
+            type: "set",
+            payload: {
+              token: data.token,
+              refreshToken: data.refreshToken,
+              user: data.user,
+            },
+          });
 
           navigate("users");
         } catch (e) {

diff --git a/src/features/toolkit-query/ToolkitLogin.tsx b/src/features/toolkit-query/ToolkitLogin.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import { Login } from "@components";
-import { TokenRegistry } from "@utils";
+import { tokenSlice } from "@utils";
 import { useLoginMutation } from "./store/api/api";
 
 export function ToolkitLogin() {
@@ -16,9 +16,14 @@ export function ToolkitLogin() {
         try {
           const { token, refreshToken, user } = await login(value).unwrap();
 
-          TokenRegistry.token = token;
-          TokenRegistry.refreshToken = refreshToken;
-          TokenRegistry.user = user;
+          tokenSlice.dispatch({
+            type: "set",
+            payload: {
+              token,
+              refreshToken,
+              user,
+            },
+          });
 
           navigate("users");
         } catch (e) {

diff --git a/src/features/toolkit-query/store/api/utils.ts b/src/features/toolkit-query/store/api/utils.ts
@@ -6,14 +6,14 @@ import {
   FetchBaseQueryError,
 } from "@reduxjs/toolkit/dist/query";
 import { refreshResSchema } from "@models";
-import { TokenRegistry } from "@utils";
+import { tokenSlice } from "@utils";
 
 const mutex = new Mutex();
 
 const authorisedQuery = fetchBaseQuery({
   baseUrl: "/api",
   prepareHeaders: (headers) => {
-    headers.append("Authorization", `Bearer ${TokenRegistry.token}`);
+    headers.append("Authorization", `Bearer ${tokenSlice.state.token}`);
     return headers;
   },
 });
@@ -34,7 +34,7 @@ export const baseQuery: BaseQueryFn<
           {
             url: "/refresh",
             method: "POST",
-            body: { refreshToken: TokenRegistry.refreshToken },
+            body: { refreshToken: tokenSlice.state.refreshToken },
           },
           api,
           extraOptions,
@@ -47,10 +47,12 @@ export const baseQuery: BaseQueryFn<
             data: { token, refreshToken },
           } = data;
 
-          TokenRegistry.token = token;
-          TokenRegistry.refreshToken = refreshToken;
+          tokenSlice.dispatch({
+            type: "set",
+            payload: { token, refreshToken },
+          });
         } else {
-          TokenRegistry.reset();
+          tokenSlice.dispatch({ type: "reset" });
         }
       } finally {
         release();

diff --git a/src/features/urql/Urql.tsx b/src/features/urql/Urql.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from "react-router-dom";
 import { cacheExchange, createClient, fetchExchange, Provider } from "urql";
-import { TokenRegistry } from "@utils";
+import { tokenSlice } from "@utils";
 
 const client = createClient({
   url: "gql/",
@@ -9,8 +9,8 @@ const client = createClient({
     return {
       headers: {
         accept: "*/*", // NOTE: https://github.com/mswjs/msw/issues/1593#issuecomment-1509003528
-        authorization: TokenRegistry.token
-          ? `Bearer ${TokenRegistry.token}`
+        authorization: tokenSlice.state.token
+          ? `Bearer ${tokenSlice.state.token}`
           : "",
       },
     };

diff --git a/src/features/urql/UrqlLogin.tsx b/src/features/urql/UrqlLogin.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { useMutation } from "urql";
 import { Login } from "@components";
-import { TokenRegistry } from "@utils";
+import { tokenSlice } from "@utils";
 
 const LoginMutation = `
       mutation Login($username: String!, $password: String!){
@@ -25,9 +25,15 @@ export function UrqlLogin() {
 
           if (error) throw error;
 
-          TokenRegistry.token = data.token;
-          TokenRegistry.refreshToken = data.refreshToken;
-          TokenRegistry.user = data.user;
+          tokenSlice.dispatch({
+            type: "set",
+            payload: {
+              token: data.token,
+              refreshToken: data.refreshToken,
+              user: data.user,
+            },
+          });
+
           navigate("users");
         } catch (e) {
           console.log("err", e);

diff --git a/src/main.tsx b/src/main.tsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import { createHashRouter, RouterProvider } from "react-router-dom";
 import { MantineProvider } from "@mantine/core";
 import { routes } from "@routes";
-import { getPublicUrl, TokenRegistry } from "@utils";
+import { getPublicUrl, tokenSlice } from "@utils";
 
 const router = createHashRouter(routes);
 
@@ -29,7 +29,7 @@ import("./backend/browser")
     return Promise.resolve();
   })
   .then(() => {
-    TokenRegistry.setup();
+    tokenSlice.dispatch({ type: "setup" });
     return Promise.resolve();
   })
   .then(() => start());
diff --git a/src/utils/TokenRegistry.ts b/src/utils/TokenRegistry.ts