refactor ClusterPage into Page and List to avoid using hooks inside an if

plugins/gitops-profiles/src/components/ClusterList/ClusterList.tsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC } from 'react';
+import {
+  Content,
+  ContentHeader,
+  Header,
+  SupportButton,
+  Page,
+  pageTheme,
+  Progress,
+  HeaderLabel,
+  useApi,
+} from '@backstage/core';
+
+import ClusterTable from '../ClusterTable/ClusterTable';
+import { Button, Typography } from '@material-ui/core';
+import { useAsync, useLocalStorage } from 'react-use';
+import { gitOpsApiRef, ListClusterStatusesResponse } from '../../api';
+
+const ClusterList: FC<{}> = () => {
+  const [loginInfo] = useLocalStorage<{
+    token: string;
+    username: string;
+    name: string;
+  }>('githubLoginDetails');
+
+  const api = useApi(gitOpsApiRef);
+
+  const { loading, error, value } = useAsync<ListClusterStatusesResponse>(
+    () => {
+      return api.listClusters({
+        gitHubToken: loginInfo.token,
+        gitHubUser: loginInfo.username,
+      });
+    },
+  );
+  let content: JSX.Element;
+  if (loading) {
+    content = (
+      <Content>
+        <Progress />
+      </Content>
+    );
+  } else if (error) {
+    content = (
+      <Content>
+        <Typography variant="h4" color="error">
+          Failed to load cluster, {String(error)}
+        </Typography>
+      </Content>
+    );
+  } else {
+    content = (
+      <Content>
+        <ContentHeader title="Clusters">
+          <Button
+            variant="contained"
+            color="primary"
+            href="/gitops-cluster-create"
+          >
+            Create GitOps-managed Cluster
+          </Button>
+          <SupportButton>All clusters</SupportButton>
+        </ContentHeader>
+        <ClusterTable components={value!.result} />
+      </Content>
+    );
+  }
+
+  return (
+    <Page theme={pageTheme.home}>
+      <Header title="GitOps-managed Clusters">
+        <HeaderLabel label="Welcome" value={loginInfo.name} />
+      </Header>
+      {content}
+    </Page>
+  );
+};
+
+export default ClusterList;

plugins/gitops-profiles/src/components/ClusterList/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default } from './ClusterList';

plugins/gitops-profiles/src/components/ClusterPage/ClusterPage.tsx

@@ -17,9 +17,7 @@
 import React, { FC, useEffect, useState } from 'react';
 import {
   Content,
-  ContentHeader,
   Header,
-  SupportButton,
   Page,
   pageTheme,
   Table,
@@ -27,11 +25,11 @@ import {
   HeaderLabel,
   useApi,
 } from '@backstage/core';
-import ClusterTable from '../ClusterTable/ClusterTable';
-import { Button, Link, Typography } from '@material-ui/core';
+
+import { Link } from '@material-ui/core';
 import { useParams } from 'react-router-dom';
-import { useAsync, useLocalStorage } from 'react-use';
-import { gitOpsApiRef, ListClusterStatusesResponse, Status } from '../../api';
+import { useLocalStorage } from 'react-use';
+import { gitOpsApiRef, Status } from '../../api';
 import { transformRunStatus } from '../ProfileCatalog';
 
 const ClusterPage: FC<{}> = () => {
@@ -42,6 +40,7 @@ const ClusterPage: FC<{}> = () => {
     username: string;
     name: string;
   }>('githubLoginDetails');
+
   const [pollingLog, setPollingLog] = useState(true);
   const [runStatus, setRunStatus] = useState<Status[]>([]);
   const [runLink, setRunLink] = useState<string>('');
@@ -76,61 +75,6 @@ const ClusterPage: FC<{}> = () => {
     return () => {};
   }, [pollingLog]);
 
-  if (params.owner === undefined || params.repo === undefined) {
-    const { loading, error, value } = useAsync<ListClusterStatusesResponse>(
-      () => {
-        setPollingLog(false);
-        return api.listClusters({
-          gitHubToken: loginInfo.token,
-          gitHubUser: loginInfo.username,
-        });
-      },
-    );
-    let content: JSX.Element;
-    if (loading) {
-      content = (
-        <Content>
-          <Progress />
-        </Content>
-      );
-    } else if (error) {
-      content = (
-        <Content>
-          <Typography variant="h4" color="error">
-            Failed to load cluster, {String(error)}
-          </Typography>
-        </Content>
-      );
-    } else {
-      content = (
-        <Content>
-          <ContentHeader title="Clusters">
-            <Button
-              variant="contained"
-              color="primary"
-              href="/gitops-cluster-create"
-            >
-              Create GitOps-managed Cluster
-            </Button>
-            <SupportButton>All clusters</SupportButton>
-          </ContentHeader>
-          <ClusterTable components={value!.result} />
-        </Content>
-      );
-    }
-
-    return (
-      <Page theme={pageTheme.home}>
-        <Header
-          title="GitOps-managed Clusters"
-          subtitle="Keep track of your software"
-        >
-          <HeaderLabel label="Welcome" value={loginInfo.name} />
-        </Header>
-        {content}
-      </Page>
-    );
-  }
   return (
     <Page theme={pageTheme.home}>
       <Header title={`Cluster ${params.owner}/${params.repo}`}>

plugins/gitops-profiles/src/plugin.ts

@@ -17,11 +17,12 @@
 import { createPlugin } from '@backstage/core';
 import ProfileCatalog from './components/ProfileCatalog';
 import ClusterPage from './components/ClusterPage';
+import ClusterList from './components/ClusterList';
 
 export const plugin = createPlugin({
   id: 'gitops-profiles',
   register({ router }) {
-    router.registerRoute('/gitops-clusters', ClusterPage);
+    router.registerRoute('/gitops-clusters', ClusterList);
     router.registerRoute('/gitops-cluster/:owner/:repo', ClusterPage);
     router.registerRoute('/gitops-cluster-create', ProfileCatalog);
   },