web client v 0.1

src/components/Dialogs/NewRestaurant.js

@@ -8,8 +8,6 @@ import ButtonSecondary from "../Input/ButtonSecondary";
 import IconButton from "@material-ui/core/IconButton";
 import TextField from "@material-ui/core/TextField";
 import CloseIcon from "@material-ui/icons/Close";
-import { useSelector, useDispatch } from "react-redux";
-import { hideNewRestaurantDialog } from "../../actions/toggles";
 import Stepper from "@material-ui/core/Stepper";
 import Step from "@material-ui/core/Step";
 import StepLabel from "@material-ui/core/StepLabel";
@@ -18,6 +16,7 @@ import Autocomplete from "@material-ui/lab/Autocomplete";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import ImageUpload from "../Input/ImageUpload";
 import validator from "validator";
+import { useHistory } from "react-router-dom";
 // ICONS
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
@@ -62,6 +61,9 @@ const useStyles = makeStyles((theme) => ({
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
     },
+    "$ .MuiFormHelperText-root": {
+      color: "#bbbbbb",
+    },
   },
   timePicker: {
     margin: theme.spacing(2),
@@ -98,13 +100,13 @@ export default function NewRestaurant() {
     nameError: false,
     cityError: false,
     adressError: false,
+    descriptionError: false,
+    charLeft: 400,
   };
   const steps = ["Informacje", "Zdjęcie", "Lokalizacja"];
   const [state, setState] = useState(initialState);
   const [activeStep, setActiveStep] = React.useState(0);
   const styles = useStyles();
-  const dialogOpen = useSelector((state) => state.data.dialogs.newRestaurant);
-  const dispatch = useDispatch();
   const availableTags = [
     "Płatność kartą",
     "Lubimy zwierzaki",
@@ -114,6 +116,7 @@ export default function NewRestaurant() {
     "Podajemy alkohol",
     "Dowozimy",
   ];
+  const history = useHistory();
 
   // HANDLERS
 
@@ -125,9 +128,14 @@ 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 handlePreviousButton = () => {
     setActiveStep(activeStep - 1);
-    console.log(activeStep);
   };
 
   const validateForm = () => {
@@ -135,16 +143,24 @@ 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 }),
+      descriptionValid: validator.isLength(state.description, {
+        min: 1,
+        max: 400,
+      }),
     };
     setState({
       ...state,
       nameError: !validation.nameValid,
       cityError: !validation.cityValid,
       adressError: !validation.adressValid,
+      descriptionError: !validation.descriptionValid,
     });
 
     return (
-      validation.nameValid && validation.cityValid && validation.adressValid
+      validation.nameValid &&
+      validation.cityValid &&
+      validation.adressValid &&
+      validation.descriptionValid
     );
   };
 
@@ -154,13 +170,13 @@ export default function NewRestaurant() {
     <div>
       <Dialog
         className={styles.root}
-        open={dialogOpen}
+        open={true}
         aria-labelledby="newRestaurant-title"
       >
         <DialogTitle id="newRestaurant-title">Dodaj Lokal</DialogTitle>
         <IconButton
           className={styles.closeButton}
-          onClick={() => dispatch(hideNewRestaurantDialog())}
+          onClick={() => history.goBack()}
           aria-label="close"
         >
           <CloseIcon />
@@ -273,12 +289,17 @@ export default function NewRestaurant() {
                     fullWidth
                     label="Opis"
                     value={state.description}
-                    onChange={(event) =>
-                      setState({ ...state, description: event.target.value })
-                    }
+                    onChange={(event) => handleDescriptionChange(event)}
                     multiline
+                    error={state.descriptionError}
                     rows={3}
+                    rowsMax={8}
                     variant="outlined"
+                    helperText={"Pozostałe znaki: " + state.charLeft}
+                    FormHelperTextProps={{
+                      style: { color: "#bbbbbb" },
+                    }}
+                    required
                   />
                   <Autocomplete
                     multiple