chore: update dependencies to latest

package.json

@@ -12,49 +12,49 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@apollo/client": "3.7.8",
-    "@emotion/react": "11.10.5",
-    "@faker-js/faker": "7.6.0",
-    "@mantine/core": "5.10.4",
-    "@mantine/hooks": "5.10.4",
-    "@mswjs/data": "0.11.2",
-    "@reduxjs/toolkit": "1.9.2",
-    "@tanstack/react-query": "4.29.15",
+    "@apollo/client": "3.7.17",
+    "@emotion/react": "11.11.1",
+    "@faker-js/faker": "8.0.2",
+    "@mantine/core": "6.0.17",
+    "@mantine/hooks": "6.0.17",
+    "@mswjs/data": "0.13.0",
+    "@reduxjs/toolkit": "1.9.5",
+    "@tanstack/react-query": "4.32.0",
     "async-mutex": "0.4.0",
-    "clsx": "1.2.1",
+    "clsx": "2.0.0",
     "graphql": "16.6.0",
-    "jose": "4.12.0",
+    "jose": "4.14.4",
     "localforage": "1.10.0",
     "match-sorter": "6.3.1",
-    "msw": "1.0.1",
+    "msw": "1.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-redux": "8.0.5",
-    "react-router-dom": "6.8.1",
+    "react-redux": "8.1.1",
+    "react-router-dom": "6.14.2",
     "sort-by": "1.2.0",
-    "swr": "2.0.3",
-    "urql": "3.0.3",
-    "zod": "3.20.6"
+    "swr": "2.2.0",
+    "urql": "4.0.5",
+    "zod": "3.21.4"
   },
   "devDependencies": {
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
-    "@typescript-eslint/eslint-plugin": "5.52.0",
-    "@typescript-eslint/parser": "5.52.0",
-    "@vitejs/plugin-react": "3.1.0",
-    "eslint": "8.34.0",
-    "eslint-config-prettier": "8.6.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.32.2",
+    "@types/react": "18.2.17",
+    "@types/react-dom": "18.2.7",
+    "@typescript-eslint/eslint-plugin": "6.2.0",
+    "@typescript-eslint/parser": "6.2.0",
+    "@vitejs/plugin-react": "4.0.3",
+    "eslint": "8.46.0",
+    "eslint-config-prettier": "8.9.0",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-react": "7.33.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-simple-import-sort": "10.0.0",
-    "jsdom": "21.1.0",
-    "prettier": "2.8.4",
-    "typescript": "4.9.5",
-    "vite": "4.1.1",
+    "jsdom": "22.1.0",
+    "prettier": "3.0.0",
+    "typescript": "5.1.6",
+    "vite": "4.4.7",
     "vite-plugin-eslint": "1.8.1",
-    "vite-tsconfig-paths": "4.0.5",
-    "vitest": "0.28.5"
+    "vite-tsconfig-paths": "4.2.0",
+    "vitest": "0.33.0"
   },
   "msw": {
     "workerDirectory": "public"

public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.0.1).
+ * Mock Service Worker (1.2.3).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

src/backend/db/database.ts

@@ -18,9 +18,14 @@ export const db = factory({
   profile: {
     __typename: () => "Profile",
     id: primaryKey(makeAutoIncrement()),
-    firstName: faker.name.firstName,
-    lastName: faker.name.lastName,
-    logo: () => faker.image.placeholder.imageUrl(640, 480, "Logo image"),
+    firstName: faker.person.firstName,
+    lastName: faker.person.lastName,
+    logo: () =>
+      faker.image.urlPlaceholder({
+        height: 640,
+        width: 480,
+        text: "Logo image",
+      }),
   },
 });
 

src/backend/handlers/authMiddleware.ts

