UserModal -> UserMenu

FdelMazo · Mar 3, 2021 · dbaac4d · dbaac4d
1 parent ede9f1a
commit dbaac4d
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 226 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -8,7 +8,7 @@ import PadronInput from "./PadronInput";
 const Header = (props) => {
   const { displayedNode } = props;
   const { changeCarrera } = React.useContext(GraphContext);
-  const { logged, user } = React.useContext(UserContext);
+  const { logged, user, register } = React.useContext(UserContext);
 
   return (
     <Flex
@@ -29,9 +29,11 @@ const Header = (props) => {
           css={{
             "& *": { color: "initial" },
           }}
-          onChange={(e) => changeCarrera(e.target.value)}
+          onChange={(e) => {
+            changeCarrera(e.target.value);
+            if (logged) register();
+          }}
           value={user.carrera?.id}
-          isDisabled={logged}
         >
           {CARRERAS.map((c) => (
             <option value={c.id}>{c.nombre}</option>

diff --git a/src/components/PadronInput.js b/src/components/PadronInput.js
@@ -1,4 +1,4 @@
-import { CheckCircleIcon, SettingsIcon } from "@chakra-ui/icons";
+import { CheckCircleIcon } from "@chakra-ui/icons";
 import {
   Box,
   Button,
@@ -12,27 +12,27 @@ import {
   PopoverContent,
   PopoverTrigger,
   Switch,
-  useDisclosure,
 } from "@chakra-ui/react";
 import React from "react";
 import { GraphContext, UserContext } from "../Contexts";
-import UserModal from "./UserModal";
+import UserMenu from "./UserMenu";
 
 const PadronInput = () => {
-  const { login, logged, user, loading, saving } = React.useContext(
-    UserContext
-  );
+  const {
+    login,
+    logged,
+    user,
+    loading,
+    saving,
+    register,
+    padronInput,
+    setPadronInput,
+  } = React.useContext(UserContext);
 
   const { autosave, setAutosave, saveGraph } = React.useContext(GraphContext);
 
   const [notRegistered, setNotRegistered] = React.useState(false);
   const [lastInput, setLastInput] = React.useState("");
-  const [padronInput, setPadronInput] = React.useState("");
-  const { isOpen, onOpen, onClose: onClosex } = useDisclosure();
-  const onClose = () => {
-    setNotRegistered(false);
-    onClosex();
-  };
 
   const showRegisterButton = notRegistered && padronInput === lastInput;
 
@@ -42,9 +42,9 @@ const PadronInput = () => {
         onSubmit={async (t) => {
           t.preventDefault();
           const padron = t.target.elements["padron"].value;
-          if (logged || showRegisterButton) {
-            onOpen();
-            setLastInput(padron);
+          if (showRegisterButton) {
+            setLastInput("");
+            register(padron);
             return;
           }
 
@@ -54,72 +54,72 @@ const PadronInput = () => {
         }}
       >
         <Flex align="center">
-          <Input
-            borderRadius={4}
-            size="sm"
-            color="white"
-            name="padron"
-            placeholder="Padrón"
-            value={user.padron || padronInput}
-            onChange={(e) => setPadronInput(e.target.value)}
-            isDisabled={logged}
-          />
+          {logged ? (
+            <>
+              <UserMenu />
+              <Popover placement="right-end" trigger="hover">
+                <PopoverTrigger>
+                  <IconButton
+                    colorScheme="teal"
+                    size="sm"
+                    isLoading={saving}
+                    mx={2}
+                    onClick={() => {
+                      saveGraph();
+                    }}
+                  >
+                    <Icon boxSize={5} viewBox="0 0 448 512">
+                      <path
+                        fill="white"
+                        d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"
+                      />
+                    </Icon>
+                  </IconButton>
+                </PopoverTrigger>
+                <PopoverContent size="sm" w="fit-content">
+                  <PopoverArrow />
+                  <PopoverBody
+                    isChecked={autosave}
+                    onClick={() => {
+                      setAutosave(!autosave);
+                    }}
+                  >
+                    auto-save
+                    <Switch colorScheme="teal" ml={2} />
+                  </PopoverBody>
+                </PopoverContent>
+              </Popover>
+            </>
+          ) : (
+            <>
+              <Input
+                borderRadius={4}
+                size="sm"
+                w="20ch"
+                color="white"
+                name="padron"
+                placeholder="Padrón"
+                value={user.padron || padronInput}
+                onChange={(e) => setPadronInput(e.target.value)}
+                isDisabled={loading}
+              />
 
-          <Button
-            colorScheme={showRegisterButton ? "red" : "teal"}
-            variant={showRegisterButton ? "solid" : "outline"}
-            size="sm"
-            title={!logged && !showRegisterButton && "Ingresar"}
-            px={showRegisterButton && 7}
-            mx={2}
-            isLoading={loading}
-            type="submit"
-          >
-            {logged ? (
-              <SettingsIcon />
-            ) : showRegisterButton ? (
-              "Registrarse"
-            ) : (
-              <CheckCircleIcon />
-            )}
-          </Button>
-          {logged && (
-            <Popover placement="right-end" trigger="hover">
-              <PopoverTrigger>
-                <IconButton
-                  colorScheme="teal"
-                  variant={"outline"}
-                  size="sm"
-                  isLoading={saving}
-                  onClick={() => {
-                    saveGraph();
-                  }}
-                >
-                  <Icon boxSize={5} viewBox="0 0 448 512">
-                    <path
-                      fill="teal"
-                      d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"
-                    />
-                  </Icon>
-                </IconButton>
-              </PopoverTrigger>
-              <PopoverContent size="sm" w="fit-content">
-                <PopoverArrow />
-                <PopoverBody
-                  isChecked={autosave}
-                  onClick={() => {
-                    setAutosave(!autosave);
-                  }}
-                >
-                  auto-save
-                  <Switch colorScheme="teal" ml={2} />
-                </PopoverBody>
-              </PopoverContent>
-            </Popover>
+              <Button
+                colorScheme={showRegisterButton ? "red" : "teal"}
+                variant={showRegisterButton ? "solid" : "outline"}
+                size="sm"
+                title={!showRegisterButton && "Ingresar"}
+                px={showRegisterButton && 7}
+                mx={2}
+                isLoading={loading}
+                type="submit"
+              >
+                {showRegisterButton ? "Registrarse" : <CheckCircleIcon />}
+              </Button>
+            </>
           )}
         </Flex>
       </form>
-      <UserModal padronInput={padronInput} onClose={onClose} isOpen={isOpen} />
     </Box>
   );
 };

diff --git a/src/components/UserMenu.js b/src/components/UserMenu.js
@@ -0,0 +1,98 @@
+import { SettingsIcon } from "@chakra-ui/icons";
+import {
+  Button,
+  Collapse,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItemOption,
+  MenuList,
+  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 OrientacionesMenuGroup = () => (
+    <MenuOptionGroup
+      onChange={(value) => {
+        changeOrientacion(value);
+        register();
+      }}
+      value={user.orientacion?.nombre || "none"}
+      title="Orientación"
+      type="radio"
+    >
+      <MenuItemOption type="checkbox" value={"none"}>
+        No me decidí
+      </MenuItemOption>
+
+      {user.carrera?.orientaciones &&
+        user.carrera?.orientaciones.map((o) => (
+          <MenuItemOption type="checkbox" value={o.nombre}>
+            {o.nombre}
+          </MenuItemOption>
+        ))}
+    </MenuOptionGroup>
+  );
+
+  return (
+    <Menu closeOnSelect={false}>
+      <MenuButton
+        w="20ch"
+        textAlign="left"
+        as={Button}
+        leftIcon={<SettingsIcon />}
+        size="sm"
+        colorScheme="teal"
+      >
+        {user.padron}
+      </MenuButton>
+
+      <MenuList>
+        {user.carrera.finDeCarrera && (
+          <MenuOptionGroup
+            onChange={(value) => {
+              changeFinDeCarrera(value);
+              register();
+            }}
+            value={user.finDeCarrera?.id || "none"}
+            title="Fin de Carrera"
+            type="radio"
+          >
+            <MenuItemOption type="checkbox" value={"none"}>
+              No me decidí
+            </MenuItemOption>
+
+            {user.carrera?.finDeCarrera &&
+              Object.values(user.carrera.finDeCarrera).map((v) => (
+                <MenuItemOption type="checkbox" value={v.id}>
+                  {getNode(v.materia)?.materia}
+                </MenuItemOption>
+              ))}
+          </MenuOptionGroup>
+        )}
+
+        {user.carrera?.eligeOrientaciones === true && (
+          <OrientacionesMenuGroup />
+        )}
+        <Collapse
+          in={user.carrera?.eligeOrientaciones?.[user.finDeCarrera?.id]}
+          unmountOnExit
+        >
+          <OrientacionesMenuGroup />
+        </Collapse>
+        <MenuItem onClick={logout}>
+          <strong>Cerrar Sesión</strong>
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default UserMenu;