From d8173a9d7ff8f9f1aa1132a3568c753a4fdb56f9 Mon Sep 17 00:00:00 2001 From: Jonasz Bigda Date: Wed, 22 Jul 2020 12:45:34 +0200 Subject: [PATCH] Search query / results cards --- src/App.js | 17 ++++++++--- src/App.scss | 2 ++ src/actions/index.js | 35 ++++++++++++++++++++- src/components/ButtonSecondary.js | 2 +- src/components/CardRestaurant.js | 18 +++++++++++ src/components/SearchPanel.js | 10 ++++-- src/components/SearchResults.js | 28 +++++++++++++++++ src/components/logoMain.js | 13 ++++++++ src/index.js | 10 ++++-- src/public/cat.jpg | Bin 0 -> 14850 bytes src/reducers/appMode.js | 2 +- src/reducers/index.js | 2 ++ src/reducers/searchQuery.js | 12 ++++++++ src/styles/SearchResults.scss | 49 ++++++++++++++++++++++++++++++ 14 files changed, 188 insertions(+), 12 deletions(-) create mode 100644 src/components/CardRestaurant.js create mode 100644 src/components/SearchResults.js create mode 100644 src/components/logoMain.js create mode 100644 src/public/cat.jpg create mode 100644 src/reducers/searchQuery.js create mode 100644 src/styles/SearchResults.scss diff --git a/src/App.js b/src/App.js index 70672e3..b7b3c3e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,12 @@ import React from "react"; -import logo from "./public/logo_mint.svg"; import "./App.scss"; import TopBar from "./components/TopBar"; +import LogoMain from "./components/logoMain"; import Footer from "./components/Footer"; import SearchPanel from "./components/SearchPanel"; +import SearchResults from "./components/SearchResults"; import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles"; +import { useSelector } from "react-redux"; const theme = createMuiTheme({ palette: { @@ -15,16 +17,21 @@ const theme = createMuiTheme({ }); function App() { + const appMode = useSelector((store) => store.appMode); + return (
- Menui logo + -

- Sprawdź co serwuje Twoja ulubiona restauracja. -

