Merge pull request #31 from codeableorg/feature-schedule-ui

Create Schedule UI to create a Club

Author: Lian Nivin

.env

@@ -11,21 +11,21 @@ function CreateClub() {
     name: "",
     address: "",
     district: "",
-    image: null,
-    schedule: JSON.stringify({
-      "monday-friday": {
-        init: "8",
-        end: "22"
-      },
-      saturday: {
-        init: "8",
-        end: "22"
-      },
-      sunday: {
-        init: "8",
-        end: "22"
-      }
-    })
+    image: null
+  });
+  const [schedule, setSchedule] = React.useState({
+    "monday-friday": {
+      init: 0,
+      end: 0
+    },
+    saturday: {
+      init: 0,
+      end: 0
+    },
+    sunday: {
+      init: 0,
+      end: 0
+    }
   });
   const [error, setError] = React.useState(null);
 
@@ -37,6 +37,14 @@ function CreateClub() {
     }
   }
 
+  function handleChangeSchedule(e) {
+    const [day, time] = e.target.name.split(".");
+    setSchedule({
+      ...schedule,
+      [day]: { ...schedule[day], [time]: e.target.value }
+    });
+  }
+
   async function handleSubmit(e) {
     e.preventDefault();
     const formData = new FormData();
@@ -46,9 +54,15 @@ function CreateClub() {
     const { results } = await getCoords(
       `${fields.address}, ${fields.district}`
     );
-    formData.append("latitude", results[0].geometry.lat);
-    formData.append("longitude", results[0].geometry.lng);
-
+    formData.append(
+      "latitude",
+      results.length ? results[0].geometry.lat : null
+    );
+    formData.append(
+      "longitude",
+      results.length ? results[0].geometry.lng : null
+    );
+    formData.append("schedule", JSON.stringify(schedule));
     try {
       await postClub(formData);
       navigate("/owner");
@@ -119,14 +133,76 @@ function CreateClub() {
           />
         </div>
         <div css={{ marginTop: "2em" }}>
-          <Label htmlFor="schedule">Schedule</Label>
-          <Input
-            id="schedule"
-            name="schedule"
-            type="text"
-            value={fields.schedule}
-            onChange={handleChange}
-          />
+          <Label>Schedule</Label>
+
+          <div css={{ display: "flex", justifyContent: "space-between" }}>
+            <Label htmlFor="monday-friday.init" css={{ fontSize: "12px" }}>
+              Monday - Friday
+            </Label>
+            <div>
+              <input
+                id="monday-friday.init"
+                name="monday-friday.init"
+                type="time"
+                step="3600"
+                onChange={handleChangeSchedule}
+              />
+              <input
+                id="monday-friday.end"
+                name="monday-friday.end"
+                type="time"
+                step="3600"
+                onChange={handleChangeSchedule}
+              />
+            </div>
+          </div>
+
+          <div css={{ display: "flex", justifyContent: "space-between" }}>
+            <Label
+              htmlFor="schedule-saturdays-start"
+              css={{ fontSize: "12px" }}
+            >
+              Saturday
+            </Label>
+            <div>
+              <input
+                id="saturday.init"
+                name="saturday.init"
+                type="time"
+                step="3600"
+                onChange={handleChangeSchedule}
+              />
+              <input
+                id="saturday.end"
+                name="saturday.end"
+                type="time"
+                step="3600"
+                onChange={handleChangeSchedule}
+              />
+            </div>
+          </div>
+
+          <div css={{ display: "flex", justifyContent: "space-between" }}>
+            <Label htmlFor="schedule-sundays-start" css={{ fontSize: "12px" }}>
+              Sunday
+            </Label>
+            <div>
+              <input
+                id="sunday.init"
+                name="sunday.init"
+                type="time"
+                step="3600"
+                onChange={handleChangeSchedule}
+              />
+              <input
+                id="sunday.end"
+                name="sunday.end"
+                type="time"
+                step="3600"
+                onChange={handleChangeSchedule}
+              />
+            </div>
+          </div>
         </div>
         <div css={{ marginTop: "2em" }}>
           <Button>Create</Button>

client/src/views/create-club.js

@@ -113,9 +113,14 @@ function Home() {
       {clubs ? (
         clubs
           .map(club => {
-            let distance = 0;
-            if (club.latitude == null || club.longitude == null) {
-              distance = 0;
+            let distance = null;
+            if (
+              club.latitude == null ||
+              club.longitude == null ||
+              club.latitude === "null" ||
+              club.longitude === "null"
+            ) {
+              distance = null;
             } else if (position[0] !== 0) {
               distance = setDistance(club, position);
             }