From f342d4d9049591f3017cd07fc8d2012dcab7f933 Mon Sep 17 00:00:00 2001
From: Youssef <khedher.youssef@hotmail.fr>
Date: Fri, 4 Feb 2022 16:26:51 +0100
Subject: [PATCH] refactor: finish ApplicationList and add it to routes

---
 .../component/application/ApplicationList.tsx | 71 +++++++++----------
 .../application/ApplicationUpdate.tsx         |  4 +-
 .../component/application/EditApplication.tsx |  3 +-
 .../common/SearchField/SearchField.jsx        |  2 +-
 frontend/src/component/menu/routes.js         |  4 +-
 5 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/frontend/src/component/application/ApplicationList.tsx b/frontend/src/component/application/ApplicationList.tsx
index c60f023b7f..7bbed87f7b 100644
--- a/frontend/src/component/application/ApplicationList.tsx
+++ b/frontend/src/component/application/ApplicationList.tsx
@@ -1,5 +1,4 @@
-import React, { Component, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useMemo, useState } from 'react';
 import { CircularProgress } from '@material-ui/core';
 import { Warning } from '@material-ui/icons';
 
@@ -10,28 +9,52 @@ import HeaderTitle from '../common/HeaderTitle';
 import useApplications from '../../hooks/api/getters/useApplications/useApplications';
 
 const ApplicationList = () => {
-    //missing useSettings
     const { applications, refetchApplications } = useApplications();
-
+    const [filter, setFilter] = useState('');
     useEffect(() => {
         refetchApplications();
+        // eslint-disable-next-line
     }, []);
 
-    if (!applications) {
+    const filteredApplications = useMemo(() => {
+        const regExp = new RegExp(filter, 'i');
+        return filter
+            ? applications?.filter(a => regExp.test(a.appName))
+            : applications;
+    }, [applications, filter]);
+
+    const Empty = () => (
+        <React.Fragment>
+            <section style={{ textAlign: 'center' }}>
+                <Warning /> <br />
+                <br />
+                Oh snap, it does not seem like you have connected any
+                applications. To connect your application to Unleash you will
+                require a Client SDK.
+                <br />
+                <br />
+                You can read more about how to use Unleash in your application
+                in the{' '}
+                <a href="https://docs.getunleash.io/docs/sdks/">
+                    documentation.
+                </a>
+            </section>
+        </React.Fragment>
+    );
+
+    if (!filteredApplications) {
         return <CircularProgress variant="indeterminate" />;
     }
+
     return (
         <>
             <div className={commonStyles.searchField}>
-                <SearchField
-                    value={this.props.settings.filter}
-                    updateValue={this.props.updateSetting.bind(this, 'filter')}
-                />
+                <SearchField value={filter} updateValue={setFilter} />
             </div>
             <PageContent headerContent={<HeaderTitle title="Applications" />}>
                 <div className={commonStyles.fullwidth}>
-                    {applications.length > 0 ? (
-                        <AppsLinkList apps={applications} />
+                    {filteredApplications.length > 0 ? (
+                        <AppsLinkList apps={filteredApplications} />
                     ) : (
                         <Empty />
                     )}
@@ -42,29 +65,3 @@ const ApplicationList = () => {
 };
 
 export default ApplicationList;
-
-const Empty = () => (
-    <React.Fragment>
-        <section style={{ textAlign: 'center' }}>
-            <Warning /> <br />
-            <br />
-            Oh snap, it does not seem like you have connected any applications.
-            To connect your application to Unleash you will require a Client
-            SDK.
-            <br />
-            <br />
-            You can read more about how to use Unleash in your application in
-            the{' '}
-            <a href="https://docs.getunleash.io/docs/sdks/">documentation.</a>
-        </section>
-    </React.Fragment>
-);
-
-class ClientStrategies extends Component {
-    static propTypes = {
-        applications: PropTypes.array,
-        fetchAll: PropTypes.func.isRequired,
-        settings: PropTypes.object.isRequired,
-        updateSetting: PropTypes.func.isRequired,
-    };
-}
diff --git a/frontend/src/component/application/ApplicationUpdate.tsx b/frontend/src/component/application/ApplicationUpdate.tsx
index bc4244785e..29c7587472 100644
--- a/frontend/src/component/application/ApplicationUpdate.tsx
+++ b/frontend/src/component/application/ApplicationUpdate.tsx
@@ -8,8 +8,8 @@ import useApplicationsApi from '../../hooks/api/actions/useApplicationsApi/useAp
 const ApplicationUpdate = ({ application }) => {
     const { storeApplicationMetaData } = useApplicationsApi();
     const { appName, icon, url, description } = application;
-    const [localUrl, setLocalUrl] = useState(url);
-    const [localDescription, setLocalDescription] = useState(description);
+    const [localUrl, setLocalUrl] = useState(url || '');
+    const [localDescription, setLocalDescription] = useState(description || '');
     const commonStyles = useCommonStyles();
 
     return (
diff --git a/frontend/src/component/application/EditApplication.tsx b/frontend/src/component/application/EditApplication.tsx
index 248726c4af..15975228ff 100644
--- a/frontend/src/component/application/EditApplication.tsx
+++ b/frontend/src/component/application/EditApplication.tsx
@@ -34,8 +34,7 @@ const EditApplication = () => {
     const { refetchApplication, application } = useApplication(name);
     const { appName, url, description, icon = 'apps', createdAt } = application;
     const { hasAccess } = useContext(AccessContext);
-    const { storeApplicationMetaData, deleteApplication } =
-        useApplicationsApi();
+    const { deleteApplication } = useApplicationsApi();
 
     const [loading, setLoading] = useState(true);
     const [showDialog, setShowDialog] = useState(false);
diff --git a/frontend/src/component/common/SearchField/SearchField.jsx b/frontend/src/component/common/SearchField/SearchField.jsx
index dd404b85a5..3345293569 100644
--- a/frontend/src/component/common/SearchField/SearchField.jsx
+++ b/frontend/src/component/common/SearchField/SearchField.jsx
@@ -7,7 +7,7 @@ import SearchIcon from '@material-ui/icons/Search';
 
 import { useStyles } from './styles';
 
-function SearchField({ updateValue, className }) {
+function SearchField({ updateValue, className = '' }) {
     const styles = useStyles();
 
     const [localValue, setLocalValue] = useState('');
diff --git a/frontend/src/component/menu/routes.js b/frontend/src/component/menu/routes.js
index b12d4f31da..b945b93b84 100644
--- a/frontend/src/component/menu/routes.js
+++ b/frontend/src/component/menu/routes.js
@@ -8,7 +8,6 @@ import HistoryPage from '../../page/history';
 import HistoryTogglePage from '../../page/history/toggle';
 import ShowArchive from '../../page/archive/show';
 import Archive from '../../page/archive';
-import Applications from '../../page/applications';
 import ContextFields from '../../page/context';
 import ListTagTypes from '../../page/tag-types';
 import Addons from '../../page/addons';
@@ -47,6 +46,7 @@ import CreateProject from '../project/Project/CreateProject/CreateProject';
 import CreateFeature from '../feature/CreateFeature/CreateFeature/CreateFeature';
 import EditFeature from '../feature/CreateFeature/EditFeature/EditFeature';
 import EditApplication from '../application/EditApplication';
+import ApplicationList from '../application/ApplicationList';
 
 export const routes = [
     // Project
@@ -203,7 +203,7 @@ export const routes = [
     {
         path: '/applications',
         title: 'Applications',
-        component: Applications,
+        component: ApplicationList,
         type: 'protected',
         layout: 'main',
         menu: { mobile: true, advanced: true },