Merge pull request #90 from the-collab-lab/mf-styling-list-and-items-…

…pages

[MF] styling list and items pages

index.html

@@ -19,6 +19,10 @@
  href="https://fonts.googleapis.com/css2?family=Reddit+Mono:[email protected]&display=swap"
  rel="stylesheet"
  />
+ <link
+ rel="stylesheet"
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
+ />
  <meta name="color-scheme" content="dark light" />
  <title>Smart Shopping List</title>
  <script type="module" src="/src/index.jsx" async></script>

src/api/index.js

@@ -1,2 +1,3 @@
 export * from './firebase';
-export { useAuth } from './useAuth';
+export * from './useAuth';
+export * from './config';

src/api/useAuth.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
-import { auth } from './config.js';
+import { useNavigate } from 'react-router-dom';
 import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
+import { auth } from './config.js';
 import { addUserToDatabase } from './firebase.js';
 import './useAuth.css';
 
@@ -9,15 +10,27 @@ import './useAuth.css';
  * the button redirects the user to the Google OAuth sign-in page.
  * After the user signs in, they are redirected back to the app.
  */
-export const SignInButton = ({ largeSize }) => (
- <button
- type="button"
- onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
- className={largeSize ? 'large-size' : ''}
- >
- Sign In
- </button>
-);
+export const SignInButton = ({ largeSize }) => {
+ let navigate = useNavigate();
+
+ const handleSignIn = async () => {
+ const provider = new GoogleAuthProvider();
+ try {
+ const result = await signInWithPopup(auth, provider);
+ const user = result.user;
+ console.log('User signed in:', user);
+ navigate('/list');
+ } catch (e) {
+ console.error('Error signing in:', e);
+ }
+ };
+
+ return (
+ <button type="button" onClick={handleSignIn} className={largeSize ? 'large-size' : ''}>
+ Sign In
+ </button>
+ );
+};
 
 /**
  * A button that signs the user out of the app using Firebase Auth.

src/components/AddItem.jsx

@@ -11,7 +11,7 @@ export function AddItem({ formData, setFormData }) {
 
  return (
  <>
- <div>Enter item</div>
+ <h2>Enter item</h2>
  <label htmlFor="itemName">
  Item Name:
  <input

src/components/ListItem.css

@@ -1,20 +1,64 @@
 .ListItem {
- align-items: center;
  display: flex;
- flex-direction: row;
- font-size: 1.2em;
+ flex-direction: column;
+ align-items: flex-start;
+ margin: 0;
+ padding: 0;
+ font-family: 'Reddit Mono', monospace;
+}
+
+.ListItem-label {
+ display: flex;
+ flex-grow: inherit;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
  cursor: pointer;
  height: auto;
+ margin: 0;
+ padding: 0;
+ margin-left: 0.2em;
 }
 
-.ListItem > * {
- margin-right: 10px;
+.ListItem button {
+ background-color: var(--color-branding-dark-mode);
+ /* outline: 1px solid var(--color-gray-dark); */
 }
 
