refactor(ui): use async/await in several components (#11882)

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
argoproj · Sep 26, 2023 · 2e4f281 · 2e4f281
1 parent acb48bb
commit 2e4f281
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 101 deletions.
diff --git a/...plates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx b/...plates/components/cluster-workflow-template-details/cluster-workflow-template-details.tsx
@@ -7,6 +7,7 @@ import {ClusterWorkflowTemplate} from '../../../../models';
 import {uiUrl} from '../../../shared/base';
 import {ErrorNotice} from '../../../shared/components/error-notice';
 import {Loading} from '../../../shared/components/loading';
+import {useCollectEvent} from '../../../shared/components/use-collect-event';
 import {Context} from '../../../shared/context';
 import {historyUrl} from '../../../shared/history';
 import {services} from '../../../shared/services';
@@ -17,7 +18,7 @@ import {ClusterWorkflowTemplateEditor} from '../cluster-workflow-template-editor
 
 require('../../../workflows/components/workflow-details/workflow-details.scss');
 
-export const ClusterWorkflowTemplateDetails = ({history, location, match}: RouteComponentProps<any>) => {
+export function ClusterWorkflowTemplateDetails({history, location, match}: RouteComponentProps<any>) {
     // boiler-plate
     const {navigation, notifications, popup} = useContext(Context);
     const queryParams = new URLSearchParams(location.search);
@@ -45,23 +46,32 @@ export const ClusterWorkflowTemplateDetails = ({history, location, match}: Route
     }, [name, sidePanel, tab]);
 
     useEffect(() => {
-        services.clusterWorkflowTemplate
-            .get(name)
-            .then(setTemplate)
-            .then(() => setEdited(false)) // set back to false
-            .then(() => setError(null))
-            .catch(setError);
+        (async () => {
+            try {
+                const newTemplate = await services.clusterWorkflowTemplate.get(name);
+                setTemplate(newTemplate);
+                setEdited(false); // set back to false
+                setError(null);
+            } catch (err) {
+                setError(err);
+            }
+        })();
     }, [name]);
 
     useEffect(() => {
-        services.info
-            .getInfo()
-            .then(info => setNamespace(Utils.getNamespaceWithDefault(info.managedNamespace)))
-            .then(() => setError(null))
-            .catch(setError);
-        services.info.collectEvent('openedClusterWorkflowTemplateDetails').then();
+        (async () => {
+            try {
+                const info = await services.info.getInfo();
+                setNamespace(Utils.getNamespaceWithDefault(info.managedNamespace));
+                setError(null);
+            } catch (err) {
+                setError(err);
+            }
+        })();
     }, []);
 
+    useCollectEvent('openedClusterWorkflowTemplateDetails');
+
     return (
         <Page
             title='Cluster Workflow Template Details'
@@ -137,4 +147,4 @@ export const ClusterWorkflowTemplateDetails = ({history, location, match}: Route
             )}
         </Page>
     );
-};
+}
diff --git a/...ow-templates/components/cluster-workflow-template-list/cluster-workflow-template-list.tsx b/...ow-templates/components/cluster-workflow-template-list/cluster-workflow-template-list.tsx
@@ -9,6 +9,7 @@ import {ExampleManifests} from '../../../shared/components/example-manifests';
 import {InfoIcon} from '../../../shared/components/fa-icons';
 import {Loading} from '../../../shared/components/loading';
 import {Timestamp} from '../../../shared/components/timestamp';
+import {useCollectEvent} from '../../../shared/components/use-collect-event';
 import {ZeroState} from '../../../shared/components/zero-state';
 import {Context} from '../../../shared/context';
 import {useQueryParams} from '../../../shared/use-query-params';
@@ -18,20 +19,22 @@ import {services} from '../../../shared/services';
 import {ClusterWorkflowTemplateCreator} from '../cluster-workflow-template-creator';
 require('./cluster-workflow-template-list.scss');
 
-export const ClusterWorkflowTemplateList = ({history, location}: RouteComponentProps<any>) => {
+export function ClusterWorkflowTemplateList({history, location}: RouteComponentProps<any>) {
     const {navigation} = useContext(Context);
     const queryParams = new URLSearchParams(location.search);
     const [templates, setTemplates] = useState<models.ClusterWorkflowTemplate[]>();
     const [error, setError] = useState<Error>();
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel'));
 
-    const fetchClusterWorkflowTemplates = () => {
-        services.clusterWorkflowTemplate
-            .list()
-            .then(retrievedTemplates => setTemplates(retrievedTemplates))
-            .then(() => setError(null))
-            .catch(setError);
-    };
+    async function fetchClusterWorkflowTemplates() {
+        try {
+            const retrievedTemplates = await services.clusterWorkflowTemplate.list();
+            setTemplates(retrievedTemplates);
+            setError(null);
+        } catch (err) {
+            setError(err);
+        }
+    }
 
     useEffect(
         useQueryParams(history, p => {
@@ -42,10 +45,11 @@ export const ClusterWorkflowTemplateList = ({history, location}: RouteComponentP
 
     useEffect(() => {
         fetchClusterWorkflowTemplates();
-        services.info.collectEvent('openedClusterWorkflowTemplateList').then();
     }, []);
 
-    const renderTemplates = () => {
+    useCollectEvent('openedClusterWorkflowTemplateList');
+
+    function renderTemplates() {
         if (error) {
             return <ErrorNotice error={error} />;
         }
@@ -88,7 +92,7 @@ export const ClusterWorkflowTemplateList = ({history, location}: RouteComponentP
                 </Footnote>
             </>
         );
-    };
+    }
 
     return (
         <Page
@@ -111,4 +115,4 @@ export const ClusterWorkflowTemplateList = ({history, location}: RouteComponentP
             </SlidingPanel>
         </Page>
     );
-};
+}
diff --git a/ui/src/app/event-sources/components/event-source-details/event-source-details.tsx b/ui/src/app/event-sources/components/event-source-details/event-source-details.tsx
@@ -63,12 +63,16 @@ export const EventSourceDetails = ({history, location, match}: RouteComponentPro
     })();
 
     useEffect(() => {
-        services.eventSource
-            .get(name, namespace)
-            .then(setEventSource)
-            .then(() => setEdited(false)) // set back to false
-            .then(() => setError(null))
-            .catch(setError);
+        (async () => {
+            try {
+                const newEventSource = await services.eventSource.get(name, namespace);
+                setEventSource(newEventSource);
+                setEdited(false); // set back to false
+                setError(null);
+            } catch (err) {
+                setError(err);
+            }
+        })();
     }, [name, namespace]);
 
     useEffect(() => setEdited(true), [eventSource]);

diff --git a/ui/src/app/shared/components/use-collect-event.ts b/ui/src/app/shared/components/use-collect-event.ts
@@ -1,8 +1,8 @@
 import {useEffect} from 'react';
 import {services} from '../../shared/services';
 
-export const useCollectEvent = (name: string) => {
+export function useCollectEvent(name: string) {
     useEffect(() => {
-        services.info.collectEvent(name).then();
+        services.info.collectEvent(name);
     }, []);
-};
+}