fix: api & army dependency cleanup (#21)

packages/express-backend/index.js

@@ -35,4 +35,4 @@ app.use("/api/v1/armies", require("./armies/routes"));
 app.use("/api/v1/steps", require("./steps/routes"));
 app.use("/api/v1/rules", require("./steps/rulesRoutes"));
 
-app.listen(3000);
+app.listen(1337);

packages/react-frontend/account/LoginForm/index.tsx

@@ -10,7 +10,7 @@ import { Input } from "components/Form/Input";
 import * as Styled from "./LoginForm.styled";
 
 export const LoginForm = () => {
-  const { account } = useApi();
+  const { login } = useApi();
   const { error } = useLog();
   const logUserIn = useAccountStore((state) => state.login);
   const [email, setEmail] = useState(IS_DEV ? "miko@mikosramek.ca" : "");
@@ -19,8 +19,7 @@ export const LoginForm = () => {
   const handleSubmit = useCallback(
     (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      account
-        .login({ email, password })
+      login({ email, password })
         .then((response) => {
           if (response && !(response instanceof Error)) {
             const { account } = response;
@@ -35,7 +34,7 @@ export const LoginForm = () => {
         })
         .catch(error);
     },
-    [email, password]
+    [email, error, logUserIn, login, password]
   );
 
   return (

packages/react-frontend/account/SignupForm/index.tsx

@@ -10,7 +10,7 @@ import { useLog } from "hooks/useLog";
 import { storeSession } from "utils/general";
 
 export const SignupForm = () => {
-  const { account } = useApi();
+  const { signUp } = useApi();
   const { error } = useLog();
   const logUserIn = useAccountStore((state) => state.login);
   const [email, setEmail] = useState(
@@ -26,8 +26,7 @@ export const SignupForm = () => {
     (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
       setApiError("");
-      account
-        .signUp({ email, password })
+      signUp({ email, password })
         .then((response) => {
           if (response && !(response instanceof Error)) {
             const { account } = response;
@@ -46,7 +45,7 @@ export const SignupForm = () => {
           if (errorRef.current) errorRef.current.focus();
         });
     },
-    [email, password]
+    [email, error, logUserIn, password, signUp]
   );
 
   return (

packages/react-frontend/armies/ArmyPreview/ArmyPreview.tsx

@@ -15,7 +15,7 @@ const ArmyPreview = ({ id, army }: Props) => {
 
   const handleDelete = useCallback(() => {
     confirm(`Delete the ${army.name} army?`) ? deleteArmy(id) : null;
-  }, [id]);
+  }, [army.name, deleteArmy, id]);
 
   return (
     <Styled.Wrapper>

packages/react-frontend/components/Modals/NewRuleModal/index.tsx

@@ -25,7 +25,7 @@ const baseInputs = {
 
 export const NewRuleModal = () => {
   const { error } = useLog();
-  const { posters } = useApi();
+  const { postNewRule } = useApi();
   const updateCurrentArmyStepRule = useArmiesStore(
     (state) => state.updateCurrentArmyStepRule
   );
@@ -42,11 +42,10 @@ export const NewRuleModal = () => {
       if (!isFormValid) return;
       const form = inputs as typeof baseInputs;
       setLoading(true);
-      posters
-        .postNewRule({
-          name: form.ruleName.val,
-          text: form.ruleText.val,
-        })
+      postNewRule({
+        name: form.ruleName.val,
+        text: form.ruleText.val,
+      })
         .then((updatedSteps) => {
           if (updatedSteps && !(updatedSteps instanceof Error)) {
             closeModal();
@@ -62,7 +61,7 @@ export const NewRuleModal = () => {
       closeModal,
       error,
       inputs,
-      posters,
+      postNewRule,
       updateCurrentArmyStepRule,
       validateInputs,
     ]

packages/react-frontend/components/Modals/NewStepModal/index.tsx

@@ -17,7 +17,7 @@ const baseInputs = {
 } as BaseInputs;
 
 export const NewStepModal = () => {
-  const { posters } = useApi();
+  const { postNewStep } = useApi();
   const { error } = useLog();
   const closeModal = useGeneralStore((state) => state.closeModal);
   const updateCurrentArmyStep = useArmiesStore(
@@ -36,8 +36,7 @@ export const NewStepModal = () => {
       if (!isFormValid) return;
 
       setLoading(true);
-      posters
-        .postNewStep({ stepName: form.stepName.val })
+      postNewStep({ stepName: form.stepName.val })
         .then((updatedSteps) => {
           if (updatedSteps && !(updatedSteps instanceof Error)) {
             closeModal();
@@ -49,7 +48,14 @@ export const NewStepModal = () => {
           setLoading(false);
         });
     },
-    [closeModal, error, inputs, posters, updateCurrentArmyStep, validateInputs]
+    [
+      closeModal,
+      error,
+      inputs,
+      postNewStep,
+      updateCurrentArmyStep,
+      validateInputs,
+    ]
   );
 
   return (

packages/react-frontend/hooks/auth/useAuth.ts

@@ -10,15 +10,15 @@ export const useAuth = () => {
   const accountStore = useAccountStore((state) => state);
   const currentRoute = typeof window !== "undefined" ? Router.route : null;
   const { log } = useLog();
-  const { account: accountApi } = useApi();
+  const { sessionLogin } = useApi();
 
   const [checkedForSession, setSessionCheck] = useState(false);
 
   const handleSessionCheck = async () => {
     const sessionId = getStoredSession();
     log("stored session: ", sessionId);
     if (sessionId) {
-      const response = await accountApi.sessionLogin({ sessionId });
+      const response = await sessionLogin({ sessionId });
       if (!(response instanceof Error)) {
         const { account, expired } = response;
         if (!expired) {
@@ -37,6 +37,7 @@ export const useAuth = () => {
   // run once
   useEffect(() => {
     handleSessionCheck();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -58,5 +59,5 @@ export const useAuth = () => {
         return;
       }
     }
-  }, [accountStore, currentRoute, checkedForSession]);
+  }, [accountStore, currentRoute, checkedForSession, log]);
 };

packages/react-frontend/hooks/useApi.ts

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import axios from "axios";
 import { API_BASE } from "utils/config";
 import { useAccountStore } from "store/account";
@@ -56,27 +56,27 @@ export type reorderStepResponse = {
   shiftedStep: movedStep;
 };
 
-export const useApi = () => {
-  const accountId = useAccountStore((state) => state.accountId);
-  const sessionId = useAccountStore((state) => state.session); // TODO: some sort of session validation
-  const { currentArmyId, currentStepId } = useArmiesStore((state) => ({
-    currentArmyId: state.currentArmyId,
-    currentStepId: state.currentStepId,
-  }));
+const getGetUrl = (type: urlGetterType) => `${API_BASE}${ENDPOINTS.get[type]}`;
 
-  const headers = { accountId, sessionId };
+const getPostUrl = (type: urlPosterType) =>
+  `${API_BASE}${ENDPOINTS.post[type]}`;
 
-  const getGetUrl = (type: urlGetterType) =>
-    `${API_BASE}${ENDPOINTS.get[type]}`;
+const getDeleteUrl = (type: urlDeleteType) =>
+  `${API_BASE}${ENDPOINTS.delete[type]}`;
 
-  const getPostUrl = (type: urlPosterType) =>
-    `${API_BASE}${ENDPOINTS.post[type]}`;
+const getPatchUrl = (type: urlPatchType) =>
+  `${API_BASE}${ENDPOINTS.patch[type]}`;
 
-  const getDeleteUrl = (type: urlDeleteType) =>
-    `${API_BASE}${ENDPOINTS.delete[type]}`;
+export const useApi = () => {
+  const accountId = useAccountStore((state) => state.accountId);
+  const sessionId = useAccountStore((state) => state.session); // TODO: some sort of session validation
+  const currentArmyId = useArmiesStore((state) => state.currentArmyId);
+  const currentStepId = useArmiesStore((state) => state.currentStepId);
 
-  const getPatchUrl = (type: urlPatchType) =>
-    `${API_BASE}${ENDPOINTS.patch[type]}`;
+  const headers = useMemo(
+    () => ({ accountId, sessionId }),
+    [accountId, sessionId]
+  );
 
   const getArmies = useCallback(() => {
     const url = getGetUrl("armies");
@@ -86,7 +86,7 @@ export const useApi = () => {
         .then(({ data }) => res(data))
         .catch(rej);
     });
-  }, [getGetUrl, headers]);
+  }, [headers]);
 
   const postNewArmy = useCallback(
     (armyName: string) => {
@@ -98,7 +98,7 @@ export const useApi = () => {
           .catch(rej);
       });
     },
-    [getPostUrl, headers]
+    [headers]
   );
 
   type removedArmyResponse = {
@@ -119,7 +119,7 @@ export const useApi = () => {
           .catch(rej);
       });
     },
-    [currentArmyId, headers]
+    [accountId, headers]
   );
 
   const getArmySteps = useCallback(
@@ -180,7 +180,7 @@ export const useApi = () => {
           .catch(rej);
       });
     },
-    [currentArmyId, headers]
+    [accountId, currentArmyId, headers]
   );
 
   const reorderStep = useCallback(
@@ -194,7 +194,7 @@ export const useApi = () => {
           .catch(rej);
       });
     },
-    [currentArmyId, headers]
+    [accountId, currentArmyId, headers]
   );
 
   type postNewRuleProps = {
@@ -220,7 +220,7 @@ export const useApi = () => {
           .catch(rej);
       });
     },
-    [accountId, headers]
+    [accountId, currentArmyId, currentStepId, headers]
   );
 
   const deleteRule = useCallback(
@@ -326,11 +326,20 @@ export const useApi = () => {
   );
 
   return {
-    account: { sessionLogin, signUp, login },
-    getters: { getArmies, getArmySteps },
-    posters: { postNewArmy, postNewStep, postNewRule },
-    deleters: { deleteArmy, deleteStep, deleteRule },
-    patchers: { reorderStep, reorderRule },
-    verification: { verifyEmail, verifyCheck },
+    sessionLogin,
+    signUp,
+    login,
+    getArmies,
+    getArmySteps,
+    postNewArmy,
+    postNewStep,
+    postNewRule,
+    deleteArmy,
+    deleteStep,
+    deleteRule,
+    reorderStep,
+    reorderRule,
+    verifyEmail,
+    verifyCheck,
   };
 };