Completed Hogwild

src/components/App.js

@@ -1,14 +1,27 @@
-import React from "react";
+import React, { useState } from "react";
+
 import Nav from "./Nav";
+import PigList from "./PigList";
+import Filter from "./Filter";
+import Sort from "./Sort";
+import HideHogs from "./HideHogs";
 
 import hogs from "../porkers_data";
+import PigForm from "./PigForm";
 
 function App() {
+  const [allHogs, setAllHogs] = useState(hogs)
+
 	return (
 		<div className="App">
 			<Nav />
+      <PigForm hogs={hogs} allHogs={allHogs} setAllHogs={setAllHogs}/>
+      <Filter hogs={hogs} allHogs={allHogs} setAllHogs={setAllHogs} />
+      <Sort allHogs={allHogs} setAllHogs={setAllHogs} hogs={hogs}/>
+      <HideHogs allHogs={allHogs} setAllHogs={setAllHogs} hogs={hogs}/>
+      <PigList className='ui grid container' hogs={hogs} allHogs={allHogs}/>
 		</div>
-	);
+	)
 }
 
 export default App;

src/components/Filter.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+function Filter({ allHogs, setAllHogs, hogs }) {
+  const [buttonText, setButtonText] = useState('Greased Hogs: ON')
+
+  const handleClick = () => {
+    const greasedHogs = allHogs.filter((hog) => hog.greased === true)
+
+    if(buttonText === 'Greased Hogs: ON'){
+      setAllHogs(greasedHogs)
+      setButtonText('Greased Hogs: OFF')
+    } else if(buttonText === 'Greased Hogs: OFF') {
+      setAllHogs(hogs)
+      setButtonText('Greased Hogs: ON')
+    }
+  }
+
+  return (
+    <>
+    <button onClick={handleClick}>
+      {buttonText}
+    </button>
+    </>
+  )
+}
+
+export default Filter

src/components/HideHogs.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+
+function HideHogs({ setAllHogs, hogs }) {
+  const [buttonText, setButtonText] = useState('HIDE HOGS')
+
+  const handleClick = () => {
+    if(buttonText === 'HIDE HOGS'){
+      setAllHogs([])
+      setButtonText('SHOW HOGS')
+    } else if(buttonText === 'SHOW HOGS') {
+      setAllHogs(hogs)
+      setButtonText('HIDE HOGS')
+    }
+  }
+
+  return (
+    <>
+    <button onClick={handleClick}>
+      {buttonText}
+    </button>
+    </>
+  )
+}
+
+export default HideHogs

src/components/PigForm.js

@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+
+function PigForm({  setAllHogs, hogs }) {
+  const [newHogName, setNewHogName] = useState('')
+  const [newHogSpecialty, setNewHogSpecialty] = useState('')
+  const [newHogWeight, setNewHogWeight] = useState('')
+  const [newHogGreased, setNewHogGreased] = useState('')
+  const [newHogMedal, setNewHogMedal] = useState('')
+  const [newHogImg, setNewHogImg] = useState('')
+
+  function handleHogNameChange(event) {
+    setNewHogName(event.target.value)
+  }
+
+  function handleHogSpecialtyChange(event) {
+    setNewHogSpecialty(event.target.value)
+  }
+
+  function handleHogWeightChange(event) {
+    setNewHogWeight(event.target.value)
+  }
+
+  function handleHogGreasedChange(event) {
+    setNewHogGreased(event.target.value)
+  }
+
+  function handleHogsMedalChange(event) {
+    setNewHogMedal(event.target.value)
+  }
+
+  function handleHogsImgChange(event) {
+    setNewHogImg(event.target.value)
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault()
+
+    const addHog = {
+      name: newHogName,
+      specialty: newHogSpecialty,
+      greased: newHogGreased,
+      weight: newHogWeight,
+      "highest medal achieved": newHogMedal,
+      image: newHogImg
+    }
+
+    const newHogList = [...hogs, addHog]
+    setAllHogs(newHogList)
+  }
+
+  return (
+    <ul>
+      <form onSubmit={handleSubmit}>
+        <li>
+        <label>
+          Name
+          <input
+            type="text"
+            name="text"
+            value={newHogName}
+            onChange={handleHogNameChange}
+          />
+        </label>
+        <label>
+          Specialty
+          <input
+            type="text"
+            name="text"
+            value={newHogSpecialty}
+            onChange={handleHogSpecialtyChange}
+          />
+        </label>
+        <label>
+          Weight
+          <input
+            placeholder='Please enter a number'
+            type="text"
+            name="text"
+            value={newHogWeight}
+            onChange={handleHogWeightChange}
+          />
+        </label>
+      </li>
+      <li>
+        <label>
+          Pigture
+          <input
+            placeholder='Please enter an img url'
+            type="text"
+            name="text"
+            value={newHogImg}
+            onChange={handleHogsImgChange}
+          />
+        </label>
+      </li>
+      <li>
+      <label>
+        Greased?
+        <select
+          name="category"
+          value={newHogGreased}
+          onChange={handleHogGreasedChange}
+        >
+          <option value=""disabled selected>Select</option>
+          <option value="Yes">Yes</option>
+          <option value="No">No</option>
+        </select>
+      </label>
+      </li>
+      <label>
+        Highest Medal Achieved
+        <select
+          name="category"
+          value={newHogMedal}
+          onChange={handleHogsMedalChange}
+        >
+          <option value=""disabled selected>Select Medal</option>
+          <option value="Gold">Gold</option>
+          <option value="Silver">Silver</option>
+          <option value="Bronze">Bronze</option>
+        </select>
+      </label>
+      <li>
+        <input type="submit" value="Add Hog" />
+      </li>
+      </form>
+    </ul>
+  )
+}
+
+export default PigForm

