Skip to content

Commit

Permalink
fix: filter icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@agreenspan24
agreenspan24 committed Sep 16, 2021
1 parent 6b4dec3 commit e098629
Showing 1 changed file with 81 additions and 71 deletions.
152 changes: 81 additions & 71 deletions src/components/AssignmentTexter/AssignmentContactsList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,35 @@
import PropTypes from "prop-types";
import React from "react";
import List from "@material-ui/core/List";
import ListSubheader from '@material-ui/core/ListSubheader';
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
import Link from "@material-ui/core/Link";
import Divider from '@material-ui/core/Divider';
import Chip from '@material-ui/core/Chip';
import SmsIcon from "@material-ui/icons/Sms";
import CheckIcon from "@material-ui/icons/Check";
import BlockIcon from "@material-ui/icons/Block";
import MenuItem from "@material-ui/core/MenuItem";
import SearchBar from "material-ui-search-bar";
import moment from "moment";
import IconButton from "@material-ui/core/IconButton";
import FilterListIcon from "@material-ui/icons/FilterList";
import { Menu } from "@material-ui/core";

const inlineStyles = {
contactsListParent: {
display: "flex",
flexDirection: "column",
maxHeight: "100%"
height: "100%"
},
contactsListFilters: {
margin: 12,
borderRight: "1px solid #C1C3CC",
width: "calc(100% - 24px)"
},
contactListScrollContainer: {
overflow: "hidden scroll",
borderRight: "1px solid #C1C3CC",
height: "100%"
},
contactsListSearch: {
height: 32
height: 32,
margin: "12px 0 12px 12px"
},
updatedAt: {
fontSize: 12,
Expand All @@ -36,8 +38,8 @@ const inlineStyles = {
margin: "0 4px"
},
searchBar: {
backgroundColor: "rgba(126, 128, 139, .7)",
padding: 12
display: "flex",
backgroundColor: "rgba(126, 128, 139, .7)"
}
};

Expand Down Expand Up @@ -67,9 +69,8 @@ class AssignmentContactsList extends React.Component {
this.state = {
search: "",
limit: 100,
showNeedsResponse: true,
showConvo: true,
showClosed: true
filterEl: null,
statuses: ["needsResponse", "convo", "closed"]
};
}

Expand Down Expand Up @@ -105,11 +106,14 @@ class AssignmentContactsList extends React.Component {
}
}

openFilterMenu = e => this.setState({ filterEl: e.currentTarget });
closeMenu = () => this.setState({ filterEl: null });

