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

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 { backend } from "../../config";
+import InputLunchMenuHours from "../Input/InputLunchMenuHours";
+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.typeValid
+      validation.descriptionValid
     );
   };
 
@@ -320,25 +342,23 @@ export default function NewRestaurant() {
                 />
               </div>
               <div className="newRestaurant-content-fullwidth">
-                <TextField
-                  className={styles.textInputFullWidth}
-                  fullWidth
+              <FormControl
+                variant="outlined"
+                required
+                fullWidth
+                className={styles.formControl}
+              >
+                <InputLabel id="category-select">Kuchnia</InputLabel>
+                <Select
+                  labelId="category-select"
+                  id="category"
                   value={state.type}
-                  error={state.typeError}
-                  label="Kuchnia"
-                  placeholder="np. Meksykańska"
-                  variant="outlined"
-                  onChange={(event) =>
-                    setState({ ...state, type: event.target.value })
-                  }
-                  InputProps={{
-                    startAdornment: (
-                      <InputAdornment position="start">
-                        <FastfoodIcon color="primary" />
-                      </InputAdornment>
-                    ),
-                  }}
-                />
+                  required
+                  onChange={(event) => setState({ ...state, type: event.target.value })}
+                >
+                  {availableTypes}
+                </Select>
+              </FormControl>
               </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