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

Suspend calendar import buttons

Browse source
This commit is contained in:
Ben Grant 2021-06-05 18:28:06 +10:00
parent eb449b6841
commit d736468ab9
3 changed files with 35 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
crabfit-frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx
View file

@ -1,4 +1,4 @@
import { useState, useRef, Fragment } from 'react';
import { useState, useRef, Fragment, Suspense, lazy } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocaleUpdateStore } from 'stores';
import dayjs from 'dayjs';
@ -24,7 +24,11 @@ import {
} from 'components/AvailabilityViewer/availabilityViewerStyle';
import { Time } from './availabilityEditorStyle';
import { GoogleCalendar, OutlookCalendar, Center } from 'components';
import { _GoogleCalendar, _OutlookCalendar, Center } from 'components';
import { Loader } from '../Loading/loadingStyle';
const GoogleCalendar = lazy(() => _GoogleCalendar());
const OutlookCalendar = lazy(() => _OutlookCalendar());
dayjs.extend(localeData);
dayjs.extend(customParseFormat);
@ -68,26 +72,28 @@ const AvailabilityEditor = ({
{isSpecificDates && (
<StyledMain>
<div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
<GoogleCalendar
timeMin={dayjs(times[0], 'HHmm-DDMMYYYY').toISOString()}
timeMax={dayjs(times[times.length-1], 'HHmm-DDMMYYYY').add(15, 'm').toISOString()}
timeZone={timezone}
onImport={busyArray => onChange(
times.filter(time => !busyArray.some(busy =>
dayjs(time, 'HHmm-DDMMYYYY').isBetween(busy.start, busy.end, null, '[)')
))
)}
/>
<OutlookCalendar
timeMin={dayjs(times[0], 'HHmm-DDMMYYYY').toISOString()}
timeMax={dayjs(times[times.length-1], 'HHmm-DDMMYYYY').add(15, 'm').toISOString()}
timeZone={timezone}
onImport={busyArray => onChange(
times.filter(time => !busyArray.some(busy =>
dayjs(time, 'HHmm-DDMMYYYY').isBetween(dayjs.tz(busy.start.dateTime, busy.start.timeZone), dayjs.tz(busy.end.dateTime, busy.end.timeZone), null, '[)')
))
)}
/>
<Suspense fallback={<Loader />}>
<GoogleCalendar
timeMin={dayjs(times[0], 'HHmm-DDMMYYYY').toISOString()}
timeMax={dayjs(times[times.length-1], 'HHmm-DDMMYYYY').add(15, 'm').toISOString()}
timeZone={timezone}
onImport={busyArray => onChange(
times.filter(time => !busyArray.some(busy =>
dayjs(time, 'HHmm-DDMMYYYY').isBetween(busy.start, busy.end, null, '[)')
))
)}
/>
<OutlookCalendar
timeMin={dayjs(times[0], 'HHmm-DDMMYYYY').toISOString()}
timeMax={dayjs(times[times.length-1], 'HHmm-DDMMYYYY').add(15, 'm').toISOString()}
timeZone={timezone}
onImport={busyArray => onChange(
times.filter(time => !busyArray.some(busy =>
dayjs(time, 'HHmm-DDMMYYYY').isBetween(dayjs.tz(busy.start.dateTime, busy.start.timeZone), dayjs.tz(busy.end.dateTime, busy.end.timeZone), null, '[)')
))
)}
/>
</Suspense>
</div>
</StyledMain>
)}

4
crabfit-frontend/src/components/Error/errorStyle.ts
View file

@ -22,6 +22,10 @@ export const Wrapper = styled.div`
max-height: 60px;
transition: opacity .15s .2s, max-height .2s, margin .2s, visibility .2s;
`}
@media (prefers-reduced-motion: reduce) {
transition: none;
}
`;
export const CloseButton = styled.button`

5
crabfit-frontend/src/components/index.ts
View file

@ -10,8 +10,6 @@ export { default as AvailabilityViewer } from './AvailabilityViewer/Availability
export { default as AvailabilityEditor } from './AvailabilityEditor/AvailabilityEditor';
export { default as Error } from './Error/Error';
export { default as Loading } from './Loading/Loading';
export { default as GoogleCalendar } from './GoogleCalendar/GoogleCalendar';
export { default as OutlookCalendar } from './OutlookCalendar/OutlookCalendar';
export { default as Center } from './Center/Center';
export { default as Donate } from './Donate/Donate';
@ -20,3 +18,6 @@ export { default as Egg } from './Egg/Egg';
export { default as Footer } from './Footer/Footer';
export { default as Recents } from './Recents/Recents';
export { default as Logo } from './Logo/Logo';
export const _GoogleCalendar = () => import('./GoogleCalendar/GoogleCalendar');
export const _OutlookCalendar = () => import('./OutlookCalendar/OutlookCalendar');