From 0da533495cba3e86f08c53a67de05ed49bf14337 Mon Sep 17 00:00:00 2001 From: Zach Mattes Date: Thu, 30 May 2024 10:45:39 -0700 Subject: [PATCH 1/4] made send invite button --- frontend/src/components/EditBasket.tsx | 4 + frontend/src/components/SendInvite.tsx | 166 +++++++++++++++++++++ frontend/src/pages/IndividualGroupPage.tsx | 59 ++++++-- 3 files changed, 217 insertions(+), 12 deletions(-) create mode 100644 frontend/src/components/SendInvite.tsx diff --git a/frontend/src/components/EditBasket.tsx b/frontend/src/components/EditBasket.tsx index 5012766..7915f23 100644 --- a/frontend/src/components/EditBasket.tsx +++ b/frontend/src/components/EditBasket.tsx @@ -77,6 +77,10 @@ const EditBasket: React.FC = ({ basketId }) => { } catch (error) { console.error("There was an error deleting the basket", error); } + + + + }; const handleSaveChanges = async () => { diff --git a/frontend/src/components/SendInvite.tsx b/frontend/src/components/SendInvite.tsx new file mode 100644 index 0000000..c19a9c9 --- /dev/null +++ b/frontend/src/components/SendInvite.tsx @@ -0,0 +1,166 @@ +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 { + groupId: string | undefined; + friends: IUser[]; + members: IUser[]; + } + + const SendInviteToGroup: React.FC = ({ + groupId, + friends, + members, + }) => { + + // Create a set of member IDs for efficient lookup const memberIds = new Set(members.map(member => member._id)); + const memberIds = new Set(members.map(member => member._id)); + // Initialize the friends state with the filtered friends prop + const [friendsNotInGroup, setFriendsNotInGroup] = useState(() => + friends.filter(friend => !memberIds.has(friend._id)), +); + +useEffect(() => { + // This effect runs when friends or members prop changes + const memberIds = new Set(members.map(member => member._id)); + setFriendsNotInGroup(friends.filter(friend => !memberIds.has(friend._id))); +}, [friends, members]); + + // Function to handle button click and log members to the console + const handleLogMembers = () => { + console.log("friends:", friendsNotInGroup); + console.log("friend Users:", friends) + }; + const addToGroup = async (friendId: string, groupId: string | undefined) => { + try { + const res1 = await fetch(`http://localhost:3001/groups/${groupId}`); + + const res = await fetch(`http://localhost:3001/users/${friendId}`); + let friend; + let group; + if (res.ok && res1.ok) { + friend = await res.json(); + group = await res1.json(); + if (!group.members.includes(friendId)) { + group.members.push(friendId); + console.log("Pushed friend ID to group's member list"); + const updatedRes1 = await fetch( + `http://localhost:3001/groups/${groupId}`, + { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ members: group.members }), + }, + ); + if (updatedRes1.ok) { + console.log("Friend added to group's member list successfully"); + } else { + console.error("Failed to update group"); + } + } + if (!friend.groups.includes(groupId)) { + friend.groups.push(groupId); + console.log("Pushed to list"); + + const updatedRes = await fetch( + `http://localhost:3001/users/${friendId}`, + { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ groups: friend.groups }), + }, + ); + if (updatedRes.ok) { + console.log("Friend added to group successfully"); + } else { + console.error("Failed to update user"); + } + } else { + console.log("Friend is already in group"); + } + } else { + console.log("Group not Found"); + } + } catch (error) { + console.error("Error adding friend:", error); + } + }; + + return ( +
+ + + + + + + + Members + + {friendsNotInGroup.length > 0 ? ( +
    + {friendsNotInGroup.map((friend) => ( +
  • + {friend.username} + +
    • + ))} +
+ ) : ( +

No friends to add

+ )} + + + + +
+ ); +}; + +export default SendInviteToGroup; diff --git a/frontend/src/pages/IndividualGroupPage.tsx b/frontend/src/pages/IndividualGroupPage.tsx index d6f6b67..51048fe 100644 --- a/frontend/src/pages/IndividualGroupPage.tsx +++ b/frontend/src/pages/IndividualGroupPage.tsx @@ -20,9 +20,10 @@ import { IUser } from "../../../backend/models/userSchema"; import BasketComp, { Basket } from "../components/Basket"; import Editgroup from "../components/EditGroup"; import NewBasketOptions from "../components/NewBasketOptions"; +import SendInviteToGroup from "../components/SendInvite"; type Props = { - LoggedInUser: IUser | null; + LoggedInUser: IUser; }; const IndividualGroupPage: React.FC = ({ LoggedInUser }) => { @@ -30,8 +31,46 @@ const IndividualGroupPage: React.FC = ({ LoggedInUser }) => { const [group, setGroup] = useState(null); const [loading, setLoading] = useState(true); const [members, setMembers] = useState([]); + const [friends, setFriends] = useState([]); const [baskets, setBaskets] = useState([]); const navigate = useNavigate(); + console.log(LoggedInUser); + console.log(friends); + + + const fetchFriends = async (friendIds: string[]) => { + try { + const fetchedFriends = await Promise.all( + friendIds.map(async (friendId) => { + const res = await fetch(`http://localhost:3001/users/${friendId}`); + if (res.ok) { + return res.json(); + } else { + throw new Error(`Failed to fetch friends: ${res.statusText}`); + } + }), + ); + setFriends(fetchedFriends); + } catch (err) { + console.error(err); + } + }; + + const fetchUsersFriends =async () => { + try { + const fetchedUser = await fetch( + `http://localhost:3001/users/${LoggedInUser._id}`, + ); + if (fetchedUser.ok) { + const data = await fetchedUser.json(); + fetchFriends(data.friends) + } else { + throw new Error(`Failed to fetch User: ${fetchedUser.statusText}`); + } + } catch (err) { + console.error(err); + } + } const fetchGroup = async () => { try { @@ -41,6 +80,7 @@ const IndividualGroupPage: React.FC = ({ LoggedInUser }) => { if (fetchedGroup.ok) { const data = await fetchedGroup.json(); setGroup(data); + fetchMembers(data.members); fetchBaskets(data.baskets); setLoading(false); @@ -90,6 +130,7 @@ const IndividualGroupPage: React.FC = ({ LoggedInUser }) => { useEffect(() => { fetchGroup(); + fetchUsersFriends(); }, [groupId]); return ( @@ -123,17 +164,11 @@ const IndividualGroupPage: React.FC = ({ LoggedInUser }) => { flexDirection={{ base: "column", md: "row" }} mt={{ base: 4, md: 0 }} > - + } /> Date: Thu, 30 May 2024 10:48:03 -0700 Subject: [PATCH 2/4] prettier --- frontend/src/components/EditBasket.tsx | 4 - frontend/src/components/SendInvite.tsx | 93 +++++++++++----------- frontend/src/pages/IndividualGroupPage.tsx | 19 +++-- 3 files changed, 54 insertions(+), 62 deletions(-) diff --git a/frontend/src/components/EditBasket.tsx b/frontend/src/components/EditBasket.tsx index 7915f23..5012766 100644 --- a/frontend/src/components/EditBasket.tsx +++ b/frontend/src/components/EditBasket.tsx @@ -77,10 +77,6 @@ const EditBasket: React.FC = ({ basketId }) => { } catch (error) { console.error("There was an error deleting the basket", error); } - - - - }; const handleSaveChanges = async () => { diff --git a/frontend/src/components/SendInvite.tsx b/frontend/src/components/SendInvite.tsx index c19a9c9..ac9012c 100644 --- a/frontend/src/components/SendInvite.tsx +++ b/frontend/src/components/SendInvite.tsx @@ -11,36 +11,33 @@ import { PopoverArrow, } from "@chakra-ui/react"; import { IUser } from "../../../backend/models/userSchema"; - - interface Props { - groupId: string | undefined; - friends: IUser[]; - members: IUser[]; - } - - const SendInviteToGroup: React.FC = ({ - groupId, - friends, - members, - }) => { - // Create a set of member IDs for efficient lookup const memberIds = new Set(members.map(member => member._id)); - const memberIds = new Set(members.map(member => member._id)); +interface Props { + groupId: string | undefined; + friends: IUser[]; + members: IUser[]; +} + +const SendInviteToGroup: React.FC = ({ groupId, friends, members }) => { + // Create a set of member IDs for efficient lookup const memberIds = new Set(members.map(member => member._id)); + const memberIds = new Set(members.map((member) => member._id)); // Initialize the friends state with the filtered friends prop const [friendsNotInGroup, setFriendsNotInGroup] = useState(() => - friends.filter(friend => !memberIds.has(friend._id)), -); + friends.filter((friend) => !memberIds.has(friend._id)), + ); -useEffect(() => { - // This effect runs when friends or members prop changes - const memberIds = new Set(members.map(member => member._id)); - setFriendsNotInGroup(friends.filter(friend => !memberIds.has(friend._id))); -}, [friends, members]); + useEffect(() => { + // This effect runs when friends or members prop changes + const memberIds = new Set(members.map((member) => member._id)); + setFriendsNotInGroup( + friends.filter((friend) => !memberIds.has(friend._id)), + ); + }, [friends, members]); // Function to handle button click and log members to the console const handleLogMembers = () => { console.log("friends:", friendsNotInGroup); - console.log("friend Users:", friends) + console.log("friend Users:", friends); }; const addToGroup = async (friendId: string, groupId: string | undefined) => { try { @@ -130,32 +127,32 @@ useEffect(() => { Members - {friendsNotInGroup.length > 0 ? ( -
    - {friendsNotInGroup.map((friend) => ( -
  • - {friend.username} - -
    • - ))} -
- ) : ( -

No friends to add

- )} - + {friendsNotInGroup.length > 0 ? ( +
    + {friendsNotInGroup.map((friend) => ( +
  • + {friend.username} + +
    • + ))} +
+ ) : ( +

No friends to add

+ )} + diff --git a/frontend/src/pages/IndividualGroupPage.tsx b/frontend/src/pages/IndividualGroupPage.tsx index 51048fe..af294c7 100644 --- a/frontend/src/pages/IndividualGroupPage.tsx +++ b/frontend/src/pages/IndividualGroupPage.tsx @@ -37,7 +37,6 @@ const IndividualGroupPage: React.FC = ({ LoggedInUser }) => { console.log(LoggedInUser); console.log(friends); - const fetchFriends = async (friendIds: string[]) => { try { const fetchedFriends = await Promise.all( @@ -56,21 +55,21 @@ const IndividualGroupPage: React.FC = ({ LoggedInUser }) => { } }; - const fetchUsersFriends =async () => { + const fetchUsersFriends = async () => { try { const fetchedUser = await fetch( `http://localhost:3001/users/${LoggedInUser._id}`, ); if (fetchedUser.ok) { const data = await fetchedUser.json(); - fetchFriends(data.friends) + fetchFriends(data.friends); } else { - throw new Error(`Failed to fetch User: ${fetchedUser.statusText}`); - } - } catch (err) { - console.error(err); + throw new Error(`Failed to fetch User: ${fetchedUser.statusText}`); } - } + } catch (err) { + console.error(err); + } + }; const fetchGroup = async () => { try { @@ -164,8 +163,8 @@ const IndividualGroupPage: React.FC = ({ LoggedInUser }) => { flexDirection={{ base: "column", md: "row" }} mt={{ base: 4, md: 0 }} > - From fe547d7537ec6a87329d79146b4f66c099807515 Mon Sep 17 00:00:00 2001 From: Zach Mattes Date: Thu, 30 May 2024 10:54:29 -0700 Subject: [PATCH 3/4] changed members to Friends... --- frontend/src/components/SendInvite.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/SendInvite.tsx b/frontend/src/components/SendInvite.tsx index ac9012c..d150333 100644 --- a/frontend/src/components/SendInvite.tsx +++ b/frontend/src/components/SendInvite.tsx @@ -125,7 +125,7 @@ const SendInviteToGroup: React.FC = ({ groupId, friends, members }) => { > - Members + Friends not in this Group {friendsNotInGroup.length > 0 ? (
    From b6604d6967b4192fcff6f0a6c6f1ceffa75c9f2c Mon Sep 17 00:00:00 2001 From: Zach Mattes Date: Thu, 30 May 2024 11:00:28 -0700 Subject: [PATCH 4/4] fixed CI --- frontend/src/App.tsx | 2 +- frontend/src/pages/IndividualGroupPage.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6657a80..86cfe34 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -117,7 +117,7 @@ function App() { } - />{" "} + /> {/* added route for individual group page */} = ({ LoggedInUser }) => { @@ -58,7 +58,7 @@ const IndividualGroupPage: React.FC = ({ LoggedInUser }) => { const fetchUsersFriends = async () => { try { const fetchedUser = await fetch( - `http://localhost:3001/users/${LoggedInUser._id}`, + `http://localhost:3001/users/${LoggedInUser?._id}`, ); if (fetchedUser.ok) { const data = await fetchedUser.json();