feat: adds functionality to keep user signed in while navigating pages

Gather307 · May 23, 2024 · ea410a8 · ea410a8
1 parent 646cfc6
commit ea410a8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/frontend/src/components/NavbarSignedIn.tsx b/frontend/src/components/NavbarSignedIn.tsx
@@ -19,23 +19,23 @@ import { useNavigate, Link as ReactLink } from "react-router-dom";
 
 const NavLink = ({
   children,
-  href = "#",
+  handleClick,
 }: {
   children: ReactNode;
-  href?: string;
+  handleClick: () => void;
 }) => (
   <Link
     px={2}
     py={1}
     rounded={"md"}
-    href={href}
     color={"#DCE1DE"}
     _hover={{
       textDecoration: "underline",
       color: "#DCE1DE",
       bg: "transparent",
     }}
     style={{ fontWeight: "500" }}
+    onClick={handleClick}
   >
     {children}
   </Link>
@@ -59,6 +59,14 @@ const NavbarSignedIn = ({ stateVariable, updateState }: Props) => {
     navigate("/profile");
   };
 
+  const handleGroupsClick = () => {
+    navigate("/groups");
+  }
+
+  const handleItemsClick = () => {
+    navigate("/items");
+  }
+
   return (
     <Box bg={"#216869"} px={4} width="100vw">
       <Flex
@@ -75,8 +83,8 @@ const NavbarSignedIn = ({ stateVariable, updateState }: Props) => {
           </Text>
         </Flex>
         <HStack spacing={8} alignItems={"center"}>
-          <NavLink href="/items">My Items</NavLink>
-          <NavLink href="/groups">My Groups</NavLink>
+          <NavLink handleClick={handleItemsClick}>My Items</NavLink> 
+          <NavLink handleClick={handleGroupsClick}>My Groups</NavLink>
           <Menu>
             <MenuButton
               as={Button}

diff --git a/frontend/src/pages/ItemsPage.tsx b/frontend/src/pages/ItemsPage.tsx
@@ -11,6 +11,7 @@ import {
 } from "@chakra-ui/react";
 import { ArrowForwardIcon, SearchIcon } from "@chakra-ui/icons";
 import ItemGroup from "../components/ItemGroup";
+import { Navigate, useNavigate } from "react-router-dom";
 
 // Define the types for items
 type Item = {
@@ -43,6 +44,12 @@ const items: Items = {
 };
 
 const ItemsPage: React.FC = () => {
+  const navigate = useNavigate();
+
+  const handleGroupsClick = () => {
+    navigate("/groups");
+  };
+
   return (
     <Box w="100vw" p={4} bg="gray.100">
       <Flex direction="column" minH="100vh" width="full">
@@ -53,6 +60,7 @@ const ItemsPage: React.FC = () => {
           <Flex mt={2} alignItems="center">
             <Button
               leftIcon={<ArrowForwardIcon />}
+              onClick={handleGroupsClick}
               colorScheme="teal"
               variant="solid"
               mr={4}