fix: useParams() and application deletion fix (#30)

* useParams fix

Signed-off-by: saumeya <[email protected]>

* fix: useParams and deletion fix

Signed-off-by: saumeya <[email protected]>

* fix

Signed-off-by: saumeya <[email protected]>

---------

Signed-off-by: saumeya <[email protected]>

Author: saumeya

package.json

@@ -18,19 +18,22 @@
   "devDependencies": {
     "@openshift-console/dynamic-plugin-sdk": "0.0.21",
     "@openshift-console/dynamic-plugin-sdk-internal": "0.0.11",
-    "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.9",
+    "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.11",
     "@openshift-console/plugin-shared": "^0.0.1",
-    "@patternfly/quickstarts": "2.0.1",
-    "@patternfly/react-core": "^4.202.16",
-    "@patternfly/react-icons": "3.15.17",
-    "@patternfly/react-table": "4.44.4",
+    "@patternfly/react-charts": "6.94.19",
+    "@patternfly/react-core": "4.276.8",
+    "@patternfly/react-table": "4.113.0",
+    "@patternfly/react-tokens": "4.94.6",
+    "@patternfly/react-topology": "5.0.0",
+    "@patternfly/quickstarts": "2.4.0",   
+    "@patternfly/react-icons": "3.15.17",   
     "@types/classnames": "^2.2.7",
     "@types/git-url-parse": "^9.0.0",
     "@types/node": "^17.0.21",
     "@types/react": "^17.0.37",
     "@types/react-helmet": "^6.1.4",
     "@types/react-redux": "7.1.24",
-    "@types/react-router-dom": "5.1.2",
+    "@types/react-router-dom": "5.3.3",
     "@types/webpack-dev-server": "^4.7.2",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
@@ -62,7 +65,7 @@
     "style-loader": "^2.0.0",
     "ts-loader": "^9.2.8",
     "ts-node": "^10.7.0",
-    "typescript": "3.8.3",
+    "typescript": "4.8.4",
     "webpack": "^5.68.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.9.3"
@@ -90,8 +93,9 @@
     "git-url-parse": "^13.1.0",
     "react": "^17.0.2",
     "react-redux": "7.2.2",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "5.3.x",
+    "react-router-dom": "5.3.x",
+    "react-router-dom-v5-compat": "^6.11.2",
     "react-router-hash-link": "^2.0.0",
     "redux": "4.0.1"
   },

src/components/EnvironmentDetailsPage.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
 import * as _ from 'lodash';
 
 import { LoadingBox } from '@patternfly/quickstarts';
@@ -12,19 +11,19 @@ import { getEnvData } from './utils/gitops-utils';
 import EnvironmentEmptyState from './EnvironmentEmptyState';
 
 type GitOpsOverviewPageProps = {
+  appName?: string;
   customData: {
     emptyStateMsg: string;
     envs: string[];
     applicationBaseURI: string;
     manifestURL: string;
   };
 };
-type EnvironmentDetailsPageProps = RouteComponentProps<{ appName?: string }> &
-  GitOpsOverviewPageProps;
+type EnvironmentDetailsPageProps = GitOpsOverviewPageProps;
 
-const EnvironmentDetailsPage: React.FC<EnvironmentDetailsPageProps> = ({ match, customData }) => {
-  const { emptyStateMsg, envs, applicationBaseURI, manifestURL } = customData;
-  const { appName } = match.params;
+const EnvironmentDetailsPage: React.FC<EnvironmentDetailsPageProps> = (props) => {
+  const { emptyStateMsg, envs, applicationBaseURI, manifestURL } = props.customData;
+  const appName = props.appName;
 
   const [envsData, setEnvsData] = React.useState<GitOpsEnvironment[]>(null);
   const [error, setError] = React.useState<Error>(null);

src/components/EnvironmentDetailsPageTabs.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-import { RouteComponentProps } from 'react-router';
+import { useParams } from 'react-router-dom-v5-compat';
 
 import { HorizontalNav, NavPage } from '@openshift-console/dynamic-plugin-sdk';
 import { LoadingBox } from '@patternfly/quickstarts';
@@ -12,13 +12,9 @@ import DevPreviewBadge from './import/badges/DevPreviewBadge';
 import useEnvDetails from './utils/useEnvDetails';
 import EnvironmentDetailsPage from './EnvironmentDetailsPage';
 
-type EnvironmentDetailsPageTabsProps = RouteComponentProps<{ appName?: string }>;
-
-export const EnvironmentDetailsPageTabs: React.FC<EnvironmentDetailsPageTabsProps> = ({
-  match,
-}) => {
+export const EnvironmentDetailsPageTabs: React.FC = () => {
   const { t } = useTranslation('plugin__gitops-plugin');
-  const { appName } = match.params;
+  const { appName } = useParams();
   const searchParams = new URLSearchParams(location.search);
   const manifestURL = searchParams.get('url');
   const applicationBaseURI = `/application/${appName}?url=${manifestURL}&app=${appName}`;

src/components/utils/useEnvDetails.ts

@@ -2,21 +2,24 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import * as _ from 'lodash';
 
-import { pipelinesBaseURI } from '../../const';
+import { fetchDataFrequency, pipelinesBaseURI } from '../../const';
 
 import { fetchAppGroups } from './gitops-utils';
 
 const useEnvDetails = (appName, manifestURL) => {
   const { t } = useTranslation('plugin__gitops-plugin');
   const [envs, setEnvs] = React.useState<string[]>(null);
   const [emptyStateMsg, setEmptyStateMsg] = React.useState(null);
+
   React.useEffect(() => {
     let ignore = false;
-
-    fetchAppGroups(pipelinesBaseURI, manifestURL)
-      .then((appGroups) => {
+    const getAppData = async () => {
+      let data;
+      try {
+        data = await fetchAppGroups(pipelinesBaseURI, manifestURL);
         if (ignore) return;
-        const app = _.find(appGroups, (appObj) => appName === appObj?.name);
+
+        const app = _.find(data, (appObj) => appName === appObj?.name);
         if (!app?.environments) {
           setEmptyStateMsg(
             t(
@@ -25,14 +28,15 @@ const useEnvDetails = (appName, manifestURL) => {
           );
         }
         setEnvs(app?.environments);
-      })
-      .catch((e) => {
-        // eslint-disable-next-line no-console
-        console.error('Unable to load EnvDetails', e);
-      });
+      } catch (err) {
+        console.error('Unable to load EnvDetails', err);
+      }
+    };
 
+    const id = setInterval(getAppData, fetchDataFrequency * 1000);
     return () => {
       ignore = true;
+      clearInterval(id);
     };
   }, [appName, manifestURL, t]);
   return [envs, emptyStateMsg];