add username works + profile pg ui

backend/routes/userRoutes.ts

@@ -62,6 +62,27 @@ router.get(
   },
 );
 
+router.get(
+  "/username/:username",
+  authenticateUser,
+  async (req: Request, res: Response) => {
+    connectDB();
+
+    try {
+      console.log("Username received:", req.params.username); // Add logging
+      const user = await User.findOne({ username: req.params.username });
+      if (!user) {
+        return res.status(404).send("User not found");
+      }
+      res.send(user);
+    } catch (error) {
+      console.error("Error fetching user by username:", error);
+      res.status(500).send("Internal Server Error");
+    }
+  },
+);
+
+
 router.post("/", async (req: Request, res: Response) => {
   connectDB();
   let { username, email, password, firstName, lastName } = req.body;

frontend/lib/deletes.tsx

@@ -3,8 +3,8 @@ import { IBasket } from "../../backend/models/basketSchema";
 import { IItem } from "../../backend/models/itemSchema";
 import { fetchGroup } from "./fetches";
 
-// const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
-const vite_backend_url = "https://gather-app-307.azurewebsites.net";
+const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
+// const vite_backend_url = "https://gather-app-307.azurewebsites.net";
 const token = localStorage.getItem("token");
 
 export const handleDeleteGroup = async (groupId: string) => {

frontend/lib/edits.tsx

@@ -5,8 +5,8 @@ import { IUser } from "../../backend/models/userSchema";
 import { IGroup } from "../../backend/models/groupSchema";
 import { fetchBasket } from "./fetches";
 
-// const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
-const vite_backend_url = "https://gather-app-307.azurewebsites.net";
+const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
+// const vite_backend_url = "https://gather-app-307.azurewebsites.net";
 type updatedGroup = {
   groupName: string;
   description: string;

frontend/lib/fetches.tsx

@@ -4,8 +4,8 @@ import { IBasket } from "../../backend/models/basketSchema";
 import { ObjectId } from "mongoose";
 import { addUserToGroup, addGroupToUser } from "./edits";
 
-// const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
-const vite_backend_url = "https://gather-app-307.azurewebsites.net";
+const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
+// const vite_backend_url = "https://gather-app-307.azurewebsites.net";
 
 export const fetchBasket = async (basketId: string) => {
   return fetch(`${vite_backend_url}/baskets/${basketId}`, {
@@ -251,3 +251,12 @@ export const loginUser = async (credentials: {
   });
   return res;
 };
+
+export const fetchUserByUsername = async (username: string) => {
+  return fetch(`${vite_backend_url}/users/username/${username}`, {
+    headers: {
+      Authorization: `Bearer ${localStorage.getItem("token")}`,
+    },
+  });
+};
+

frontend/lib/posts.tsx

@@ -1,7 +1,7 @@
 import { ObjectId } from "mongoose";
 
-// const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
-const vite_backend_url = "https://gather-app-307.azurewebsites.net";
+const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
+// const vite_backend_url = "https://gather-app-307.azurewebsites.net";
 console.log("Backend URL:", vite_backend_url);
 
 type newUser = {

frontend/src/App.tsx

@@ -13,8 +13,8 @@ import { IUser } from "../../backend/models/userSchema";
 import MoveLetters from "./components/moveLetters";
 import theme from "./theme";
 
-// const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
-const vite_backend_url = "https://gather-app-307.azurewebsites.net";
+const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
+// const vite_backend_url = "https://gather-app-307.azurewebsites.net";
 
 console.log("Backend URL:", vite_backend_url);
 

frontend/src/components/Friends_List_Component.tsx

@@ -1,5 +1,5 @@
+import { DeleteIcon } from "@chakra-ui/icons";
 import React, { useState, useEffect } from "react";
-import { FaTrashCan } from "react-icons/fa6";
 import { FaChevronDown } from "react-icons/fa";
 import {
   Table,
@@ -25,7 +25,7 @@ import {
   fetchUser,
   fetchUserGroupsByUser,
   fetchUserFriendsByUser,
-  fetchUserWithString,
+  fetchUserByUsername,
 } from "../../lib/fetches";
 import { removeFriendFromUserByFriendId } from "../../lib/deletes";
 import { addFriendToGroup } from "../../lib/fetches";
@@ -41,7 +41,6 @@ const Friends_List: React.FC<Props> = ({
   initialUserId = "",
   LoggedInUser,
 }) => {
-  //hard coded for now until we have log in logic
   const [groups, setGroups] = useState<IGroup[]>([]);
   const [friends, setFriends] = useState<IUser[]>([]);
   const [userId, setUserId] = useState(initialUserId);
@@ -75,7 +74,6 @@ const Friends_List: React.FC<Props> = ({
   const removeFriend = async (friendId: string) => {
     try {
       console.log(friendId);
-      // Assuming you have the userId available in your state or props
       await removeFriendFromUserByFriendId(friendId, LoggedInUser);
       setFriends(
         friends.filter((friend) => friend._id.toString() !== friendId),
@@ -85,14 +83,14 @@ const Friends_List: React.FC<Props> = ({
     }
   };
 
-  const addFriend = async (userId: string) => {
+  const addFriend = async (username: string) => {
     try {
-      console.log(userId);
-      if (userId == LoggedInUser) {
+      console.log(username);
+      if (username === LoggedInUser.username) {
         console.log("Cannot add yourself as friend");
       } else {
-        const res = await fetchUserWithString(userId);
-        const res2 = await fetchUser(LoggedInUser);
+        const res = await fetchUserByUsername(username);
+        const res2 = await fetchUser(LoggedInUser._id);
         let user;
         let friend;
         if (res.ok && res2.ok) {
@@ -128,14 +126,14 @@ const Friends_List: React.FC<Props> = ({
     event.preventDefault();
     try {
       console.log("handleClick:", userId);
-      if (userId == "") {
-        console.log("User is null and cannot be added");
+      if (userId === "") {
+        console.log("Username is null and cannot be added");
       } else {
         await addFriend(userId);
         setUserId("");
       }
     } catch (error) {
-      console.error("Invalid user ID");
+      console.error("Invalid username");
     }
   };
 
@@ -162,11 +160,11 @@ const Friends_List: React.FC<Props> = ({
         <FormControl>
           <Stack direction="row" spacing={4}>
             <Input
-              placeholder="Enter friend's user ID"
+              placeholder="Enter friend's username"
               value={userId}
               onChange={(e) => setUserId(e.target.value)}
             />
-            <Button colorScheme="blue" onClick={handleClick}>
+            <Button colorScheme="teal" onClick={handleClick}>
               Add Friend
             </Button>
           </Stack>
@@ -191,13 +189,13 @@ const Friends_List: React.FC<Props> = ({
                     alignItems="center"
                   >
                     <Menu>
-                      <MenuButton as={Button} rightIcon={<FaChevronDown />}>
+                      <MenuButton as={Button} colorScheme="teal" rightIcon={<FaChevronDown />}>
                         Add to Group
                       </MenuButton>
-                      <MenuList>
+                      <MenuList bg="#dfe2e1">
                         {groups.length > 0 ? (
                           groups.map((group) => (
-                            <MenuItem
+                            <MenuItem bg="#dfe2e1" _hover={{ bg: "#bfc2c1" }}
                               key={group._id.toString()}
                               onClick={() =>
                                 handleGroupClick(
@@ -217,8 +215,8 @@ const Friends_List: React.FC<Props> = ({
                   </Box>
                 </Td>
                 <Td>
-                  <Button onClick={() => removeFriend(friend._id.toString())}>
-                    <FaTrashCan />
+                  <Button colorScheme="red" onClick={() => removeFriend(friend._id.toString())}>
+                    <DeleteIcon />
                   </Button>
                 </Td>
               </Tr>

frontend/src/components/UserProfile.tsx

@@ -35,7 +35,7 @@ const UserProfile: React.FC<UserProfileProps> = ({ userId }) => {
   const [editedFirstName, setEditedFirstName] = useState("");
   const [editedLastName, setEditedLastName] = useState("");
 
-  const { hasCopied, onCopy } = useClipboard(profileData.userId);
+  const { hasCopied, onCopy } = useClipboard(profileData.username);
 
   useEffect(() => {
     const fetchUserProfile = async () => {
@@ -88,9 +88,6 @@ const UserProfile: React.FC<UserProfileProps> = ({ userId }) => {
     }
   };
 
-  // const initials =
-  //   `${profileData.firstName[0]}${profileData.lastName[0]}`.toUpperCase();
-
   return (
     <Box bg="white" borderRadius="md" boxShadow="md" p={6} mb={4}>
       <Flex justifyContent="center" mb={4}>
@@ -119,7 +116,7 @@ const UserProfile: React.FC<UserProfileProps> = ({ userId }) => {
               onChange={(e) => setEditedLastName(e.target.value)}
             />
           </FormControl>
-          <Button colorScheme="blue" mt={4} onClick={handleSaveChanges}>
+          <Button colorScheme="teal" mt={4} onClick={handleSaveChanges}>
             Save Changes
           </Button>
           <Button mt={2} onClick={() => setIsEditing(false)}>
@@ -130,7 +127,7 @@ const UserProfile: React.FC<UserProfileProps> = ({ userId }) => {
         <Stack spacing={4}>
           <Flex alignItems="center">
             <Text>
-              <strong>User ID:</strong> {profileData.userId}
+              <strong>Username:</strong> {profileData.username}
             </Text>
             <Tooltip
               label={hasCopied ? "Copied!" : "Copy"}
@@ -142,13 +139,10 @@ const UserProfile: React.FC<UserProfileProps> = ({ userId }) => {
                 ml={2}
                 icon={<CopyIcon />}
                 onClick={onCopy}
-                aria-label="Copy User ID"
+                aria-label="Copy Username"
               />
             </Tooltip>
           </Flex>
-          <Text>
-            <strong>Username:</strong> {profileData.username}
-          </Text>
           <Text>
             <strong>First Name:</strong> {profileData.firstName}
           </Text>
@@ -158,7 +152,7 @@ const UserProfile: React.FC<UserProfileProps> = ({ userId }) => {
           <Text>
             <strong>Email:</strong> {profileData.userEmail}
           </Text>
-          <Button colorScheme="blue" mt={4} onClick={() => setIsEditing(true)}>
+          <Button colorScheme="teal" mt={4} onClick={() => setIsEditing(true)}>
             Edit Profile
           </Button>
         </Stack>

frontend/src/pages/IndividualGroupPage.tsx

@@ -30,8 +30,8 @@ import NewBasketOptions from "../components/NewBasketOptions";
 import SendInviteToGroup from "../components/SendInvite";
 import { fetchUserWithString } from "../../lib/fetches";
 
-// const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
-const vite_backend_url = "https://gather-app-307.azurewebsites.net";
+const vite_backend_url = import.meta.env.VITE_BACKEND_URL as string;
+// const vite_backend_url = "https://gather-app-307.azurewebsites.net";
 
 type Props = {
   LoggedInUser: IUser | null;

frontend/src/pages/ProfilePage.tsx

@@ -17,7 +17,7 @@ const ProfilePage: React.FC<ProfilePageProps> = ({ LoggedInUser }) => {
   });
 
   return (
-    <Box bg="gray.100" color="gray.800" minH="93vh" p={4} overflowY={"auto"}>
+    <Box bg="#dfe2e1" color="gray.800" minH="93vh" p={4} overflowY={"auto"}>
       <Grid
         templateColumns={{ base: "1fr", md: "2fr 3fr" }}
         height="100%"