Merge pull request #122 from Gather307/116-add-baskets-to-individual-…

…group-page

Add baskets to individual group page

backend/routes/basketRoutes.ts

@@ -8,11 +8,11 @@ const router = express.Router();
 router.get("/", async (req: Request, res: Response) => {
   connectDB();
   try {
-    const users = await Basket.find({});
-    if (users.length === 0) {
-      res.status(404).send("No baskets found"); // Return a 404 status code if no users are found
+    const baskets = await Basket.find({});
+    if (baskets.length === 0) {
+      res.status(404).send("No baskets found"); // Return a 404 status code if no baskets are found
     } else {
-      res.send(users); // Return the found users
+      res.send(baskets); // Return the found baskets
     }
   } catch (error) {
     res.status(500).send("Internal Server Error"); // Handle any unexpected errors
@@ -29,30 +29,25 @@ router.get("/:basketid", async (req: Request, res: Response) => {
 
     // Check if basket is null or undefined
     if (!basketById) {
-      return res.status(404).send("No basket found"); // Use return to exit the function after sending the response
-    }
-
-    // Send the found user
-    res.send(basketById);
-    console.log("Sent Basket:", basketById);
-  } catch (error) {
-    console.log("Now trying to find by BasketName");
-    try {
+      // If not found by ObjectId, try to find by basketName
       const basketsByName = await Basket.find({
         basketName: req.params.basketid,
       });
-      console.log(basketsByName);
-      if (!basketsByName) {
+
+      if (!basketsByName.length) {
         return res.status(404).send("No baskets found"); // Use return to exit the function after sending the response
       }
 
-      // Send the found user
-      res.send(basketsByName);
-      console.log("Sent Baskets", basketsByName);
-    } catch (error) {
-      console.error("Error fetching basket:", error); // Log the error for debugging
-      res.status(500).send("Internal Server Error");
+      // Send the found baskets
+      return res.send(basketsByName);
     }
+
+    // Send the found basket by ObjectId
+    res.send(basketById);
+    console.log("Sent Basket:", basketById);
+  } catch (error) {
+    console.error("Error fetching basket:", error); // Log the error for debugging
+    res.status(500).send("Internal Server Error");
   }
 });
 
@@ -84,9 +79,9 @@ router.post("/", async (req: Request, res: Response) => {
 });
 
 router.patch("/:id", async (req: Request, res: Response) => {
-  // Get user ID from URL
+  // Get basket ID from URL
   const { id } = req.params;
-  const updatedData: Partial<IBasket> = req.body; //Not a full update only partial
+  const updatedData: Partial<IBasket> = req.body; // Not a full update, only partial
 
   try {
     connectDB();
@@ -113,7 +108,7 @@ router.delete("/:id", async (req: Request, res: Response) => {
     const basket = await Basket.findByIdAndDelete(id);
 
     if (!basket) {
-      return res.status(404).send({ message: "basket not found" });
+      return res.status(404).send({ message: "Basket not found" });
     }
 
     res.status(200).send({ message: "Basket Deleted Successfully", basket });

frontend/src/components/Basket.tsx

@@ -14,6 +14,7 @@ import "../styles/Basket.css";
 import NewItemOptions from "./NewItemOptions";
 
 export interface Basket {
+  _id: string; // added id
   basketName: string;
   description: string;
   memberIds: string[];
@@ -34,19 +35,20 @@ const BasketComp = ({ basketId, stateObj, isOwnerView }: Props) => {
     isErrored: false,
   });
 
-  const fetchItem = () => {
+  const fetchBasket = () => {
     return fetch(`http://localhost:3001/baskets/${basketId}`);
   };
 
   useEffect(() => {
-    fetchItem()
+    fetchBasket()
       .then((res) =>
         res.status === 200
           ? res.json()
-          : Promise.reject(`Error code ${res.status}`),
+          : Promise.reject(`Error code ${res.status}`)
       )
       .then((data) => {
         setBasket({
+          _id: data._id, // added id
           basketName: data.basketName,
           description: data.description,
           itemIds: data.items,
@@ -55,7 +57,7 @@ const BasketComp = ({ basketId, stateObj, isOwnerView }: Props) => {
         });
       })
       .catch((err) => {
-        console.log("Terrible error occured!", err);
+        console.log("Error: ", err);
         setError({
           msg: err,
           isErrored: true,
@@ -171,7 +173,7 @@ const BasketComp = ({ basketId, stateObj, isOwnerView }: Props) => {
           <NewItemOptions basket={basketId} updateBasket={setBasket} />
         </Flex>
         <Divider borderColor="black" marginTop="1%" />
-        <VStack>
+        <VStack spacing="5px">
           {basketObj.itemIds !== undefined ? (
             basketObj.itemIds?.map((item) => {
               return (

frontend/src/components/BasketItem.tsx

@@ -33,7 +33,7 @@ const BasketItem = ({ itemId, basketMemberView }: Props) => {
       .then((res) =>
         res.status === 200
           ? res.json()
-          : Promise.reject(`Error code ${res.status}`),
+          : Promise.reject(`Error code ${res.status}`)
       )
       .then((data) => {
         setItem({
@@ -62,7 +62,7 @@ const BasketItem = ({ itemId, basketMemberView }: Props) => {
   }
 
   return (
-    <Box w="100%" overflow="hidden" margin="1rem" className="b-item">
+    <Box w="100%" overflow="hidden" margin="0.5rem" className="b-item">
       {loading ? (
         <Flex>
           <Box>

frontend/src/pages/IndividualGroupPage.tsx

@@ -17,23 +17,26 @@ import {
 import { IoArrowBack, IoSearch } from "react-icons/io5";
 import { IGroup } from "../../../backend/models/groupSchema";
 import { IUser } from "../../../backend/models/userSchema";
+import BasketComp, { Basket } from "../components/Basket";
 
 function IndividualGroupPage() {
   const { groupId } = useParams<{ groupId: string }>();
   const [group, setGroup] = useState<IGroup | null>(null);
   const [loading, setLoading] = useState(true);
   const [members, setMembers] = useState<IUser[]>([]);
+  const [baskets, setBaskets] = useState<Basket[]>([]);
   const navigate = useNavigate();
 
   const fetchGroup = async () => {
     try {
       const fetchedGroup = await fetch(
-        `http://localhost:3001/groups/${groupId}`,
+        `http://localhost:3001/groups/${groupId}`
       );
       if (fetchedGroup.ok) {
         const data = await fetchedGroup.json();
         setGroup(data);
         fetchMembers(data.members);
+        fetchBaskets(data.baskets);
         setLoading(false);
       } else {
         throw new Error(`Failed to fetch group: ${fetchedGroup.statusText}`);
@@ -53,14 +56,32 @@ function IndividualGroupPage() {
           } else {
             throw new Error(`Failed to fetch user: ${res.statusText}`);
           }
-        }),
+        })
       );
       setMembers(fetchedMembers);
     } catch (err) {
       console.error(err);
     }
   };
 
+  const fetchBaskets = async (basketIds: string[]) => {
+    try {
+      const fetchedBaskets = await Promise.all(
+        basketIds.map(async (basketId) => {
+          const res = await fetch(`http://localhost:3001/baskets/${basketId}`);
+          if (res.ok) {
+            return res.json();
+          } else {
+            throw new Error(`Failed to fetch basket: ${res.statusText}`);
+          }
+        })
+      );
+      setBaskets(fetchedBaskets);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   useEffect(() => {
     fetchGroup();
   }, [groupId]);
@@ -133,7 +154,7 @@ function IndividualGroupPage() {
               width="99%"
               padding="20px"
               borderWidth="1px"
-              borderRadius="md"
+              borderRadius="2xl"
               backgroundColor="rgba(255, 255, 255, 0.8)"
             >
               <VStack align="stretch" spacing={4}>
@@ -211,23 +232,20 @@ function IndividualGroupPage() {
                   </Box>
                 </HStack>
               </VStack>
-            </Box>
-            <Box mt={8} width="99%">
-              <Heading size="md">Baskets Component</Heading>
-              <Text mt={2}>This is where the Baskets component will go!</Text>
-              <Box overflowY="auto" maxHeight="300px" mt={4}>
-                {/* Replace with actual basket items */}
-                <VStack spacing={4} align="stretch">
-                  <Box padding="10px" borderWidth="1px" borderRadius="md">
-                    Basket Item 1
-                  </Box>
-                  <Box padding="10px" borderWidth="1px" borderRadius="md">
-                    Basket Item 2
-                  </Box>
-                  <Box padding="10px" borderWidth="1px" borderRadius="md">
-                    Basket Item 3
-                  </Box>
-                </VStack>
+              <Box mt={8} width="99%">
+                <Heading size="xl">Baskets</Heading>
+                <Box overflowY="auto" maxHeight="300px" mt={4}>
+                  <VStack spacing={4} align="stretch">
+                    {baskets.map((basket) => (
+                      <BasketComp
+                        key={basket.basketName}
+                        basketId={basket._id}
+                        stateObj={{ user: members, token: "your-token-here" }}
+                        isOwnerView={false} // Adjust this
+                      />
+                    ))}
+                  </VStack>
+                </Box>
               </Box>
             </Box>
           </>

frontend/src/styles/index.css

@@ -4,7 +4,6 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
 
   font-synthesis: none;