From 1a3ca055942b21177456c650e63954b50fdb1402 Mon Sep 17 00:00:00 2001
From: Ben Hall <benji2357@gmail.com>
Date: Sat, 28 Dec 2024 15:07:30 +0000
Subject: [PATCH] Revert "refactor(client): `use` instead of `useContext`"

This reverts commit 9d2618050841ede20a96cd20bd371974c22ce077.
---
 client/src/components/App.tsx                         | 10 +++++-----
 client/src/components/Nav/SignOutDialog.tsx           |  6 +++---
 client/src/components/Nav/SyncState.tsx               |  4 ++--
 client/src/components/Nav/index.tsx                   |  4 ++--
 client/src/components/hooks/useNotes/index.tsx        |  8 ++++----
 client/src/components/hooks/useNotesByTag.ts          |  4 ++--
 client/src/components/hooks/useTags.ts                |  4 ++--
 client/src/components/hooks/useUser.tsx               |  8 ++++----
 client/src/components/pages/AddNote/index.tsx         |  4 ++--
 client/src/components/pages/ChangePassword.tsx        |  5 +++--
 client/src/components/pages/EditNote/DeleteDialog.tsx |  5 +++--
 client/src/components/pages/EditNote/EditNoteForm.tsx |  4 ++--
 client/src/components/pages/EditNote/index.tsx        |  4 ++--
 client/src/components/pages/Home/NoteList.tsx         |  4 ++--
 client/src/components/pages/Home/index.tsx            |  4 ++--
 client/src/components/pages/SignIn.tsx                |  4 ++--
 client/src/components/pages/Tag.tsx                   |  4 ++--
 17 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/client/src/components/App.tsx b/client/src/components/App.tsx
index 9121530..72aae7f 100644
--- a/client/src/components/App.tsx
+++ b/client/src/components/App.tsx
@@ -12,26 +12,26 @@ import ForgotPassword from "./pages/ForgotPassword";
 import ResetPassword from "./pages/ResetPassword";
 import ChangePassword from "./pages/ChangePassword";
 import Tag from "./pages/Tag";
-import { use } from "react";
+import { useContext } from "react";
 import { StateContext } from "./AppState";
 import { Spinner } from "eri";
 import RedirectHome from "./shared/RedirectHome";
 import Layout from "./Layout";
 
 function NotesDependantRoute() {
-  const { isNotesLoading } = use(StateContext);
+  const { isNotesLoading } = useContext(StateContext);
   return isNotesLoading ? <Spinner /> : <Outlet />;
 }
 function UserDependantRoute() {
-  const { isUserLoading } = use(StateContext);
+  const { isUserLoading } = useContext(StateContext);
   return isUserLoading ? <Spinner /> : <Outlet />;
 }
 function UserSignedInRoute() {
-  const { userEmail } = use(StateContext);
+  const { userEmail } = useContext(StateContext);
   return userEmail ? <Outlet /> : <RedirectHome />;
 }
 function UserNotSignedInRoute() {
-  const { userEmail } = use(StateContext);
+  const { userEmail } = useContext(StateContext);
   return userEmail ? <RedirectHome /> : <Outlet />;
 }
 
diff --git a/client/src/components/Nav/SignOutDialog.tsx b/client/src/components/Nav/SignOutDialog.tsx
index 8b4cf81..daf5e92 100644
--- a/client/src/components/Nav/SignOutDialog.tsx
+++ b/client/src/components/Nav/SignOutDialog.tsx
@@ -2,7 +2,7 @@ import { Dialog, Button, Icon } from "eri";
 import { useNavigate } from "react-router-dom";
 import { userPool } from "../../cognito";
 import { DispatchContext, StateContext } from "../AppState";
