refactor: update state initialization and error handling in Fetch com…

…ponents; improve type definitions for fetch functions
OneUptime · Jan 27, 2025 · a7f8aa4 · a7f8aa4
1 parent 722fe30
commit a7f8aa4
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 96 deletions.
diff --git a/Dashboard/src/Components/IncidentSeverity/FetchIncidentSeverity.tsx b/Dashboard/src/Components/IncidentSeverity/FetchIncidentSeverity.tsx
@@ -10,6 +10,8 @@ import ListResult from "Common/UI/Utils/BaseDatabase/ListResult";
 import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
 import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
 import IncidentSeveritiesElement from "./IncidentSeveritiesElement";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import Exception from "Common/Types/Exception/Exception";
 
 export interface ComponentProps {
   onCallDutyPolicyIds: Array<ObjectID>;
@@ -20,28 +22,31 @@ const FetchIncidentSeverities: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
   const [error, setError] = React.useState<string>("");
-  const [incidentSeverities, setIncidentSeverities] = React.useState<Array<IncidentSeverity>>([]);
+  const [incidentSeverities, setIncidentSeverities] = React.useState<
+    Array<IncidentSeverity>
+  >([]);
 
-  const fetchIncidentSeverities = async () => {
+  const fetchIncidentSeverities: PromiseVoidFunction = async (): Promise<void> => {
     setIsLoading(true);
     setError("");
 
     try {
-      const incidentSeverities: ListResult<IncidentSeverity> = await ModelAPI.getList({
-        modelType: IncidentSeverity,
-        query: {
-          _id: new Includes(props.onCallDutyPolicyIds),
-        },
-        skip: 0,
-        limit: LIMIT_PER_PROJECT,
-        select: {
-          name: true,
-          _id: true,
-        },
-        sort: {
-          name: SortOrder.Ascending,
-        },
-      });
+      const incidentSeverities: ListResult<IncidentSeverity> =
+        await ModelAPI.getList({
+          modelType: IncidentSeverity,
+          query: {
+            _id: new Includes(props.onCallDutyPolicyIds),
+          },
+          skip: 0,
+          limit: LIMIT_PER_PROJECT,
+          select: {
+            name: true,
+            _id: true,
+          },
+          sort: {
+            name: SortOrder.Ascending,
+          },
+        });
 
       setIncidentSeverities(incidentSeverities.data);
     } catch (err) {
@@ -52,7 +57,7 @@ const FetchIncidentSeverities: FunctionComponent<ComponentProps> = (
   };
 
   useEffect(() => {
-    fetchIncidentSeverities().catch((err) => {
+    fetchIncidentSeverities().catch((err: Exception) => {
       setError(API.getFriendlyMessage(err));
     });
   }, []);

diff --git a/Dashboard/src/Components/IncidentSeverity/IncidentSeverityElement.tsx b/Dashboard/src/Components/IncidentSeverity/IncidentSeverityElement.tsx
@@ -5,19 +5,17 @@ import Pill from "Common/UI/Components/Pill/Pill";
 
 export interface ComponentProps {
   incidentSeverity: IncidentSeverity;
-  onNavigateComplete?: (() => void) | undefined;
-  showIcon?: boolean | undefined;
 }
 
 const IncidentSeverityElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-    return (
-        <Pill
-          color={props.incidentSeverity.color || Black}
-          text={props.incidentSeverity.name || "Unknown"}
-        />
-      );
+  return (
+    <Pill
+      color={props.incidentSeverity.color || Black}
+      text={props.incidentSeverity.name || "Unknown"}
+    />
+  );
 };
 
 export default IncidentSeverityElement;
diff --git a/Dashboard/src/Components/Label/FetchLabels.tsx b/Dashboard/src/Components/Label/FetchLabels.tsx
@@ -10,6 +10,8 @@ import ListResult from "Common/UI/Utils/BaseDatabase/ListResult";
 import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
 import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
 import LabelsElement from "./Labels";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import Exception from "Common/Types/Exception/Exception";
 
 export interface ComponentProps {
   labelIds: Array<ObjectID>;
@@ -22,7 +24,7 @@ const FetchLabels: FunctionComponent<ComponentProps> = (
   const [error, setError] = React.useState<string>("");
   const [labels, setLabels] = React.useState<Array<Label>>([]);
 
-  const fetchLabels = async () => {
+  const fetchLabels: PromiseVoidFunction = async (): Promise<void> => {
     setIsLoading(true);
     setError("");
 
@@ -53,7 +55,7 @@ const FetchLabels: FunctionComponent<ComponentProps> = (
   };
 
   useEffect(() => {
-    fetchLabels().catch((err) => {
+    fetchLabels().catch((err: Exception) => {
       setError(API.getFriendlyMessage(err));
     });
   }, []);

diff --git a/Dashboard/src/Components/MonitorStatus/FetchMonitorStatuses.tsx b/Dashboard/src/Components/MonitorStatus/FetchMonitorStatuses.tsx
@@ -20,7 +20,9 @@ const FetchMonitorStatuses: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
   const [error, setError] = React.useState<string>("");
-  const [monitorStatus, setMonitorStatus] = React.useState<Array<MonitorStatus>>([]);
+  const [monitorStatus, setMonitorStatus] = React.useState<
+    Array<MonitorStatus>
+  >([]);
 
   const fetchMonitorStatus = async () => {
     setIsLoading(true);

diff --git a/Dashboard/src/Components/OnCallPolicy/FetchOnCallPolicies.tsx b/Dashboard/src/Components/OnCallPolicy/FetchOnCallPolicies.tsx
@@ -20,28 +20,31 @@ const FetchOnCallDutyPolicies: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
   const [error, setError] = React.useState<string>("");
-  const [onCallDutyPolicies, setOnCallDutyPolicies] = React.useState<Array<OnCallDutyPolicy>>([]);
+  const [onCallDutyPolicies, setOnCallDutyPolicies] = React.useState<
+    Array<OnCallDutyPolicy>
+  >([]);
 
   const fetchOnCallDutyPolicies = async () => {
     setIsLoading(true);
     setError("");
 
     try {
-      const onCallDutyPolicies: ListResult<OnCallDutyPolicy> = await ModelAPI.getList({
-        modelType: OnCallDutyPolicy,
-        query: {
-          _id: new Includes(props.onCallDutyPolicyIds),
-        },
-        skip: 0,
-        limit: LIMIT_PER_PROJECT,
-        select: {
-          name: true,
-          _id: true,
-        },
-        sort: {
-          name: SortOrder.Ascending,
-        },
-      });
+      const onCallDutyPolicies: ListResult<OnCallDutyPolicy> =
+        await ModelAPI.getList({
+          modelType: OnCallDutyPolicy,
+          query: {
+            _id: new Includes(props.onCallDutyPolicyIds),
+          },
+          skip: 0,
+          limit: LIMIT_PER_PROJECT,
+          select: {
+            name: true,
+            _id: true,
+          },
+          sort: {
+            name: SortOrder.Ascending,
+          },
+        });
 
       setOnCallDutyPolicies(onCallDutyPolicies.data);
     } catch (err) {

diff --git a/Dashboard/src/Components/Team/FetchTeams.tsx b/Dashboard/src/Components/Team/FetchTeams.tsx
@@ -10,6 +10,8 @@ import ListResult from "Common/UI/Utils/BaseDatabase/ListResult";
 import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
 import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
 import TeamsElement from "./TeamsElement";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import Exception from "Common/Types/Exception/Exception";
 
 export interface ComponentProps {
   teamIds: Array<ObjectID>;
@@ -22,7 +24,7 @@ const FetchTeams: FunctionComponent<ComponentProps> = (
   const [error, setError] = React.useState<string>("");
   const [team, setTeam] = React.useState<Array<Team>>([]);
 
-  const fetchTeam = async () => {
+  const fetchTeam: PromiseVoidFunction = async (): Promise<void> => {
     setIsLoading(true);
     setError("");
 
@@ -52,7 +54,7 @@ const FetchTeams: FunctionComponent<ComponentProps> = (
   };
 
   useEffect(() => {
-    fetchTeam().catch((err) => {
+    fetchTeam().catch((err: Exception) => {
       setError(API.getFriendlyMessage(err));
     });
   }, []);

diff --git a/Dashboard/src/Components/User/FetchUsers.tsx b/Dashboard/src/Components/User/FetchUsers.tsx
@@ -10,6 +10,8 @@ import ListResult from "Common/UI/Utils/BaseDatabase/ListResult";
 import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
 import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
 import UsersElement from "./Users";
+import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import Exception from "Common/Types/Exception/Exception";
 
 export interface ComponentProps {
   userIds: Array<ObjectID>;
@@ -22,7 +24,7 @@ const FetchUsers: FunctionComponent<ComponentProps> = (
   const [error, setError] = React.useState<string>("");
   const [users, setUsers] = React.useState<Array<User>>([]);
 
-  const fetchUsers = async () => {
+  const fetchUsers: PromiseVoidFunction = async (): Promise<void> => {
     setIsLoading(true);
     setError("");
 
@@ -54,7 +56,7 @@ const FetchUsers: FunctionComponent<ComponentProps> = (
   };
 
   useEffect(() => {
-    fetchUsers().catch((err) => {
+    fetchUsers().catch((err: Exception) => {
       setError(API.getFriendlyMessage(err));
     });
   }, []);