From c657a155fb01d9bf87d0bea41d05f7303fb36361 Mon Sep 17 00:00:00 2001 From: Katie Sydlik-Badgerow <38022260+KatieMSB@users.noreply.github.com> Date: Fri, 26 Apr 2024 11:04:29 -0400 Subject: [PATCH] urql: convert remaining schedule files to urql (#3822) * convert to use urql * remove unused file * remove extra check and typename * add suspense false * add engine trigger in test --- .../schedules/ScheduleRuleDeleteDialog.tsx | 16 ++--- web/src/app/schedules/ScheduleShiftList.tsx | 8 ++- web/src/app/schedules/ScheduleTZFilter.jsx | 61 ------------------- web/src/app/schedules/useOverrideNotices.ts | 10 ++- web/src/cypress/e2e/schedules.cy.ts | 2 +- 5 files changed, 20 insertions(+), 77 deletions(-) delete mode 100644 web/src/app/schedules/ScheduleTZFilter.jsx diff --git a/web/src/app/schedules/ScheduleRuleDeleteDialog.tsx b/web/src/app/schedules/ScheduleRuleDeleteDialog.tsx index 3d941d1b44..5f8ac0b717 100644 --- a/web/src/app/schedules/ScheduleRuleDeleteDialog.tsx +++ b/web/src/app/schedules/ScheduleRuleDeleteDialog.tsx @@ -1,6 +1,5 @@ import React from 'react' -import { useMutation } from '@apollo/client' -import { gql, useQuery } from 'urql' +import { gql, useQuery, useMutation } from 'urql' import FormDialog from '../dialogs/FormDialog' import { startCase } from 'lodash' import { GenericError } from '../error-pages' @@ -46,9 +45,7 @@ export default function ScheduleRuleDeleteDialog( variables: { id: props.scheduleID, tgt: props.target }, }) - const [deleteRule] = useMutation(mutation, { - onCompleted: props.onClose, - }) + const [deleteRuleStatus, deleteRule] = useMutation(mutation) if (error) { return @@ -64,16 +61,21 @@ export default function ScheduleRuleDeleteDialog( title={`Remove ${startCase(props.target.type)} From Schedule?`} subTitle={`This will remove all rules, as well as end any active or future on-call shifts on this schedule for ${props.target.type}: ${data.schedule.target.target.name}.`} caption='Overrides will not be affected.' + loading={deleteRuleStatus.fetching} + errors={deleteRuleStatus.error ? [deleteRuleStatus.error] : []} confirm onSubmit={() => { - deleteRule({ - variables: { + deleteRule( + { input: { target: props.target, scheduleID: props.scheduleID, rules: [], }, }, + { additionalTypenames: ['Schedule'] }, + ).then((result) => { + if (!result.error) props.onClose() }) }} /> diff --git a/web/src/app/schedules/ScheduleShiftList.tsx b/web/src/app/schedules/ScheduleShiftList.tsx index 0386d71c05..0400463296 100644 --- a/web/src/app/schedules/ScheduleShiftList.tsx +++ b/web/src/app/schedules/ScheduleShiftList.tsx @@ -1,4 +1,4 @@ -import { gql, useQuery } from '@apollo/client' +import { gql, useQuery } from 'urql' import { GroupAdd } from '@mui/icons-material' import { Button, @@ -71,6 +71,8 @@ interface ScheduleShiftListProps { scheduleID: string } +const context = { suspense: false } + function ScheduleShiftList({ scheduleID, }: ScheduleShiftListProps): JSX.Element { @@ -124,7 +126,9 @@ function ScheduleShiftList({ 'duration', ) - const { data } = useQuery(query, { + const [{ data }] = useQuery({ + query, + context, variables: { id: scheduleID, start, diff --git a/web/src/app/schedules/ScheduleTZFilter.jsx b/web/src/app/schedules/ScheduleTZFilter.jsx deleted file mode 100644 index 7ffacce9e8..0000000000 --- a/web/src/app/schedules/ScheduleTZFilter.jsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react' -import { gql, useQuery } from '@apollo/client' -import p from 'prop-types' -import { FormControlLabel, Switch } from '@mui/material' -import { DateTime } from 'luxon' - -import { useURLParam } from '../actions/hooks' - -const tzQuery = gql` - query ($id: ID!) { - schedule(id: $id) { - id - timeZone - } - } -` - -export function ScheduleTZFilter(props) { - const [zone, setZone] = useURLParam('tz', 'local') - const { data, loading, error } = useQuery(tzQuery, { - pollInterval: 0, - variables: { id: props.scheduleID }, - }) - - let label, tz - if (error) { - label = 'Error: ' + (error.message || error) - } else if (!data && loading) { - label = 'Fetching timezone information...' - } else { - tz = data.schedule.timeZone - const short = DateTime.local({ zone: tz }).toFormat('ZZZZ') - const tzName = tz === short ? tz : tz + ` (${short})` - label = props.label ? props.label(tzName) : `Show times in ${tzName}` - } - - return ( - setZone(e.target.checked ? tz : 'local')} - value={tz} - disabled={Boolean(loading || error)} - /> - } - label={label} - /> - ) -} - -ScheduleTZFilter.propTypes = { - label: p.func, - - scheduleID: p.string.isRequired, - - // provided by connect - zone: p.string, - setZone: p.func, -} diff --git a/web/src/app/schedules/useOverrideNotices.ts b/web/src/app/schedules/useOverrideNotices.ts index 973b214cf1..206854164d 100644 --- a/web/src/app/schedules/useOverrideNotices.ts +++ b/web/src/app/schedules/useOverrideNotices.ts @@ -1,6 +1,6 @@ import { Notice, TemporarySchedule } from '../../schema' import { parseInterval, SpanISO } from '../util/shifts' -import { useQuery, gql } from '@apollo/client' +import { useQuery, gql } from 'urql' const scheduleQuery = gql` query ($id: ID!) { @@ -19,15 +19,13 @@ export default function useOverrideNotices( scheduleID: string, value: SpanISO, ): Notice[] { - const { data, loading } = useQuery(scheduleQuery, { + const [{ data }] = useQuery({ + query: scheduleQuery, variables: { id: scheduleID, }, - pollInterval: 0, }) - if (loading) { - return [] - } + const tempSchedules = data?.schedule?.temporarySchedules const zone = data?.schedule?.timeZone const valueInterval = parseInterval(value, zone) diff --git a/web/src/cypress/e2e/schedules.cy.ts b/web/src/cypress/e2e/schedules.cy.ts index 0e00cefad2..8ea400c5be 100644 --- a/web/src/cypress/e2e/schedules.cy.ts +++ b/web/src/cypress/e2e/schedules.cy.ts @@ -153,8 +153,8 @@ function testSchedules(screen: ScreenFormat): void { }, ], }).then(() => { + cy.engineTrigger() cy.get('[data-cy="route-links"] li').contains('Shifts').click() - cy.reload() cy.get('[data-cy=flat-list-item-subheader]').should('contain', 'Today') cy.get('[data-cy=flat-list-item-subheader]').should( 'contain',