103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import {
|
|
Collapse,
|
|
Divider,
|
|
Drawer,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemText,
|
|
TextField,
|
|
Toolbar,
|
|
} from "@mui/material";
|
|
import React from "react";
|
|
import { ExpandLess, ExpandMore } from "@mui/icons-material";
|
|
import ContactItem from "./sidebar-components/ContactItem";
|
|
import { useAppSelector } from "../../../redux/hooks";
|
|
import { selectUsers, selectTeam } from "../../../redux/slices/usersSlice";
|
|
import { selectFavorites } from "../../../redux/slices/favoritesSlice";
|
|
|
|
const sidebarWidth = 240;
|
|
|
|
const Sidebar: React.FC = () => {
|
|
const [favoritesOpen, setFavoritesOpen] = React.useState<boolean>(true);
|
|
const [teamOpen, setTeamOpen] = React.useState<boolean>(false);
|
|
const [inputText, setInputText] = React.useState<string>("");
|
|
|
|
const favoritesUuids = useAppSelector(selectFavorites);
|
|
const favorites = useAppSelector((state) =>
|
|
selectUsers(state, favoritesUuids)
|
|
);
|
|
const filteredFavorites = favorites.filter((favorite) =>
|
|
favorite.name.toLowerCase().includes(inputText.toLowerCase())
|
|
);
|
|
|
|
const teamUuids = useAppSelector(selectTeam);
|
|
const team = useAppSelector((state) => selectUsers(state, teamUuids));
|
|
const filteredTeam = team.filter((member) =>
|
|
member.name.toLowerCase().includes(inputText.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<Drawer
|
|
variant="permanent"
|
|
sx={{
|
|
width: sidebarWidth,
|
|
["& .MuiDrawer-paper"]: { width: sidebarWidth },
|
|
}}
|
|
>
|
|
<Toolbar />
|
|
<List>
|
|
<ListItemText
|
|
primary="Contacts"
|
|
primaryTypographyProps={{ variant: "h6" }}
|
|
sx={{ textAlign: "center" }}
|
|
/>
|
|
<ListItem>
|
|
<TextField
|
|
label="Search Contacts"
|
|
variant="outlined"
|
|
placeholder="Person"
|
|
onChange={(e) => {
|
|
setInputText(e.target.value);
|
|
}}
|
|
/>
|
|
</ListItem>
|
|
|
|
<Divider />
|
|
<ListItemButton onClick={() => setFavoritesOpen(!favoritesOpen)}>
|
|
{favoritesOpen ? <ExpandLess /> : <ExpandMore />}
|
|
<ListItemText primary="Favorites" sx={{ textAlign: "center" }} />
|
|
<ListItemText
|
|
primary={filteredFavorites.length}
|
|
sx={{ textAlign: "right" }}
|
|
/>
|
|
</ListItemButton>
|
|
<Collapse in={favoritesOpen} timeout="auto" unmountOnExit>
|
|
<List disablePadding>
|
|
{filteredFavorites.map((favorite, i) => (
|
|
<ContactItem contactInfo={favorite} key={i} />
|
|
))}
|
|
</List>
|
|
</Collapse>
|
|
<ListItemButton onClick={() => setTeamOpen(!teamOpen)}>
|
|
{teamOpen ? <ExpandLess /> : <ExpandMore />}
|
|
<ListItemText primary="Team" sx={{ textAlign: "center" }} />
|
|
<ListItemText
|
|
primary={filteredTeam.length}
|
|
sx={{ textAlign: "right" }}
|
|
/>
|
|
</ListItemButton>
|
|
<Collapse in={teamOpen} timeout="auto" unmountOnExit>
|
|
<List disablePadding>
|
|
{filteredTeam.map((member, i) => (
|
|
<ContactItem contactInfo={member} key={i} />
|
|
))}
|
|
</List>
|
|
</Collapse>
|
|
</List>
|
|
</Drawer>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|