Filter

package.json

@@ -3,9 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.7.0",
+    "@emotion/styled": "^11.6.0",
+    "@material-ui/core": "^4.12.3",
+    "@mui/icons-material": "^5.2.0",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "antd": "^4.17.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",

src/App.js

@@ -3,7 +3,8 @@ import './App.css';
 import HomeContainer from './containers/HomeContainer';
 import NavBar from './components/NavBar';
 import Footer from './components/Footer';
-import LogIn from './components/LogIn'
+import LogIn from './components/LogIn';
+import Filter from './components/Filter';
 import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
 
 function App() {
@@ -13,6 +14,8 @@ function App() {
     <div className="App"> 
     <NavBar/>
     <div className="content">
+
+
       <Switch>
         <Route path="/" exact>
         <HomeContainer/>
@@ -27,7 +30,10 @@ function App() {
 
         </Route>
       </Switch>
+
+
       </div>
+
       <div className="footer" id="Footer">
       <Footer/>
       </div>

src/components/Filter.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+
+export default function CheckboxLabels({updateHalalFilter, updateGlutenFreeFilter, updateVegetarianFilter}) {
+  return (
+    <FormGroup>
+      <FormControlLabel control={<Checkbox />} onChange={updateHalalFilter} label="Halal" />
+      <FormControlLabel control={<Checkbox />} onChange={updateVegetarianFilter} label="Vegetarian" />
+      <FormControlLabel control={<Checkbox />} onChange={updateGlutenFreeFilter} label="Gluten Free" />
+    </FormGroup>
+  );
+
+
+
+}

src/components/RestaurantCard.js

@@ -37,7 +37,7 @@ function RestaurantCard({ restaurant, onClick }) {
           <h4>Halal?</h4>
           <p>{restaurant.halal ? "Yes" : "No"}</p>
           <h4>Gluten free?</h4>
-          <p>{restaurant.glutenfree ? "Yes" : "No"}</p>
+          <p>{restaurant.glutenFree ? "Yes" : "No"}</p>
           <h4>Average Rating</h4>
           <p>{restaurant.averageRating}</p>
 

src/components/WishList.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+function WishList() {
+    return (
+        <div className = "wishList">
+            <h3>Restaurant:</h3>
+            <p></p>
+        </div>
+    )
+}
+
+export default WishList

src/containers/HomeContainer.js

@@ -4,12 +4,27 @@ import './Containers.css';
 
 import RestaurantCardList from '../components/RestaurantCardList';
 import PopupCard from '../components/PopupCard';
+import Filter from '../components/Filter'
+import { Verified } from '@mui/icons-material';
 
 const HomeContainer = () => {
     const [restaurants, setRestaurants] = useState([]);
     const [popupShown, setPopupShown] = useState(null);
     const [shownRestaurant,setShownRestaurant] = useState(null);
+    const [halal, setHalal] = useState(false);
+    const [vegetarian, setVegetarian] = useState(false);
+    const [glutenFree, setGlutenFree] = useState(false);
 
+
+    const updateHalalFilter = () => {
+        setHalal(!halal)
+    }
+    const updateVegetarianFilter = () => {
+        setVegetarian(!vegetarian)
+    }
+    const updateGlutenFreeFilter = () => {
+        setGlutenFree(!glutenFree)
+    }
     const getRestaurantData = () => {
         fetch("http://localhost:8080/restaurant/allRestaurants")
             .then(response => response.json())
@@ -71,14 +86,55 @@ const HomeContainer = () => {
         .then(getRestaurantData);
     }
 
-
+    const filterRestaurants = () => {
+        if (halal && vegetarian && glutenFree){
+            return restaurants.filter(restaurant => {
+                return restaurant.halal && restaurant.vegetarian && restaurant.glutenFree
+            })
+        }
+        else if (halal && vegetarian){
+            return restaurants.filter(restaurant => {
+                return restaurant.halal && restaurant.vegetarian
+            })
+        }
+        else if (glutenFree && vegetarian){
+            return restaurants.filter(restaurant => {
+                return restaurant.glutenFree && restaurant.vegetarian
+            })
+        }
+        else if (glutenFree && halal){
+            return restaurants.filter(restaurant => {
+                return restaurant.glutenFree && restaurant.halal
+            })
+        }
+        else if (glutenFree){
+            return restaurants.filter(restaurant => {
+                return restaurant.glutenFree
+            })
+        }
+        else if  (halal){
+            return restaurants.filter(restaurant => {
+                return restaurant.halal
+            })
+        }
+        else if (vegetarian){
+            return restaurants.filter(restaurant => {
+                return restaurant.vegetarian
+            })
+        }
+
+
+        return restaurants
+    }
     return(
         <>
             {/* <NewRestaurantForm onRestuarantSubmission={addNewRestaurant}/> */}
 
             <img class ='heroImage' id="HeroImage" src='https://media.discordapp.net/attachments/913726718169194496/914889207376404530/Logo3.png'/>
-
-            <RestaurantCardList restaurants={restaurants} onClick={selectRestaurant,showPopup}
+            <Filter updateHalalFilter = {updateHalalFilter} halal = {halal} updateVegetarianFilter = {updateVegetarianFilter}
+            vegetarian = {vegetarian} updateGlutenFreeFilter = {updateGlutenFreeFilter} glutenFree ={glutenFree} />
+
+            <RestaurantCardList restaurants={filterRestaurants()} onClick={selectRestaurant,showPopup}
                 onRestaurantCompletion={updateRestaurantCompletion}/>
             <hr/>