10 create the friends list component -- Added Comments

frontend/src/components/Friends_List_Component.tsx

@@ -21,26 +21,27 @@ import {
   MenuItem,
 } from "@chakra-ui/react";
 
+//Props to store LoggedInUser ID
 type Props = {
   initialUserId?: string;
   LoggedInUser: any;
 };
-
+//Type friend to store Friend Id and Name for table
 type Friend = {
   id: string;
   name: string;
 };
-
+//Type Group to store Group Id and Name for table
 type Group = {
   id: string;
   name: string;
 };
 
 const Friends_List: React.FC<Props> = ({
-  initialUserId = "",
-  LoggedInUser,
+  initialUserId = "", //Initial UserId in the text box to add friend
+  LoggedInUser, //current logged user id
 }) => {
-  //hard coded for now until we have log in logic
+  //created usestates for Group, Friend, and Friend's userId
   const [groups, setGroups] = useState<Group[]>([]);
   const [friends, setFriends] = useState<Friend[]>([]);
   const [userId, setUserId] = useState(initialUserId);
@@ -49,17 +50,20 @@ const Friends_List: React.FC<Props> = ({
     const fetchFriendsAndGroups = async () => {
       console.log(LoggedInUser);
       try {
+        //Grabs logged User
         const response = await fetch(
           `http://localhost:3001/users/${LoggedInUser}`,
         );
         if (response.ok) {
+          //Maps groups  of the Logged user
           const user = await response.json();
           const groupData = user.groups.map((groupId: string) => {
             return fetch(`http://localhost:3001/groups/${groupId}`).then(
               (res) => res.json(),
             );
           });
           const groupsList = await Promise.all(groupData);
+          //sets the group
           setGroups(
             groupsList.map((group: any) => ({
               id: group._id,
@@ -73,6 +77,7 @@ const Friends_List: React.FC<Props> = ({
             );
           });
           const friendsList = await Promise.all(friendsData);
+          //maps all the friends out
           setFriends(
             friendsList.map((friend: any) => ({
               id: friend._id,
@@ -90,15 +95,17 @@ const Friends_List: React.FC<Props> = ({
     if (LoggedInUser) {
       fetchFriendsAndGroups();
     }
+    //updates loggedInUser
   }, [LoggedInUser]);
 
   const removeFriend = async (friendId: string) => {
     try {
+      //prints the friend Id that we want to delete
       console.log(friendId);
-      // Assuming you have the userId available in your state or props
 
       // Send a DELETE request to the backend API
       const response = await fetch(
+        //Here I get the LoggedInUser and go to the friends array of that user and remove the friend from it
         `http://localhost:3001/users/${LoggedInUser}/remove-friend`,
         {
           method: "DELETE",
@@ -119,18 +126,21 @@ const Friends_List: React.FC<Props> = ({
       console.error("Error removing friend:", error);
     }
   };
-
+  //adds the friend to the group that the loggedin user is already in.
   const addToGroup = async (friendId: string, groupId: string) => {
     try {
+      //grabs the info of the friend
       const res = await fetch(`http://localhost:3001/users/${friendId}`);
       let friend;
 
       if (res.ok) {
+        //add the group to the friends group array
         friend = await res.json();
         if (!friend.groups.includes(groupId)) {
           friend.groups.push(groupId);
           console.log("Pushed to list");
 
+          //adds it to the backend
           const updatedRes = await fetch(
             `http://localhost:3001/users/${friendId}`,
             {
@@ -157,12 +167,15 @@ const Friends_List: React.FC<Props> = ({
     }
   };
 
+  //adds a friend to the logged in user's friends
   const addFriend = async (userId: string) => {
     try {
       console.log(userId);
+      //cant add yourself as a friend, sadly
       if (userId == LoggedInUser) {
         console.log("Cannot add yourself as friend");
       } else {
+        //fetch both the "userId" which is the friend and the loggedinUser
         const res = await fetch(`http://localhost:3001/users/${userId}`);
         const res2 = await fetch(`http://localhost:3001/users/${LoggedInUser}`);
         let user;
@@ -173,10 +186,12 @@ const Friends_List: React.FC<Props> = ({
           user = await res2.json();
           friend = await res.json();
 
+          //push to logged in users friends array
           if (!user.friends.includes(friend._id)) {
             user.friends.push(friend._id);
             console.log("Pushed to list");
 
+            //add logged in's friend in backend
             const updatedRes = await fetch(
               `http://localhost:3001/users/${LoggedInUser}`,
               {
@@ -188,6 +203,7 @@ const Friends_List: React.FC<Props> = ({
               },
             );
             console.log("Past Patch");
+            //setfriends to auto load once submitted
             if (updatedRes.ok) {
               setFriends([
                 ...friends,
@@ -208,6 +224,7 @@ const Friends_List: React.FC<Props> = ({
     }
   };
 
+  //handle click just is to test to make sure it all works when clicking
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = async (
     event,
   ) => {
@@ -220,6 +237,7 @@ const Friends_List: React.FC<Props> = ({
     }
   };
 
+  //handle click just is to test to make sure it all works when clicking
   const handleGroupClick = async (groupId: string, friendId: string) => {
     // Handle the logic to add a friend to the group
     try {

frontend/src/components/NavbarSignedIn.tsx

@@ -11,7 +11,7 @@ import {
   MenuDivider,
   HStack,
   Image,
-  Link,
+  Link as ChakraLink,
 } from "@chakra-ui/react";
 import logo from "../../public/target.png";
 import { ReactNode } from "react";
@@ -24,7 +24,7 @@ const NavLink = ({
   children: ReactNode;
   href?: string;
 }) => (
-  <Link
+  <ChakraLink
     px={2}
     py={1}
     rounded={"md"}
@@ -38,7 +38,7 @@ const NavLink = ({
     style={{ fontWeight: "500" }}
   >
     {children}
-  </Link>
+  </ChakraLink>
 );
 
 interface Props {

frontend/src/pages/SignupPage.tsx

@@ -42,7 +42,8 @@ const SignupPage = ({
       username === "" ||
       email === "" ||
       password === "" ||
-      confirmPassword === ""
+      confirmPassword === "" ||
+      username === ""
     ) {
       alert("Please fill out all fields");
       return;
@@ -75,6 +76,7 @@ const SignupPage = ({
               "Content-Type": "application/json",
             },
             body: JSON.stringify({ username, password }),
+
           });
           if (login.status === 200) {
             const data = await login.json();