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 */} = ({ 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 ( +
+ + + + + + + + Friends not in this Group + + {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..815a86f 100644 --- a/frontend/src/pages/IndividualGroupPage.tsx +++ b/frontend/src/pages/IndividualGroupPage.tsx @@ -20,6 +20,7 @@ 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; @@ -30,8 +31,45 @@ 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 +79,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 +129,7 @@ const IndividualGroupPage: React.FC = ({ LoggedInUser }) => { useEffect(() => { fetchGroup(); + fetchUsersFriends(); }, [groupId]); return ( @@ -123,17 +163,11 @@ const IndividualGroupPage: React.FC = ({ LoggedInUser }) => { flexDirection={{ base: "column", md: "row" }} mt={{ base: 4, md: 0 }} > - + } />