redesign and fixes

src/components/Output/SearchResults.js

@@ -1,13 +1,45 @@
-import React from "react";
+import React, { useState } from "react";
 import CardRestaurant from "./CardRestaurant";
 import SearchPanel from "../Input/SearchPanel";
-import { useSelector } from "react-redux";
+import { makeStyles } from '@material-ui/core/styles';
+import { useSelector, useDispatch } from "react-redux";
+import { IconButton } from "@material-ui/core";
+import TuneIcon from '@material-ui/icons/Tune';
+import Chip from '@material-ui/core/Chip';
+import { restaurantTypes } from '../../config.js';
+import { setTags, setTypes } from "../../actions";
+import { decodeTags, compareArrays } from "../../Services"
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    '& > *': {
+      margin: theme.spacing(0.5),
+    },
+  }
+}))
 
 export default function SearchResults() {
   var results = useSelector((store) => store.searchResults);
+  const filterTags = useSelector((store) => store.data.filters.tags);
+  const filterTypes = useSelector((store) => store.data.filters.types);
+  const dispatch = useDispatch();
+  const [collapsed, setCollapsed] = useState(true);
   const array = Array.from(results);
+  const classes = useStyles();
   var count = results.length;
-  const restaurants = array.map((restaurant) => (
+  const filterRestaurants = () => {
+    if(filterTags.length > 0 || filterTypes.length > 0){
+      return array.filter((restaurant) => {
+        return filterTypes.includes(restaurant.type) || compareArrays(filterTags, decodeTags(restaurant.tags))
+      })
+    } else {
+      return array;
+    }
+  }
+  const restaurants = filterRestaurants().map((restaurant) => (
     <CardRestaurant
       key={restaurant._id}
       id={restaurant._id}
@@ -17,17 +49,96 @@ export default function SearchResults() {
       imgUrl={restaurant.imgUrl}
       hours={restaurant.workingHours}
       tags={restaurant.tags}
+      type={restaurant.type}
     />
   ));
 
+  const availableTags = [
+    "Płatność kartą",
+    "Lubimy zwierzaki",
+    "Bezglutenowe",
+    "Wegańskie",
+    "Wegetariańskie",
+    "Podajemy alkohol",
+    "Dowozimy",
+  ];
+
+  const handleTagClick = (tag) => {
+    let tags = [...filterTags];
+    if(tags.includes(tag)){
+      const filtered = tags.filter((filterTag) => {
+        return tag !== filterTag;
+      })
+      dispatch(setTags(filtered))
+    } else {
+      tags.push(tag)
+      dispatch(setTags(tags))
+    }
+  }
+
+  const handleTypeClick = (type) => {
+    let types = [...filterTypes];
+    if(types.includes(type)){
+      const filtered = types.filter((filterType) => {
+        return type !== filterType;
+      })
+      dispatch(setTypes(filtered))
+    } else {
+      types.push(type)
+      dispatch(setTypes(types))
+    }
+  }
+
+  const toggleCollapsed = () => {
+    if(collapsed){
+      document.getElementById("collapsible").style.maxHeight = "400px";
+      setCollapsed(false);
+    } else {
+      document.getElementById("collapsible").style.maxHeight = "0px";
+      setCollapsed(true);
+    }
+  }
+
+  const tags = availableTags.map((tag) => {
+    if(filterTags.includes(tag)){
+      return ((
+        <div key={tag} className="chip"><Chip size="small" color="primary" label={tag} onClick={() => handleTagClick(tag)}/></div>
+      ))
+    } else {
+      return ((
+        <div key={tag} className="chip"><Chip size="small" color="default" label={tag} onClick={() => handleTagClick(tag)}/></div>
+      ))
+    }
+  })
+
+  const types = restaurantTypes.map((type) => {
+    if(filterTypes.includes(type)){
+      return (<div key={type} className="chip"><Chip size="small" color="primary" label={type} onClick={()=> handleTypeClick(type)}/></div>)
+    } else {
+      return (<div key={type} className="chip"><Chip size="small" color="default" label={type} onClick={()=> handleTypeClick(type)}/></div>)
+    }
+  })
+
   return (
     <div className="search-results">
       <div className="search-top">
-        <div className="search-top-left">
-          <p>o</p>
-        </div>
         <SearchPanel/>
-        <h3>|</h3>
+        <div>
+          <IconButton onClick={() => toggleCollapsed()}>
+            <TuneIcon color="primary"/>
+          </IconButton>
+        </div>
+      </div>
+      <div id="collapsible" className="collapsible">
+      <h3>Tagi</h3>
+        <div className={classes.root}>
+          {tags}
+        </div>
+        <h3>Rodzaje kuchni</h3>
+        <div className={classes.root}>
+          {types}
+        </div>
+        <div style={{height: "20px"}}></div>
       </div>
       <div className="search-top-lower">
         <p>Znaleziono: {count}</p>