Merge branch 'main' into dn-stylize-fonts

src/views/AddItem.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { addItem } from '../api/firebase';
 import { useNavigate } from 'react-router-dom';
+import { Chippy } from './Chippy';
 
 export function AddItem({ data, listId }) {
 	const navigate = useNavigate();
@@ -56,6 +57,13 @@ export function AddItem({ data, listId }) {
 
 	return (
 		<>
+			<Chippy
+				message={
+					submitMessage === ''
+						? 'Please add an item to your list!'
+						: submitMessage
+				}
+			/>
 			<form onSubmit={onFormSubmit}>
 				<div className="pt-6">
 					<label className="h3 font-lato" htmlFor="item">
@@ -124,7 +132,6 @@ export function AddItem({ data, listId }) {
 					Add Item
 				</button>
 			</form>
-			<p>{submitMessage}</p>
 		</>
 	);
 }

src/views/Chippy.jsx

@@ -0,0 +1,16 @@
+import Chippy3 from '/img/Chippy3.gif';
+
+export function Chippy({ message }) {
+	return (
+		<div id="chippyBox" className="grid grid-cols-3 pt-5">
+			<div className="chippy-suggestion chippy-suggestion-bottom-right col-span-2">
+				{message}
+			</div>
+			<img
+				id="chippy"
+				src={Chippy3}
+				alt='Helpful potato chip gif named Chippy, à la "Clippy", who suggests that user adds an item to their shopping list '
+			></img>
+		</div>
+	);
+}

src/views/Home.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 // import { generateToken } from '@the-collab-lab/shopping-list-utils';
 import './Home.css';
+import { Chippy } from './Chippy';
 
 export function Home({ makeNewList, joinList, handleError, joinListErrorMsg }) {
 	const [inputValue, setInputValue] = useState('');
@@ -22,6 +23,15 @@ export function Home({ makeNewList, joinList, handleError, joinListErrorMsg }) {
 
 	return (
 		<div className="Home">
+			<Chippy
+				message={
+					joinListErrorMsg ? (
+						<span>{joinListErrorMsg}</span>
+					) : (
+						'Create your own list or join an existing one!'
+					)
+				}
+			/>
 			<p className="h3 font-lato pt-10">
 				To create a new shopping list, give your list a name.
 			</p>
@@ -49,7 +59,6 @@ export function Home({ makeNewList, joinList, handleError, joinListErrorMsg }) {
 				<p className="h3 font-lato">
 					Join an existing shopping list by entering a list name.
 				</p>
-				{joinListErrorMsg ? <span>{joinListErrorMsg}</span> : null}
 				<form onSubmit={handleJoinList}>
 					<label className="text-2xl font-medium" htmlFor="input">
 						Share list name:
@@ -63,12 +72,6 @@ export function Home({ makeNewList, joinList, handleError, joinListErrorMsg }) {
 						onChange={(event) => setInputValue(event.target.value)}
 						pattern="[a-zA-Z0-9\s]+"
 						required
-						// onInvalid={(e) =>
-						// 	e.target.setCustomValidity(
-						// 		'Please enter a valid list name i.e no numbers.',
-						// 	)
-						// }
-						// onInput={(e) => e.target.setCustomValidity('')}
 					/>
 					<button className="btn" type="submit">
 						Join an existing list

src/views/List.jsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { comparePurchaseUrgency } from '../utils/items';
-import Chippy3 from '/img/Chippy3.gif';
+import { Chippy } from './Chippy';
 import './List.css';
 
 export function List({ data, listId }) {
@@ -38,18 +38,13 @@ export function List({ data, listId }) {
 
 	return (
 		<>
-			<div id="chippyBox" className="grid grid-cols-3 pt-5">
-				<div className="chippy-suggestion chippy-suggestion-bottom-right col-span-2">
-					{data.length < 1
+			<Chippy
+				message={
+					data.length < 1
 						? `Uh oh! ${listName} list is empty! Try using the "Add Item" button to begin your list!`
-						: `Yummy! That list is looking good! Did you know that you can use the filter to search within ${listName}?`}
-				</div>
-				<img
-					id="chippy"
-					src={Chippy3}
-					alt='Helpful potato chip gif named Chippy, à la "Clippy", who suggests that user adds an item to their shopping list '
-				></img>
-			</div>
+						: `Yummy! That list is looking good! Did you know that you can use the filter to search within ${listName}?`
+				}
+			/>
 			<div id="listMods" className="m-2 pt-2">
 				<span className="text-2xl">Want to check out a different list? </span>
 				<button className="btn mr-12" onClick={removeListFromStorage}>