Full Stack Dev With JS - Quiz1 Cheat Sheet by sally sung

import Book from "./book";
const BooksList = ({books=[], onDelete=f=>f}) => {
    if(books.length===0) return <h2>Currently there are no books</h2>
    return ( <section>
        <h6>Showing {books.length} books</h6>
        <table className="table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Category</th>
                    <th>Author</th>
                    <th>Number in Stock</th>
                    <th>Price</th>
                    <th>Year</th>
                    <th>Liked</th>
                    <th>Action(s)</th>
                </tr>
            </thead>
            <tbody>
                {books.map(book=><Book 
                key={book._id} 
                book = {book}
                onDelete = {onDelete}
                />)}
            </tbody>
        </table>
        </section> );
}
 
export default BooksList;

//sfc
import { useState } from "react";
const AddColor = ({onAdd=f=>f}) => {
    const [title,setTitle] = useState("");
    const [color,setColor] = useState("#000000")

    const submitColor=(event)=>{
        event.preventDefault();
        onAdd(title,color);
        setTitle("");
        setColor("#000000")
    }
    return (<>
    <h4>You can add a new color here.</h4>
    <form onSubmit={submitColor}>
        <input type="text" 
        value = {title}
        required
        placeholder="color title"
        onChange={(event)=>setTitle(event.target.value)}
        />
        <input type="color"
        value={color}
        onChange={(event)=>setColor(event.target.value)}
        required/>
        <button>Add Color</button>
    </form>
    </> );
}
 
export default AddColor;

// main.jsx 
import {BrowserRouter as Router} from "react-router-dom"

createRoot(document.getElementById('root')).render(
  <StrictMode>
   <Router>
     <App />
   </Router>
  </StrictMode>,
)

import {useLocation} from "react-router-dom"
const Whoops404 = () => {
    const location = useLocation();
    return ( <div>
        <h1>Page not Found at {location.pathname}</h1>
    </div> );
}
 
export default Whoops404;

function App() {
  const [colors, setColors] = useState(colorData)

  //function to remove a color
  const deleteColor = (id)=>{
    const updatedColors = colors.filter(color=>color.id!==id);
    setColors(updatedColors);
  }

  //function to change rating
  const rateColor= (nRating,id)=>{
    const updatedColors = colors.map(color=>(
      color.id===id?{...color,rating:nRating}:color ));
      setColors(updatedColors)
  }

  //function to add new Color
  const addColor = (title,color)=>{
    const newColors = [...colors, 
      {id:v4(),
       title,color, rating:0, img:"yellow.jpg" 
      }
    ]
    setColors(newColors);
  }

  return (
      <div>
        <Header title="This is my Color List."/>
        <AddColor onAdd = {addColor}/>
        <ColorList 
        colors={colors} 
        onDelete = {deleteColor}
        onRate = {rateColor}  
        />
        <Footer/>
      </div>
  )
}

export default App

import { Routes, Route, Navigate, useNavigate } from "react-router-dom";

function App() {
    return (
        <div>
            <NavBar />

            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />}>
                    {/ nested routes /}
                    <Route path="history" element={<History />} />
                    <Route path="services" element={<Services />} />
                    <Route path="locations" element={<Locations />} />
                </Route>
                {/ Muliple route/path parameters -- REQUIRED/}
                {/ <Route path="/events/:month/:year" element={<EventDetails/>}/> /}
                <Route path="/events" element={<Events />} />

                {/ Muliple route/path parameters --OPTIONAL /}
                <Route path="/events/:month?/:year?" element={<EventDetails />} />

                <Route path="/products" element={<Products />} />
                {/Route/Path Paramters/}
                <Route path="/products/:id" element={<ProductDetails />} />

                {/ for paths which do not match the paths given above /}
                <Route path="*" element={<Whoops404 />} />

                {/ Redirecting /}
                <Route path="/services" element={<Navigate to="/about/services" />} />
            </Routes>
        </div>
    );
}

export default App;

import { Outlet, Link, useParams, useLocation} from "react-router-dom";
import queryString from "query-string";
export const Home = () => {
  return (
    <div>
      <h1>Shopping App</h1>
    </div>
  );
};
export const About = () => {
  return (
    <div>
      <h1>About</h1>
      <Outlet/>
    </div>
  );
};

export const EventDetails = ()=>{
  const {month,year} = useParams();
  const location = useLocation();
  const obj = queryString.parse(location.search)  
  return <div>
    <h6>Event Details: Month {month} and Year {year}</h6>
  </div>
}

export const Products = () => {
  return (
    <div>
      <h1>Products</h1>
      <ul style={{fontSize:"2em", listStyleType:"none"}}>
        <li><Link to="1">Product 1</Link></li>
        <li><Link to="2">Product 2</Link></li>
        <li><Link to="3">Product 3</Link></li>
      </ul>
    </div>
  );
};
export const ProductDetails = () => {
  const products = [
    { id: 1, name: "Laptop", desc: "About Laptops..." },
    { id: 2, name: "Notepad", desc: "About Notepads..." },
    { id: 3, name: "Smart Phone", desc: "About Smart Phones..." },
  ];
  let { id } = useParams();
  id = parseInt(id);
  const product = products.find((prod) => prod.id == id);
  return (
    <>
      <h2>Product Details</h2>
      <p>Name: {product.name}</p>
      <p>Description: {product.desc}</p>
    </>
  );
};