web client v0.2 (add restaurant OK, settings OK)

src/components/Dialogs/NewRestaurant.js

@@ -19,12 +19,15 @@ import validator from "validator";
 import { useHistory } from "react-router-dom";
 import InputGoogleMaps from "../Input/InputGoogleMaps";
 import InfoDialog from "../Output/InfoDialog";
+import { prepareTags } from "../../Services.js";
+import axios from "axios";
+import { useSelector } from "react-redux";
 // ICONS
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
 import PhoneIcon from "@material-ui/icons/Phone";
 import FacebookIcon from "@material-ui/icons/Facebook";
-import TwitterIcon from "@material-ui/icons/Twitter";
+import InstagramIcon from "@material-ui/icons/Instagram";
 import LanguageIcon from "@material-ui/icons/Language";
 import ButtonPrimary from "../Input/ButtonPrimary";
 
@@ -100,18 +103,19 @@ export default function NewRestaurant() {
     tags: [],
     phone: "",
     facebook: "",
-    twitter: "",
+    instagram: "",
     www: "",
     nameError: false,
     cityError: false,
     adressError: false,
     descriptionError: false,
     charLeft: 400,
-    open: true,
-    response: "",
+    response: "Dodawanie lokalu, prosimy o chwilę cierpliwości...",
   };
   const steps = ["Informacje", "Zdjęcie", "Lokalizacja"];
   const [state, setState] = useState(initialState);
+  const [open, setOpen] = useState(true);
+  const [loading, setLoading] = useState(true);
   const [activeStep, setActiveStep] = React.useState(0);
   const styles = useStyles();
   const availableTags = [
@@ -124,26 +128,59 @@ export default function NewRestaurant() {
     "Dowozimy",
   ];
   const history = useHistory();
+  const token = useSelector((state) => state.data.jwt);
 
   // HANDLERS
 
   const sendForm = () => {
-    // format tags
-    const formattedTags;
+    const formattedTags = prepareTags(state.tags);
     const data = {
       name: state.name,
-        city: state.city,
-        adress: state.adress,
-        coordinates: state.coordinates,
-        placesId: state.placesId,
-        imgURL: state.imgURL,
-        workingHours: `${state.hoursFrom} - ${state.hoursTo}`,
-        description: state.description,
-        tags: formattedTags,
-        links: {},
-        phone: request.phone,
-        hidden: request.hidden,
-    }
+      city: state.city,
+      adress: state.adress,
+      coordinates: state.coordinates,
+      placesId: state.placesId,
+      imgURL: state.imgURL,
+      workingHours: `${state.hoursFrom} - ${state.hoursTo}`,
+      description: state.description,
+      tags: formattedTags,
+      facebook: state.facebook,
+      instagram: state.instagram,
+      www: state.www,
+      phone: state.phone,
+      hidden: false,
+    };
+    setOpen(false);
+    axios({
+      url: "http://localhost:4000/restaurant",
+      method: "POST",
+      data: data,
+      headers: {
+        "x-auth-token": token,
+      },
+    })
+      .then((response) => {
+        setLoading(false);
+        setState({
+          ...state,
+          response:
+            "Lokal został dodany, aktywuj subskrypcję, aby był widoczny w wynikach wyszukiwania.",
+        });
+        setTimeout(() => {
+          history.push("/");
+        }, 5000);
+      })
+      .catch((error) => {
+        setLoading(false);
+        setState({
+          ...state,
+          response:
+            "Wystąpił nieoczekiwany błąd, przepraszamy za utrudnienia. Spróbuj ponownie za chwilę.",
+        });
+        setTimeout(() => {
+          history.push("/");
+        }, 5000);
+      });
   };
 
   const setCoordinatesAndPlacesID = (coordinates, placesID) => {
@@ -167,7 +204,6 @@ export default function NewRestaurant() {
         }
         break;
       case 2:
-        setState({ ...state, open: false });
         sendForm();
         break;
       default:
@@ -219,16 +255,16 @@ export default function NewRestaurant() {
 
   return (
     <div>
-      {!state.open && (
+      {!open && (
         <InfoDialog
           title={"Dodawanie lokalu"}
-          text={"Dodawanie lokalu, prosimy o chwilę cierpliwości..."}
-          loading={true}
+          text={state.response}
+          loading={loading}
         />
       )}
       <Dialog
         className={styles.root}
-        open={state.open}
+        open={open}
         aria-labelledby="newRestaurant-title"
       >
         <DialogTitle id="newRestaurant-title">Dodaj Lokal</DialogTitle>
@@ -372,7 +408,7 @@ export default function NewRestaurant() {
                         className={styles.textInputFullWidth}
                         variant="outlined"
                         label="Tagi"
-                        placeholder="Dodaj tagi"
+                        placeholder="Wybierz tagi"
                       />
                     )}
                   />
@@ -412,16 +448,16 @@ export default function NewRestaurant() {
                 />
                 <TextField
                   className={styles.textInput}
-                  label="Twitter"
+                  label="Instagram"
                   variant="outlined"
-                  value={state.twitter}
+                  value={state.instagram}
                   onChange={(event) =>
-                    setState({ ...state, twitter: event.target.value })
+                    setState({ ...state, instagram: event.target.value })
                   }
                   InputProps={{
                     startAdornment: (
                       <InputAdornment position="start">
-                        <TwitterIcon color="primary" />
+                        <InstagramIcon color="primary" />
                       </InputAdornment>
                     ),
                   }}
@@ -456,6 +492,11 @@ export default function NewRestaurant() {
           )}
           {activeStep === 2 && (
             <Paper>
+              <p>
+                Kliknij w miejscu, w którym znajduje się Twoja restauracja, by
+                dodać marker. <br />
+                Jeżeli lokal znajduje się na mapie - kliknij jego ikonkę.
+              </p>
               <InputGoogleMaps
                 setCoordinates={(coordinates, placesID) =>
                   setCoordinatesAndPlacesID(coordinates, placesID)