renderContact = contact => {
const { updateCurrentContactById, currentContact } = this.props;

return (
<ListItem
<ListItem
key={contact.id}
id={this.getContactListItemId(contact.id)}
selected={contact.id === currentContact.id}
Expand All @@ -119,10 +123,15 @@ class AssignmentContactsList extends React.Component {
<ListItemText
primary={`${contact.firstName} ${contact.lastName}`}
primaryTypographyProps={{
color: contact.messageStatus === "closed" ? 'textSecondary' : 'textPrimary',
color:
contact.messageStatus === "closed"
? "textSecondary"
: "textPrimary",
style: {
fontWeight: contact.messageStatus === "needsResponse" ? 600 : undefined,
fontStyle: contact.messageStatus === "closed" ? "italic" : undefined
fontWeight:
contact.messageStatus === "needsResponse" ? 600 : undefined,
fontStyle:
contact.messageStatus === "closed" ? "italic" : undefined
}
}}
/>
Expand All @@ -138,48 +147,34 @@ class AssignmentContactsList extends React.Component {
// Prevent refreshes on any updates in the controls, since they shouldn't change what's in here.
// shouldComponentUpdate = () => false

matchesStatuses = contact => {
switch (contact.messageStatus) {
case "needsResponse":
return this.state.showNeedsResponse;
case "convo":
return this.state.showConvo;
case "closed":
return this.state.showClosed;
default:
return false;
}
}

renderContacts = (contacts) => {
renderContacts = contacts => {
// Filter contacts by message status and search
const filteredContacts = contacts.filter(
c =>
`${c.firstName} ${c.lastName}`
.toLowerCase()
.includes(this.state.search.toLowerCase()) &&
this.matchesStatuses(c)
this.state.statuses.indexOf(c.messageStatus) > -1
);

const contactsToDisplay = filteredContacts.slice(0, this.state.limit);

return (
<List
id="assignment-contacts-list"
subheader={<ListSubheader />}
style={inlineStyles.contactListScrollContainer}
>
{contactsToDisplay.map(c => this.renderContact(c))}
{this.state.limit <= filteredContacts.length && (
<ListItem
key="SeeMoreLink"
onClick={() => this.setState({limit: this.state.limit + 100})}
onClick={() => this.setState({ limit: this.state.limit + 100 })}
button
>
<ListItemText
primary="See more"
primaryTypographyProps={{
color: 'primary'
color: "primary"
}}
/>
</ListItem>
Expand All @@ -189,7 +184,7 @@ class AssignmentContactsList extends React.Component {
};

render() {
console.log('rendering ACL')
console.log("rendering ACL");
const momentConfigOrig = moment()
.locale("en")
.localeData()._relativeTime;
Expand All @@ -201,14 +196,20 @@ class AssignmentContactsList extends React.Component {

moment.updateLocale("en", { relativeTime: momentConfigOrig });

console.log(this.props.contacts);
const counts = this.props.contacts.reduce((cts, c) => {
if (!cts[c.messageStatus]) { cts[c.messageStatus] = 1; }
else { cts[c.messageStatus] += 1; }
if (!cts[c.messageStatus]) {
cts[c.messageStatus] = 1;
} else {
cts[c.messageStatus] += 1;
}
return cts;
}, {});

console.log(counts)
const statusLabels = {
needsResponse: "Respond",
convo: "Past",
closed: "Skipped"
};

return (
<div style={inlineStyles.contactsListParent}>
Expand All @@ -221,33 +222,42 @@ class AssignmentContactsList extends React.Component {
style={inlineStyles.contactsListSearch}
placeholder="Search Contacts"
/>
</div>
<div style={{padding: 12}}>
<Chip
label={`Respond (${counts["needsResponse"]})`}
color="primary"
size="small"
variant={this.state.showNeedsResponse ? "default" : "outlined"}
onClick={() => this.setState({ showNeedsResponse: !this.state.showNeedsResponse })}
clickable
/>
<Chip
label={`Past (${counts["convo"]})`}
color="primary"
size="small"
variant={this.state.showConvo ? "default" : "outlined"}
onClick={() => this.setState({ showConvo: !this.state.showConvo })}
clickable
style={{margin: "0 6px"}}
/>
<Chip
label={`Skipped (${counts["closed"]})`}
color="primary"
variant={this.state.showClosed ? "default" : "outlined"}
onClick={() => this.setState({ showClosed: !this.state.showClosed })}
size="small"
clickable
/>
<IconButton
aria-controls="filter-contacts"
aria-haspopup="true"
onClick={this.openFilterMenu}
>
<FilterListIcon />
</IconButton>
<Menu
id="filter-contacts"
anchorEl={this.state.filterEl}
open={Boolean(this.state.filterEl)}
keepMounted
onClose={this.closeMenu}
>
{Object.keys(statusLabels).map(status => (
<MenuItem
key={status}
value={status}
selected={this.state.statuses.includes(status)}
onClick={() => {
const statuses = [...this.state.statuses];
const statusIndex = statuses.indexOf(status);
statusIndex === -1
? statuses.push(status)
: statuses.splice(statusIndex, 1);

this.setState({
filterEl: null,
statuses
});
}}
>
{statusLabels[status]} ({counts[status] || 0})
</MenuItem>
))}
</Menu>
</div>
{contactList}
</div>
Expand All @@ -261,4 +271,4 @@ AssignmentContactsList.propTypes = {
updateCurrentContactById: PropTypes.func
};

export default AssignmentContactsList;
export default AssignmentContactsList;

0 comments on commit e098629

Please sign in to comment.