UBC/Alley-HSBC-Frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

implement basic contactspage search

Browse Source
This commit is contained in:
mbalsdon 2022-03-24 14:34:46 -07:00
parent f09a2177dd
commit e18562c0c9
1 changed files with 16 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/contacts/contacts-components/Sidebar.tsx
View File

@ -15,15 +15,13 @@ import ContactItem from "./sidebar-components/ContactItem";
import { useAppSelector } from "../../../redux/hooks";
import { selectUsers, selectTeam } from "../../../redux/slices/usersSlice";
import { selectFavorites } from "../../../redux/slices/favoritesSlice";
import UserLite from "../../../api-bodies/UserLite";
const sidebarWidth = 240;
const Sidebar: React.FC = () => {
const [favoritesOpen, setFavoritesOpen] = React.useState<boolean>(true);
const [teamOpen, setTeamOpen] = React.useState<boolean>(false);
const [filteredFavorites, setFilteredFavorites] = React.useState<UserLite[]>([]);
const [filteredTeam, setFilteredTeam] = React.useState<UserLite[]>([]);
const [inputText, setInputText] = React.useState<string>("");
const favoritesUuids = useAppSelector(selectFavorites);
const favorites = useAppSelector((state) =>
@ -32,25 +30,6 @@ const Sidebar: React.FC = () => {
const teamUuids = useAppSelector(selectTeam);
const team = useAppSelector((state) => selectUsers(state, teamUuids));
const handleInputFavorites = (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
const inputText = e.target.value.toLowerCase();
const result = (inputText == "") ? favorites :
favorites.filter(f => (
f.name.toLowerCase().slice(0, inputText.length) == inputText.slice(0, inputText.length)));
setFilteredFavorites(result);
};
const handleInputTeam = (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
const inputText = e.target.value.toLowerCase();
const result = (inputText == "") ? team :
team.filter(f => (
f.name.toLowerCase().slice(0, inputText.length) == inputText.slice(0, inputText.length)));
setFilteredTeam(result);
};
return (
<Drawer
variant="permanent"
@ -72,10 +51,8 @@ const Sidebar: React.FC = () => {
variant="outlined"
placeholder="Person"
onChange={(e) => {
handleInputFavorites(e);
handleInputTeam(e);
setInputText(e.target.value);
}}
// can we make it so the outline doesnt turn white (primary color) when its clicked on?
/>
</ListItem>
@ -91,9 +68,13 @@ const Sidebar: React.FC = () => {
</ListItemButton>
<Collapse in={favoritesOpen} timeout="auto" unmountOnExit>
<List disablePadding>
{filteredFavorites.map((favorite, i) => (
<ContactItem contactInfo={favorite} key={i} />
))}
{
favorites.filter(favorite => (
favorite.name.toLowerCase().slice(0, inputText.length) == inputText.toLowerCase().slice(0, inputText.length)
)).map((favorite, i) => (
<ContactItem contactInfo={favorite} key={i} />
))
}
</List>
</Collapse>
<ListItemButton onClick={() => setTeamOpen(!teamOpen)}>
@ -103,9 +84,13 @@ const Sidebar: React.FC = () => {
</ListItemButton>
<Collapse in={teamOpen} timeout="auto" unmountOnExit>
<List disablePadding>
{filteredTeam.map((member, i) => (
<ContactItem contactInfo={member} key={i} />
))}
{
team.filter(member => (
member.name.toLowerCase().slice(0, inputText.length) == inputText.toLowerCase().slice(0, inputText.length)
)).map((member, i) => (
<ContactItem contactInfo={member} key={i} />
))
}
</List>
</Collapse>
</List>