Merge pull request #38 from the-collab-lab/dn-make-chippy-a-component

Make Chippy a component

src/index.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Edu+VIC+WA+NT+Beginner:wght@600&display=swap');
+
 :root {
  --color-black: hsla(220, 13%, 18%, 1);
  --color-gray-dark: hsla(220, 13%, 25%, 1);
@@ -21,7 +23,8 @@
  --color-accent: var(--color-cobalt-blue);
  --color-bg: var(--color-white);
  --color-bg-well: var(--color-gray-light);
- --color-text: var(--color-black);
+ /* --color-text: var(--color-black); */
+ --color-text: var(--color-cobalt-blue);
  }
 }
 
@@ -64,10 +67,10 @@ html {
 body {
  background-color: var(--color-bg);
  color: var(--color-text);
- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
- helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
- /* font-size: 1.6rem;
- line-height: 1.4; */
+ font-family: 'Edu VIC WA NT Beginner', cursive, -apple-system,
+ BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica,
+  Ubuntu, roboto, noto, arial, sans-serif;
+ /* font-size: 1.6rem;*/
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 0;
@@ -125,5 +128,5 @@ ul {
 }
 
 .legendIcon {
- @apply border-2 text-center mr-2 border-gray-400 rounded-md h-11 w-12 bg-gray-500 text-white;
+ @apply text-center mr-2 rounded-md h-11 w-12 bg-blue-400 text-white;
 }

src/views/AddItem.jsx

@@ -1,7 +1,16 @@
-import { useState } from 'react';
+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();
+ useEffect(() => {
+ if (!listId) {
+ navigate('/');
+ }
+ }, [listId, navigate]);
+
  const [itemData, setItemData] = useState({
  itemName: '',
  daysUntilNextPurchase: 7,
@@ -48,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" htmlFor="item">
@@ -116,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,12 +23,23 @@ 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 pt-10">
  To create a new shopping list, give your list a name.
  </p>
  {handleError ? <span>{handleError}</span> : null}
- <form onSubmit={handleClick}>
- <label className="text-2xl font-medium" htmlFor="listName">List name </label>
+ <form onSubmit={handleClick}>
+ <label className="text-2xl font-medium" htmlFor="listName">
+ List name{' '}
+ </label>
  <input
  type="text"
  name="listName"
@@ -38,14 +50,15 @@ export function Home({ makeNewList, joinList, handleError, joinListErrorMsg }) {
  onChange={(e) => setListName(e.target.value)}
  pattern="[a-zA-Z0-9\s]+"
  />
- <button className="btn mt-4 mb-4" type="submit">Create a new list!</button>
- </form> 
+ <button className="btn mt-4 mb-4" type="submit">
+ Create a new list!
+ </button>
+ </form>
  <div className="p-6 text-4xl text-center">-OR-</div>
  <div className="JoinListForm">
- <p className="text-2xl">
+ <p className="h3">
  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:

src/views/List.css

@@ -6,37 +6,17 @@
 
 #chippy {
  height: 100px;
- /* position: fixed;
- bottom: 100px;
- right: 15%; */
 }
 
 .chippy-suggestion {
- /* position: fixed; */
- font-family: sans-serif;
- /* font-size: 18px; */
+ font-family: 'Edu VIC WA NT Beginner', cursive;
  font-size: 1.5rem;
  line-height: 24px;
- /* width: 50%; */
  background: #2b90ca;
  border-radius: 40px;
- /* padding: 24px; */
  padding: 5%;
  text-align: left;
  color: #fff;
  bottom: 300px;
  right: 15%;
 }
-
-/* .chippy-suggestion-bottom-right:before {
- content: '';
- width: 0px;
- height: 0px;
- position: absolute;
- border-left: 24px solid #2b90ca;
- border-right: 12px solid transparent;
- border-top: 12px solid #2b90ca;
- border-bottom: 20px solid transparent;
- left: 200px;
- bottom: -24px;
-} */

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,21 +38,20 @@ export function List({ data, listId }) {
 
  return (
  <>
- <div id="chippyBox" className="grid grid-cols-3 pt-6">
- <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>
- <div id="searchList" className="m-2 pt-6">
+ : `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}>
+ Click here
+ </button>
  <button
- className="btn mb-2"
+ className="btn"
  onClick={() => {
  navigate('/add-item');
  }}
@@ -93,13 +92,9 @@ export function List({ data, listId }) {
  })}
  </ul>
  </div>
- <>
- <span>Want to check out a different list? </span>
- <button className="btn mb-2" onClick={removeListFromStorage}>Click here</button>
- </>
  <div id="legend">
  <h3 className="h3 pt-2 pb-3">Purchase Again?</h3>
- <div className="grid grid-rows-2 gap-6">
+ <div className="grid grid-rows-2 gap-5">
  <ul className="grid grid-cols-5">
  <li className="col-span-1">
  <span className="legendIcon inline-block">S</span>
@@ -128,4 +123,4 @@ export function List({ data, listId }) {
  </div>
  </>
  );
-}
+}