src/components/PigList.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import Tile from './Tile'
+
+function PigList({ allHogs }) {
+  const createHogList = allHogs.map((hog) => {
+    return (
+      <Tile
+        className='pigTile ui eight wide column'
+        key={hog.name}
+        name={hog.name}
+        img={hog.image}
+        specialty={hog.specialty}
+        weight={hog.weight}
+        greased={hog.greased}
+        medal={hog['highest medal achieved']}
+      />
+    )
+  })
+
+  return (
+    <div className='ui grid container'>
+      {createHogList}
+    </div>
+  )
+}
+
+export default PigList

src/components/Sort.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+
+function Sort({ allHogs, setAllHogs, hogs }) {
+  const [sortButtonName, setSortButtonName] = useState('Sort By Name: ON')
+  const [sortButtonWeight, setSortButtonWeight] = useState('Sort By Weight: ON')
+
+  const sortedHogs = allHogs.toSorted((a, b) => {
+    const hogA = a.name
+    const hogB = b.name
+    if (hogA < hogB) {
+      return -1
+    }
+    if (hogA > hogB) {
+      return 1
+    }
+    return 0
+  })
+
+  const handleNameClick = () => {
+    if(sortButtonName === 'Sort By Name: ON'){
+      setAllHogs(sortedHogs)
+      setSortButtonName('Sort By Name: OFF')
+    } else if(sortButtonName === 'Sort By Name: OFF') {
+      setAllHogs(hogs)
+      setSortButtonName('Sort By Name: ON')
+    }
+  }
+
+  const sortedHogsWeight = allHogs.toSorted((a, b) => {
+    const hogA = a.weight
+    const hogB = b.weight
+    if (hogA < hogB) {
+      return -1
+    }
+    if (hogA > hogB) {
+      return 1
+    }
+    return 0
+  })
+
+  const handleWeightClick = () => {
+    if(sortButtonWeight === 'Sort By Weight: ON'){
+      setAllHogs(sortedHogsWeight)
+      setSortButtonWeight('Sort By Weight: OFF')
+    } else if(sortButtonWeight === 'Sort By Weight: OFF') {
+      setAllHogs(hogs)
+      setSortButtonWeight('Sort By Weight: ON')
+    }
+  }
+
+  return (
+    <>
+    <button onClick={handleNameClick}>
+      {sortButtonName}
+    </button>
+    <button onClick={handleWeightClick}>
+      {sortButtonWeight}
+    </button>
+    </>
+  )
+}
+
+export default Sort

src/components/Tile.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+
+function Tile({ name, img, specialty, weight, greased, medal, className }) {
+  const [selectedHog, setSelectedHog] = useState(false)
+
+  function handleClick() {
+    setSelectedHog(!selectedHog)
+  }
+
+  return (
+    <div className={className} onClick={handleClick}>
+      <h3>{name}</h3>
+      <img src={img} alt={name} />
+      {selectedHog &&(
+        <div>
+          <p>Specialty: {specialty}</p>
+          <p>Weight: {weight}</p>
+          <p>Greased: {greased ? 'Yes' : 'No'}</p>
+          <p>Highest Medal Achieved: {medal}</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Tile

src/index.css

@@ -112,6 +112,11 @@ ul {
   color: #FBB;
 }
 
+.pigTile img {
+  width: inherit;
+  height: inherit;
+}
+
 .minPigTile {
   width: 250px;
   height: 250px;
@@ -140,7 +145,6 @@ ul {
   clear: both;
 }
 
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
@@ -149,4 +153,4 @@ ul {
   to {
     transform: rotate(360deg);
   }
-}
+}