redesign and fixes

src/Services.js

@@ -42,6 +42,19 @@ export function decodeTags(tags) {
   return outTags;
 }
 
+export function compareArrays (arr1, arr2) {
+  let result = false;
+  arr1.every((elem) => {
+    if(arr2.includes(elem)){
+      result = true;
+      return false;
+    } else {
+      return true;
+    }
+  })
+  return result;
+}
+
 export const openInNewTab = (url) => {
   const newWindow = window.open(url, "_blank", "noopener,noreferrer");
   if (newWindow) newWindow.opener = null;

src/actions/index.js

@@ -347,3 +347,17 @@ export const updateRestaurant = (restaurant) => {
     payload: restaurant,
   };
 };
+
+export const setTags = (tags) => {
+  return {
+    type: "SET_TAGS",
+    payload: tags
+  }
+}
+
+export const setTypes = (types) => {
+  return {
+    type: "SET_TYPES",
+    payload: types
+  }
+}

src/components/Dialogs/NewRestaurant.js

@@ -260,9 +260,13 @@ export default function NewRestaurant() {
   };
 
   const handleDescriptionChange = (event) => {
-    let stringLength = event.target.value.length;
+    const stringLength = event.target.value.length;
-    let charleft = 400 - stringLength;
+    const charleft = 400 - stringLength;
-    setState({ ...state, description: event.target.value, charLeft: charleft });
+    if(stringLength <= 400){
+      setState({ ...state, description: event.target.value, charLeft: charleft, descriptionError: false });
+    } else {
+      setState({ ...state, description: event.target.value, charLeft: charleft, descriptionError: true });
+    }
   };
 
   const handlePreviousButton = () => {

src/components/EditRestaurant/EditRestaurantInfo.js

@@ -111,9 +111,13 @@ export default function EditRestaurantInfo(props) {
   const jwt = useSelector((state) => state.data.userData.jwt);
   const email = useSelector((state) => state.data.userData.userEmail);
   const handleDescriptionChange = (event) => {
-    let stringLength = event.target.value.length;
+    const stringLength = event.target.value.length;
-    let charleft = 400 - stringLength;
+    const charleft = 400 - stringLength;
-    setState({ ...state, description: event.target.value, charLeft: charleft });
+    if(stringLength <= 400){
+      setState({ ...state, description: event.target.value, charleft: charleft, descriptionError: false });
+    } else {
+      setState({ ...state, description: event.target.value, charleft: charleft, descriptionError: true });
+    }
   };
   const availableTags = [
     "Płatność kartą",
@@ -256,7 +260,7 @@ export default function EditRestaurantInfo(props) {
         .then((response) => {
           dispatch(hideBackdrop());
           dispatch(notification("Dane zostały zapisane.", "success"));
-          dispatch(updateRestaurant(response));
+          dispatch(updateRestaurant(response.data));
         })
         .catch((err) => {
           console.log(err);

src/components/EditRestaurant/EditRestaurantMenu.js

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

src/components/EditRestaurant/LunchMenu.js

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

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.price1.priceName !== "" && <h5>{ prices.price1.priceName } - {prices.price1.price}zł</h5>}
-          {prices.price2.priceName !== "" && <h5>{prices.price2.price}zł ({prices.price2.priceName})</h5>}
+          {prices.price2.priceName !== "" && <h5>{prices.price2.priceName} - {prices.price2.price}zł</h5>}
-          {prices.price3.priceName !== "" && <h5>{prices.price3.price}zł ({ prices.price3.priceName })</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>
+          <div className="card-info-line">
-          <h3>Dziś otwarte: {getTodayHours(props.hours)}</h3>
+            <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",
+    maxWidth: "800px"
-    borderRadius: "24px"
   },
   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>

src/index.js

@@ -16,6 +16,7 @@ const store = createStore(
   rootReducer(history),
   compose(
     applyMiddleware(routerMiddleware(history), thunk),
+    window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
   )
 );
 

src/reducers/data.js

@@ -23,7 +23,7 @@ const initialState = {
   backdrop: false,
   tempData: {},
   filters: {
-    type: [],
+    types: [],
     tags: []
   }
 };
@@ -89,21 +89,24 @@ const data = (state = initialState, action) => {
     case "HIDE_BACKDROP":
       return (state = { ...state, backdrop: false });
     case "UPDATE_RESTAURANT":
+      const index = state.userData.restaurants.findIndex((restaurant) => restaurant._id === action.payload._id);
       return (state = {
         ...state,
         userData: {
           ...state.userData,
-          restaurants: state.userData.restaurants.map((restaurant) => {
+          restaurants: [
-            if (restaurant._id === action.payload._id) {
+            ...state.userData.restaurants.slice(0, index),
-              return action.payload;
+            action.payload,
-            } else {
+            ...state.userData.restaurants.slice(index + 1)
-              return restaurant;
+          ],
-            }
-          }),
         },
       });
     case "SET_NEW_TOKEN":
       return (state = {...state, userData: {...state.userData, jwt: action.payload}})
+    case "SET_TYPES":
+      return (state = {...state, filters: {...state.filters, types: action.payload}})
+    case "SET_TAGS":
+      return (state = {...state, filters: {...state.filters, tags: action.payload}})
     default:
       return state;
   }

src/styles/DishList.scss

@@ -1,6 +1,3 @@
-.dishlist-container {
-}
-
 h4 {
   font-weight: 400;
   margin-left: 1rem;
@@ -8,7 +5,7 @@ h4 {
 
 .carddish-container {
   background-color: #303030;
-  border-radius: 12px;
+  border-radius: 24px;
   margin: 2px auto 2px auto;
   padding: 8px;
   display: flex;
@@ -33,22 +30,22 @@ h4 {
   background-position: center;
   width: 120px;
   height: 120px;
-  border-radius: 12px;
+  border-radius: 20px;
   margin: 0px 14px 0px 0px;
 }
 
 .carddish-left {
   display: flex;
   h2 {
-    font-size: 16px;
+    font-size: 18px;
-    font-weight: 500;
+    font-weight: 400;
     margin: auto;
   }
   p {
-    font-size: 13px;
+    font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
     margin-left: auto;
-    color: $gray;
+    color: #c9c9c9;
   }
 }
 
@@ -59,7 +56,7 @@ h4 {
 }
 
 .carddish-left-middle {
-  margin-top: 8px;
+  margin-top: 10px;
   p {
     margin: auto;
     margin-bottom: 3px;
@@ -80,8 +77,12 @@ h4 {
 }
 
 .carddish-prices-multi {
+  margin-right: 6px;
+  margin-top: 6px;
   text-align: end;
   h5 {
+    font-size: 14px;
+    font-weight: 400;
     margin-top: 0;
     margin-bottom: 4px;
   }

src/styles/Restaurant.scss

@@ -107,3 +107,8 @@
     color: $gray;
   }
 }
+
+.dishlist-container{
+  margin-top: 24px;
+  margin-bottom: 24px;
+}

src/styles/SearchResults.scss

@@ -9,15 +9,11 @@
   background-color:$dark-gray;
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   margin-bottom: 0;
 }
 
-.search-top-left{
-  margin-left: 24px;
-}
-
 .search-top-lower{
   margin-top: 0;
   background-color: #202020;
@@ -89,7 +85,6 @@
 }
 
 .card-pictograms {
-  margin-bottom: 12px;
 }
 
 .results-count {
@@ -115,3 +110,31 @@
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
 }
+
+.collapsible{
+  background-color: #444444;
+  max-height: 0px;
+  overflow: hidden;
+  transition: max-height 0.25s;
+  h3{
+    font-size: medium;
+    font-weight: 400;
+  }
+}
+
+.card-info-line{
+  display: flex;
+  align-items: center;
+  h3{
+    margin-left: 8px;
+  }
+}
+
+.card-info-line-top{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  h3{
+    font-size: medium;
+  }
+}