Display Hogs, Sort Hogs, Filter Hogs

src/components/App.js

@@ -1,12 +1,17 @@
-import React from "react";
+import React, {useState} from "react";
 import Nav from "./Nav";
+import Menu from './Menu';
 
 import hogs from "../porkers_data";
 
 function App() {
+  const [greaseFilter, setGreaseFilter] = useState('')
+  const [sortByWeight, setSortByWeight] = useState('')
+
 	return (
 		<div className="App">
-			<Nav />
+			<Nav setGreaseFilter={setGreaseFilter} setSortByWeight={setSortByWeight}/>
+      <Menu hogs={hogs} greaseFilter={greaseFilter} sortByWeight={sortByWeight}/>
 		</div>
 	);
 }

src/components/Hog.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+const Hog = ({hog, setSelectedHog, selectedHog}) => {
+
+  const handleClick = (e) => {
+    e.preventDefault()
+    setSelectedHog(selectedHog===hog ? '' : hog)
+  }
+
+if(hog!==selectedHog){
+	return (
+    <div className='pigTile'>
+		  <div id={hog.name} className='ui eight wide column' onClick={handleClick}>
+        <h3>{hog.name}</h3>
+        <img className='pigImg' src={hog.image}/>
+		  </div>
+    </div>
+	)} else {
+    return(
+      <div className='pigTile'>
+        <div id={hog.name} className='ui eight wide column' onClick={handleClick}>
+        <h3>{hog.name}</h3>
+        <div>
+          <p>Greased: {hog.greased ? 'Yes' : 'No'}</p>
+          <p>Specialty: {hog.specialty}</p>
+          <p>Weight: {hog.weight}</p>
+        </div>
+        <img className='pigImg' src={hog.image}/>
+        </div>
+      </div>
+    )
+  }
+};
+
+export default Hog;

src/components/Menu.js

@@ -0,0 +1,34 @@
+import React, {useState} from "react";
+import Hog from './Hog';
+
+const Menu = ({ hogs, greaseFilter, sortByWeight}) => {
+  const [selectedHog, setSelectedHog] = useState(false)
+
+  const hogList = sortByWeight ?
+    [...hogs].sort((a, b) => a.weight - b.weight)
+    : [...hogs].sort((a, b) => a.name.localeCompare(b.name))
+
+
+  const displayHogs = () =>
+    greaseFilter ?
+    hogList.map(hog => hog.greased ?
+      <Hog key={hog.name}
+        hog={hog}
+        selectedHog={selectedHog}
+        setSelectedHog={setSelectedHog}/> :
+      '') :
+      hogList.map(hog =>
+        <Hog key={hog.name}
+          hog={hog}
+          selectedHog={selectedHog}
+          setSelectedHog={setSelectedHog}/>)
+
+
+	return (
+		<div className="ui grid container">
+      {displayHogs()}
+		</div>
+	);
+};
+
+export default Menu;

src/components/Nav.js

@@ -1,7 +1,24 @@
 import React from "react";
 import piggy from "../assets/porco.png";
 
-const Nav = () => {
+const Nav = ({setGreaseFilter, setSortByWeight}) => {
+
+  const handleClickSort = (e) => {
+    e.preventDefault()
+    const sortByWeight = e.target.classList.contains('On')
+    sortByWeight ? e.target.classList.remove('On') : e.target.classList.add('On')
+    sortByWeight ? e.target.textContent = 'Sort Hogs By Name' : e.target.textContent = 'Sort Hogs By Weight'
+    setSortByWeight(sortByWeight ? true : false)
+  }
+
+  const handleClickFilter = (e) => {
+    e.preventDefault()
+    const toggleFilter = e.target.classList.contains('On')
+    toggleFilter ? e.target.classList.remove('On') : e.target.classList.add('On')
+    toggleFilter ? e.target.textContent = 'Click for the full list of hogs' : e.target.textContent = 'Click if you love greasy hogs'
+    setGreaseFilter(toggleFilter ? true : false)
+  }
+
 	return (
 		<div className="navWrapper">
 			<span className="headerText">HogWild</span>
@@ -11,6 +28,10 @@ const Nav = () => {
 			<span className="normalText">
 				A React App for County Fair Hog Fans
 			</span>
+      <div>
+        <button onClick={handleClickFilter}>Click if you love greasy hogs</button>
+        <button onClick={handleClickSort}>Sort Hogs By Weight</button>
+      </div>
 		</div>
 	);
 };

src/index.css

@@ -149,4 +149,11 @@ ul {
   to {
     transform: rotate(360deg);
   }
-}
+}
+
+.pigImg {
+  width: 310px;
+  height: 300px;
+  object-fit: cover;
+  aspect-ratio: 1.5;
+}