Revert "refactor(client): use instead of useContext"

This reverts commit 9d26180.

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 />;
 }
 

client/src/components/Nav/SignOutDialog.tsx

@@ -2,15 +2,16 @@ 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;
   open: boolean;
 }
 
 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("/");

client/src/components/Nav/SyncState.tsx

@@ -1,14 +1,14 @@
 import { Icon, Spinner } from "eri";
 import { StateContext } from "../AppState";
-import { use } from "react";
+import { useContext } from "react";
 
 export default function SyncState() {
   const {
     isSyncingFromServer,
     isSyncingToServer,
     syncFromServerError,
     syncToServerError,
-  } = use(StateContext);
+  } = useContext(StateContext);
 
   return (
     <div className="w-nav__sync-state">

client/src/components/Nav/index.tsx

@@ -5,15 +5,15 @@ 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;
   handleNavClose(): void;
 }
 
 export default function Nav({ handleNavClose, open }: Props) {
-  const { userEmail } = use(StateContext);
+  const { userEmail } = useContext(StateContext);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const tags = useTags();
 

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(() => {

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) {

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));

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(() => {

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)}` : "/");
   };

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,

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("/");
           }}

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)}` : "/");
   };

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,

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();

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 (

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

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();