diff --git a/src/Services.js b/src/Services.js index f3c25ed..5306d5e 100644 --- a/src/Services.js +++ b/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; diff --git a/src/actions/index.js b/src/actions/index.js index b59ffc8..d24071c 100644 --- a/src/actions/index.js +++ b/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 + } +} \ No newline at end of file diff --git a/src/components/Dialogs/NewRestaurant.js b/src/components/Dialogs/NewRestaurant.js index 3079d99..44438a9 100644 --- a/src/components/Dialogs/NewRestaurant.js +++ b/src/components/Dialogs/NewRestaurant.js @@ -260,9 +260,13 @@ export default function NewRestaurant() { }; const handleDescriptionChange = (event) => { - let stringLength = event.target.value.length; - let charleft = 400 - stringLength; - setState({ ...state, description: event.target.value, charLeft: charleft }); + const stringLength = event.target.value.length; + const charleft = 400 - stringLength; + 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 = () => { diff --git a/src/components/EditRestaurant/EditRestaurantInfo.js b/src/components/EditRestaurant/EditRestaurantInfo.js index 7b2eddf..b6805f0 100644 --- a/src/components/EditRestaurant/EditRestaurantInfo.js +++ b/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; - let charleft = 400 - stringLength; - setState({ ...state, description: event.target.value, charLeft: charleft }); + const stringLength = event.target.value.length; + const charleft = 400 - stringLength; + 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); diff --git a/src/components/EditRestaurant/EditRestaurantMenu.js b/src/components/EditRestaurant/EditRestaurantMenu.js index cab9727..5465346 100644 --- a/src/components/EditRestaurant/EditRestaurantMenu.js +++ b/src/components/EditRestaurant/EditRestaurantMenu.js @@ -23,8 +23,7 @@ const useStyles = makeStyles((theme) => ({ color: "#bbbbbb", width: "100%", maxWidth: "800px", - marginTop: "24px", - borderRadius: "24px" + marginTop: "24px" }, expandIcon: { color: "#bbbbbb", diff --git a/src/components/EditRestaurant/LunchMenu.js b/src/components/EditRestaurant/LunchMenu.js index ffec0a7..882dacc 100644 --- a/src/components/EditRestaurant/LunchMenu.js +++ b/src/components/EditRestaurant/LunchMenu.js @@ -27,7 +27,6 @@ const useStyles = makeStyles((theme) => ({ color: "#bbbbbb", width: "100%", maxWidth: "800px", - borderRadius: "24px" }, expandIcon: { color: "#bbbbbb", diff --git a/src/components/Output/CardDish.js b/src/components/Output/CardDish.js index da4407b..3832f8a 100644 --- a/src/components/Output/CardDish.js +++ b/src/components/Output/CardDish.js @@ -20,14 +20,16 @@ export default function CardDish(props) { const FormatPrices = () => { if (prices.price1.priceName === "") { return( +
{ prices.price1.price }zł
+
) } else { return (
- {prices.price1.priceName !== "" &&
{prices.price1.price}zł ({ prices.price1.priceName })
} - {prices.price2.priceName !== "" &&
{prices.price2.price}zł ({prices.price2.priceName})
} - {prices.price3.priceName !== "" &&
{prices.price3.price}zł ({ prices.price3.priceName })
} + {prices.price1.priceName !== "" &&
{ prices.price1.priceName } - {prices.price1.price}zł
} + {prices.price2.priceName !== "" &&
{prices.price2.priceName} - {prices.price2.price}zł
} + {prices.price3.priceName !== "" &&
{ prices.price3.priceName } - {prices.price3.price}zł
}
) } diff --git a/src/components/Output/CardRestaurant.js b/src/components/Output/CardRestaurant.js index dc589b4..5eb5757 100644 --- a/src/components/Output/CardRestaurant.js +++ b/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) { >
-

{props.name}

+
+

{props.name}

+
+ +

brak ocen

+
+

-

Miasto: {props.city}

-

Dziś otwarte: {getTodayHours(props.hours)}

+
+ +

{props.city}

+
+
+ +

{getTodayHours(props.hours)}

+

{props.description}

diff --git a/src/components/Output/EditCategoriesList.js b/src/components/Output/EditCategoriesList.js index e493851..2709462 100644 --- a/src/components/Output/EditCategoriesList.js +++ b/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", diff --git a/src/components/Output/SearchResults.js b/src/components/Output/SearchResults.js index c4ad217..83dec1c 100644 --- a/src/components/Output/SearchResults.js +++ b/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) => ( )); + 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 (( +
handleTagClick(tag)}/>
+ )) + } else { + return (( +
handleTagClick(tag)}/>
+ )) + } + }) + + const types = restaurantTypes.map((type) => { + if(filterTypes.includes(type)){ + return (
handleTypeClick(type)}/>
) + } else { + return (
handleTypeClick(type)}/>
) + } + }) + return (
-
-

o

-
-

|

+
+ toggleCollapsed()}> + + +
+
+
+

Tagi

+
+ {tags} +
+

Rodzaje kuchni

+
+ {types} +
+

Znaleziono: {count}

diff --git a/src/index.js b/src/index.js index f32c075..0f9efab 100644 --- a/src/index.js +++ b/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 ) ); diff --git a/src/reducers/data.js b/src/reducers/data.js index c48695b..51ada8a 100644 --- a/src/reducers/data.js +++ b/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) => { - if (restaurant._id === action.payload._id) { - return action.payload; - } else { - return restaurant; - } - }), + restaurants: [ + ...state.userData.restaurants.slice(0, index), + action.payload, + ...state.userData.restaurants.slice(index + 1) + ], }, }); 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; } diff --git a/src/styles/DishList.scss b/src/styles/DishList.scss index 7da45c4..570fa5e 100644 --- a/src/styles/DishList.scss +++ b/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-weight: 500; + font-size: 18px; + font-weight: 400; margin: auto; } p { - font-size: 13px; - font-weight: 500; + font-size: 14px; + 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; } diff --git a/src/styles/Restaurant.scss b/src/styles/Restaurant.scss index a36b072..40fc184 100644 --- a/src/styles/Restaurant.scss +++ b/src/styles/Restaurant.scss @@ -107,3 +107,8 @@ color: $gray; } } + +.dishlist-container{ + margin-top: 24px; + margin-bottom: 24px; +} \ No newline at end of file diff --git a/src/styles/SearchResults.scss b/src/styles/SearchResults.scss index 10c1488..d995ce3 100644 --- a/src/styles/SearchResults.scss +++ b/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; + } +} \ No newline at end of file