-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #127 from Gather307/72-create-the-add-basket-compo…
…nent Everybody say HURRAH for merge!
- Loading branch information
Showing
14 changed files
with
483 additions
and
141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| import React, { useState, useEffect } from "react"; | ||
| import { | ||
| Button, | ||
| Popover, | ||
| PopoverTrigger, | ||
| PopoverContent, | ||
| PopoverHeader, | ||
| PopoverBody, | ||
| PopoverFooter, | ||
| PopoverCloseButton, | ||
| PopoverArrow, | ||
| } from "@chakra-ui/react"; | ||
| import { IUser } from "../../../backend/models/userSchema"; | ||
|
|
||
| interface Props { | ||
| basketId: string; | ||
| memberid: IUser[]; | ||
| currentUserId: string | undefined; // Add a prop for the current user's ID | ||
| } | ||
|
|
||
| // Uses member ids that are passed in from basket.tsx | ||
| const AddFriendToBasket: React.FC<Props> = ({ | ||
| basketId, | ||
| memberid, | ||
| currentUserId, | ||
| }) => { | ||
| // Initialize the members state with the filtered memberid prop | ||
| const [members, setMembers] = useState<IUser[]>(() => | ||
| memberid.filter((member) => member._id.toString() !== currentUserId), | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| // This effect runs when memberid prop changes | ||
| setMembers( | ||
| memberid.filter((member) => member._id.toString() !== currentUserId), | ||
| ); | ||
| }, [memberid, currentUserId]); | ||
|
|
||
| // Function to handle button click and log members to the console | ||
| const handleLogMembers = () => { | ||
| console.log("Members:", members); | ||
| }; | ||
| const AddToBasket = async (basketId: string, friendId: string) => { | ||
| try { | ||
| const res = await fetch(`http://localhost:3001/baskets/${basketId}`); | ||
| let basket; | ||
| if (res.ok) { | ||
| basket = await res.json(); | ||
| if (!basket.members.includes(friendId)) { | ||
| basket.members.push(friendId); | ||
| console.log("Pushed friend ID to basket's member list"); | ||
| const updatedRes1 = await fetch( | ||
| `http://localhost:3001/baskets/${basketId}`, | ||
| { | ||
| method: "PATCH", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| body: JSON.stringify({ members: basket.members }), | ||
| }, | ||
| ); | ||
| if (updatedRes1.ok) { | ||
| console.log("Friend added to group's member list successfully"); | ||
| } else { | ||
| console.error("Failed to update group"); | ||
| } | ||
| } else { | ||
| console.log("Friend is already in basket"); | ||
| } | ||
| } else { | ||
| console.log("Basket not Found"); | ||
| } | ||
| } catch (error) { | ||
| console.error("Error adding friend:", error); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Popover> | ||
| <PopoverTrigger> | ||
| <Button | ||
| bgColor="var(--col-secondary)" | ||
| color="white" | ||
| _hover={{ | ||
| bg: "var(--col-tertiary)", | ||
| color: "var(--col-dark)", | ||
| }} | ||
| onClick={handleLogMembers} | ||
| > | ||
| Add Users | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent | ||
| bg="var(--col-bright)" | ||
| color="var(--col-dark)" | ||
| border="2px" | ||
| borderColor="var(--col-dark)" | ||
| > | ||
| <PopoverArrow /> | ||
| <PopoverCloseButton /> | ||
| <PopoverHeader fontWeight="bold">Members</PopoverHeader> | ||
| <PopoverBody> | ||
| <ul> | ||
| {members.map((member) => ( | ||
| <li | ||
| key={member._id.toString()} | ||
| style={{ | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| alignItems: "center", | ||
| padding: "5px", | ||
| }} | ||
| > | ||
| <span>{member.username}</span> | ||
| <Button | ||
| size="sm" | ||
| onClick={() => AddToBasket(basketId, member._id.toString())} | ||
| > | ||
| Add to Basket | ||
| </Button> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </PopoverBody> | ||
| <PopoverFooter></PopoverFooter> | ||
| </PopoverContent> | ||
| </Popover> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AddFriendToBasket; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.