Add CRU Functionality

src/components/AddHogForm.js

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+
+const AddHogForm = ({ handleNewHog }) => {
+
+	const [formData, setFormData] = useState({
+    name: '',
+    specialty: '',
+    greased: false,
+    weight: '',
+    medal: 'none',
+    image: ''
+  })
+
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target
+    setFormData({
+      ...formData,
+      [name]: type === 'checkbox' ? checked : value
+    })
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    handleNewHog(formData)
+  }
+
+	return (
+    <form className="ui form"  style={{maxWidth:'400px'}} onSubmit={handleSubmit}>
+      <div className="field">
+        <label>Name</label>
+        <input
+          type="text"
+          name="name"
+          value={formData.name}
+          onChange={handleChange}
+        />
+      </div>
+      <div className="field">
+        <label>Specialty</label>
+        <input
+          type="text"
+          name="specialty"
+          value={formData.specialty}
+          onChange={handleChange}
+        />
+      </div>
+      <div className="field">
+        <label>Greased</label>
+        <input
+          type="checkbox"
+          name="greased"
+          checked={formData.greased}
+          onChange={handleChange}
+        />
+      </div>
+      <div className="field">
+        <label>Weight</label>
+        <input
+          type="number"
+          name="weight"
+          value={formData.weight}
+          onChange={handleChange}
+        />
+      </div>
+      <div className="field">
+        <label>Medal</label>
+        <select
+        className="ui dropdown"
+          name="medal"
+          value={formData.medal}
+          onChange={handleChange}
+        >
+          <option value="none">None</option>
+					<option value="wood">Wood</option>
+					<option value="bronze">Bronze</option>
+          <option value="silver">Silver</option>
+          <option value="gold">Gold</option>
+					<option value="diamond">Diamond</option>
+					<option value="platinum">Platinum</option>
+        </select>
+      </div>
+      <div className="field">
+        <label>Image Source</label>
+        <input
+          type="text"
+          name="image"
+          value={formData.image} onChange={handleChange} 
+        />
+      </div>
+      <button className="ui button" type="submit">Submit</button>
+    </form>
+  );
+};
+
+export default AddHogForm;

src/components/App.js

@@ -1,14 +1,23 @@
-import React from "react";
-import Nav from "./Nav";
+import React, { useState } from "react"
+
+import hogs from "../porkers_data"
+
+import Nav from "./Nav"
+import HogList from "./HogList"
+import AddHogForm from "./AddHogForm"
 
-import hogs from "../porkers_data";
 
 function App() {
+	const [hogsList, setHogsList] = useState(hogs)
+	const handleNewHog = (newHog) => setHogsList([...hogs, newHog])
+
 	return (
 		<div className="App">
 			<Nav />
+			<AddHogForm handleNewHog={handleNewHog} />
+			<HogList hogs={hogsList} />
 		</div>
-	);
+	)
 }
 
 export default App;

src/components/HogList.js

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import SortDropdown from "./SortDropdown";
+import HogTile from "./HogTile";
+
+const HogList = ({ hogs }) => {
+	const [showGreased, setShowGreased] = useState(false)
+	const [sortValue, setSortValue] = useState('')
+	const [nonHiddenList, setNonHiddenList] = useState(hogs)
+
+	const handleFilterGreased = () => setShowGreased(showGreased => !showGreased)
+	const handleSort = (sortValue) => setSortValue(sortValue)
+
+	const handleHideHog = (hogToHide) => {
+		setNonHiddenList(nonHiddenList.filter(hog => hog.name !== hogToHide))	
+	}
+
+	const handleShowAllHogs = () => setNonHiddenList(hogs)
+
+	const sortedList = [...nonHiddenList].sort((a, b) => {
+		if(sortValue === 'name'){
+			return a.name.localeCompare(b.name)
+		} else if(sortValue === 'weight') {
+			return a.weight - b.weight
+		}
+	})
+
+	const filteredList = showGreased ? sortedList.filter(hog => hog.greased) : sortedList
+
+	return (
+		<>
+			<div>
+				<button className="ui button"
+					style={showGreased ? {backgroundColor: 'lightblue'} : null} 
+					onClick={handleFilterGreased}>
+						Filter Greased Hogs
+				</button>
+				<button className="ui button"
+					style={{marginLeft: '20px', marginBottom: '20px'}} 
+					onClick={handleShowAllHogs}>
+						Show All Hogs
+				</button>
+			</div>
+			<SortDropdown handleSort={handleSort} />
+			<div className="ui grid container">
+				<div className="ui eight wide column">
+					{filteredList.map(hog => {
+						return <HogTile key={hog.name} hog={hog} handleHideHog={handleHideHog} />
+					})}
+				</div>
+			</div>
+		</>
+	)
+}
+
+export default HogList;

src/components/HogTile.js

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+
+const HogTile = ({ hog, handleHideHog }) => {
+	const [showDetails, setShowDetails] = useState(false)
+	const handleShowDetails = () => setShowDetails(!showDetails)	
+
+	return (
+		<div key={hog.name} className="ui card" >
+			<div className="image">
+				<img onClick={handleShowDetails} src={hog.image}/>
+			</div>
+			<div className="content">
+				<p className="header">{hog.name}</p>
+				{showDetails ? 
+					<div className="meta">
+						<span>Specialty: {hog.specialty}</span><br/>
+						<span>Weight: {hog.weight}</span><br/> 
+						<span>{hog.greased ? 'Greased' : 'Not Greased'}</span><br/> 
+						<span>
+							<i className="certificate icon"></i>
+							{hog["highest medal achieved"]}
+						</span>
+					</div>  
+				: null}
+				<button className="ui button" onClick={() => handleHideHog(hog.name)}>Hide This Hog!</button>
+			</div>
+		</div>
+	)
+}
+
+export default HogTile;

src/components/SortDropdown.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const SortDropdown = ({ handleSort }) => {
+	const handleChange = (e) => handleSort(e.target.value)
+
+	return (
+		<select name="sort" onChange={handleChange}>
+			<option value="">Sort</option>
+			<option value="name">Name</option>
+			<option value="weight">Weight</option>
+		</select>
+	)
+}
+
+export default SortDropdown;

src/index.css

@@ -112,16 +112,19 @@ ul {
   color: #FBB;
 }
 
+img:hover{
+  cursor: pointer;
+}
+
 .minPigTile {
   width: 250px;
-  height: 250px;
   background-size: cover;
 }
 
 .maxPigTile {
   background-size: cover;
-  width: 500px;
-  height: 500px;
+  width: 100px;
+  height: 100px;
 }
 
 .pigTile:hover {
@@ -149,4 +152,4 @@ ul {
   to {
     transform: rotate(360deg);
   }
-}
+}