From aeae67f0357f87eae21d7705fe2ee287e0b9a47c Mon Sep 17 00:00:00 2001
From: tony-tvu <Tony.T.Vu@outlook.com>
Date: Mon, 1 Aug 2022 12:23:24 -0500
Subject: [PATCH] convert to ts

---
 .../PolicyStepDeleteDialog.js                 | 94 -------------------
 .../PolicyStepDeleteDialog.tsx                | 80 ++++++++++++++++
 2 files changed, 80 insertions(+), 94 deletions(-)
 delete mode 100644 web/src/app/escalation-policies/PolicyStepDeleteDialog.js
 create mode 100644 web/src/app/escalation-policies/PolicyStepDeleteDialog.tsx

diff --git a/web/src/app/escalation-policies/PolicyStepDeleteDialog.js b/web/src/app/escalation-policies/PolicyStepDeleteDialog.js
deleted file mode 100644
index 0c6542e882..0000000000
--- a/web/src/app/escalation-policies/PolicyStepDeleteDialog.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react'
-import { gql, useMutation, useQuery } from '@apollo/client'
-import p from 'prop-types'
-import { nonFieldErrors } from '../util/errutil'
-import FormDialog from '../dialogs/FormDialog'
-import Spinner from '../loading/components/Spinner'
-import { GenericError } from '../error-pages'
-
-const query = gql`
-  query ($id: ID!) {
-    escalationPolicy(id: $id) {
-      id
-      steps {
-        id
-      }
-    }
-  }
-`
-
-const mutation = gql`
-  mutation ($input: UpdateEscalationPolicyInput!) {
-    updateEscalationPolicy(input: $input)
-  }
-`
-
-function PolicyStepDeleteDialog(props) {
-  const { loading, data, error } = useQuery(query, {
-    pollInterval: 0,
-    variables: { id: props.escalationPolicyID },
-  })
-  const [deleteStepMutation, deleteStepMutationStatus] = useMutation(mutation, {
-    onCompleted: props.onClose,
-    update: (cache) => {
-      const { escalationPolicy } = cache.readQuery({
-        query,
-        variables: { id: props.escalationPolicyID },
-      })
-      cache.writeQuery({
-        query,
-        variables: { id: data.serviceID },
-        data: {
-          escalationPolicy: {
-            ...escalationPolicy,
-            steps: (escalationPolicy.steps || []).filter(
-              (step) => step.id !== props.stepID,
-            ),
-          },
-        },
-      })
-    },
-  })
-
-  if (loading && !data) return <Spinner />
-  if (error) return <GenericError error={error.message} />
-
-  // get array of step ids without the step to delete
-  const sids = data.escalationPolicy.steps.map((s) => s.id)
-  const toDel = sids.indexOf(props.stepID)
-  sids.splice(toDel, 1)
-
-  return (
-    <FormDialog
-      title='Are you sure?'
-      confirm
-      subTitle={
-        'This will delete step #' +
-        (data.escalationPolicy.steps.map((s) => s.id).indexOf(props.stepID) +
-          1) +
-        ' on this escalation policy.'
-      }
-      loading={deleteStepMutationStatus.loading}
-      errors={nonFieldErrors(deleteStepMutationStatus.error)}
-      onClose={props.onClose}
-      onSubmit={() => {
-        return deleteStepMutation({
-          variables: {
-            input: {
-              id: data.escalationPolicy.id,
-              stepIDs: sids,
-            },
-          },
-        })
-      }}
-    />
-  )
-}
-
-PolicyStepDeleteDialog.propTypes = {
-  escalationPolicyID: p.string.isRequired,
-  stepID: p.string.isRequired,
-  onClose: p.func,
-}
-
-export default PolicyStepDeleteDialog
diff --git a/web/src/app/escalation-policies/PolicyStepDeleteDialog.tsx b/web/src/app/escalation-policies/PolicyStepDeleteDialog.tsx
new file mode 100644
index 0000000000..fba2e5879e
--- /dev/null
+++ b/web/src/app/escalation-policies/PolicyStepDeleteDialog.tsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import { gql, useMutation, useQuery } from 'urql'
+import { nonFieldErrors } from '../util/errutil'
+import FormDialog from '../dialogs/FormDialog'
+import Spinner from '../loading/components/Spinner'
+import { GenericError } from '../error-pages'
+import { EscalationPolicyStep } from '../../schema'
+
+const query = gql`
+  query ($id: ID!) {
+    escalationPolicy(id: $id) {
+      id
+      steps {
+        id
+      }
+    }
+  }
+`
+
+const mutation = gql`
+  mutation ($input: UpdateEscalationPolicyInput!) {
+    updateEscalationPolicy(input: $input)
+  }
+`
+
+function PolicyStepDeleteDialog(props: {
+  escalationPolicyID: string
+  stepID: string
+  onClose: () => void
+}): JSX.Element {
+  const [{ fetching, data, error }] = useQuery({
+    query,
+    variables: { id: props.escalationPolicyID },
+  })
+
+  const [deleteStepMutationStatus, deleteStepMutation] = useMutation(mutation)
+
+  if (fetching && !data) return <Spinner />
+  if (error) return <GenericError error={error.message} />
+
+  // get array of step ids without the step to delete
+  const sids = data.escalationPolicy.steps.map(
+    (s: EscalationPolicyStep) => s.id,
+  )
+  const toDel = sids.indexOf(props.stepID)
+  sids.splice(toDel, 1)
+
+  return (
+    <FormDialog
+      title='Are you sure?'
+      confirm
+      subTitle={
+        'This will delete step #' +
+        (data.escalationPolicy.steps
+          .map((s: EscalationPolicyStep) => s.id)
+          .indexOf(props.stepID) +
+          1) +
+        ' on this escalation policy.'
+      }
+      loading={deleteStepMutationStatus.fetching}
+      errors={nonFieldErrors(deleteStepMutationStatus.error)}
+      onClose={props.onClose}
+      onSubmit={() => {
+        deleteStepMutation(
+          {
+            input: {
+              id: data.escalationPolicy.id,
+              stepIDs: sids,
+            },
+          },
+          { additionalTypenames: ['EscalationPolicy'] },
+        ).then((result) => {
+          if (!result.error) props.onClose()
+        })
+      }}
+    />
+  )
+}
+
+export default PolicyStepDeleteDialog