Merge branch 'main' into 28-create-the-edit-item-component

.github/workflows/azure-static-web-apps-thankful-tree-04ab28e1e.yml

@@ -19,17 +19,6 @@ jobs:
         with:
           submodules: true
           lfs: false
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "20.x"
-      - name: Install dependencies
-        run: npm install
-        working-directory: ./frontend
-      - name: Build project
-        run: npm run build
-        working-directory: ./frontend
-
       - name: Build And Deploy
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v1

.github/workflows/main_gather-app-inv.yml

@@ -23,20 +23,20 @@ jobs:
 
       - name: npm install, build, and test
         run: |
-          npm install --workspaces=false
+          npm install --workspaces=false --legacy-peer-deps
           npm run -w backend build --if-present
           npm run -w backend test --if-present
-        working-directory: ./backend
+        working-directory: backend
 
       - name: Zip artifact for deployment
         run: zip release.zip ./* -r
-        working-directory: ./backend
+        working-directory: backend
 
       - name: Upload artifact for deployment job
         uses: actions/upload-artifact@v3
         with:
           name: node-app
-          path: release.zip
+          path: backend/release.zip
 
   deploy:
     runs-on: ubuntu-latest

backend/index.ts

@@ -4,6 +4,7 @@ import { groupEndpoints } from "./routes/groupRoutes";
 import { basketEndpoints } from "./routes/basketRoutes";
 import { itemEndpoints } from "./routes/itemRoutes";
 import { loginUser } from "./auth";
+import jwt from "jsonwebtoken";
 
 const app: Express = express();
 app.use(express.json());
@@ -13,7 +14,7 @@ app.use((req: Request, res: Response, next: NextFunction) => {
   res.header("Access-Control-Allow-Origin", "*");
   res.header(
     "Access-Control-Allow-Headers",
-    "Origin, X-Requested-With, Content-Type, Accept",
+    "Origin, X-Requested-With, Content-Type, Accept, Authorization",
   );
   res.header(
     "Access-Control-Allow-Methods",
@@ -37,8 +38,28 @@ app.use("/baskets", basketEndpoints);
 app.use("/items", itemEndpoints);
 
 app.get("/", async (req: Request, res: Response) => {
-  const result = "Hello world!";
-  res.send(result);
+  const authHeader = req.headers["authorization"];
+  //Getting the 2nd part of the auth header (the token)
+  const token = authHeader && authHeader.split(" ")[1];
+
+  if (!token) {
+    console.log("No token received");
+    res.status(401).end();
+  } else {
+    const decoded = jwt.verify(
+      token,
+      process.env.TOKEN_SECRET as jwt.Secret,
+      (error, decoded) => {
+        if (decoded) {
+          console.log({ username: (decoded as any).username });
+          res.status(200).send({ username: (decoded as any).username });
+        } else {
+          console.log("JWT error:", error);
+          res.status(401).end();
+        }
+      },
+    );
+  }
 });
 
 // Error handling middleware

backend/package.json

@@ -11,12 +11,11 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@types/mongoose": "^5.11.97",
     "bcrypt": "^5.1.1",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
     "jsonwebtoken": "^9.0.2",
-    "mongoose": "^8.3.4",
+    "mongoose": "^8.4.0",
     "node": "^20.13.0",
     "prettier": "^3.2.5",
     "ts-node": "^10.9.2"
@@ -25,10 +24,12 @@
     "@types/bcrypt": "^5.0.2",
     "@types/express": "^4.17.21",
     "@types/jsonwebtoken": "^9.0.6",
-    "@types/node": "^20.12.11",
+    "@types/mongoose": "^5.11.97",
+    "@types/node": "^20.12.12",
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",
     "eslint": "^9.3.0",
-    "nodemon": "^3.1.0"
+    "nodemon": "^3.1.0",
+    "typescript": "^5.4.5"
   }
 }

backend/routes/userRoutes.ts

@@ -27,8 +27,6 @@ router.get("/:userid", async (req: Request, res: Response) => {
   connectDB();
 
   try {
-    console.log("Here");
-
     // Use findById correctly with the id parameter from the request
     const user = await User.findById(req.params.userid);
 
@@ -39,10 +37,24 @@ router.get("/:userid", async (req: Request, res: Response) => {
 
     // Send the found user
     res.send(user);
-    console.log("Sent user");
+    console.log("Sent user", user);
   } catch (error) {
-    console.error("Error fetching user:", error); // Log the error for debugging
-    res.status(500).send("Internal Server Error");
+    try {
+      // Use findById correctly with the id parameter from the request
+      const user = await User.findOne({ username: req.params.userid });
+
+      // Check if group is null or undefined
+      if (!user) {
+        return res.status(404).send("No users found"); // Use return to exit the function after sending the response
+      }
+
+      // Send the found user
+      res.send(user);
+      console.log("Sent user");
+    } catch (error) {
+      console.error("Error fetching user:", error); // Log the error for debugging
+      res.status(500).send("Internal Server Error");
+    }
   }
 });
 

frontend/src/App.tsx

@@ -9,9 +9,9 @@ import NavbarSignedIn from "./components/NavbarSignedIn";
 import Friends_List from "./components/Friends_List_Component";
 import ProfilePage from "./pages/ProfilePage";
 import GroupPage from "./pages/MyGroupsPage";
-import { useState } from "react";
-import { IUser } from "./../../backend/models/userSchema";
 import EditItem from "./components/EditItem";
+import { useState, useEffect } from "react";
+import { IUser } from "../../backend/models/userSchema";
 
 // TODO: When we integrate the frontend to use the backend, we need to use this API server: gather-app-inv.azurewebsites.net
 // fetch("gather-app-inv.azurewebsites.net");
@@ -26,22 +26,51 @@ const getRandomColor = () => {
 };
 
 function App() {
-  const [user, setUser] = useState<IUser | null>(null); // placeholder for our authentication logic
-  const [token, setToken] = useState(""); // placeholder for our authentication logic
+  const [token, setToken] = useState(localStorage.getItem("token") ?? "");
+  const getUser = async () => {
+    if (token !== "") {
+      const res = await fetch("http://localhost:3001/", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (res.status === 200) {
+        const data = (await res.json()) as { username: string };
+        const userres = await fetch(
+          `http://localhost:3001/users/${data.username}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        );
+        if (userres.status === 200) {
+          const user = await userres.json();
+          setUser(user);
+        }
+      }
+    }
+  };
 
-  console.log("Token:", token);
-  const userId = user?._id ?? "";
-  if (!userId) {
-    console.log("User ID is not available");
-  }
+  useEffect(() => {
+    getUser().then(() => {
+      setLoggedIn(true);
+    });
+  }, [token]);
 
+  const [user, setUser] = useState<IUser | null>(null);
   const avatarColor = getRandomColor();
+  const [loggedIn, setLoggedIn] = useState(false);
 
   return (
     <ChakraProvider>
       <Router>
         <Box width="100vw" height="100vh" display="flex" flexDirection="column">
-          {token != "" ? (
+          {loggedIn && token != "" ? (
             <NavbarSignedIn
               stateVariable={{ user, token, avatarColor }}
               updateState={{ setUser, setToken }}

frontend/src/components/Friends_List_Component.tsx

@@ -164,9 +164,7 @@ const Friends_List: React.FC<Props> = ({
         const res2 = await fetch(`http://localhost:3001/users/${LoggedInUser}`);
         let user;
         let friend;
-        console.log("Gets here");
         if (res.ok && res2.ok) {
-          console.log("Does it get here?");
           user = await res2.json();
           friend = await res.json();
 
@@ -237,10 +235,10 @@ const Friends_List: React.FC<Props> = ({
       <Box
         padding="4"
         borderRadius="md"
-        position="sticky"
         top="0"
         zIndex="1"
         bg="white"
+        position="sticky"
       >
         <FormControl>
           <Stack direction="row" spacing={4}>

frontend/src/components/NavbarSignedIn.tsx

@@ -13,7 +13,7 @@ import {
   Image,
   Link,
 } from "@chakra-ui/react";
-import logo from "../../public/target.png";
+import logo from "../../public/TheLeaf.png";
 import { ReactNode } from "react";
 import { useNavigate, Link as ReactLink } from "react-router-dom";
 
@@ -52,6 +52,7 @@ const NavbarSignedIn = ({ stateVariable, updateState }: Props) => {
   const handleLogout = () => {
     updateState.setToken("");
     updateState.setUser("");
+    localStorage.removeItem("token");
     navigate("/");
   };
 
@@ -70,6 +71,7 @@ const NavbarSignedIn = ({ stateVariable, updateState }: Props) => {
   return (
     <Box bg={"#216869"} px={4} width="100vw">
       <Flex
+        margin={"3px"}
         minH={"60px"}
         alignItems={"center"}
         justifyContent={"space-between"}
@@ -85,25 +87,31 @@ const NavbarSignedIn = ({ stateVariable, updateState }: Props) => {
         <HStack spacing={8} alignItems={"center"}>
           <NavLink handleClick={handleItemsClick}>My Items</NavLink>
           <NavLink handleClick={handleGroupsClick}>My Groups</NavLink>
-          <Menu>
-            <MenuButton
-              as={Button}
-              rounded={"full"}
-              variant={"link"}
-              cursor={"pointer"}
-              minW={0}
-              _focus={{ boxShadow: "0 0 0 3px #49A078" }}
-            >
-              <Avatar size={"sm"} bg={stateVariable.avatarColor} color="white">
-                {/* {`${stateVariable.user.firstName[0]}${stateVariable.user.lastName[0]}`.toUpperCase()} */}
-              </Avatar>
-            </MenuButton>
-            <MenuList>
-              <MenuItem onClick={handleProfileClick}>Profile</MenuItem>
-              <MenuDivider />
-              <MenuItem onClick={handleLogout}>Logout</MenuItem>
-            </MenuList>
-          </Menu>
+          <Box position="relative" zIndex={10}>
+            <Menu>
+              <MenuButton
+                as={Button}
+                rounded={"full"}
+                variant={"link"}
+                cursor={"pointer"}
+                minW={0}
+                _focus={{ boxShadow: "0 0 0 3px #49A078" }}
+              >
+                <Avatar
+                  size={"sm"}
+                  bg={stateVariable.avatarColor}
+                  color="white"
+                >
+                  {/* {`${stateVariable.user.firstName[0]}${stateVariable.user.lastName[0]}`.toUpperCase()} */}
+                </Avatar>
+              </MenuButton>
+              <MenuList>
+                <MenuItem onClick={handleProfileClick}>Profile</MenuItem>
+                <MenuDivider />
+                <MenuItem onClick={handleLogout}>Logout</MenuItem>
+              </MenuList>
+            </Menu>
+          </Box>
         </HStack>
       </Flex>
     </Box>