-import { use, useState } from "react";
+import { useContext, useState } from "react";
 
 interface Props {
   onClose(): void;
@@ -10,7 +10,8 @@ interface Props {
 }
 
 export default function SignOutDialog({ onClose, open }: Props) {
-  const state = use(StateContext);
+  const state = useContext(StateContext);
+  const dispatch = useContext(DispatchContext);
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
 
@@ -19,7 +20,6 @@ export default function SignOutDialog({ onClose, open }: Props) {
     const currentUser = userPool.getCurrentUser();
     if (currentUser) currentUser.signOut();
     onClose();
-    const dispatch = use(DispatchContext);
     dispatch({ type: "notes/clearAll" });
     dispatch({ type: "user/clearEmail" });
     navigate("/");
diff --git a/client/src/components/Nav/SyncState.tsx b/client/src/components/Nav/SyncState.tsx
index 46ae5e8..ca5b91d 100644
--- a/client/src/components/Nav/SyncState.tsx
+++ b/client/src/components/Nav/SyncState.tsx
@@ -1,6 +1,6 @@
 import { Icon, Spinner } from "eri";
 import { StateContext } from "../AppState";
-import { use } from "react";
+import { useContext } from "react";
 
 export default function SyncState() {
   const {
@@ -8,7 +8,7 @@ export default function SyncState() {
     isSyncingToServer,
     syncFromServerError,
     syncToServerError,
-  } = use(StateContext);
+  } = useContext(StateContext);
 
   return (
     <div className="w-nav__sync-state">
diff --git a/client/src/components/Nav/index.tsx b/client/src/components/Nav/index.tsx
index fe27e03..fd97936 100644
--- a/client/src/components/Nav/index.tsx
+++ b/client/src/components/Nav/index.tsx
@@ -5,7 +5,7 @@ import SyncState from "./SyncState";
 import "./style.css";
 import useTags from "../hooks/useTags";
 import AppIcon from "../../icons/AppIcon";
-import { use, useState } from "react";
+import { useContext, useState } from "react";
 
 interface Props {
   open: boolean;
@@ -13,7 +13,7 @@ interface Props {
 }
 
 export default function Nav({ handleNavClose, open }: Props) {
-  const { userEmail } = use(StateContext);
+  const { userEmail } = useContext(StateContext);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const tags = useTags();
 
diff --git a/client/src/components/hooks/useNotes/index.tsx b/client/src/components/hooks/useNotes/index.tsx
index 1cbcfc8..f3e499c 100644
--- a/client/src/components/hooks/useNotes/index.tsx
+++ b/client/src/components/hooks/useNotes/index.tsx
@@ -4,11 +4,11 @@ import syncClientToServer from "./syncClientToServer";
 import syncServerToClient from "./syncServerToClient";
 import useInterval from "../useInterval";
 import { StateContext, DispatchContext } from "../../AppState";
-import { use, useEffect } from "react";
+import { useContext, useEffect } from "react";
 
 export default function useNotes(): void {
-  const state = use(StateContext);
-  const dispatch = use(DispatchContext);
+  const dispatch = useContext(DispatchContext);
+  const state = useContext(StateContext);
 
   useEffect(
     () =>
@@ -24,7 +24,7 @@ export default function useNotes(): void {
           dispatch({ type: "notes/loadedFromStorage" });
         }
       })(),
-    [],
+    [dispatch],
   );
 
   useEffect(() => {
diff --git a/client/src/components/hooks/useNotesByTag.ts b/client/src/components/hooks/useNotesByTag.ts
index beb78c5..ca17931 100644
--- a/client/src/components/hooks/useNotesByTag.ts
+++ b/client/src/components/hooks/useNotesByTag.ts
@@ -1,9 +1,9 @@
-import { use } from "react";
+import { useContext } from "react";
 import { ClientNote } from "../../types";
 import { StateContext } from "../AppState";
 
 export function useNotesByTag() {
-  const state = use(StateContext);
+  const state = useContext(StateContext);
   const notesByTag = new Map<string | undefined, ClientNote[]>();
   if (state.notes)
     for (const note of state.notes) {
diff --git a/client/src/components/hooks/useTags.ts b/client/src/components/hooks/useTags.ts
index 4293605..b2f3f02 100644
--- a/client/src/components/hooks/useTags.ts
+++ b/client/src/components/hooks/useTags.ts
@@ -1,8 +1,8 @@
-import { use } from "react";
+import { useContext } from "react";
 import { StateContext } from "../AppState";
 
 export default function useTags() {
-  const state = use(StateContext);
+  const state = useContext(StateContext);
   const tags = new Set<string>();
   if (state.notes) for (const { tag } of state.notes) if (tag) tags.add(tag);
   return [...tags].sort((a, b) => a.localeCompare(b));
diff --git a/client/src/components/hooks/useUser.tsx b/client/src/components/hooks/useUser.tsx
index 6ab5a2d..814d406 100644
--- a/client/src/components/hooks/useUser.tsx
+++ b/client/src/components/hooks/useUser.tsx
@@ -1,15 +1,15 @@
-import { use, useEffect } from "react";
+import { useContext, useEffect } from "react";
 import { getIdToken } from "../../cognito";
 import storage from "../../storage";
 import { DispatchContext, StateContext } from "../AppState";
 
 export default function useUser(): void {
-  const state = use(StateContext);
+  const dispatch = useContext(DispatchContext);
+  const state = useContext(StateContext);
 
   useEffect(
     () =>
       void (async () => {
-        const dispatch = use(DispatchContext);
         try {
           const storedEmail = await storage.getEmail();
           if (storedEmail) {
@@ -28,7 +28,7 @@ export default function useUser(): void {
             dispatch({ type: "user/clearEmail" });
         }
       })(),
-    [],
+    [dispatch],
   );
 
   useEffect(() => {
diff --git a/client/src/components/pages/AddNote/index.tsx b/client/src/components/pages/AddNote/index.tsx
index 4e90a00..b0c3cd6 100644
--- a/client/src/components/pages/AddNote/index.tsx
+++ b/client/src/components/pages/AddNote/index.tsx
@@ -9,10 +9,11 @@ import {
   useNavigate,
   useSearchParams,
 } from "react-router-dom";
-import { useCallback, use, useRef, useState } from "react";
+import { useCallback, useContext, useRef, useState } from "react";
 import TagComboBox from "../../shared/TagComboBox";
 
 export default function AddNote() {
+  const dispatch = useContext(DispatchContext);
   const navigate = useNavigate();
   const placeholder = useNotePlaceholder();
   const [textAreaValue, setTextAreaValue] = useState("");
@@ -38,7 +39,6 @@ export default function AddNote() {
     };
     const tag = formRef.current?.tag.value.trim();
     if (tag) note.tag = tag;
-    const dispatch = use(DispatchContext);
     dispatch({ type: "notes/add", payload: note });
     navigate(tag ? `/tags/${encodeURIComponent(tag)}` : "/");
   };
diff --git a/client/src/components/pages/ChangePassword.tsx b/client/src/components/pages/ChangePassword.tsx
index 72fdf6b..383e59a 100644
--- a/client/src/components/pages/ChangePassword.tsx
+++ b/client/src/components/pages/ChangePassword.tsx
@@ -2,14 +2,15 @@ import { ChangePasswordPage } from "eri";
 import { createAuthenticatedUserAndSession } from "../../cognito";
 import { ERRORS } from "../../constants";
 import { StateContext } from "../AppState";
-import { use } from "react";
+import { useContext } from "react";
 
 export default function ChangePassword() {
+  const { userEmail } = useContext(StateContext);
+
   return (
     <ChangePasswordPage
       onSubmit={async ({ currentPassword, newPassword, setSubmitError }) => {
         try {
-          const { userEmail } = use(StateContext);
           if (!userEmail) throw Error("userEmail not defined");
           const { cognitoUser } = await createAuthenticatedUserAndSession(
             userEmail,
diff --git a/client/src/components/pages/EditNote/DeleteDialog.tsx b/client/src/components/pages/EditNote/DeleteDialog.tsx
index 0ff0ca6..b34a9f8 100644
--- a/client/src/components/pages/EditNote/DeleteDialog.tsx
+++ b/client/src/components/pages/EditNote/DeleteDialog.tsx
@@ -1,7 +1,7 @@
 import { Dialog, Button, Icon } from "eri";
 import { NavigateFunction } from "react-router-dom";
 import { DispatchContext } from "../../AppState";
-import { use } from "react";
+import { useContext } from "react";
 
 interface Props {
   dateCreated: string;
@@ -16,13 +16,14 @@ export default function DeleteDialog({
   onClose,
   open,
 }: Props) {
+  const dispatch = useContext(DispatchContext);
+
   return (
     <Dialog onClose={onClose} open={open} title="Delete note?">
       <Button.Group>
         <Button
           danger
           onClick={() => {
-            const dispatch = use(DispatchContext);
             dispatch({ type: "notes/delete", payload: dateCreated });
             navigate("/");
           }}
diff --git a/client/src/components/pages/EditNote/EditNoteForm.tsx b/client/src/components/pages/EditNote/EditNoteForm.tsx
index dda1d9b..ff8b0ae 100644
--- a/client/src/components/pages/EditNote/EditNoteForm.tsx
+++ b/client/src/components/pages/EditNote/EditNoteForm.tsx
@@ -6,7 +6,7 @@ import useKeyboardSave from "../../hooks/useKeyboardSave";
 import { DispatchContext } from "../../AppState";
 import { ERRORS } from "../../../constants";
 import { useBeforeUnload, useNavigate } from "react-router-dom";
-import { useCallback, use, useState } from "react";
+import { useCallback, useContext, useState } from "react";
 import TagComboBox from "../../shared/TagComboBox";
 
 interface Props {
@@ -15,6 +15,7 @@ interface Props {
 }
 
 export default function EditNoteForm({ dateCreated, note }: Props) {
+  const dispatch = useContext(DispatchContext);
   const navigate = useNavigate();
 
   const [tagValue, setTagValue] = useState(note.tag ?? "");
@@ -39,7 +40,6 @@ export default function EditNoteForm({ dateCreated, note }: Props) {
     };
     const tag = tagValue.trim();
     if (tag) newNote.tag = tag;
-    const dispatch = use(DispatchContext);
     dispatch({ type: "notes/update", payload: newNote });
     navigate(tag ? `/tags/${encodeURIComponent(tag)}` : "/");
   };
diff --git a/client/src/components/pages/EditNote/index.tsx b/client/src/components/pages/EditNote/index.tsx
index f7791d9..e59dde4 100644
--- a/client/src/components/pages/EditNote/index.tsx
+++ b/client/src/components/pages/EditNote/index.tsx
@@ -1,11 +1,11 @@
 import { StateContext } from "../../AppState";
 import { useParams } from "react-router-dom";
-import { use } from "react";
+import { useContext } from "react";
 import RedirectHome from "../../shared/RedirectHome";
 import EditNoteForm from "./EditNoteForm";
 
 export default function EditNote() {
-  const state = use(StateContext);
+  const state = useContext(StateContext);
   const { dateCreated } = useParams();
   const note = (state.notes || []).find(
     (note) => note.dateCreated === dateCreated,
diff --git a/client/src/components/pages/Home/NoteList.tsx b/client/src/components/pages/Home/NoteList.tsx
index 97a40af..4ac62ec 100644
--- a/client/src/components/pages/Home/NoteList.tsx
+++ b/client/src/components/pages/Home/NoteList.tsx
@@ -3,10 +3,10 @@ import { StateContext } from "../../AppState";
 import { Link, useNavigate } from "react-router-dom";
 import Note from "../../shared/Note";
 import { useNotesByTag } from "../../hooks/useNotesByTag";
-import { use } from "react";
+import { useContext } from "react";
 
 export default function NoteList() {
-  const state = use(StateContext);
+  const state = useContext(StateContext);
   const navigate = useNavigate();
 
   const notesByTag = useNotesByTag();
diff --git a/client/src/components/pages/Home/index.tsx b/client/src/components/pages/Home/index.tsx
index b7d2d5e..70644ad 100644
--- a/client/src/components/pages/Home/index.tsx
+++ b/client/src/components/pages/Home/index.tsx
@@ -2,10 +2,10 @@ import { Paper, Button } from "eri";
 import { StateContext } from "../../AppState";
 import { Link, useNavigate } from "react-router-dom";
 import NoteList from "./NoteList";
-import { use } from "react";
+import { useContext } from "react";
 
 export default function Home() {
-  const state = use(StateContext);
+  const state = useContext(StateContext);
   const navigate = useNavigate();
 
   return (
diff --git a/client/src/components/pages/SignIn.tsx b/client/src/components/pages/SignIn.tsx
index 891abeb..2effde8 100644
--- a/client/src/components/pages/SignIn.tsx
+++ b/client/src/components/pages/SignIn.tsx
@@ -3,7 +3,7 @@ import { createAuthenticatedUserAndSession } from "../../cognito";
 import { DispatchContext } from "../AppState";
 import { ERRORS } from "../../constants";
 import { Link, useNavigate } from "react-router-dom";
-import { use } from "react";
+import { useContext } from "react";
 
 // The properties declared here are by no means exhaustive
 interface TokenPayload {
@@ -13,6 +13,7 @@ interface TokenPayload {
 
 export default function SignIn() {
   const navigate = useNavigate();
+  const dispatch = useContext(DispatchContext);
 
   return (
     <SignInPage
@@ -22,7 +23,6 @@ export default function SignIn() {
             await createAuthenticatedUserAndSession(email, password);
           const { email: tokenEmail } = cognitoUserSession.getIdToken()
             .payload as TokenPayload;
-          const dispatch = use(DispatchContext);
           dispatch({ type: "user/setEmail", payload: tokenEmail });
           navigate("/");
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/client/src/components/pages/Tag.tsx b/client/src/components/pages/Tag.tsx
index a27cb41..53e2f3b 100644
--- a/client/src/components/pages/Tag.tsx
+++ b/client/src/components/pages/Tag.tsx
@@ -4,10 +4,10 @@ import { Link, useNavigate, useParams } from "react-router-dom";
 import Note from "../shared/Note";
 import RedirectHome from "../shared/RedirectHome";
 import { useNotesByTag } from "../hooks/useNotesByTag";
-import { use } from "react";
+import { useContext } from "react";
 
 export default function Tag() {
-  const state = use(StateContext);
+  const state = useContext(StateContext);
   const { tag } = useParams();
   const navigate = useNavigate();
   const notesByTag = useNotesByTag();