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

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 <GenericError error={error.message} />
@@ -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()
         })
       }}
     />

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,

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)

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