Merge pull request #32 from the-collab-lab/jg-style-list-page

Style the list page so that it looks polished, is easy to use, is easy to comprehend, and is accessible.

package.json

@@ -8,6 +8,7 @@
  "dependencies": {
  "@emotion/react": "^11.11.0",
  "@emotion/styled": "^11.11.0",
+ "@mui/icons-material": "^5.11.16",
  "@mui/material": "^5.13.1",
  "@the-collab-lab/shopping-list-utils": "^2.0.0",
  "firebase": "^9.17.2",

src/components/ListItem.jsx

@@ -1,48 +1,120 @@
 import './ListItem.css';
 
-export function ListItem({
+import {
+ ListItem,
+ ListItemText,
+ Checkbox,
+ Chip,
+ IconButton,
+ Container,
+} from '@mui/material';
+
+import DeleteIcon from '@mui/icons-material/Delete';
+
+export function ListItemComponent({
  name,
- isDefaultChecked,
  itemId,
  urgency,
+ isDefaultChecked,
  setIsChecked,
  setCheckedItemId,
  onDeleteClick,
+ item,
 }) {
- const iconsByUrgency = {
- soon: '🟠',
- 'kind of soon': '🟡',
- 'not soon': '🟢',
- inactive: '⚫️',
- overdue: '🔴',
+ const colorByUrgency = {
+ soon: 'orange',
+ 'kind of soon': 'gold',
+ 'not soon': 'green',
+ inactive: 'black',
+ overdue: 'red',
  };
 
- const urgencyIcon = iconsByUrgency[urgency];
+ const urgencyColor = colorByUrgency[urgency];
+ const dateLastPurchasedFormatted = item.dateLastPurchased
+ ? formatDate(item.dateLastPurchased)
+ : 'N/A';
+ const additionalItemInfo = `Last Purchased: ${dateLastPurchasedFormatted} • Total Purchases: ${item.totalPurchases}`;
 
+ function formatDate(timestamp) {
+ const date = timestamp.toDate();
+ const month = (1 + date.getMonth()).toString().padStart(2, '0'); // add 1 because Months are zero-offset in JS
+ const day = date.getDate().toString().padStart(2, '0');
+ const year = date.getFullYear().toString().substring(2);
+
+ return `${month}/${day}/${year}`;
+ }
  function clickHandler(event, itemId) {
  setIsChecked(event.target.checked);
  setCheckedItemId(itemId);
  }
 
  return (
- <li className="ListItem">
- <input
- type="checkbox"
- id={itemId}
- onClick={(event) => {
- clickHandler(event, itemId);
+ <ListItem
+ disablePadding
+ sx={{
+ '&': {
+ display: 'flex',
+ justifyContent: 'space-between',
+ },
+ }}
+ >
+ <Container
+ sx={{
+ '&': {
+ display: 'flex',
+ alignItems: 'center',
+ padding: '0',
+ margin: '0',
+ maxWidth: '50%',
+ },
+ }}
+ >
+ <Checkbox
+ id={itemId}
+ edge="start"
+ defaultChecked={isDefaultChecked}
+ tabIndex={-1}
+ disableRipple
+ inputProps={{ 'aria-labelledby': `checkbox-liist-label=${name}` }}
+ onClick={(event) => {
+ clickHandler(event, itemId);
+ }}
+ />
+ <ListItemText
+ id={itemId}
+ primary={name}
+ secondary={additionalItemInfo}
+ secondaryTypographyProps={{
+ color: '#9c9c9c',
+ fontSize: 'small',
+ }}
+ sx={{
+ '&': {
+ marginLeft: '10px',
+ },
+ }}
+ />
+ </Container>
+ <Chip
+ size="small"
+ label={urgency}
+ sx={{
+ '&': {
+ backgroundColor: `${urgencyColor}`,
+ color: 'white',
+ width: '90px',
+ },
  }}
- defaultChecked={isDefaultChecked}
  />
- <label htmlFor={itemId}>{`${name} (${urgencyIcon} ${urgency})`}</label>
- <button
- type="button"
+ <IconButton
+  edge="end"
+ aria-label="delete"
  onClick={() => {
- onDeleteClick(itemId);
+ onDeleteClick(item);
  }}
  >
- Delete
- </button>
- </li>
+ <DeleteIcon />
+ </IconButton>
+ </ListItem>
  );
 }

src/views/List.css

@@ -0,0 +1,4 @@
+#dialogItemName {
+ color: black;
+ font-weight: bold;
+}