Accidentally pushed to main first

README.md

@@ -1,6 +1,6 @@
 ## Personal Information:
 
-Full Name: Enter Your Full Name
+Full Name: Dennis Hernandez (I did  this already in main branch before cloning so i am putting this here so that there is something to push the nuew bracnh to the remote repository)
 
 ## Getting Started
 First, fork this repository and clone it to your local machine.
@@ -43,4 +43,4 @@ To learn more about React.js, take a look at the [React Documentation](https://l
 
 ## What to Submit?
 
-Submit all changes made to files in `src/pages/qcomps` in Canvas class activity for the day.
+Submit all changes made to files in `src/pages/qcomps` in Canvas class activity for the day.

package.json

@@ -9,9 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "eslint-plugin-react": "^7.33.2",
+    "next": "13.5.4",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "13.5.4"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "eslint": "^8",

src/pages/components/profile.js

@@ -1,6 +1,8 @@
+import Gallery from "./gallery"
+
 export default function Profile() {
-  return (<img
+  return <img
       src="https://i.imgur.com/MK3eW3Am.jpg"
       alt="Katherine Johnson"
-    />)
+    />
 }

src/pages/components/profile_props.js

@@ -1,26 +1,26 @@
-function Avatar({person, size=100}) {
+function Avatar( { person, size = 100 } ) {
   return (
     <img
       className="avatar"
-      src={'https://i.imgur.com/' + person.imageId + 's.jpg'}
-      alt={person.name}
-      width={size}
-      height={size}
+      src={ 'https://i.imgur.com/' + person.imageId + 's.jpg' }
+      alt={ person.name }
+      width={ size }
+      height={ size }
     />
   );
 }
 
 export default function Profile() {
   return (
     <div>
-        <Avatar
-            person={{ name: 'Woon sen', imageId: 'OKS67lh'}}
-            size={200} />
-        <Avatar
-            person={{ name: 'Ron Ayah', imageId: 'YfeOqp2'}}
-            size={150} />
-        <Avatar
-            person={{ name: 'Pani Dom', imageId: '1bX5QH6'}} />
+      <Avatar
+        person={ { name: 'Woon sen', imageId: 'OKS67lh' } }
+        size={ 200 } />
+      <Avatar
+        person={ { name: 'Ron Ayah', imageId: 'YfeOqp2' } }
+        size={ 150 } />
+      <Avatar
+        person={ { name: 'Pani Dom', imageId: '1bX5QH6' } } />
     </div>
   );
 }

src/pages/components/queueUpdates.js

@@ -6,10 +6,10 @@ export default function Counter() {
   return (
     <>
       <h1>{number}</h1>
-      <button onClick={() => {
-        setNumber(n => n + 1);
-        setNumber(n => n + 1);
-        setNumber(n => n + 1);
+      <button onClick={() => { // Called "Batching updates" in React
+        setNumber(n => n + 1); // setNumber(1)
+        setNumber(n => n + 1); // setNumber(2)
+        setNumber(n => n + 1); // setNumber(3)
       }}>+3</button>
     </>
   )

src/pages/components/square.js

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import styles from '@/styles/Home.module.css';
 function Square({children}) {
   return (

src/pages/components/state.js

@@ -5,8 +5,10 @@ export default function Gallery() {
   const [index, setIndex] = useState(0);
 
   function handleClick() {
-    setIndex(index + 1);
-  }
+    if (index === sculptureList.length - 1)
+     setIndex(0);
+    else
+      setIndex(index + 1);}
 
   let sculpture = sculptureList[index];
   return (

src/pages/components/stateObj.js

@@ -13,9 +13,9 @@ export default function PersonData() {
 
     return(
        <>
-            <textarea value={fName} onChange={e => setFName(e.target.value)} />
-            <textarea value={lName} onChange={e => setLName(e.target.value)} />
-            <textarea value={age} onChange={e => setAge(e.target.value)} />
+            <textarea value={fName} onChange={e => setFName(e.target.value)} placeholder='first name' />
+            <textarea value={lName} onChange={e => setLName(e.target.value)} placeholder='last name' />
+            <textarea value={age} onChange={e => setAge(e.target.value)}  placeholder='age'/>
             <button onClick={handleClick}> Save </button>
             {person.fullName && <p> Person: {person.fullName} is {person.age} years old </p>}
        </>

src/pages/index.js

@@ -1,13 +1,12 @@
-// import Head from 'next/head'
-// import Image from 'next/image'
-// import { Inter } from 'next/font/google'
-import styles from '@/styles/Home.module.css'
-import Profile from './components/profile'
+import React from 'react'; 
+import styles from '@/styles/Home.module.css';
+import RequestTracker from './qcomps/shoppingCart';
 
 export default function Home() {
   return (
     <div className={styles.main}>
-        <Profile />
+      <h1>My List</h1>
+      <RequestTracker />
     </div>
-  )
+  );
 }

src/pages/qcomps/bios.js

@@ -1,12 +1,14 @@
 export default function Bio() {
   return (
-    <div class="intro">
-      <h1>Welcome to my website!</h1>
-    </div>
-    <p class="summary">
-      You can find my thoughts here.
-      <br/><br/>
-      <b>And <i>pictures</i></b> of people!
-    </p>
+    <>
+      <div class="intro">
+        <h1>Welcome to my website!</h1>
+      </div>
+      <p class="summary">
+        You can find my thoughts here.
+        <br/><br/>
+        <b>And <i>pictures</i></b> of people!
+      </p>
+    </>
   );
 }

src/pages/qcomps/firstcomp.js

@@ -1 +1,15 @@
-function MyComp() {}
+
+
+
+export default function MyComp() {
+    return(
+        <div>
+            <h1> My first component </h1>
+            <ol>
+                <li> Components: UI Building Block</li>
+                <li> Defining a Component </li>
+                <li> Using a component </li>
+            </ol>
+        </div>
+    );
+}

src/pages/qcomps/gallery_props.js

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 export default function Gallery() {
   return (
     <div>
@@ -6,10 +7,10 @@ export default function Gallery() {
         <h2>Maria Skłodowska-Curie</h2>
         <img
           className="avatar"
-          src='https://i.imgur.com/szV5sdGs.jpg'
+          src="https://i.imgur.com/szV5sdGs.jpg"
           alt="Maria Skłodowska-Curie"
-          width={70}
-          height={70}
+          width={ 70 }
+          height={ 70 }
         />
         <ul>
           <li>
@@ -18,7 +19,8 @@ export default function Gallery() {
           </li>
           <li>
             <b>Awards: 4 </b>
-            (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal)
+            (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal,
+            Matteucci Medal)
           </li>
           <li>
             <b>Discovered: </b>
@@ -30,10 +32,10 @@ export default function Gallery() {
         <h2>Katsuko Saruhashi</h2>
         <img
           className="avatar"
-          src='https://i.imgur.com/YfeOqp2s.jpg'
+          src="https://i.imgur.com/YfeOqp2s.jpg"
           alt="Katsuko Saruhashi"
-          width={70}
-          height={70}
+          width={ 70 }
+          height={ 70 }
         />
         <ul>
           <li>
@@ -45,8 +47,7 @@ export default function Gallery() {
             (Miyake Prize for geochemistry, Tanaka Prize)
           </li>
           <li>
-            <b>Discovered: </b>
-            a method for measuring carbon dioxide in seawater
+            <b>Discovered: </b>a method for measuring carbon dioxide in seawater
           </li>
         </ul>
       </section>

src/pages/qcomps/list_keys_id.js

@@ -16,8 +16,10 @@ function getImageUrl(imageId) {
     return "https://i.imgur.com/" + imageId + "s.jpg"
 }
 export default function List() {
-  const listItems = people.map(person =>
-    <li>
+  const listItems = people.map((person, index) => 
+
+    <li key = { index }>
+      <img src = { getImageUrl(person.imageId) } />
     </li>
   );
   return <ul>{listItems}</ul>;

src/pages/qcomps/profile_mistake.js

@@ -1,4 +1,6 @@
-export default function profile() {
-    return
-        <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
+
+export default function Profile() {
+    return(
+        <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />
+        );
 }

src/pages/qcomps/props_item.js

@@ -1,8 +1,9 @@
 function Item({ name, isPacked }) {
-  if (isPacked) {
-    return <li className="item">{name} ✔</li>;
-  }
-  return <li className="item"> {name} </li>
+  return (
+    <li className="item">
+      { isPacked ? <s>{name}</s> : name } { isPacked ? "✔" : "" }
+    </li>
+  );
 }
 
 export default function PackingList() {

src/pages/qcomps/recipes.js

@@ -13,10 +13,21 @@ export const recipes = [{
 }];
 
 export default function RecipeList() {
+  const recipesItems = recipes.map((recipe) => 
+    <div key = { recipe.id }>
+      <h2>{recipe.name}</h2>
+      <ul>
+        {Array.from(recipe.ingredients).map((ingredient) => 
+          <li key = { ingredient }>{ingredient}</li>
+        )}
+      </ul>
+
+    </div>
+  );
   return (
     <div>
       <h1>Recipes</h1>
-      {}
+      <ul>{recipesItems}</ul>
     </div>
   );
 }

src/pages/qcomps/shoppingCart.js

@@ -7,7 +7,9 @@ export default function RequestTracker() {
   async function handleClick() {
     setPending(pending + 1);
     await delay(3000);
-    setPending(pending - 1);
+    if (pending > 0) {
+      setPending(pending - 1);
+    }
     setCompleted(completed + 1);
   }
 

src/pages/qcomps/state.js

@@ -2,37 +2,51 @@ import { useState } from 'react';
 import { sculptureList } from '../../data/data.js';
 
 export default function Gallery() {
-  const [index, setIndex] = useState(0);
-  const [showMore, setShowMore] = useState(false);
+  const [ index, setIndex ] = useState( 0 );
+  const [ showMore, setShowMore ] = useState( false );
 
   function handleNextClick() {
-    setIndex(index + 1);
+    if ( index === sculptureList.length - 1 )
+      setIndex( 0 );
+    else
+      setIndex( index + 1 );
+  }
+
+  //i had fun here
+  function handleLastClick() {
+    if ( index === 0 )
+      setIndex( sculptureList.length - 1);
+    else 
+      setIndex( index - 1);
   }
 
   function handleMoreClick() {
-    setShowMore(!showMore);
+    setShowMore( !showMore );
   }
 
-  let sculpture = sculptureList[index];
+  let sculpture = sculptureList[ index ];
   return (
     <>
-      <button onClick={handleNextClick}>
+      <button onClick={ handleLastClick }>
+        Back
+      </button>
+      <button onClick={ handleNextClick }>
         Next
       </button>
       <h2>
-        <i>{sculpture.name} </i>
-        by {sculpture.artist}
+        <i>{ sculpture.name } </i>
+        by { sculpture.artist }
       </h2>
       <h3>
-        ({index + 1} of {sculptureList.length})
+        ({ index + 1 } of { sculptureList.length })
       </h3>
-      <button onClick={handleMoreClick}>
-        {showMore ? 'Hide' : 'Show'} details
+      <button onClick={ handleMoreClick }>
+        { showMore ? 'Hide' : 'Show' } details
       </button>
-      {showMore && <p>{sculpture.description}</p>}
+      { showMore && <p>{ sculpture.description }</p> }
       <img
-        src={sculpture.url}
-        alt={sculpture.alt}
+        src={ sculpture.url }
+        alt={ sculpture.alt }
       />
     </>
   );