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