+ {appMode === "init" && ( +

+ Sprawdź co serwuje Twoja ulubiona restauracja. +

+ )} +
diff --git a/src/App.scss b/src/App.scss index 1fb5149..2792432 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,6 +2,7 @@ @import "./styles/TopBar.scss"; @import "./styles/SearchPanel.scss"; @import "./styles/Footer.scss"; +@import "./styles/SearchResults.scss"; .App { padding: 0; @@ -38,4 +39,5 @@ p { flex-direction: column; justify-content: center; text-align: center; + align-items: center; } diff --git a/src/actions/index.js b/src/actions/index.js index 3c50ac4..3243b44 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -16,7 +16,9 @@ export const clearAutocomplete = () => { export const fetchAutocomplete = (input) => { return function (dispatch) { axios - .get("http://localhost:4000/search/autocomplete?string=" + input) + .get( + "http://localhost:4000/search/autocomplete?string=" + encodeURI(input) + ) .then((response) => { const cities = Array.from(response.data.cities); const restaurants = Array.from(response.data.restaurants); @@ -30,6 +32,37 @@ export const fetchAutocomplete = (input) => { }; }; +export const fetchSearch = (input) => { + return function (dispatch) { + axios + .get("http://localhost:4000/search?string=" + encodeURI(input)) + .then((response) => { + const data = response.data; + if (Object.keys(data).length > 0) { + dispatch(setSearchResults(data)); + dispatch(setAppMode("APP_SEARCH_RESULTS")); + } + }) + .catch((err) => { + console.log(err); + }); + }; +}; + +const setSearchResults = (input) => { + return { + type: "SEARCH_RESULTS", + payload: input, + }; +}; + +export const setSearchQuery = (input) => { + return { + type: "SEARCH_QUERY_SET", + payload: input, + }; +}; + export const setAppMode = (mode) => { return { type: mode, diff --git a/src/components/ButtonSecondary.js b/src/components/ButtonSecondary.js index fae2076..427f906 100644 --- a/src/components/ButtonSecondary.js +++ b/src/components/ButtonSecondary.js @@ -19,5 +19,5 @@ const StylizedButton = withStyles({ })(Button); export default function ButtonSecondary(props) { - return {props.text}; + return {props.text}; } diff --git a/src/components/CardRestaurant.js b/src/components/CardRestaurant.js new file mode 100644 index 0000000..9ff9346 --- /dev/null +++ b/src/components/CardRestaurant.js @@ -0,0 +1,18 @@ +import React from "react"; + +export default function CardRestaurant(props) { + return ( +
+
+
+

{props.name}

+
+

Miasto: {props.city}

+

Godziny otwarcia: {props.hours}

+

+ Jakiś krótki opis restauracji. Coś tam że jest przytulnie i elegancko. +

+
+
+ ); +} diff --git a/src/components/SearchPanel.js b/src/components/SearchPanel.js index d912c04..3836fbd 100644 --- a/src/components/SearchPanel.js +++ b/src/components/SearchPanel.js @@ -3,10 +3,11 @@ import ButtonSecondary from "./ButtonSecondary"; import TextField from "@material-ui/core/TextField"; import Autocomplete from "@material-ui/lab/Autocomplete"; import { useSelector, useDispatch } from "react-redux"; -import { fetchAutocomplete } from "../actions"; +import { fetchAutocomplete, setSearchQuery, fetchSearch } from "../actions"; export default function SearchPanel() { let options = useSelector((store) => store.autocomplete); + let searchQuery = useSelector((store) => store.searchQuery); const dispatch = useDispatch(); return ( @@ -15,18 +16,23 @@ export default function SearchPanel() { options={options} style={{ width: 300 }} noOptionsText="Brak podpowiedzi" + onChange={(event) => dispatch(setSearchQuery(event.target.textContent))} renderInput={(params) => ( dispatch(setSearchQuery(event.target.value))} onInput={(event) => dispatch(fetchAutocomplete(event.target.value))} /> )} />
- + dispatch(fetchSearch(searchQuery))} + text="Szukaj" + />
); diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js new file mode 100644 index 0000000..2d67d9b --- /dev/null +++ b/src/components/SearchResults.js @@ -0,0 +1,28 @@ +import React from "react"; +import CardRestaurant from "./CardRestaurant"; +import { useSelector } from "react-redux"; + +export default function SearchResults() { + var results = useSelector((store) => store.searchResults); + + return ( +
+ + + + +
+ ); +} diff --git a/src/components/logoMain.js b/src/components/logoMain.js new file mode 100644 index 0000000..a2ec52f --- /dev/null +++ b/src/components/logoMain.js @@ -0,0 +1,13 @@ +import logo from "../public/logo_mint.svg"; +import React from "react"; +import { useSelector } from "react-redux"; + +export default function LogoMain() { + let appMode = useSelector((store) => store.appMode); + + if (appMode === "init") { + return Menui logo; + } else { + return ""; + } +} diff --git a/src/index.js b/src/index.js index 70eb46e..405b735 100644 --- a/src/index.js +++ b/src/index.js @@ -6,9 +6,15 @@ import App from "./App"; import * as serviceWorker from "./serviceWorker"; import rootReducer from "./reducers"; import thunk from "redux-thunk"; -import { createStore, applyMiddleware } from "redux"; +import { createStore, applyMiddleware, compose } from "redux"; -const store = createStore(rootReducer, applyMiddleware(thunk)); +const store = createStore( + rootReducer, + compose( + applyMiddleware(thunk), + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() + ) +); ReactDOM.render( diff --git a/src/public/cat.jpg b/src/public/cat.jpg new file mode 100644 index 0000000000000000000000000000000000000000..34f49a59a5a9e5cb6829b965de16f8d6ddc3e928 GIT binary patch literal 14850 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 literal 0 HcmV?d00001 diff --git a/src/reducers/appMode.js b/src/reducers/appMode.js index a8e04dc..b7bb239 100644 --- a/src/reducers/appMode.js +++ b/src/reducers/appMode.js @@ -1,4 +1,4 @@ -const appModeReducer = (state = "init", action) => { +const appModeReducer = (state = "search results", action) => { switch (action.type) { case "APP_INIT": return (state = "init"); diff --git a/src/reducers/index.js b/src/reducers/index.js index ad1a00c..c0d1fca 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -2,11 +2,13 @@ import { combineReducers } from "redux"; import autoCompleteReducer from "./autoComplete"; import searchResults from "./searchResults"; import appMode from "./appMode"; +import searchQuery from "./searchQuery"; const rootReducer = combineReducers({ autocomplete: autoCompleteReducer, appMode: appMode, searchResults: searchResults, + searchQuery: searchQuery, }); export default rootReducer; diff --git a/src/reducers/searchQuery.js b/src/reducers/searchQuery.js new file mode 100644 index 0000000..75dab81 --- /dev/null +++ b/src/reducers/searchQuery.js @@ -0,0 +1,12 @@ +const searchQuery = (state = {}, action) => { + switch (action.type) { + case "SEARCH_QUERY_SET": + return (state = action.payload); + case "SEARCH_QUERY_CLEAR": + return (state = ""); + default: + return state; + } +}; + +export default searchQuery; diff --git a/src/styles/SearchResults.scss b/src/styles/SearchResults.scss new file mode 100644 index 0000000..ffe1e89 --- /dev/null +++ b/src/styles/SearchResults.scss @@ -0,0 +1,49 @@ +@import "./Design.scss"; + +.search-results { +} + +.card-restaurant { + background-color: #f7f7f7; + margin: 14px; + color: $secondary-color; + border-radius: 10px; + min-width: 70vw; + min-height: 200px; + display: flex; + cursor: pointer; + :hover { + background-color: #ebebeb; + } +} + +.card-img { + width: 180px; + height: 180px; + margin: 10px; + border-radius: 8px; + background-image: url("../public/cat.jpg"); + background-size: cover; +} + +.card-info { + text-align: start; + flex-grow: 6; + + h1 { + color: $main-color; + font-size: 1.6rem; + font-weight: 300; + margin-bottom: 4px; + } + h3 { + font-weight: 400; + margin-top: 2px; + margin-bottom: 2px; + font-size: 0.8rem; + } + hr { + color: $main-color; + border: solid 1px; + } +}