From f2c11072760a0e3436bb049889aab4ec022a40e2 Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Thu, 18 Aug 2022 16:05:04 +1000
Subject: [PATCH] Update api functions to fix event editing

---
 crabfit-backend/index.js                      |  2 +-
 .../AvailabilityEditor/AvailabilityEditor.jsx | 12 ++---
 .../AvailabilityEditor.styles.js              | 10 ++--
 .../GoogleCalendar/GoogleCalendar.jsx         |  2 +-
 .../OutlookCalendar/OutlookCalendar.jsx       |  2 +-
 crabfit-frontend/src/pages/Create/Create.jsx  | 10 ++--
 crabfit-frontend/src/pages/Event/Event.jsx    | 39 +++++++-------
 crabfit-frontend/src/pages/Home/Home.jsx      |  4 +-
 crabfit-frontend/src/services/index.js        | 53 ++++++++++++++++---
 9 files changed, 85 insertions(+), 49 deletions(-)

diff --git a/crabfit-backend/index.js b/crabfit-backend/index.js
index 47f3dab..3c3d8b7 100644
--- a/crabfit-backend/index.js
+++ b/crabfit-backend/index.js
@@ -21,7 +21,7 @@ const taskRemoveOrphans = require('./routes/taskRemoveOrphans');
 const app = express();
 const port = 8080;
 const corsOptions = {
-	origin: process.env.NODE_ENV === 'production' ? 'https://crab.fit' : 'http://localhost:3000',
+	origin: process.env.NODE_ENV === 'production' ? 'https://crab.fit' : 'http://localhost:5173',
 };
 
 const datastore = new Datastore({
diff --git a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.jsx b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.jsx
index f25ee25..694428b 100644
--- a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.jsx
+++ b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.jsx
@@ -118,8 +118,8 @@ const AvailabilityEditor = ({
                     <DayLabel>{parsedDate.format('ddd')}</DayLabel>
 
                     <Times
-                      borderRight={last}
-                      borderLeft={x === 0 || (parsedDate).diff(isSpecificDates ? dayjs(dates[x-1], 'DDMMYYYY') : dayjs().day(dates[x-1]), 'day') > 1}
+                      $borderRight={last}
+                      $borderLeft={x === 0 || (parsedDate).diff(isSpecificDates ? dayjs(dates[x-1], 'DDMMYYYY') : dayjs().day(dates[x-1]), 'day') > 1}
                     >
                       {timeLabels.map((timeLabel, y) => {
                         if (!timeLabel.time) return null
@@ -133,11 +133,11 @@ const AvailabilityEditor = ({
                         return (
                           <Time
                             key={x+y}
-                            time={time}
+                            $time={time}
                             className="time"
-                            selected={value.includes(time)}
-                            selecting={selectingTimes.includes(time)}
-                            mode={mode}
+                            $selected={value.includes(time)}
+                            $selecting={selectingTimes.includes(time)}
+                            $mode={mode}
                             onPointerDown={e => {
                               e.preventDefault()
                               startPos.current = {x, y}
diff --git a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.styles.js b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.styles.js
index a10940b..c72955a 100644
--- a/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.styles.js
+++ b/crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.styles.js
@@ -5,20 +5,20 @@ export const Time = styled('div')`
   touch-action: none;
   transition: background-color .1s;
 
-  ${props => props.time.slice(2, 4) === '00' && `
+  ${props => props.$time.slice(2, 4) === '00' && `
     border-top: 2px solid var(--text);
   `}
-  ${props => props.time.slice(2, 4) !== '00' && `
+  ${props => props.$time.slice(2, 4) !== '00' && `
     border-top: 2px solid transparent;
   `}
-  ${props => props.time.slice(2, 4) === '30' && `
+  ${props => props.$time.slice(2, 4) === '30' && `
     border-top: 2px dotted var(--text);
   `}
 
-  ${props => (props.selected || (props.mode === 'add' && props.selecting)) && `
+  ${props => (props.$selected || (props.$mode === 'add' && props.$selecting)) && `
     background-color: var(--primary);
   `};
-  ${props => props.mode === 'remove' && props.selecting && `
+  ${props => props.$mode === 'remove' && props.$selecting && `
     background-color: var(--background);
   `};
 `
diff --git a/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.jsx b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.jsx
index 05a5492..34fdbea 100644
--- a/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.jsx
+++ b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.jsx
@@ -70,7 +70,7 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
       })
   }
 
-  useEffect(() => calendarLogin(), [])
+  useEffect(() => void calendarLogin(), [])
 
   useEffect(() => {
     if (signedIn) {
diff --git a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.jsx b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.jsx
index 1a1b0b5..dbe62f2 100644
--- a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.jsx
+++ b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.jsx
@@ -137,7 +137,7 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
       .finally(() => setFreeBusyLoading(false))
   }
 
-  useEffect(() => checkLogin(), [])
+  useEffect(() => void checkLogin(), [])
 
   useEffect(() => {
     if (client) {
diff --git a/crabfit-frontend/src/pages/Create/Create.jsx b/crabfit-frontend/src/pages/Create/Create.jsx
index 87350c4..ec859b1 100644
--- a/crabfit-frontend/src/pages/Create/Create.jsx
+++ b/crabfit-frontend/src/pages/Create/Create.jsx
@@ -125,18 +125,18 @@ const Create = ({ offline }) => {
         return setError(t('home:form.errors.no_time'))
       }
 
-      const response = await api.post('/event', {
+      const event = await api.post('/event', {
         event: {
           name: data.name,
           times: times,
           timezone: data.timezone,
         },
       })
-      setCreatedEvent(response.data)
+      setCreatedEvent(event)
       addRecent({
-        id: response.data.id,
-        created: response.data.created,
-        name: response.data.name,
+        id: event.id,
+        created: event.created,
+        name: event.name,
       })
       gtag('event', 'create_event', {
         'event_category': 'create',
diff --git a/crabfit-frontend/src/pages/Event/Event.jsx b/crabfit-frontend/src/pages/Event/Event.jsx
index 4d74464..d955325 100644
--- a/crabfit-frontend/src/pages/Event/Event.jsx
+++ b/crabfit-frontend/src/pages/Event/Event.jsx
@@ -76,15 +76,15 @@ const Event = () => {
   useEffect(() => {
     const fetchEvent = async () => {
       try {
-        const response = await api.get(`/event/${id}`)
+        const event = await api.get(`/event/${id}`)
 
-        setEvent(response.data)
+        setEvent(event)
         addRecent({
-          id: response.data.id,
-          created: response.data.created,
-          name: response.data.name,
+          id: event.id,
+          created: event.created,
+          name: event.name,
         })
-        document.title = `${response.data.name} | Crab Fit`
+        document.title = `${event.name} | Crab Fit`
       } catch (e) {
         console.error(e)
         if (e.status === 404) {
@@ -101,8 +101,8 @@ const Event = () => {
   useEffect(() => {
     const fetchPeople = async () => {
       try {
-        const response = await api.get(`/event/${id}/people`)
-        const adjustedPeople = response.data.people.map(person => ({
+        const { people } = await api.get(`/event/${id}/people`)
+        const adjustedPeople = people.map(person => ({
           ...person,
           availability: (!!person.availability.length && person.availability[0].length === 13)
             ? person.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY'))
@@ -206,12 +206,12 @@ const Event = () => {
   useEffect(() => {
     const fetchUser = async () => {
       try {
-        const response = await api.post(`/event/${id}/people/${user.name}`, { person: { password } })
+        const resUser = await api.post(`/event/${id}/people/${user.name}`, { person: { password } })
         const adjustedUser = {
-          ...response.data,
-          availability: (!!response.data.availability.length && response.data.availability[0].length === 13)
-            ? response.data.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY'))
-            : response.data.availability.map(date => dayjs(date, 'HHmm').day(date.substring(5)).utc(true).tz(timezone).format('HHmm-d')),
+          ...resUser,
+          availability: (!!resUser.availability.length && resUser.availability[0].length === 13)
+            ? resUser.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY'))
+            : resUser.availability.map(date => dayjs(date, 'HHmm').day(date.substring(5)).utc(true).tz(timezone).format('HHmm-d')),
         }
         setUser(adjustedUser)
       } catch (e) {
@@ -222,8 +222,7 @@ const Event = () => {
     if (user) {
       fetchUser()
     }
-  // eslint-disable-next-line
-  }, [timezone]);
+  }, [timezone])
 
   const onSubmit = async data => {
     if (!data.name || data.name.length === 0) {
@@ -235,17 +234,17 @@ const Event = () => {
     setError(null)
 
     try {
-      const response = await api.post(`/event/${id}/people/${data.name}`, {
+      const resUser = await api.post(`/event/${id}/people/${data.name}`, {
         person: {
           password: data.password,
         },
       })
       setPassword(data.password)
       const adjustedUser = {
-        ...response.data,
-        availability: (!!response.data.availability.length && response.data.availability[0].length === 13)
-          ? response.data.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY'))
-          : response.data.availability.map(date => dayjs(date, 'HHmm').day(date.substring(5)).utc(true).tz(timezone).format('HHmm-d')),
+        ...resUser,
+        availability: (!!resUser.availability.length && resUser.availability[0].length === 13)
+          ? resUser.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY'))
+          : resUser.availability.map(date => dayjs(date, 'HHmm').day(date.substring(5)).utc(true).tz(timezone).format('HHmm-d')),
       }
       setUser(adjustedUser)
       setTab('you')
diff --git a/crabfit-frontend/src/pages/Home/Home.jsx b/crabfit-frontend/src/pages/Home/Home.jsx
index 92cbf07..6e309bb 100644
--- a/crabfit-frontend/src/pages/Home/Home.jsx
+++ b/crabfit-frontend/src/pages/Home/Home.jsx
@@ -74,7 +74,7 @@ const Home = ({ offline }) => {
     const fetch = async () => {
       try {
         const response = await api.get('/stats')
-        setStats(response.data)
+        setStats(response)
       } catch (e) {
         console.error(e)
       }
@@ -144,7 +144,7 @@ const Home = ({ offline }) => {
           timezone: data.timezone,
         },
       })
-      navigate(`/${response.data.id}`)
+      navigate(`/${response.id}`)
       gtag('event', 'create_event', {
         'event_category': 'home',
       })
diff --git a/crabfit-frontend/src/services/index.js b/crabfit-frontend/src/services/index.js
index a43ebe7..affb536 100644
--- a/crabfit-frontend/src/services/index.js
+++ b/crabfit-frontend/src/services/index.js
@@ -1,16 +1,19 @@
 const API_URL = process.env.NODE_ENV === 'production' ? 'https://api-dot-crabfit.uc.r.appspot.com' : 'http://localhost:8080'
 
 const handleError = error => {
-  if (error.response && error.response.status) {
-    console.error('[Error handler] res:', error.response)
+  if (error && error.status) {
+    console.error('[Error handler] res:', error)
   }
-  return Promise.reject(error.response)
+  return Promise.reject(error)
 }
 
 const api = {
   get: async endpoint => {
     try {
       const response = await fetch(API_URL + endpoint)
+      if (!response.ok) {
+        throw response
+      }
       const json = await response.json()
       return Promise.resolve(json)
     } catch (error) {
@@ -19,16 +22,50 @@ const api = {
   },
   post: async (endpoint, data, options = {}) => {
     try {
-      const response = await fetch(API_URL + endpoint, data, options)
-      return Promise.resolve(response)
+      const response = await fetch(API_URL + endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+        ...options
+      })
+      if (!response.ok) {
+        throw response
+      }
+
+      //TODO: hack until api update
+      try {
+        const json = await response.json()
+        return Promise.resolve(json)
+      } catch (e) {
+        return Promise.resolve(response)
+      }
     } catch (error) {
       return handleError(error)
     }
   },
-  patch: async (endpoint, data) => {
+  patch: async (endpoint, data, options = {}) => {
     try {
-      const response = await fetch(API_URL + endpoint, data)
-      return Promise.resolve(response)
+      const response = await fetch(API_URL + endpoint, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+        ...options
+      })
+      if (!response.ok) {
+        throw response
+      }
+
+      //TODO: hack until api update
+      try {
+        const json = await response.json()
+        return Promise.resolve(json)
+      } catch (e) {
+        return Promise.resolve(response)
+      }
     } catch (error) {
       return handleError(error)
     }