From b42cce26c425ce83da5b5ae3cdd65296b80a32a0 Mon Sep 17 00:00:00 2001
From: Helen Zhou <helen.zhou6@gmail.com>
Date: Sun, 16 Jun 2019 14:32:03 +0100
Subject: [PATCH 1/2] Dummy data

---
 src/PorterooApp/index.js | 17 +++++++++++++++--
 src/fetch-util.js        | 10 ++++++----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/PorterooApp/index.js b/src/PorterooApp/index.js
index 27310d2..2183a37 100644
--- a/src/PorterooApp/index.js
+++ b/src/PorterooApp/index.js
@@ -67,7 +67,15 @@ const dummyUserData = {
 // - Routes
 //     - GET porterRoute
 //         - [{location: text, time: int}, ]
-const data = [{ location: "Ward Green", time: 10 }, { location: "Lab", time: 10 }]
+
+// fetch request for location to ward name
+
+// const wardNames = {
+//   0: "Ward Green",
+//   1: "Lab",
+//   2: "Ward Red",
+//   3: "Ward Blue"
+// }
 
 const NextTask = ({ location, time }) => {
   if (!location) return <p>No more jobs!</p>;
@@ -87,12 +95,17 @@ const TaskSection = ({ routes, forceRefetchData }) => {
     </>)
 }
 
+const data = [{ location: "Ward Green", time: 10 }, { location: "Lab", time: 30 }, { location: "Ward Blue", time: 40 }]
+const dataTwo = [{ location: "Lab", time: 30 }, { location: "Ward Blue", time: 40 }]
+
 function App() {
   const [refetchData, forceRefetchData] = useState(false)
   const { loading } = useFetchGet(
     `https://placeholder.com/porterRoute/${dummyUserData.id}`, refetchData
   );
 
+  // const routes = data.map(route => ({ location: wardNames[route.location] || "Unknown", time: route.time }))
+
   return (
     <Col>
       <LogoContainer>
@@ -101,7 +114,7 @@ function App() {
         <h2>Porter</h2>
         <h1>{dummyUserData.username}</h1>
       </Heading>
-      <main>{loading ? <h2>Loading Porteroo data...</h2> : <TaskSection forceRefetchData={forceRefetchData} routes={data} />}</main>
+      <main>{loading ? <h2>Loading Porteroo data...</h2> : <TaskSection forceRefetchData={forceRefetchData} routes={refetchData ? dataTwo : data} />}</main>
     </Col>
   );
 }
diff --git a/src/fetch-util.js b/src/fetch-util.js
index 187a991..8415ea5 100644
--- a/src/fetch-util.js
+++ b/src/fetch-util.js
@@ -31,9 +31,11 @@ export const useFetchGet = (url, rerun) => {
   const [data, setData] = useState(null);
   const [error, setError] = useState(false);
 
+  // const data = [{ location: 0, time: 10 }, { location: 1, time: 30 }, { location: 3, time: 40 }]
+
   useEffect(() => {
+    if (rerun) return { loading: false, data: [{ location: "Lab", time: 30 }, { location: "Ward Blue", time: 40 }], error: false }
     async function fetchData() {
-      console.log('RUNNING ')
       try {
         const response = await fetch(url, {
           method: "GET",
@@ -44,8 +46,8 @@ export const useFetchGet = (url, rerun) => {
           setData(null);
           setLoading(false);
         } else {
-          const json = await response.json();
-          setData(json);
+          // const json = await response.json();
+          setData([{ location: "Ward Green", time: 10 }, { location: "Lab", time: 30 }, { location: "Ward Blue", time: 40 }]);
           setLoading(false);
         }
       } catch {
@@ -59,5 +61,5 @@ export const useFetchGet = (url, rerun) => {
     fetchData();
   }, [url, rerun]);
 
-  return { loading, data, error };
+  return { loading, data: data || [], error };
 };

From 5fd5830d8e750e0d0af32f13a8ecdb9988e4cadc Mon Sep 17 00:00:00 2001
From: Helen Zhou <helen.zhou6@gmail.com>
Date: Mon, 17 Jun 2019 08:50:03 +0100
Subject: [PATCH 2/2] Porteroo - link up with back end using ngrok - WIP since
 the PUT complete task did not work, but GET request did

---
 src/PorterooApp/Task.js  |  4 ++--
 src/PorterooApp/index.js | 31 +++++++++++--------------------
 src/fetch-util.js        |  9 +++------
 src/utils/getDeadline.js |  6 ++----
 4 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/src/PorterooApp/Task.js b/src/PorterooApp/Task.js
index 998d148..a9974e2 100644
--- a/src/PorterooApp/Task.js
+++ b/src/PorterooApp/Task.js
@@ -31,7 +31,7 @@ const EmphasisText = styled("p")`
     margin: 0;
 `
 
-function Task({ location, time, porterId, forceRefetchData }) {
+function Task({ location, time, porterId, forceRefetchData, locationId }) {
   const [type, updateType] = useState(""); // delivery or collection
   const [text, updateText] = useState("");
   const [postingCompleteTask, updatePostingCompleteTask] = useState(false)
@@ -62,7 +62,7 @@ function Task({ location, time, porterId, forceRefetchData }) {
   const handleClick = async () => {
     updatePostingCompleteTask(true)
 
-    await fetchPost(`https://placeholder.com/porterRoute?location=${location}]?porter=${porterId}`)
+    await fetchPost(`http://29bbbb63.ngrok.io/checkin/${locationId}`)
     updatePostingCompleteTask(false)
     alert("Completed task - good job 👍")
     forceRefetchData(true)
diff --git a/src/PorterooApp/index.js b/src/PorterooApp/index.js
index 2183a37..03fd282 100644
--- a/src/PorterooApp/index.js
+++ b/src/PorterooApp/index.js
@@ -63,20 +63,6 @@ const dummyUserData = {
   id: 1
 }
 
-// TODO: remove routes dummy data
-// - Routes
-//     - GET porterRoute
-//         - [{location: text, time: int}, ]
-
-// fetch request for location to ward name
-
-// const wardNames = {
-//   0: "Ward Green",
-//   1: "Lab",
-//   2: "Ward Red",
-//   3: "Ward Blue"
-// }
-
 const NextTask = ({ location, time }) => {
   if (!location) return <p>No more jobs!</p>;
   return <NextJob>{getDeadline(time)} - {location === "Lab" ? `Delivery to ${location}` : `Collect from ${location}`}</NextJob>
@@ -95,16 +81,21 @@ const TaskSection = ({ routes, forceRefetchData }) => {
     </>)
 }
 
-const data = [{ location: "Ward Green", time: 10 }, { location: "Lab", time: 30 }, { location: "Ward Blue", time: 40 }]
-const dataTwo = [{ location: "Lab", time: 30 }, { location: "Ward Blue", time: 40 }]
+const wardNames = {
+  0: "Lab",
+  1: "Ward Blue",
+  2: "Ward Green",
+  3: "Ward Red",
+  10: "Ward Teal"
+}
 
 function App() {
   const [refetchData, forceRefetchData] = useState(false)
-  const { loading } = useFetchGet(
-    `https://placeholder.com/porterRoute/${dummyUserData.id}`, refetchData
+  const { loading, data } = useFetchGet(
+    `http://29bbbb63.ngrok.io/porterRoute/${dummyUserData.id}`, refetchData
   );
 
-  // const routes = data.map(route => ({ location: wardNames[route.location] || "Unknown", time: route.time }))
+  const routes = (data && data.length > 0) ? data.map(route => ({ location: wardNames[route.location] || "Ward Base", time: route.estimated_pickup, locationId: route.location })) : []
 
   return (
     <Col>
@@ -114,7 +105,7 @@ function App() {
         <h2>Porter</h2>
         <h1>{dummyUserData.username}</h1>
       </Heading>
-      <main>{loading ? <h2>Loading Porteroo data...</h2> : <TaskSection forceRefetchData={forceRefetchData} routes={refetchData ? dataTwo : data} />}</main>
+      <main>{loading ? <h2>Loading Porteroo data...</h2> : <TaskSection forceRefetchData={forceRefetchData} routes={routes} />}</main>
     </Col>
   );
 }
diff --git a/src/fetch-util.js b/src/fetch-util.js
index 8415ea5..c47734c 100644
--- a/src/fetch-util.js
+++ b/src/fetch-util.js
@@ -12,7 +12,7 @@ const nextPickup = {
 export const fetchPost = async url => {
   try {
     const response = await fetch(url, {
-      method: "POST",
+      method: "PUT",
       headers: { "Content-Type": "application/json" }
     });
     if (response.status !== 200) {
@@ -31,10 +31,7 @@ export const useFetchGet = (url, rerun) => {
   const [data, setData] = useState(null);
   const [error, setError] = useState(false);
 
-  // const data = [{ location: 0, time: 10 }, { location: 1, time: 30 }, { location: 3, time: 40 }]
-
   useEffect(() => {
-    if (rerun) return { loading: false, data: [{ location: "Lab", time: 30 }, { location: "Ward Blue", time: 40 }], error: false }
     async function fetchData() {
       try {
         const response = await fetch(url, {
@@ -46,8 +43,8 @@ export const useFetchGet = (url, rerun) => {
           setData(null);
           setLoading(false);
         } else {
-          // const json = await response.json();
-          setData([{ location: "Ward Green", time: 10 }, { location: "Lab", time: 30 }, { location: "Ward Blue", time: 40 }]);
+          const json = await response.json();
+          setData(json);
           setLoading(false);
         }
       } catch {
diff --git a/src/utils/getDeadline.js b/src/utils/getDeadline.js
index d2b1c9d..88f6701 100644
--- a/src/utils/getDeadline.js
+++ b/src/utils/getDeadline.js
@@ -1,6 +1,4 @@
 export const getDeadline = (time) => {
-  const currentDate = new Date();
-  // TODO: Check time (int) is in minutes
-  const deadline = new Date(currentDate.getTime() + time * 60000)
-  return deadline.toTimeString().substr(0, 5)
+  if (!time) return ""
+  return time.split(" ")[1].substr(0, 5);
 }
\ No newline at end of file