restructured tab construction and migrated to typescript

src/views/IOC/IOCDetailsView.jsx → src/views/IOC/IOCDetailsView.tsx

+import { ReactNode, useEffect, useState } from "react";
 import { Grid, IconButton, Stack } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
-  GlobalAppBarContext,
+  useGlobalAppBarContext,
   useIsCurrentUserPermitted,
   TabPanel
 } from "@ess-ics/ce-ui-common";
@@ -11,45 +11,64 @@ import { IOCLiveStatus } from "../../components/IOC/IOCLiveStatus";
 import { IOCManage } from "../../components/IOC/IOCManage";
 import { IOCAdmin } from "../../components/IOC/IOCAdmin";
 import { applicationTitle } from "../../components/common/Helper";
+import { GlobalAppBarContext } from "../../types/common";
+import { IocDetails } from "../../store/deployApi";
 
-export function IOCDetailsView({ ioc }) {
+interface IOCDetailsViewProps {
+  ioc: IocDetails;
+}
+
+interface Tab {
+  label: string;
+  content: ReactNode;
+}
+
+const getTabs = (ioc: IocDetails): Tab[] => [
+  {
+    label: "Status",
+    content: <IOCLiveStatus ioc={ioc} />
+  },
+  {
+    label: "Management",
+    content: <IOCManage ioc={ioc} />
+  },
+  {
+    label: "Admin",
+    content: <IOCAdmin ioc={ioc} />
+  }
+];
+
+export const IOCDetailsView = ({ ioc }: IOCDetailsViewProps) => {
   const [tabIndex, setTabIndex] = useState(0);
-  const { setTitle } = useContext(GlobalAppBarContext);
+  const [tabs, setTabs] = useState<Tab[] | null>(null);
+  const { setTitle }: GlobalAppBarContext = useGlobalAppBarContext();
   const navigate = useNavigate();
 
+  const isPermittedAdmin = useIsCurrentUserPermitted({
+    allowedRoles: ["DeploymentToolAdmin"]
+  });
+
+  const isPermittedManagement = useIsCurrentUserPermitted({
+    allowedRoles: ["DeploymentToolAdmin", "DeploymentToolIntegrator"]
+  });
+
   useEffect(() => {
     if (ioc) {
       setTitle(applicationTitle(`IOC Details: ${ioc.namingName}`));
     }
   }, [ioc, setTitle]);
 
-  const tabs = [
-    {
-      label: "Status",
-      content: <IOCLiveStatus ioc={ioc} />
+  useEffect(() => {
+    if (ioc) {
+      if (isPermittedAdmin) {
+        setTabs(getTabs(ioc));
+      } else if (isPermittedManagement) {
+        setTabs(getTabs(ioc).filter((tab) => tab.label !== "Admin"));
+      } else {
+        setTabs(getTabs(ioc).filter((tab) => tab.label === "Status"));
+      }
     }
-  ];
-
-  const isPermittedManagement = useIsCurrentUserPermitted({
-    allowedRoles: ["DeploymentToolAdmin", "DeploymentToolIntegrator"]
-  });
-
-  const isPermittedAdmin = useIsCurrentUserPermitted({
-    allowedRoles: ["DeploymentToolAdmin"]
-  });
-
-  if (isPermittedManagement) {
-    tabs.push({
-      label: "Management",
-      content: <IOCManage ioc={ioc} />
-    });
-  }
-  if (isPermittedAdmin) {
-    tabs.push({
-      label: "Admin",
-      content: <IOCAdmin ioc={ioc} />
-    });
-  }
+  }, [ioc, isPermittedAdmin, isPermittedManagement]);
 
   return (
     <Grid
@@ -61,28 +80,30 @@ export function IOCDetailsView({ ioc }) {
         xs={12}
         style={{ paddingBottom: 0 }}
       >
-        <TabPanel
-          tabs={tabs}
-          initialIndex={tabIndex}
-          onTabChange={(index) => setTabIndex(index)}
-          TabsProps={{ centered: true, sx: { flex: 1 } }}
-          renderTabs={(tabs) => (
-            <Stack
-              flexDirection="row"
-              justifyContent="space-between"
-            >
-              <IconButton
-                color="inherit"
-                onClick={() => navigate(-1)}
-                size="large"
+        {tabs && (
+          <TabPanel
+            tabs={tabs}
+            initialIndex={tabIndex}
+            onTabChange={(index: number) => setTabIndex(index)}
+            TabsProps={{ centered: true, sx: { flex: 1 } }}
+            renderTabs={(tabs: ReactNode) => (
+              <Stack
+                flexDirection="row"
+                justifyContent="space-between"
               >
-                <ArrowBackIcon />
-              </IconButton>
-              {tabs}
-            </Stack>
-          )}
-        />
+                <IconButton
+                  color="inherit"
+                  onClick={() => navigate(-1)}
+                  size="large"
+                >
+                  <ArrowBackIcon />
+                </IconButton>
+                {tabs}
+              </Stack>
+            )}
+          />
+        )}
       </Grid>
     </Grid>
   );
-}
+};