home screen changes (info button, appstore and google play buttons)

src/App.js

@@ -24,6 +24,7 @@ import EditRestaurant from "./components/Dialogs/EditRestaurant";
 import NewDish from "./components/Dialogs/NewDish";
 import EditDish from "./components/Dialogs/EditDish";
 import Dish from "./components/Dialogs/Dish";
+import HomeScreen from "./components/Output/HomeScreen";
 
 const theme = createMuiTheme({
   palette: {
@@ -57,11 +58,7 @@ function App(props) {
             <div className="main-container">
               <Switch>
                 <Route exact path="/">
-                  <LogoMain />
+                 <HomeScreen/>
-                  <SearchPanel />
-                  <p className="darkParagraph">
-                    Sprawdź co serwuje Twoja ulubiona restauracja.
-                  </p>
                 </Route>
                 <Route path="/results">
                   <LogoMain />

src/App.scss

@@ -10,6 +10,7 @@
 @import "./styles/NewRestaurant.scss";
 @import "./styles/EditRestaurant.scss";
 @import "./styles/Dish.scss";
+@import "./styles/Home.scss";
 
 .App {
   background-image: url("./public/bg_tile.jpg");
@@ -70,4 +71,4 @@ p {
   margin-left: 10px;
   margin-top: auto;
   margin-bottom: auto;
-}
+}

src/components/Dialogs/NewRestaurant.js

@@ -24,8 +24,12 @@ import { useSelector, useDispatch } from "react-redux";
 import { notification, refreshUserData } from "../../actions";
 import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
 import InputWorkingHours from "../Input/InputWorkingHours";
-import InputWorkingHoursSingle from "../Input/InputWorkingHoursSingle";
+import InputLunchMenuHours from "../Input/InputLunchMenuHours";
-import { backend } from "../../config";
+import { backend, restaurantTypes } from "../../config";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import InputLabel from "@material-ui/core/InputLabel";
 // ICONS
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
@@ -84,6 +88,24 @@ const useStyles = makeStyles((theme) => ({
       color: "#bbbbbb",
     },
   },
+  formControl: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    minWidth: 100,
+    maxHeight: 400,
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiSelect-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2),
+  },
 }));
 
 export default function NewRestaurant() {
@@ -97,7 +119,7 @@ export default function NewRestaurant() {
     adress: "",
     coordinates: [52.354293, 19.42377],
     placesId: "",
-    type: "",
+    type: "polska",
     imgUrl: "",
     workingHours: {
       pn: "8:00 - 22:00",
@@ -121,7 +143,6 @@ export default function NewRestaurant() {
     cityError: false,
     adressError: false,
     descriptionError: false,
-    typeError: false,
     charLeft: 400,
   };
   const steps = ["Informacje", "Zdjęcie", "Lokalizacja"];
@@ -140,6 +161,10 @@ export default function NewRestaurant() {
   const history = useHistory();
   const token = useSelector((state) => state.data.userData.jwt);
 
+  const availableTypes = restaurantTypes.map((type) => {
+    return <MenuItem key={type} value={type}>{type}</MenuItem>
+  });
+
   // HANDLERS
 
   const sendForm = () => {
@@ -244,7 +269,6 @@ export default function NewRestaurant() {
       nameValid: validator.isLength(state.name, { min: 1, max: 40 }),
       cityValid: validator.isLength(state.city, { min: 1, max: 40 }),
       adressValid: validator.isLength(state.name, { min: 1, max: 40 }),
-      typeValid: validator.isLength(state.type, { min: 1, max: 40 }),
       descriptionValid: validator.isLength(state.description, {
         min: 1,
         max: 400,
@@ -254,7 +278,6 @@ export default function NewRestaurant() {
       ...state,
       nameError: !validation.nameValid,
       cityError: !validation.cityValid,
-      typeError: !validation.typeValid,
       adressError: !validation.adressValid,
       descriptionError: !validation.descriptionValid,
     });
@@ -263,8 +286,7 @@ export default function NewRestaurant() {
       validation.nameValid &&
       validation.cityValid &&
       validation.adressValid &&
-      validation.descriptionValid &&
+      validation.descriptionValid
-      validation.typeValid
     );
   };
 
@@ -320,25 +342,23 @@ export default function NewRestaurant() {
                 />
               </div>
               <div className="newRestaurant-content-fullwidth">
-                <TextField
+              <FormControl
-                  className={styles.textInputFullWidth}
+                variant="outlined"
-                  fullWidth
+                required
+                fullWidth
+                className={styles.formControl}
+              >
+                <InputLabel id="category-select">Kuchnia</InputLabel>
+                <Select
+                  labelId="category-select"
+                  id="category"
                   value={state.type}
-                  error={state.typeError}
+                  required
-                  label="Kuchnia"
+                  onChange={(event) => setState({ ...state, type: event.target.value })}
-                  placeholder="np. Meksykańska"
+                >
-                  variant="outlined"
+                  {availableTypes}
-                  onChange={(event) =>
+                </Select>
-                    setState({ ...state, type: event.target.value })
+              </FormControl>
-                  }
-                  InputProps={{
-                    startAdornment: (
-                      <InputAdornment position="start">
-                        <FastfoodIcon color="primary" />
-                      </InputAdornment>
-                    ),
-                  }}
-                />
               </div>
               <div className="newRestaurant-content">
                 <TextField
@@ -387,7 +407,7 @@ export default function NewRestaurant() {
                 />
                  <div className="newRestaurant-content-fullwidth">
                  <div className="workingHours-container" style={{ marginTop: 14 }}>
-                <InputWorkingHoursSingle nieczynne={!state.lunchHours} hours={state.lunchHours} changeValue={(value) => setLunchHours(value)} day="Lunch hours" /></div>
+                <InputLunchMenuHours nieczynne={!state.lunchHours} hours={state.lunchHours} changeValue={(value) => setLunchHours(value)}/></div>
               </div>
                 <div className="newRestaurant-content-fullwidth">
                   <TextField

src/components/EditRestaurant/EditRestaurantInfo.js

@@ -13,7 +13,6 @@ import InstagramIcon from "@material-ui/icons/Instagram";
 import LanguageIcon from "@material-ui/icons/Language";
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
-import InputWorkingHoursSingle from "../Input/InputWorkingHoursSingle";
 import Divider from "@material-ui/core/Divider";
 import Link from "@material-ui/core/Link";
 import { decodeTags } from "../../Services";
@@ -24,8 +23,12 @@ import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
 import { prepareTags } from "../../Services.js";
 import axios from "axios";
 import PasswordConfirmation from "../Dialogs/PasswordConfirmation";
-import { backend } from "../../config";
+import { backend, restaurantTypes } from "../../config";
 import InputLunchMenuHours from "../Input/InputLunchMenuHours";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import InputLabel from "@material-ui/core/InputLabel";
 
 const useStyles = makeStyles((theme) => ({
   textInput: {
@@ -53,6 +56,24 @@ const useStyles = makeStyles((theme) => ({
   link: {
     cursor: "pointer",
   },
+  formControl: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    minWidth: 100,
+    maxHeight: 400,
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiSelect-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2),
+  },
 }));
 
 const calculateCharLeft = (from) => {
@@ -130,6 +151,10 @@ export default function EditRestaurantInfo(props) {
     );
   };
 
+  const availableTypes = restaurantTypes.map((type) => {
+    return <MenuItem key={type} value={type}>{type}</MenuItem>
+  });
+
   const cancelChanges = () => {
     setState(initialState);
   };
@@ -243,28 +268,24 @@ export default function EditRestaurantInfo(props) {
           />
         </div>
         <div className="editRestaurant-fullWidth">
-          <TextField
+        <FormControl
-            className={styles.textInputFullWidth}
+                variant="outlined"
-            fullWidth
+                required
-            value={state.type}
+                fullWidth
-            error={state.typeError}
+                className={styles.formControl}
-            onChange={(event) =>
+              >
-              setState({ ...state, type: event.target.value })
+                <InputLabel id="category-select">Kuchnia</InputLabel>
-            }
+                <Select
-            InputLabelProps={{ shrink: true }}
+                  labelId="category-select"
-            InputProps={{
+                  id="category"
-              startAdornment: (
+                  value={state.type}
-                <InputAdornment position="start">
+                  required
-                  <FastfoodIcon color="primary" />
+                  onChange={(event) => setState({ ...state, type: event.target.value })}
-                </InputAdornment>
+                >
-              ),
+                  {availableTypes}
-            }}
+                </Select>
-            label="Kuchnia"
+              </FormControl>
-            placeholder="np. Meksykańska"
-            variant="outlined"
-          />
         </div>
-
         <TextField
           className={styles.textInput}
           value={state.city}
@@ -341,10 +362,6 @@ export default function EditRestaurantInfo(props) {
           setHours={(hours) => setState({ ...state, workingHours: hours })}
           hours={state.workingHours}
         />
-        <div className="newRestaurant-content-fullwidth">
-                 <div className="workingHours-container" style={{ marginTop: 14 }}>
-                <InputWorkingHoursSingle nieczynne={!state.lunchHours} hours={state.lunchHours} changeValue={(value) => setLunchHours(value)} day="Lunch hours" /></div>
-              </div>
         <div className="editRestaurant-sectiontitle">
           <h4>Dane kontaktowe</h4>
           <Divider />
@@ -427,9 +444,9 @@ export default function EditRestaurantInfo(props) {
           <h4>Lunch menu</h4>
           <Divider />
           <InputLunchMenuHours
-            off={!state.lunchHours}
+            nieczynne={!state.lunchHours}
             hours={state.lunchHours}
-            changeValue={(value) => setState({ ...state, lunchHours: value })}
+            changeValue={setLunchHours}
           />
         </div>
         <div className="editRestaurant-sectiontitle">

src/components/Input/InputLunchMenuHours.js

@@ -27,17 +27,17 @@ export default function InputWorkingHoursSingle(props) {
     props.changeValue(event.target.value);
   };
   const handleCheckbox = () => {
-    if (!props.off) {
+    if (!props.nieczynne) {
       props.changeValue("");
     } else {
-      props.changeValue("13:00 - 15:00");
+      props.changeValue("12:30 - 13:30");
     }
   };
 
   const classes = useStyles();
   return (
     <div className="workingHours-day">
-      <h5>Lunch menu</h5>
+      <h5>Lunch hours</h5>
       <TextField
         value={props.hours}
         variant="outlined"
@@ -48,9 +48,13 @@ export default function InputWorkingHoursSingle(props) {
       <FormControlLabel
         className={classes.checkbox}
         control={
-          <Checkbox onClick={handleCheckbox} checked={props.off} name="brak" />
+          <Checkbox
+            onClick={handleCheckbox}
+            checked={props.nieczynne}
+            name="nieczynne"
+          />
         }
-        label="Wyłącz"
+        label="Brak"
       />
     </div>
   );

src/components/Output/HomeScreen.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import LogoMain from "../Output/logoMain";
+import SearchPanel from "../Input/SearchPanel";
+import HelpIcon from '@material-ui/icons/Help';
+import appstore from "../../public/appstore.png";
+import googleplay from "../../public/googleplay.png";
+
+export default function HomeScreen() {
+    return <div className="hs">
+        <div className="hs-top">
+            <h5>Dowiedz się czym właściwie jest Menui</h5>
+            <div className="hs-top-icon"><HelpIcon/></div>
+        </div>
+        <div className="hs-center">
+            <LogoMain />
+            <SearchPanel />
+            <p className="darkParagraph">
+                Sprawdź co serwuje Twoja ulubiona restauracja.
+            </p>
+        </div>
+        <div className="hs-bottom">
+            <h4>Pobierz na telefon</h4>
+            <div>
+                <img className="hs-bottom-icon" src={appstore} alt="Get Menui from App Store" />
+                <img className="hs-bottom-icon" src={googleplay} alt="Get Menui from Google Play"/>
+            </div>
+        </div>
+    </div>
+}

src/config.js

@@ -1 +1,37 @@
 export const backend = "https://menui.azurewebsites.net/";
+
+export const restaurantTypes = [
+    "afrykańska",
+    "arabska",
+    "bałkańska",
+    "belgijska", 
+    "brytyjska",
+    "chińska",
+    "chorwacka",
+    "czeska",
+    "dietetyczna",
+    "francuska",
+    "grecka",
+    "gruzińska",
+    "hiszpańska",
+    "indyjska",
+    "irlandzka",
+    "japońska",
+    "koreańska",
+    "koszerna",
+    "meksykańska",
+    "międzynarodowa",
+    "polska",
+    "rosyjska",
+    "skandynawska",
+    "śródziemnomorska",
+    "tajska",
+    "turecka",
+    "ukraińska",
+    "węgierska",
+    "wietnamska",
+    "włoska",
+    "żydowska",
+    "mieszane",
+    "inna",
+  ];

src/index.js

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

src/styles/Home.scss

@@ -0,0 +1,36 @@
+.hs {
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.hs-top {
+  display: flex;
+  cursor: pointer;
+  width: fit-content;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.315);
+  color: rgb(184, 184, 184);
+  border-radius: 8px;
+  h5 {
+    font-weight: 500;
+    margin-left: 18px;
+  }
+  transition: background-color 0.2s;
+}
+
+.hs-top:hover {
+  background-color: rgba(71, 71, 71, 0.315);
+}
+
+.hs-top-icon {
+  margin: 18px;
+}
+
+.hs-bottom-icon {
+  height: 3rem;
+  margin: 10px;
+  cursor: pointer;
+}