Correctly login with different carreras

FdelMazo · Mar 3, 2021 · 893cd3a · 893cd3a
1 parent 5e3ebb8
commit 893cd3a
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 51 deletions.
diff --git a/src/components/Body.js b/src/components/Body.js
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { ChatIcon, CheckIcon, EmailIcon, Icon } from "@chakra-ui/icons";
 import {
   Box,
@@ -11,7 +12,7 @@ import {
   Text,
   Textarea,
   Tooltip,
-  useToast
+  useToast,
 } from "@chakra-ui/react";
 import React, { useEffect } from "react";
 import Graph from "react-graph-vis";
@@ -24,9 +25,9 @@ import useWindowSize from "./useWindowSize";
 const Body = (props) => {
   const {
     graph,
-    redraw,
     aprobar,
     setNetwork,
+    redraw,
     setNodes,
     setEdges,
     desaprobar,
@@ -87,7 +88,6 @@ const Body = (props) => {
       duration: null,
       isClosable: true,
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -7,8 +7,8 @@ import PadronInput from "./PadronInput";
 
 const Header = (props) => {
   const { displayedNode } = props;
-  const { changeCarrera } = React.useContext(GraphContext);
-  const { logged, user, register } = React.useContext(UserContext);
+  const { changeCarrera, setFirstTime } = React.useContext(GraphContext);
+  const { user } = React.useContext(UserContext);
 
   return (
     <Flex
@@ -26,12 +26,13 @@ const Header = (props) => {
       <ScaleFade in={!displayedNode} unmountOnExit>
         <Select
           color="white"
+          key={user.carrera?.id}
           css={{
             "& *": { color: "initial" },
           }}
           onChange={(e) => {
+            setFirstTime(false);
             changeCarrera(e.target.value);
-            if (logged) register();
           }}
           value={user.carrera?.id}
         >

diff --git a/src/components/PadronInput.js b/src/components/PadronInput.js
@@ -11,7 +11,7 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-  Switch,
+  Switch
 } from "@chakra-ui/react";
 import React from "react";
 import { GraphContext, UserContext } from "../Contexts";

diff --git a/src/components/UserMenu.js b/src/components/UserMenu.js
@@ -7,22 +7,25 @@ import {
   MenuItem,
   MenuItemOption,
   MenuList,
-  MenuOptionGroup
+  MenuOptionGroup,
 } from "@chakra-ui/react";
 import React from "react";
 import { GraphContext, UserContext } from "../Contexts";
 
 const UserMenu = (props) => {
-  const { register, logout, user } = React.useContext(UserContext);
-  const { changeOrientacion, changeFinDeCarrera, getNode } = React.useContext(
-    GraphContext
-  );
+  const { logout, user } = React.useContext(UserContext);
+  const {
+    setFirstTime,
+    changeOrientacion,
+    changeFinDeCarrera,
+    getNode,
+  } = React.useContext(GraphContext);
 
   const OrientacionesMenuGroup = () => (
     <MenuOptionGroup
       onChange={(value) => {
+        setFirstTime(false);
         changeOrientacion(value);
-        register();
       }}
       value={user.orientacion?.nombre || "none"}
       title="Orientación"
@@ -58,8 +61,8 @@ const UserMenu = (props) => {
         {user.carrera.finDeCarrera && (
           <MenuOptionGroup
             onChange={(value) => {
+              setFirstTime(false);
               changeFinDeCarrera(value);
-              register();
             }}
             value={user.finDeCarrera?.id || "none"}
             title="Fin de Carrera"

diff --git a/src/useGraph.js b/src/useGraph.js
@@ -21,7 +21,19 @@ const useGraph = (loginHook) => {
   const [shouldLoadGraph, setShouldLoadGraph] = React.useState(false);
   const [autosave, setAutosave] = React.useState(false);
   const [loadingGraph, setLoadingGraph] = React.useState(false);
-  const { user, setUser, logged, getGraph, postGraph } = loginHook;
+  const [firstTime, setFirstTime] = React.useState(true);
+  const { user, setUser, register, logged, getGraph, postGraph } = loginHook;
+
+  React.useEffect(() => {
+    if (!logged) changeCarrera(CARRERAS[0].id);
+    else {
+      changeCarrera(user.carrera.id);
+    }
+  }, [logged]);
+
+  React.useEffect(() => {
+    if (logged && !firstTime) register();
+  }, [user.carrera, user.orientacion, user.finDeCarrera]);
 
   React.useEffect(() => {
     if (!nodes?.carrera || nodes.carrera !== user.carrera?.id) return;
@@ -46,7 +58,7 @@ const useGraph = (loginHook) => {
           setLoadingGraph(false);
         });
     }
-  }, [shouldLoadGraph, graph]);
+  }, [shouldLoadGraph, nodes]);
 
   React.useEffect(() => {
     setShowLabels(logged);
@@ -57,22 +69,26 @@ const useGraph = (loginHook) => {
     conNota.forEach((n) => {
       getNode(n.id).showLabel({ nodes, showLabel: logged });
     });
-
-    if (logged) setShouldLoadGraph(true);
   }, [logged]);
 
+  const saveGraph = () => {
+    postGraph(nodes, user.carrera.creditos.checkbox);
+  };
   const changeCarrera = async (id) => {
     setUser(({ ...rest }) => {
       const carrera = CARRERAS.find((c) => c.id === id);
 
-      const userdata = user.allLogins.find((l) => l.carreraid === id);
+      const userdata = logged
+        ? user.allLogins.find((l) => l.carreraid === id)
+        : false;
       setShouldLoadGraph(!!userdata);
-      const orientacion = carrera.orientaciones?.find(
-        (c) => c.nombre === userdata?.orientacionid
-      );
-      const finDeCarrera = carrera.finDeCarrera?.find(
-        (c) => c.id === userdata?.findecarreraid
-      );
+      const orientacion =
+        carrera.orientaciones?.find(
+          (c) => c.nombre === userdata?.orientacionid
+        ) || null;
+      const finDeCarrera =
+        carrera.finDeCarrera?.find((c) => c.id === userdata?.findecarreraid) ||
+        null;
 
       const graphNodes = [];
       const graphEdges = [];
@@ -100,10 +116,6 @@ const useGraph = (loginHook) => {
     setUser({ ...user, finDeCarrera });
   };
 
-  React.useEffect(() => {
-    if (user.carrera) changeCarrera(user.carrera.id);
-  }, [user.carrera]);
-
   React.useEffect(() => {
     if (!nodes?.carrera || nodes.carrera !== user.carrera?.id) return;
     aprobar("CBC", 0);
@@ -355,10 +367,6 @@ const useGraph = (loginHook) => {
     if (network) network.redraw();
   };
 
-  React.useEffect(() => {
-    changeCarrera(CARRERAS[0].id);
-  }, []);
-
   const toggleCheckbox = (c) => {
     const value = !!user.carrera.creditos.checkbox.find(
       (ch) => ch.nombre === c.nombre
@@ -368,10 +376,6 @@ const useGraph = (loginHook) => {
     ).check = !value;
   };
 
-  const saveGraph = () => {
-    postGraph(nodes, user.carrera.creditos.checkbox);
-  };
-
   return {
     graph,
     toggleGroup,
@@ -396,6 +400,7 @@ const useGraph = (loginHook) => {
     toggleCheckbox,
     actualizarMetadata,
     loadingGraph,
+    setFirstTime,
     isGroupHidden,
   };
 };

diff --git a/src/useLogin.js b/src/useLogin.js
@@ -18,11 +18,11 @@ const useLogin = () => {
   const logged = user.padron !== "";
 
   React.useEffect(() => {
-    if (!logged && window.localStorage.getItem("padron")) {
+    if (window.localStorage.getItem("padron")) {
       setPadronInput(window.localStorage.getItem("padron"));
       login(window.localStorage.getItem("padron"));
     }
-  }, [logged]);
+  }, []);
 
   const login = async (padron) => {
     setLoading(true);
@@ -145,9 +145,9 @@ const useLogin = () => {
     return JSON.parse(map);
   };
 
-  const register = (padronInput) => {
+  const register = async (p) => {
     const formData = new FormData();
-    const padron = padronInput || user.padron;
+    const padron = p || user.padron;
     const carreraid = user.carrera.id;
     const orientacionid = user.orientacion?.nombre;
     const findecarreraid = user.finDeCarrera?.id;
@@ -177,16 +177,25 @@ const useLogin = () => {
       return newAllLogins;
     };
 
-    setUser({
-      padron,
-      carrera,
-      orientacion: carrera.orientaciones?.find(
-        (c) => c.nombre === orientacionid
-      ),
-      finDeCarrera: carrera.finDeCarrera?.find((c) => c.id === findecarreraid),
-      allLogins: [...addToAllLogins()],
-    });
-    window.localStorage.setItem("padron", padron);
+    if (!logged) {
+      setUser({
+        padron,
+        carrera,
+        orientacion: carrera.orientaciones?.find(
+          (c) => c.nombre === orientacionid
+        ),
+        finDeCarrera: carrera.finDeCarrera?.find(
+          (c) => c.id === findecarreraid
+        ),
+        allLogins: [...addToAllLogins()],
+      });
+      window.localStorage.setItem("padron", padron);
+    } else {
+      setUser({
+        ...user,
+        allLogins: [...addToAllLogins()],
+      });
+    }
   };
 
   const logout = () => {