new look / search list / restaurant view

src/App.js

@@ -5,6 +5,7 @@ import LogoMain from "./components/logoMain";
 import Footer from "./components/Footer";
 import SearchPanel from "./components/SearchPanel";
 import SearchResults from "./components/SearchResults";
+import Restaurant from "./components/Restaurant";
 import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
 import { useSelector } from "react-redux";
 
@@ -25,13 +26,16 @@ function App() {
         <TopBar />
         <div className="main-container">
           <LogoMain />
+          {(appMode === "init" || appMode === "search results") && (
             <SearchPanel />
+          )}
           {appMode === "init" && (
             <p className="darkParagraph">
               Sprawdź co serwuje Twoja ulubiona restauracja.
             </p>
           )}
           {appMode === "search results" && <SearchResults />}
+          {appMode === "restaurant" && <Restaurant />}
         </div>
         <Footer />
       </div>

src/App.scss

@@ -4,13 +4,14 @@
 @import "./styles/Footer.scss";
 @import "./styles/SearchResults.scss";
 @import "./styles/Pictograms.scss";
+@import "./styles/Restaurant.scss";
 
 .App {
   padding: 0;
   margin: 0;
   height: 100%;
-  background-color: $bg-color;
   display: flex;
+  background-color: $bg-color;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
@@ -41,4 +42,5 @@ p {
   justify-content: center;
   text-align: center;
   align-items: center;
+  flex-grow: 20;
 }

src/Design.scss

@@ -1,6 +1,14 @@
-$main-color: #01c3a9;
+$main-color: #eb9800;
 $secondary-color: #307482;
 $darker-color: #234f53;
 $bg-color: #ffffff;
 $accents-color: #0e8496;
 $lighter-color: #00d1b5;
+
+/* $main-color: #01c3a9;
+$secondary-color: #307482;
+$darker-color: #234f53;
+$bg-color: #ffffff;
+$accents-color: #0e8496;
+$lighter-color: #00d1b5;
+ */

src/actions/index.js

@@ -68,3 +68,40 @@ export const setAppMode = (mode) => {
     type: mode,
   };
 };
+
+export const setRestaurant = (restaurant) => {
+  return {
+    type: "SET_RESTAURANT",
+    payload: restaurant,
+  };
+};
+
+export const fetchRestaurant = (id) => {
+  return function (dispatch) {
+    axios
+      .get("http://localhost:4000/restaurant?restaurantId=" + id)
+      .then((response) => {
+        dispatch(setRestaurant(response.data));
+        dispatch(setAppMode("APP_RESTAURANT"));
+        dispatch(fetchAllDishes(id));
+      })
+      .catch((err) => console.log(err));
+  };
+};
+
+const setDishes = (data) => {
+  return {
+    type: "SET_DISHES",
+    payload: data,
+  };
+};
+
+export const fetchAllDishes = (id) => {
+  return function (dispatch) {
+    axios
+      .get("http://localhost:4000/restaurant/dishes?restaurantId=" + id)
+      .then((response) => {
+        dispatch(setDishes(response.data));
+      });
+  };
+};

src/components/CardRestaurant.js

@@ -1,10 +1,31 @@
 import React from "react";
 import Pictograms from "./Pictograms";
+import { fetchRestaurant } from "../actions";
+import { useDispatch } from "react-redux";
+
+function extractTags(tags) {
+  var results = [];
+  for (let [key, value] of Object.entries(tags)) {
+    if (value === true) {
+      results.push(key);
+    }
+  }
+  return results;
+}
 
 export default function CardRestaurant(props) {
+  const dispatch = useDispatch();
+  const img = props.imgUrl;
+
   return (
-    <div className="card-restaurant">
-      <div className="card-img"></div>
+    <div
+      onClick={() => dispatch(fetchRestaurant(props.id))}
+      className="card-restaurant"
+    >
+      <div
+        className="card-img"
+        style={{ backgroundImage: "url(" + img + ")" }}
+      ></div>
       <div className="card-info">
         <div className="title-info">
           <h1>{props.name}</h1>
@@ -13,26 +34,10 @@ export default function CardRestaurant(props) {
           <h3>Godziny otwarcia: {props.hours}</h3>
         </div>
         <div className="card-description">
-          <p>
-            Jakiś krótki opis restauracji. Coś tam że jest przytulnie i
-            elegancko.
-          </p>
+          <p>{props.description}</p>
         </div>
         <div className="card-pictograms">
-          <Pictograms
-            pictograms={[
-              "alcohol",
-              "card",
-              "delivery",
-              "glutenFree",
-              "vegan",
-              "vegetarian",
-              "eggs",
-              "gluten",
-              "lactose",
-              "lactoseFree",
-            ]}
-          />
+          <Pictograms pictograms={extractTags(props.tags)} />
         </div>
       </div>
     </div>

src/components/Pictograms.js

@@ -20,7 +20,7 @@ function getImage(name) {
   switch (name) {
     case "alcohol":
       return alcohol;
-    case "card":
+    case "cardPayments":
       return card;
     case "delivery":
       return delivery;
@@ -36,7 +36,7 @@ function getImage(name) {
       return lactoseFree;
     case "peanuts":
       return peanuts;
-    case "pets":
+    case "petFriendly":
       return pets;
     case "seaFood":
       return seaFood;
@@ -49,13 +49,18 @@ function getImage(name) {
     case "vegetarian":
       return vegetarian;
     default:
-      return false;
+      return card;
   }
 }
 
 export default function (props) {
-  const pictograms = props.pictograms.map((pictogram) => (
-    <img className="pictogram" src={getImage(pictogram)} alt={pictogram} />
+  const pictograms = props.pictograms.map((pictogram, index) => (
+    <img
+      key={index}
+      className="pictogram"
+      src={getImage(pictogram)}
+      alt={pictogram}
+    />
   ));
 
   return <div className="pictograms-container">{pictograms}</div>;

src/components/Restaurant.js

@@ -0,0 +1,32 @@
+import React from "react";
+import Pictograms from "./Pictograms";
+import { useSelector } from "react-redux";
+
+export default function Restaurant(props) {
+  const restaurant = useSelector((state) => state.restaurant);
+  function extractTags(tags) {
+    var results = [];
+    for (let [key, value] of Object.entries(tags)) {
+      if (value === true) {
+        results.push(key);
+      }
+    }
+    return results;
+  }
+
+  return (
+    <div className="restaurant-container">
+      <div
+        className="restaurant-hero"
+        style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
+      >
+        <div className="restaurant-pictograms">
+          <Pictograms pictograms={extractTags(restaurant.tags)} />
+        </div>
+      </div>
+      <h1>{restaurant.name}</h1>
+      <p>{restaurant.city}</p>
+      <hr />
+    </div>
+  );
+}

src/components/SearchResults.js

@@ -7,15 +7,16 @@ export default function SearchResults() {
   const array = Array.from(results);
   var count = results.length;
   const restaurants = array.map((restaurant) => (
-    <li key={restaurant._id}>
     <CardRestaurant
+      key={restaurant._id}
+      id={restaurant._id}
       name={restaurant.name}
       city={restaurant.city}
+      description={restaurant.description}
       imgUrl={restaurant.imgUrl}
       hours={restaurant.workingHours}
       tags={restaurant.tags}
     />
-    </li>
   ));
 
   return (
@@ -24,7 +25,7 @@ export default function SearchResults() {
         <p>Znaleziono: {count}</p>
         <hr />
       </div>
-      <ul>{restaurants}</ul>
+      {restaurants}
     </div>
   );
 }

src/reducers/dishes.js

@@ -0,0 +1,14 @@
+const dishes = (state = [], action) => {
+  switch (action.type) {
+    case "SET_DISHES":
+      return (state = action.payload);
+    case "ADD_DISH":
+      return [...state, action.payload];
+    case "CLEAR_DISHES":
+      return (state = []);
+    default:
+      return state;
+  }
+};
+
+export default dishes;

src/reducers/index.js

@@ -3,12 +3,16 @@ import autoCompleteReducer from "./autoComplete";
 import searchResults from "./searchResults";
 import appMode from "./appMode";
 import searchQuery from "./searchQuery";
+import restaurant from "./restaurant";
+import dishes from "./dishes";
 
 const rootReducer = combineReducers({
   autocomplete: autoCompleteReducer,
   appMode: appMode,
   searchResults: searchResults,
   searchQuery: searchQuery,
+  restaurant: restaurant,
+  dishes: dishes,
 });
 
 export default rootReducer;

src/reducers/restaurant.js

@@ -0,0 +1,12 @@
+const restaurant = (state = {}, action) => {
+  switch (action.type) {
+    case "SET_RESTAURANT":
+      return (state = action.payload);
+    case "CLEAR_RESTAURANT":
+      return (state = {});
+    default:
+      return state;
+  }
+};
+
+export default restaurant;

src/styles/Restaurant.scss

@@ -0,0 +1,36 @@
+.restaurant-container {
+  min-width: 100vw;
+  height: 100%;
+  h1 {
+    font-weight: 100;
+    font-size: 3rem;
+    margin: 16px;
+    margin-bottom: 4px;
+  }
+  p {
+    margin: 6px;
+    color: $secondary-color;
+  }
+  hr {
+    border: solid 1px $main-color;
+  }
+}
+
+.restaurant-hero {
+  width: 100%;
+  height: 400px;
+  background-size: cover;
+  display: flex;
+  align-items: flex-end;
+}
+
+.restaurant-pictograms {
+  background-color: white;
+  width: fit-content;
+  padding: 4px;
+  margin: 20px;
+  border-radius: 50px;
+  .pictograms-container {
+    margin: 8px;
+  }
+}

src/styles/SearchResults.scss

@@ -4,23 +4,27 @@
 }
 
 .card-restaurant {
+  border: solid 1px rgb(224, 224, 224);
+  border-radius: 25px;
   margin: 20px 0px 20px 0px;
   color: $secondary-color;
-  min-width: 70vw;
+  max-width: 70vw;
   min-height: 200px;
   display: flex;
   cursor: pointer;
+  transition: all 0.25s;
   &:hover {
-    color: $main-color;
+    background-color: #fcfcfc;
+    border-color: rgba(241, 177, 38, 0.87);
   }
 }
 
 .card-img {
-  width: 180px;
+  min-width: 180px;
   height: 180px;
   margin: 10px;
-  border-radius: 100px;
-  background-image: url("../public/cat.jpg");
+  border-radius: 18px;
+  //border-radius: 100px;
   background-size: cover;
 }
 
@@ -51,7 +55,7 @@
 }
 
 .card-pictograms {
-  margin-bottom: 4px;
+  margin-bottom: 0px;
 }
 
 .results-count {