Porteroo- link up with backend

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)

src/PorterooApp/index.js

@@ -63,12 +63,6 @@ const dummyUserData = {
   id: 1
 }
 
-// TODO: remove routes dummy data
-// - Routes
-//     - GET porterRoute
-//         - [{location: text, time: int}, ]
-const data = [{ location: "Ward Green", time: 10 }, { location: "Lab", time: 10 }]
-
 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>
@@ -87,12 +81,22 @@ const TaskSection = ({ routes, forceRefetchData }) => {
     </>)
 }
 
+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 && data.length > 0) ? data.map(route => ({ location: wardNames[route.location] || "Ward Base", time: route.estimated_pickup, locationId: route.location })) : []
+
   return (
     <Col>
       <LogoContainer>
@@ -101,7 +105,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={routes} />}</main>
     </Col>
   );
 }

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) {
@@ -33,7 +33,6 @@ export const useFetchGet = (url, rerun) => {
 
   useEffect(() => {
     async function fetchData() {
-      console.log('RUNNING ')
       try {
         const response = await fetch(url, {
           method: "GET",
@@ -59,5 +58,5 @@ export const useFetchGet = (url, rerun) => {
     fetchData();
   }, [url, rerun]);
 
-  return { loading, data, error };
+  return { loading, data: data || [], error };
 };

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);
 }