diff --git a/client/src/components/DoomBuddies/ProfileSearchBar.js b/client/src/components/DoomBuddies/ProfileSearchBar.js
index c036462..7c10769 100644
--- a/client/src/components/DoomBuddies/ProfileSearchBar.js
+++ b/client/src/components/DoomBuddies/ProfileSearchBar.js
@@ -1,11 +1,12 @@
-import { TextField, InputAdornment, IconButton, Menu, MenuItem, Popper, ListItemIcon, ListItemText, ClickAwayListener } from "@mui/material";
+import { TextField, InputAdornment, IconButton, MenuItem, Popper, ListItemIcon, ListItemText, ClickAwayListener } from "@mui/material";
import SearchIcon from '@mui/icons-material/Search';
import PersonIcon from '@mui/icons-material/Person';
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
-export default function ProfileSearchBar() {
- // TODO: Empty string shows all search results in database
+export default function ProfileSearchBar({ currentFriends = false, notFriends = false }) {
+ // By default, displays all users in the database
+ // Can specify filter for search results based on props
const [searchInput, setSearchInput] = useState("");
const [searchResults, setSearchResults] = useState([]);
@@ -29,6 +30,19 @@ export default function ProfileSearchBar() {
getUsers();
}, []);
+ const getFriends = async () => {
+ const response = await fetch("http://localhost:5000/users/friends/get", {
+ method: "GET",
+ headers: {
+ "Content-type": "application/json"
+ },
+ credentials: "include",
+ })
+ const friendsList = await response.json();
+ return friendsList;
+ }
+
+
const openUserTracker = (user) => {
// Open the page with the user's id
console.log(user);
@@ -39,16 +53,35 @@ export default function ProfileSearchBar() {
e.preventDefault();
console.log(`Form submitted with input value ${searchInput}`);
// If form is submitted should show page with list of profiles with closest matching usernames with search result
+ // Clicking search icon should do the same
}
- const handleChange = (e) => {
+ const handleChange = async (e) => {
+ // Filters search results based on how closely it matches with user input,
+ // And whether currentFriends or notFriends flags are true, maximum of 8 results shown
setSearchInput(e.target.value);
- console.log(e.target.value);
+
+ const friendResults = await getFriends();
+
if (e.target.value !== "") {
- setFilteredResults(searchResults.filter((user) => {
- return user.username.startsWith(e.target.value);
- }))
+ const friendUsernames = friendResults.map((friendObj) => friendObj.username)
+
+ if (currentFriends) {
+ setFilteredResults(searchResults.filter((user) => friendUsernames.includes(user.username)
+ && user.username.startsWith(e.target.value)).slice(0, 8))
+ }
+ else if (notFriends) {
+ console.log(searchResults.filter((user) => !(friendUsernames.includes(user.username))
+ && user.username.startsWith(e.target.value)).slice(0, 8))
+
+ setFilteredResults(searchResults.filter((user) => !(friendUsernames.includes(user.username))
+ && user.username.startsWith(e.target.value)).slice(0, 8))
+ }
+ else {
+ setFilteredResults(searchResults.filter((user) => user.username.startsWith(e.target.value)).slice(0, 8))
+ }
+
} else {
setFilteredResults([])
}
diff --git a/client/src/components/LandingPage/LandingPage.js b/client/src/components/LandingPage/LandingPage.js
index 42150cf..3d09225 100644
--- a/client/src/components/LandingPage/LandingPage.js
+++ b/client/src/components/LandingPage/LandingPage.js
@@ -7,7 +7,7 @@ import ProfileSearchBar from "../DoomBuddies/ProfileSearchBar";
export default function LandingPage() {
return (
<>
-