Fix Logout Button design

frontendcafe · Sep 11, 2022 · e5c224d · e5c224d
1 parent c23a8c5
commit e5c224d
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 26 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,
@@ -21,6 +23,7 @@ const Links = [
   { title: "Sesión de estudio", href: "/study-sessions" },
   { title: "Tienda", href: "/Tienda" },
   { title: "Perfil", href: "/Perfil" },
+  { title: "Cerrar sesión", onClick: logOut },
 ];
 
 const Menu = () => {
@@ -36,13 +39,20 @@ const Menu = () => {
           <Hamburguer />
         </Box>
         <Box display={{ base: "none", lg: "flex" }}>
-          {Links.map((link) => (
-            <Text variant="navbar">
-              <Link href={link.href}>
-                <a>{link.title}</a>
-              </Link>
-            </Text>
-          ))}
+          {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" }}>
@@ -57,13 +67,29 @@ const Menu = () => {
               borderColor="primary.100"
               borderWidth={2}
             />
-            {Links.map((link) => (
-              <Text variant="drawer">
-                <Link href={link.href}>
-                  <a>{link.title}</a>
-                </Link>
-              </Text>
-            ))}
+            {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 key={link.href} variant="drawer">
+                  <Link href={link.href || ''}>
+                    {link.title}
+                  </Link>
+                </Text>
+              );
+            })}
           </DrawerBody>
         </DrawerContent>
       </Drawer>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -3,7 +3,6 @@ import Head from "next/head";
 import nookies from "nookies";
 
 import { verifyIdToken } from "@/firebaseAdminConfig";
-import LogoutButton from "@/modules/Auth/components/LogoutButton";
 import MyCollectionsPage from "@/modules/Collections/MyCollectionsPage";
 import Menu from "@/modules/shared/components/Menu/Menu";
 
@@ -17,7 +16,6 @@ const Home: NextPage & { requiresAuthentication: boolean } = () => {
       </Head>
       <div>
         <Menu />
-        <LogoutButton />
         <MyCollectionsPage />
       </div>
     </div>