Merge branch 'main' into main-feature/135-create-studysession-page

frontendcafe · Sep 12, 2022 · d00fd65 · d00fd65
2 parents 630ffb4 + 048fe3a
commit d00fd65
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 40 deletions.
diff --git a/modules/Auth/components/LogoutButton.tsx b/modules/Auth/components/LogoutButton.tsx
diff --git a/modules/Auth/firebase/auth.ts b/modules/Auth/firebase/auth.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from "firebase/auth";
 
 import { auth } from "@/firebaseConfig";
@@ -18,7 +19,6 @@ export const logIn = async (email: string, password: string) => {
     const user = await signInWithEmailAndPassword(auth, email, password);
     return user;
   } catch (error) {
-    // eslint-disable-next-line no-console
     console.error(error);
     return null;
   }
@@ -27,7 +27,7 @@ export const logIn = async (email: string, password: string) => {
 export const logOut = async () => {
   try {
     await signOut(auth);
-    return window.alert("User Logged Out");
+    console.log(">>>");
   } catch (error) {
     console.error(error);
   }

diff --git a/modules/shared/components/Menu/Menu.tsx b/modules/shared/components/Menu/Menu.tsx
@@ -1,8 +1,10 @@
 import React from "react";
 import Link from "next/link";
 
+import { logOut } from "@/modules/Auth/firebase/auth";
 import {
   Box,
+  Button,
   Drawer,
   DrawerBody,
   DrawerCloseButton,
@@ -18,9 +20,10 @@ import MenuLogo from "../Icons/MenuLogo";
 
 const Links = [
   { title: "Colecciones", href: "/" },
-  { title: "Sesión de estudio", href: "/SesiónEstudio" },
+  { title: "Sesión de estudio", href: "/study-sessions" },
   { title: "Tienda", href: "/Tienda" },
   { title: "Perfil", href: "/Perfil" },
+  { title: "Cerrar sesión", onClick: logOut },
 ];
 
 const Menu = () => {
@@ -32,11 +35,26 @@ const Menu = () => {
         <Box>
           <MenuLogo fill="white" width={18} height={23} borderColor="primary.100" borderWidth={7} />
         </Box>
-        <Box onClick={onOpen} cursor="pointer">
+        <Box onClick={onOpen} cursor="pointer" display={{ lg: "none" }}>
           <Hamburguer />
         </Box>
+        <Box display={{ base: "none", lg: "flex" }}>
+          {Links.map((link) => {
+            if (link.onClick) {
+              return (
+                <Button onClick={link.onClick} variant="link">
+                  <Text variant="navbar">{link.title}</Text>
+                </Button>
+              );
+            }
+            return (
+              <Text key={link.href} variant="navbar">
+                <Link href={link.href}>{link.title}</Link>
+              </Text>
+            );
+          })}
+        </Box>
       </Flex>
-
       <Drawer onClose={onClose} isOpen={isOpen} size={{ base: "full", md: "sm" }}>
         <DrawerOverlay />
         <DrawerContent bg="primary.100">
@@ -50,9 +68,22 @@ const Menu = () => {
               borderWidth={2}
             />
             {Links.map((link) => {
+              if (link.onClick) {
+                return (
+                  <Button
+                    position="fixed"
+                    bottom="5vh"
+                    left="2vh"
+                    onClick={link.onClick}
+                    variant="link"
+                  >
+                    <Text variant="drawer">{link.title}</Text>
+                  </Button>
+                );
+              }
               return (
-                <Text variant="menu" key={link.href}>
-                  <Link href={link.href}>{link.title}</Link>
+                <Text key={link.href} variant="drawer">
+                  <Link href={link.href || ""}>{link.title}</Link>
                 </Text>
               );
             })}

diff --git a/modules/shared/theme/index.ts b/modules/shared/theme/index.ts
@@ -39,22 +39,6 @@ const colors: CustomColors = {
 };
 
 const components: Theme["components"] = {
-  Text: {
-    variants: {
-      menu: {
-        textAlign: "center",
-        color: "white",
-        fontWeight: 500,
-        fontSize: "1.5rem",
-        marginTop: "45px",
-      },
-      label: {
-        color: "label.50",
-        fontWeight: 600,
-        fontSize: "18px",
-      },
-    },
-  },
   Button: {
     baseStyle: {
       height: "auto",
@@ -102,6 +86,35 @@ const components: Theme["components"] = {
     },
   },
 
+  Text: {
+    variants: {
+      label: {
+        color: "label.50",
+        fontWeight: 600,
+        fontSize: "18px",
+      },
+      drawer: {
+        textAlign: "center",
+        color: "white",
+        fontWeight: 500,
+        fontSize: "20px",
+        marginTop: "45px",
+      },
+      navbar: {
+        textAlign: "center",
+        color: "gray.300",
+        fontWeight: 400,
+        fontSize: "19px",
+        borderBottom: "3px solid white",
+        ml: "60px",
+        _hover: {
+          color: "primary.100",
+          borderBottom: "3px solid",
+        },
+      },
+    },
+  },
+
   Textarea: {
     // style object for base or default style
     baseStyle: {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -14,7 +14,6 @@ const Home: NextPage & { requiresAuthentication: boolean } = () => {
         <meta name="description" content="Flashcards study app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
       <div>
         <Menu />
         <MyCollectionsPage />

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -73,18 +73,23 @@ const LoginPage: NextPage & { redirectIfAuthenticated: boolean } = () => {
           onChange={handleChange}
           errorMsg={errorMsg}
         />
-
         <Link href="/forget-password">
-          <Button variant="link" colorScheme="blue" size="sm">
+          <Button
+            justifyContent="flex-start"
+            marginTop={0}
+            variant="link"
+            colorScheme="blue"
+            size="sm"
+          >
             ¿Olvidastes tu contraseña?
           </Button>
         </Link>
-        <Link href="/register">
-          <Button variant="link" colorScheme="blue" size="sm">
-            ¿Eres Nuevo, Crea tu Cuenta?
-          </Button>
-        </Link>
       </Form>
+      <Link href="/register">
+        <Button variant="link" colorScheme="blue" size="sm">
+          Crea tu Cuenta
+        </Button>
+      </Link>
     </AuthFormLayout>
   );
 };

diff --git a/pages/study-sessions/index.tsx b/pages/study-sessions/index.tsx
@@ -10,7 +10,6 @@ import { Center, Container, Grid, GridItem, Select, Text } from "@chakra-ui/reac
 const StudySessions: NextPage = () => {
   const router = useRouter();
   const handleDelete = (id: string) => {
-    // Delete Funciont Id
     console.log(id);
   };
 
@@ -55,6 +54,7 @@ const StudySessions: NextPage = () => {
             display="flex"
             justifyContent="center"
           >
+
             <Center
               flexDirection={{ mobile: "row", desktop: "column" }}
               border={{ base: "0", desktop: "2px" }}
@@ -67,6 +67,7 @@ const StudySessions: NextPage = () => {
                 Crear nueva sesión
               </Text>
             </Center>
+
           </GridItem>
           {/* ------------MAP con las respectivas props-----------------*/}
           <GridItem w="100%">