scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update api functions to fix event editing

Browse source
This commit is contained in:
Ben Grant 2022-08-18 16:05:04 +10:00
parent 9ac969ec78
commit f2c1107276
9 changed files with 85 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
crabfit-backend/index.js
View file

@ -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({

12
crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.jsx
View file

@ -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}

10
crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.styles.js
View file

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

2
crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.jsx
View file

@ -70,7 +70,7 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
})
}
useEffect(() => calendarLogin(), [])
useEffect(() => void calendarLogin(), [])
useEffect(() => {
if (signedIn) {

2
crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.jsx
View file

@ -137,7 +137,7 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => {
.finally(() => setFreeBusyLoading(false))
}
useEffect(() => checkLogin(), [])
useEffect(() => void checkLogin(), [])
useEffect(() => {
if (client) {

10
crabfit-frontend/src/pages/Create/Create.jsx
View file

@ -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',

39
crabfit-frontend/src/pages/Event/Event.jsx
View file

@ -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')

4
crabfit-frontend/src/pages/Home/Home.jsx
View file

@ -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',
})

53
crabfit-frontend/src/services/index.js
View file

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