Merge pull request #60 from penguinsufcg/feat/edit-screen

Add logout feature

src/components/Session/SessionProvider.tsx

@@ -30,6 +30,12 @@ function SessionProvider({ children }: SessionContextProps): JSX.Element {
     router.push('/logout')
   }
 
+  const logout = () => {
+    setSessionId(undefined)
+    setSession(null)
+    setSessionRef(null)
+  }
+
   const getSessionLocal = () => {
     const sessionId = localStorage.getItem('sessionId')
 
@@ -120,6 +126,7 @@ function SessionProvider({ children }: SessionContextProps): JSX.Element {
       isLoading,
       createNewSession,
       joinSession,
+      logout,
     }),
     [session, sessionRef, sessionId, isLoading],
   )

src/components/client/Navbar/components/NavbarOption.tsx

@@ -1,9 +1,10 @@
-import { Button } from "@chakra-ui/react"
-import Link from "next/link"
-import React, { ReactElement } from "react"
+import { Button } from '@chakra-ui/react'
+import Link from 'next/link'
+import React, { ReactElement } from 'react'
 
 type NavbarOptionProps = {
   isSelected?: boolean
+  onClick?: () => void
   href: string
   icon: ReactElement
 }
@@ -12,11 +13,13 @@ const NavbarOption = ({
   href,
   icon,
   isSelected = false,
+  onClick,
 }: NavbarOptionProps) => (
   <Link href={href} passHref>
     <Button
       variant="ghost"
       size="sm"
+      onClick={onClick}
       color={isSelected ? 'primary.400' : 'secondary.400'}
       sx={{
         boxSize: 10,
@@ -31,4 +34,4 @@ const NavbarOption = ({
   </Link>
 )
 
-export default NavbarOption
+export default NavbarOption

src/components/client/Navbar/index.tsx

@@ -1,18 +1,20 @@
-import useSession from "@/hooks/useSession"
-import { Flex } from "@chakra-ui/react"
-import React from "react"
-import { BiHome, BiCartAlt, BiReceipt } from "react-icons/bi"
-import NavbarOption from "./components/NavbarOption"
+import useSession from '@/hooks/useSession'
+import { Flex } from '@chakra-ui/react'
+import React from 'react'
+import { BiHome, BiCartAlt, BiReceipt, BiLogOut } from 'react-icons/bi'
+import NavbarOption from './components/NavbarOption'
 
 const Navbar = () => {
-  const { underPayment } = useSession()
+  const { logout, underPayment } = useSession()
+
   return (
     <Flex justifyContent="space-around">
       <NavbarOption isSelected icon={<BiHome size={24} />} href="/" />
       <NavbarOption icon={<BiCartAlt size={24} />} href="/cart" />
       <NavbarOption icon={<BiReceipt size={24} />} href={underPayment ? "/bill" : "/receipt"} />
+      <NavbarOption icon={<BiLogOut size={24} />} href="/" onClick={logout} />
     </Flex>
   )
 }
 
-export default Navbar
+export default Navbar

src/hooks/useSession.ts

@@ -6,8 +6,12 @@ type SessionContextProps = {
   sessionRef?: Reference<Session> | null
   isLogged: boolean
   underPayment: boolean
-  createNewSession?: (params: { table: string, client: string }) => Promise<string>
+  createNewSession?: (params: {
+    table: string
+    client: string
+  }) => Promise<string>
   joinSession?: (params: { sessionId: string }) => void
+  logout: () => void
 }
 
 export const SessionContext: Context<SessionContextProps> =
@@ -17,6 +21,7 @@ export const SessionContext: Context<SessionContextProps> =
     isLogged: false,
     underPayment: false,
     isLoading: false,
+    logout: () => {},
   })
 
 const useSession = (): SessionContextProps => {