From 74f3f0460121838b7436a650a2e429b815ba88e2 Mon Sep 17 00:00:00 2001
From: tony-tvu <Tony.T.Vu@outlook.com>
Date: Thu, 16 Jun 2022 10:18:50 -0500
Subject: [PATCH 1/2] convert to ts

---
 .../app/schedules/ScheduleAssignedToList.js   | 38 --------------
 .../app/schedules/ScheduleAssignedToList.tsx  | 50 +++++++++++++++++++
 2 files changed, 50 insertions(+), 38 deletions(-)
 delete mode 100644 web/src/app/schedules/ScheduleAssignedToList.js
 create mode 100644 web/src/app/schedules/ScheduleAssignedToList.tsx

diff --git a/web/src/app/schedules/ScheduleAssignedToList.js b/web/src/app/schedules/ScheduleAssignedToList.js
deleted file mode 100644
index 20bea664bd..0000000000
--- a/web/src/app/schedules/ScheduleAssignedToList.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react'
-import { gql } from '@apollo/client'
-import Query from '../util/Query'
-import FlatList from '../lists/FlatList'
-import Card from '@mui/material/Card'
-
-const query = gql`
-  query ($id: ID!) {
-    schedule(id: $id) {
-      id
-      assignedTo {
-        id
-        type
-        name
-      }
-    }
-  }
-`
-
-export default function ScheduleAssignedToList({ scheduleID }) {
-  function renderList({ data }) {
-    return (
-      <Card style={{ width: '100%' }}>
-        <FlatList
-          items={data.schedule.assignedTo.map((t) => ({
-            title: t.name,
-            url: `/escalation-policies/${t.id}`,
-          }))}
-          emptyMessage='This schedule is not assigned to any escalation policies.'
-        />
-      </Card>
-    )
-  }
-
-  return (
-    <Query query={query} variables={{ id: scheduleID }} render={renderList} />
-  )
-}
diff --git a/web/src/app/schedules/ScheduleAssignedToList.tsx b/web/src/app/schedules/ScheduleAssignedToList.tsx
new file mode 100644
index 0000000000..03d09e0b4e
--- /dev/null
+++ b/web/src/app/schedules/ScheduleAssignedToList.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { useQuery, gql } from 'urql'
+import FlatList from '../lists/FlatList'
+import Card from '@mui/material/Card'
+import Spinner from '../loading/components/Spinner'
+import { GenericError } from '../error-pages'
+
+const query = gql`
+  query ($id: ID!) {
+    schedule(id: $id) {
+      id
+      assignedTo {
+        id
+        type
+        name
+      }
+    }
+  }
+`
+
+export default function ScheduleAssignedToList(props: {
+  scheduleID: string
+}): JSX.Element {
+  const [{ data, fetching, error }] = useQuery({
+    query,
+    variables: { id: props.scheduleID },
+  })
+
+  if (error) {
+    return <GenericError error={error.message} />
+  }
+
+  if (fetching && !data) {
+    return <Spinner />
+  }
+
+  return (
+    <Card style={{ width: '100%' }}>
+      <FlatList
+        items={data.schedule.assignedTo.map(
+          (t: { name: string; id: string }) => ({
+            title: t.name,
+            url: `/escalation-policies/${t.id}`,
+          }),
+        )}
+        emptyMessage='This schedule is not assigned to any escalation policies.'
+      />
+    </Card>
+  )
+}

From a49fff27d21149d7568e932b2a6feb1872ffe08e Mon Sep 17 00:00:00 2001
From: Nathaniel Cook <NathanielJCook@outlook.com>
Date: Fri, 17 Jun 2022 11:36:27 -0700
Subject: [PATCH 2/2] use sx style

---
 web/src/app/schedules/ScheduleAssignedToList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/app/schedules/ScheduleAssignedToList.tsx b/web/src/app/schedules/ScheduleAssignedToList.tsx
index 03d09e0b4e..23bfe44288 100644
--- a/web/src/app/schedules/ScheduleAssignedToList.tsx
+++ b/web/src/app/schedules/ScheduleAssignedToList.tsx
@@ -35,7 +35,7 @@ export default function ScheduleAssignedToList(props: {
   }
 
   return (
-    <Card style={{ width: '100%' }}>
+    <Card sx={{ width: '100%' }}>
       <FlatList
         items={data.schedule.assignedTo.map(
           (t: { name: string; id: string }) => ({