redesign and fixes

src/components/Output/CardDish.js

@@ -20,14 +20,16 @@ export default function CardDish(props) {
   const FormatPrices = () => {
     if (prices.price1.priceName === "") {
       return(
+        <div className="carddish-prices-multi">
         <h5>{ prices.price1.price }zł</h5>
+        </div>
       )
     } else {
       return (
         <div className="carddish-prices-multi">
-          {prices.price1.priceName !== "" && <h5>{prices.price1.price}zł ({ prices.price1.priceName })</h5>}
-          {prices.price2.priceName !== "" && <h5>{prices.price2.price}zł ({prices.price2.priceName})</h5>}
-          {prices.price3.priceName !== "" && <h5>{prices.price3.price}zł ({ prices.price3.priceName })</h5>}
+          {prices.price1.priceName !== "" && <h5>{ prices.price1.priceName } - {prices.price1.price}zł</h5>}
+          {prices.price2.priceName !== "" && <h5>{prices.price2.priceName} - {prices.price2.price}zł</h5>}
+          {prices.price3.priceName !== "" && <h5>{ prices.price3.priceName } - {prices.price3.price}zł</h5>}
         </div>
       )
     }

src/components/Output/CardRestaurant.js

@@ -2,6 +2,9 @@ import React from "react";
 import Pictograms from "./Pictograms";
 import { useHistory } from "react-router-dom";
 import { getTodayHours } from "../../Services.js";
+import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import LocationCityIcon from '@material-ui/icons/LocationCity';
+import GradeIcon from '@material-ui/icons/Grade';
 
 function extractTags(tags) {
   var results = [];
@@ -29,10 +32,22 @@ export default function CardRestaurant(props) {
       ></div>
       <div className="card-info">
         <div className="title-info">
-          <h1>{props.name}</h1>
+          <div className="card-info-line-top">
+            <h1>{props.name}</h1>
+            <div className="card-info-line">
+              <GradeIcon fontSize="medium"/>
+              <h3>brak ocen</h3>
+            </div>
+          </div>
           <hr />
-          <h3>Miasto: {props.city}</h3>
-          <h3>Dziś otwarte: {getTodayHours(props.hours)}</h3>
+          <div className="card-info-line">
+            <LocationCityIcon color="primary" fontSize="small"/>
+            <h3>{props.city}</h3>
+          </div>
+          <div className="card-info-line">
+            <AccessTimeIcon color="primary" fontSize="small"/>
+            <h3>{getTodayHours(props.hours)}</h3>
+          </div>
         </div>
         <div className="card-description">
           <p>{props.description}</p>

src/components/Output/EditCategoriesList.js

@@ -16,8 +16,7 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: "#262626",
     color: "#bbbbbb",
     width: "100%",
-    maxWidth: "800px",
-    borderRadius: "24px"
+    maxWidth: "800px"
   },
   expandIcon: {
     color: "#bbbbbb",

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>