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 app = express();
const port = 8080; const port = 8080;
const corsOptions = { 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({ 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> <DayLabel>{parsedDate.format('ddd')}</DayLabel>
<Times <Times
borderRight={last} $borderRight={last}
borderLeft={x === 0 || (parsedDate).diff(isSpecificDates ? dayjs(dates[x-1], 'DDMMYYYY') : dayjs().day(dates[x-1]), 'day') > 1} $borderLeft={x === 0 || (parsedDate).diff(isSpecificDates ? dayjs(dates[x-1], 'DDMMYYYY') : dayjs().day(dates[x-1]), 'day') > 1}
> >
{timeLabels.map((timeLabel, y) => { {timeLabels.map((timeLabel, y) => {
if (!timeLabel.time) return null if (!timeLabel.time) return null
@ -133,11 +133,11 @@ const AvailabilityEditor = ({
return ( return (
<Time <Time
key={x+y} key={x+y}
time={time} $time={time}
className="time" className="time"
selected={value.includes(time)} $selected={value.includes(time)}
selecting={selectingTimes.includes(time)} $selecting={selectingTimes.includes(time)}
mode={mode} $mode={mode}
onPointerDown={e => { onPointerDown={e => {
e.preventDefault() e.preventDefault()
startPos.current = {x, y} 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; touch-action: none;
transition: background-color .1s; transition: background-color .1s;
${props => props.time.slice(2, 4) === '00' && ` ${props => props.$time.slice(2, 4) === '00' && `
border-top: 2px solid var(--text); 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; 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); 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); background-color: var(--primary);
`}; `};
${props => props.mode === 'remove' && props.selecting && ` ${props => props.$mode === 'remove' && props.$selecting && `
background-color: var(--background); 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(() => { useEffect(() => {
if (signedIn) { 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)) .finally(() => setFreeBusyLoading(false))
} }
useEffect(() => checkLogin(), []) useEffect(() => void checkLogin(), [])
useEffect(() => { useEffect(() => {
if (client) { 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')) return setError(t('home:form.errors.no_time'))
} }
const response = await api.post('/event', { const event = await api.post('/event', {
event: { event: {
name: data.name, name: data.name,
times: times, times: times,
timezone: data.timezone, timezone: data.timezone,
}, },
}) })
setCreatedEvent(response.data) setCreatedEvent(event)
addRecent({ addRecent({
id: response.data.id, id: event.id,
created: response.data.created, created: event.created,
name: response.data.name, name: event.name,
}) })
gtag('event', 'create_event', { gtag('event', 'create_event', {
'event_category': 'create', 'event_category': 'create',

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

@ -76,15 +76,15 @@ const Event = () => {
useEffect(() => { useEffect(() => {
const fetchEvent = async () => { const fetchEvent = async () => {
try { try {
const response = await api.get(`/event/${id}`) const event = await api.get(`/event/${id}`)
setEvent(response.data) setEvent(event)
addRecent({ addRecent({
id: response.data.id, id: event.id,
created: response.data.created, created: event.created,
name: response.data.name, name: event.name,
}) })
document.title = `${response.data.name} | Crab Fit` document.title = `${event.name} | Crab Fit`
} catch (e) { } catch (e) {
console.error(e) console.error(e)
if (e.status === 404) { if (e.status === 404) {
@ -101,8 +101,8 @@ const Event = () => {
useEffect(() => { useEffect(() => {
const fetchPeople = async () => { const fetchPeople = async () => {
try { try {
const response = await api.get(`/event/${id}/people`) const { people } = await api.get(`/event/${id}/people`)
const adjustedPeople = response.data.people.map(person => ({ const adjustedPeople = people.map(person => ({
...person, ...person,
availability: (!!person.availability.length && person.availability[0].length === 13) availability: (!!person.availability.length && person.availability[0].length === 13)
? person.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY')) ? person.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY'))
@ -206,12 +206,12 @@ const Event = () => {
useEffect(() => { useEffect(() => {
const fetchUser = async () => { const fetchUser = async () => {
try { 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 = { const adjustedUser = {
...response.data, ...resUser,
availability: (!!response.data.availability.length && response.data.availability[0].length === 13) availability: (!!resUser.availability.length && resUser.availability[0].length === 13)
? response.data.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY')) ? resUser.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.map(date => dayjs(date, 'HHmm').day(date.substring(5)).utc(true).tz(timezone).format('HHmm-d')),
} }
setUser(adjustedUser) setUser(adjustedUser)
} catch (e) { } catch (e) {
@ -222,8 +222,7 @@ const Event = () => {
if (user) { if (user) {
fetchUser() fetchUser()
} }
// eslint-disable-next-line }, [timezone])
}, [timezone]);
const onSubmit = async data => { const onSubmit = async data => {
if (!data.name || data.name.length === 0) { if (!data.name || data.name.length === 0) {
@ -235,17 +234,17 @@ const Event = () => {
setError(null) setError(null)
try { try {
const response = await api.post(`/event/${id}/people/${data.name}`, { const resUser = await api.post(`/event/${id}/people/${data.name}`, {
person: { person: {
password: data.password, password: data.password,
}, },
}) })
setPassword(data.password) setPassword(data.password)
const adjustedUser = { const adjustedUser = {
...response.data, ...resUser,
availability: (!!response.data.availability.length && response.data.availability[0].length === 13) availability: (!!resUser.availability.length && resUser.availability[0].length === 13)
? response.data.availability.map(date => dayjs(date, 'HHmm-DDMMYYYY').utc(true).tz(timezone).format('HHmm-DDMMYYYY')) ? resUser.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.map(date => dayjs(date, 'HHmm').day(date.substring(5)).utc(true).tz(timezone).format('HHmm-d')),
} }
setUser(adjustedUser) setUser(adjustedUser)
setTab('you') setTab('you')

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

@ -74,7 +74,7 @@ const Home = ({ offline }) => {
const fetch = async () => { const fetch = async () => {
try { try {
const response = await api.get('/stats') const response = await api.get('/stats')
setStats(response.data) setStats(response)
} catch (e) { } catch (e) {
console.error(e) console.error(e)
} }
@ -144,7 +144,7 @@ const Home = ({ offline }) => {
timezone: data.timezone, timezone: data.timezone,
}, },
}) })
navigate(`/${response.data.id}`) navigate(`/${response.id}`)
gtag('event', 'create_event', { gtag('event', 'create_event', {
'event_category': 'home', '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 API_URL = process.env.NODE_ENV === 'production' ? 'https://api-dot-crabfit.uc.r.appspot.com' : 'http://localhost:8080'
const handleError = error => { const handleError = error => {
if (error.response && error.response.status) { if (error && error.status) {
console.error('[Error handler] res:', error.response) console.error('[Error handler] res:', error)
} }
return Promise.reject(error.response) return Promise.reject(error)
} }
const api = { const api = {
get: async endpoint => { get: async endpoint => {
try { try {
const response = await fetch(API_URL + endpoint) const response = await fetch(API_URL + endpoint)
if (!response.ok) {
throw response
}
const json = await response.json() const json = await response.json()
return Promise.resolve(json) return Promise.resolve(json)
} catch (error) { } catch (error) {
@ -19,16 +22,50 @@ const api = {
}, },
post: async (endpoint, data, options = {}) => { post: async (endpoint, data, options = {}) => {
try { try {
const response = await fetch(API_URL + endpoint, data, options) const response = await fetch(API_URL + endpoint, {
return Promise.resolve(response) 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) { } catch (error) {
return handleError(error) return handleError(error)
} }
}, },
patch: async (endpoint, data) => { patch: async (endpoint, data, options = {}) => {
try { try {
const response = await fetch(API_URL + endpoint, data) const response = await fetch(API_URL + endpoint, {
return Promise.resolve(response) 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) { } catch (error) {
return handleError(error) return handleError(error)
} }