Add Filters to Homepage

src/App.css

@@ -1,38 +1,24 @@
-.App {
-  text-align: center;
+* {
+  box-sizing: border-box;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.base {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
-  color: #61dafb;
+.filters {
+  width: 10%;
+  position: fixed;
+  align-self: flex-start;
+  top: 200px;
+  right: 10%;
+  padding: 0%;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.feeds {
+  margin: 2em 10%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  width: 60%;
 }

src/pages/Home.js

@@ -7,7 +7,9 @@ import {
 	CardActions,
 	CardContent,
 	CardMedia,
+	Checkbox,
 	Chip,
+	FormControlLabel,
 	IconButton,
 	Link,
 	Menu,
@@ -22,9 +24,10 @@ import NavBar from "./shared/NavBar";
 import config from "../config";
 // TODO: Replace with API accessed feeds
 import feeds from "./dummyData/feeds.json";
+const feedCategories = Array.from(new Set(feeds.map(i => i.tags).flat()));
 
 function FeedCard({ feed }) {
-	const [filled, setFilled] = useState(Math.random() > 0.5);
+	const [filled, setFilled] = useState(Math.random() > 0.7);
 	let style = {};
 	if (filled) {
 		style={
@@ -35,8 +38,9 @@ function FeedCard({ feed }) {
 		<Card
 			key={feed.id}
 			style={{
-				maxWidth: "600px",
-				margin: "20px auto",
+				maxWidth: "500px",
+				width: "100%",
+				margin: "20px 0",
 			}}
 		>
 			<CardActionArea>
@@ -76,6 +80,7 @@ FeedCard.propTypes = {
 function App() {
 	const history = useHistory();
 	const [anchorEl, setAnchorEl] = useState(null);
+	const [categories, setCategories] = useState(feedCategories);
 	const open = Boolean(anchorEl);
 
 	function handleMenu(event) {
@@ -91,6 +96,25 @@ function App() {
 		history.push("/");
 	}
 
+	function toggleCategory(category) {
+		console.log(category);
+		console.log(categories);
+		console.log(categories.includes(category));
+		if (categories.includes(category))
+			setCategories(categories.filter(i => i !== category));
+		else
+			setCategories([...categories, category]);
+	}
+
+	const visibleFeeds = feeds.filter(i => {
+		for (let tag of i.tags) {
+			for (let category of categories) {
+				if (category == tag)
+					return true;
+			}
+		}
+		return false;
+	});
 	return (<>
 		<NavBar>
 			<div>
@@ -124,9 +148,27 @@ function App() {
 				</Menu>
 			</div>
 		</NavBar>
-
-		<div>
-			{feeds.map(feed => <FeedCard key={feed.id} feed={feed} />)}
+		<div className="base">
+			<div className="feeds">
+				{visibleFeeds.length === 0 ? <Typography variant="h5" style={{color: "#666"}}component="div"> Nothing here (╯°□°)╯︵ ┻━┻</Typography>: null}
+				{visibleFeeds.map(feed => <FeedCard key={feed.id} feed={feed} />)}
+			</div>
+			<div className="filters">
+				<Typography variant="h5" component="p">Filters</Typography>
+				{feedCategories.map(category => (
+					<FormControlLabel
+						key={category}
+						control={
+							<Checkbox
+								checked={categories.includes(category)}
+								onChange={() => toggleCategory(category)}
+								name="checkedF"
+							/>
+						}
+						label={category}
+					/>
+				))}
+			</div>
 		</div>
 	</>);
 }