@@ -5,7 +5,7 @@ import { isAuthenticated, isPublicApi, makeUrl } from "@backend/utils";
 async function authMiddleware(
   req: RestRequest,
   res: ResponseComposition,
-  ctx: RestContext
+  ctx: RestContext,
 ) {
   if (!isPublicApi(req.url.pathname) && !(await isAuthenticated(req.headers))) {
     const error = RepositoryError.toJson(new Unauthorized());

src/backend/utils/Jwt.ts

@@ -12,7 +12,7 @@ const storedKeysSchema = z
       privatekey: z
         .string()
         .transform(async (value) => await jose.importPKCS8(value, "ES256")),
-    })
+    }),
   );
 
 export interface IRetrieve {

src/backend/utils/isAuthenticated.ts

@@ -8,7 +8,7 @@ export const bearerSchema = z
   .transform((value) => value.slice("Bearer ".length));
 
 export async function isAuthenticated(
-  headers: RestRequest["headers"]
+  headers: RestRequest["headers"],
 ): Promise<boolean> {
   try {
     const token = bearerSchema.parse(headers.get("Authorization"));

src/components/Login.tsx

@@ -28,7 +28,7 @@ export function Login({ title, onLogin, loading, error }: ILogin) {
             e.preventDefault();
             const data = new FormData(e.target as HTMLFormElement);
             const values = loginReqSchema.safeParse(
-              Object.fromEntries(data.entries())
+              Object.fromEntries(data.entries()),
             );
 
             if (values.success) {

src/features/swr/SwrLogin.tsx

@@ -1,22 +1,22 @@
 import { useNavigate } from "react-router-dom";
 import useSWRMutation from "swr/mutation";
 import { Login } from "@components";
-import { loginResSchema } from "@models";
+import { loginResSchema, TLoginReq } from "@models";
 import { httpClient, TokenRegistry } from "@utils";
 
 export function SwrLogin() {
   const navigate = useNavigate();
 
   const { trigger, error, isMutating } = useSWRMutation(
     "/api/login",
-    async (url, { arg: user }) => {
+    async (url, { arg: user }: { arg: TLoginReq }) => {
       const data = await httpClient(url, {
         method: "POST",
         body: JSON.stringify(user),
       });
 
       return loginResSchema.parse(data);
-    }
+    },
   );
 
   return (

src/features/swr/SwrUserProfile.tsx

@@ -9,7 +9,7 @@ export function SwrUserProfile() {
 
   const { data, error, isLoading, mutate } = useSWR(
     ["user_profile", { id }],
-    async () => userSchema.parse(await authHttpClient(`/api/users/${id}`))
+    async () => userSchema.parse(await authHttpClient(`/api/users/${id}`)),
   );
 
   return (

src/features/toolkit-query/ToolkitUserProfile.tsx

@@ -7,7 +7,7 @@ export function ToolkitUserProfile() {
 
   const { data, isLoading, error, refetch } = useUserByIdQuery(
     { id: id! },
-    { skip: !id }
+    { skip: !id },
   );
 
   return (

src/features/toolkit-query/store/api/utils.ts

@@ -37,7 +37,7 @@ export const baseQuery: BaseQueryFn<
             body: { refreshToken: TokenRegistry.refreshToken },
           },
           api,
-          extraOptions
+          extraOptions,
         );
 
         const data = refreshResSchema.safeParse(refreshResult.data);

src/features/urql/Urql.tsx

@@ -1,12 +1,14 @@
 import { Outlet } from "react-router-dom";
-import { createClient, Provider } from "urql";
+import { cacheExchange, createClient, fetchExchange, Provider } from "urql";
 import { TokenRegistry } from "@utils";
 
 const client = createClient({
   url: "gql/",
+  exchanges: [cacheExchange, fetchExchange],
   fetchOptions: () => {
     return {
       headers: {
+        accept: "*/*", // NOTE: https://github.com/mswjs/msw/issues/1593#issuecomment-1509003528
         authorization: TokenRegistry.token
           ? `Bearer ${TokenRegistry.token}`
           : "",

src/main.tsx

@@ -13,7 +13,7 @@ function start() {
       <MantineProvider withGlobalStyles withNormalizeCSS>
         <RouterProvider router={router} />
       </MantineProvider>
-    </React.StrictMode>
+    </React.StrictMode>,
   );
 }
 

src/utils/TokenRegistry.ts

@@ -24,7 +24,7 @@ export function useSession() {
       };
     },
     () => state,
-    () => undefined
+    () => undefined,
   );
 }
 

src/utils/http/HttpError.ts

@@ -8,7 +8,7 @@ export class HttpError extends Error {
   constructor(
     public message: string,
     public code: number,
-    public status: string
+    public status: string,
   ) {
     super(message);
   }

src/utils/http/httpClient.ts

@@ -24,7 +24,7 @@ function makeTimeoutPromise() {
 
 export async function httpClient(
   url: string,
-  init?: RequestInit
+  init?: RequestInit,
 ): Promise<unknown> {
   const contentTypeHeader = { ["content-type"]: "application/json" } as const;
 
@@ -51,7 +51,7 @@ export async function httpClient(
 
 async function retryHttpClient(
   url: string,
-  init: RequestInit
+  init: RequestInit,
 ): Promise<unknown> {
   try {
     // Waits for mutex to be available without locking
@@ -110,7 +110,7 @@ async function retryHttpClient(
 
 export async function authHttpClient(
   url: string,
-  init?: RequestInit
+  init?: RequestInit,
 ): Promise<unknown> {
   if (TokenRegistry.token.length === 0) {
     throw new HttpError("Unauthorized", 401, "Unauthorized");

src/utils/http/tests/utils.test.ts

@@ -44,8 +44,8 @@ describe("http-utils", () => {
         new HttpError(
           "Could not parse the response",
           422,
-          "Unprocessable Entity"
-        )
+          "Unprocessable Entity",
+        ),
       );
     });
 
@@ -61,8 +61,8 @@ describe("http-utils", () => {
         new HttpError(
           "Could not parse the response",
           422,
-          "Unprocessable Entity"
-        )
+          "Unprocessable Entity",
+        ),
       );
     });
   });
@@ -81,7 +81,7 @@ describe("http-utils", () => {
     it("should return json stringify", () => {
       const response = { txt: "Error message", json: { value: "text" } };
       expect(httpErrorMessage(response)).toBe(
-        JSON.stringify({ value: "text" })
+        JSON.stringify({ value: "text" }),
       );
     });
   });
@@ -94,7 +94,7 @@ describe("http-utils", () => {
       vi.spyOn(window, "requestAnimationFrame").mockImplementation(
         (callback) => {
           return setTimeout(callback, 0, 150) as unknown as number;
-        }
+        },
       );
 
       vi.spyOn(performance, "now").mockImplementationOnce(() => 0);
@@ -117,7 +117,7 @@ describe("http-utils", () => {
       vi.spyOn(window, "requestAnimationFrame").mockImplementation(
         (callback) => {
           return setTimeout(callback, 0, 150) as unknown as number;
-        }
+        },
       );
 
       vi.spyOn(window, "cancelAnimationFrame").mockImplementation((value) => {

src/utils/http/utils.ts

@@ -23,7 +23,7 @@ export async function parseResponse(response: Response) {
     throw new HttpError(
       "Could not parse the response",
       422,
-      "Unprocessable Entity"
+      "Unprocessable Entity",
     );
   }
 }

src/utils/tests/tokenRegistry.test.ts

@@ -11,7 +11,7 @@ describe("TokenRegistry", () => {
     sessionStorage.setItem("TOKEN", JSON.stringify("token-value"));
     sessionStorage.setItem(
       "REFRESH_TOKEN",
-      JSON.stringify("refresh-token-value")
+      JSON.stringify("refresh-token-value"),
     );
     TokenRegistry.setup();
 
@@ -35,7 +35,7 @@ describe("TokenRegistry", () => {
     TokenRegistry.refreshToken = "token";
 
     expect(sessionStorage.getItem("REFRESH_TOKEN")).toBe(
-      JSON.stringify("token")
+      JSON.stringify("token"),
     );
   });