-.ListItem-checkbox {
- accent-color: var(--color-accent);
+.ListItem button:hover {
+ background-color: var(--btn-bg-color-delete-hover);
 }
 
-.ListItem-label {
- margin-left: 0.2em;
+/* Handling checkbox styling */
+/* https://moderncss.dev/pure-css-custom-checkbox-style/ */
+
+input[type='checkbox'] {
+ appearance: none;
+ background-color: var(--color-input-bg);
+ margin: 0;
+ font: inherit;
+ color: currentColor;
+ width: 2em;
+ height: 2em;
+ border: 0.05em solid currentColor;
+ border-radius: 20%;
+ transform: translateY(-0.075em);
+ display: grid;
+ place-content: center;
+ cursor: pointer;
+}
+
+input[type='checkbox']::before {
+ content: '';
+ width: 1.2em;
+ height: 1.2em;
+ transform: scale(0);
+ transition: 120ms transform ease-in-out;
+ background-color: var(--color-clip-path);
+ transform-origin: bottom left;
+ clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+
+input[type='checkbox']:checked::before {
+ transform: scale(2) translateX(-0.2em) translateY(0.1em);
 }

src/components/ListItem.jsx

@@ -1,8 +1,10 @@
-import './ListItem.css';
-import { updateItem, deleteItem } from '../api';
 import { useState, useEffect } from 'react';
+import { updateItem, deleteItem } from '../api';
+import './ListItem.css';
 
 export function ListItem({ item, listPath }) {
+ const [isChecked, setIsChecked] = useState(false);
+
  const {
  id,
  name,
@@ -24,7 +26,6 @@ export function ListItem({ item, listPath }) {
  : 0;
  const timeDiff = currentDate - lastPurchasedDate; //milliseconds
  const oneDayInMilliseconds = 24 * 60 * 60 * 1000;
- const [isChecked, setIsChecked] = useState(false);
 
  useEffect(() => {
  if (timeDiff < oneDayInMilliseconds) {
@@ -56,6 +57,9 @@ export function ListItem({ item, listPath }) {
  } else {
  setIsChecked(e.target.checked);
  if (e.target.checked) {
+ // For testing this is turned on/off
+ // const result = console.log('checked');
+
  const result = await updateItem(
  listPath,
  id,
@@ -92,27 +96,27 @@ export function ListItem({ item, listPath }) {
  }
 
  return (
- <li>
- <label htmlFor={name} className="ListItem">
+ <li className="ListItem">
+ <label htmlFor={name} className="ListItem-label">
  <input
  type="checkbox"
  id={name}
  onChange={handleCheck}
  name={name}
  checked={isChecked}
  />
- <h5 className="item-name">{name}</h5>
+ <p className="ListItem-buy-next">{name}</p>
  <button
  type="button"
  id={name}
  name={name}
  onClick={handleDelete}
  aria-label={`delete ${name}`}
  >
- X
+ delete
  </button>
- <h5 className="buy-next">Buy Next: {nextPurchasedDate}</h5>
  </label>
+ <p className="ListItem-buy-next">Buy Next: {nextPurchasedDate}</p>
  </li>
  );
 }

src/components/SingleList.css

@@ -3,8 +3,19 @@
  display: flex;
  flex-direction: row;
  font-size: 1.2em;
+ justify-content: space-between;
+ padding: 0 5em 0 2em;
 }
 
 .SingleList-label {
  margin-left: 0.2em;
 }
+
+.SingleList-delete-btn {
+ background-color: var(--color-branding-dark-mode);
+ /* outline: 1px solid var(--color-gray-dark); */
+}
+
+.SingleList-delete-btn:hover {
+ background-color: var(--btn-bg-color-delete-hover);
+}

src/components/SingleList.jsx

@@ -31,16 +31,17 @@ export function SingleList({ name, path, setListPath }) {
  <li className="SingleList">
  <Link to="/manage-list">
  <button onClick={handleClick}>{name}</button>
- <button
- type="button"
- id={name}
- name={name}
- onClick={handleDeleteList}
- aria-label={`delete ${name}`}
- >
- X
- </button>
  </Link>
+ <button
+ type="button"
+ id={name}
+ name={name}
+ className="SingleList-delete-btn"
+ onClick={handleDeleteList}
+ aria-label={`delete ${name}`}
+ >
+ remove
+ </button>
  </li>
  );
 }

src/components/SortedItemsMap.css

@@ -0,0 +1,10 @@
+.SortedItems-section-divider {
+ margin-top: 3px;
+ width: 100%;
+ display: flex;
+ margin-left: 0;
+}
+
+.SortedItems-section-header {
+ margin: 0px;
+}

src/components/SortedItemsMap.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { getSortedItems, getGroupedItems } from '../utils';
 import { ListItem } from './ListItem';
+import './SortedItemsMap.css';
 
 export function SortedItemsMap({ filteredDataResult, listPath }) {
  const sortedDataResult = getSortedItems(filteredDataResult);
@@ -9,30 +10,54 @@ export function SortedItemsMap({ filteredDataResult, listPath }) {
  getGroupedItems(sortedDataResult);
  return (
  <>
- <h4 className="List-section-header">Overdue</h4>
- {overdue.map((item) => (
- <ListItem key={item.id} item={item} listPath={listPath} />
- ))}
- <hr className="list-section-divider" />
- <h4 className="List-section-header">Soon</h4>
- {buySoon.map((item) => (
- <ListItem key={item.id} item={item} listPath={listPath} />
- ))}
- <hr className="list-section-divider" />
- <h4 className="List-section-header">Kind of soon</h4>
- {buyKindOfSoon.map((item) => (
- <ListItem key={item.id} item={item} listPath={listPath} />
- ))}
- <hr className="list-section-divider" />
- <h4 className="List-section-header">Not soon</h4>
- {buyNotSoon.map((item) => (
- <ListItem key={item.id} item={item} listPath={listPath} />
- ))}
- <hr className="list-section-divider" />
- <h4 className="List-section-header">Inactive</h4>
- {inactive.map((item) => (
- <ListItem key={item.id} item={item} listPath={listPath} />
- ))}
+ {overdue.length > 0 && (
+ <>
+ <h4 className="SortedItems-section-header">Overdue</h4>
+ {overdue.map((item) => (
+ <ListItem key={item.id} item={item} listPath={listPath} />
+ ))}
+ <hr className="SortedItems-section-divider" />
+ </>
+ )}
+
+ {buySoon.length > 0 && (
+ <>
+ <h4 className="SortedItems-section-header">Soon</h4>
+ {buySoon.map((item) => (
+ <ListItem key={item.id} item={item} listPath={listPath} />
+ ))}
+ <hr className="SortedItems-section-divider" />
+ </>
+ )}
+
+ {buyKindOfSoon.length > 0 && (
+ <>
+ <h4 className="SortedItems-section-header">Kind of soon</h4>
+ {buyKindOfSoon.map((item) => (
+ <ListItem key={item.id} item={item} listPath={listPath} />
+ ))}
+ <hr className="SortedItems-section-divider" />
+ </>
+ )}
+
+ {buyNotSoon.length > 0 && (
+ <>
+ <h4 className="SortedItems-section-header">Not soon</h4>
+ {buyNotSoon.map((item) => (
+ <ListItem key={item.id} item={item} listPath={listPath} />
+ ))}
+ <hr className="SortedItems-section-divider" />
+ </>
+ )}
+
+ {inactive.length > 0 && (
+ <>
+ <h4 className="SortedItems-section-header">Inactive</h4>
+ {inactive.map((item) => (
+ <ListItem key={item.id} item={item} listPath={listPath} />
+ ))}
+ </>
+ )}
  </>
  );
 }

src/components/index.js

@@ -1,6 +1,6 @@
+export * from './AddItem';
+export * from './Dialog';
+export * from './Emoji';
 export * from './ListItem';
 export * from './SingleList';
-export * from './Dialog';
-export * from './AddItem';
 export * from './SortedItemsMap';
-export * from './Emoji';