From fb403255efa77f4d68ab83092d23f85a2bd734ac Mon Sep 17 00:00:00 2001
From: Youssef <khedher.youssef@hotmail.fr>
Date: Fri, 4 Feb 2022 12:45:08 +0100
Subject: [PATCH] refactor: create ApplicationList component

---
 .../component/application/ApplicationList.tsx | 70 +++++++++++++++++++
 .../application/ApplicationUpdate.tsx         | 70 +++++++++++++++++++
 .../component/application/EditApplication.tsx | 10 +--
 3 files changed, 142 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/component/application/ApplicationList.tsx
 create mode 100644 frontend/src/component/application/ApplicationUpdate.tsx

diff --git a/frontend/src/component/application/ApplicationList.tsx b/frontend/src/component/application/ApplicationList.tsx
new file mode 100644
index 0000000000..c60f023b7f
--- /dev/null
+++ b/frontend/src/component/application/ApplicationList.tsx
@@ -0,0 +1,70 @@
+import React, { Component, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { CircularProgress } from '@material-ui/core';
+import { Warning } from '@material-ui/icons';
+
+import { AppsLinkList, styles as commonStyles } from '../common';
+import SearchField from '../common/SearchField/SearchField';
+import PageContent from '../common/PageContent/PageContent';
+import HeaderTitle from '../common/HeaderTitle';
+import useApplications from '../../hooks/api/getters/useApplications/useApplications';
+
+const ApplicationList = () => {
+    //missing useSettings
+    const { applications, refetchApplications } = useApplications();
+
+    useEffect(() => {
+        refetchApplications();
+    }, []);
+
+    if (!applications) {
+        return <CircularProgress variant="indeterminate" />;
+    }
+    return (
+        <>
+            <div className={commonStyles.searchField}>
+                <SearchField
+                    value={this.props.settings.filter}
+                    updateValue={this.props.updateSetting.bind(this, 'filter')}
+                />
+            </div>
+            <PageContent headerContent={<HeaderTitle title="Applications" />}>
+                <div className={commonStyles.fullwidth}>
+                    {applications.length > 0 ? (
+                        <AppsLinkList apps={applications} />
+                    ) : (
+                        <Empty />
+                    )}
+                </div>
+            </PageContent>
+        </>
+    );
+};
+
+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
new file mode 100644
index 0000000000..bc4244785e
--- /dev/null
+++ b/frontend/src/component/application/ApplicationUpdate.tsx
@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { TextField, Grid } from '@material-ui/core';
+import { useCommonStyles } from '../../common.styles';
+import icons from './icon-names';
+import GeneralSelect from '../common/GeneralSelect/GeneralSelect';
+import useApplicationsApi from '../../hooks/api/actions/useApplicationsApi/useApplicationsApi';
+
+const ApplicationUpdate = ({ application }) => {
+    const { storeApplicationMetaData } = useApplicationsApi();
+    const { appName, icon, url, description } = application;
+    const [localUrl, setLocalUrl] = useState(url);
+    const [localDescription, setLocalDescription] = useState(description);
+    const commonStyles = useCommonStyles();
+
+    return (
+        <Grid container style={{ marginTop: '1rem' }}>
+            <Grid item sm={12} xs={12} className={commonStyles.contentSpacingY}>
+                <Grid item>
+                    <GeneralSelect
+                        name="iconSelect"
+                        id="selectIcon"
+                        label="Icon"
+                        options={icons.map(v => ({ key: v, label: v }))}
+                        value={icon || 'apps'}
+                        onChange={e =>
+                            storeApplicationMetaData(
+                                appName,
+                                'icon',
+                                e.target.value as string
+                            )
+                        }
+                    />
+                </Grid>
+                <Grid item>
+                    <TextField
+                        value={localUrl}
+                        onChange={e => setLocalUrl(e.target.value)}
+                        label="Application URL"
+                        placeholder="https://example.com"
+                        type="url"
+                        variant="outlined"
+                        size="small"
+                        onBlur={() =>
+                            storeApplicationMetaData(appName, 'url', localUrl)
+                        }
+                    />
+                </Grid>
+                <Grid item>
+                    <TextField
+                        value={localDescription}
+                        label="Description"
+                        variant="outlined"
+                        size="small"
+                        rows={2}
+                        onChange={e => setLocalDescription(e.target.value)}
+                        onBlur={() =>
+                            storeApplicationMetaData(
+                                appName,
+                                'description',
+                                localDescription
+                            )
+                        }
+                    />
+                </Grid>
+            </Grid>
+        </Grid>
+    );
+};
+
+export default ApplicationUpdate;
diff --git a/frontend/src/component/application/EditApplication.tsx b/frontend/src/component/application/EditApplication.tsx
index 956af65f53..248726c4af 100644
--- a/frontend/src/component/application/EditApplication.tsx
+++ b/frontend/src/component/application/EditApplication.tsx
@@ -18,7 +18,7 @@ import {
 } from '../common/util';
 import { UPDATE_APPLICATION } from '../providers/AccessProvider/permissions';
 import ApplicationView from './ApplicationView';
-import ApplicationUpdate from './application-update';
+import ApplicationUpdate from './ApplicationUpdate';
 import TabNav from '../common/TabNav/TabNav';
 import Dialogue from '../common/Dialogue';
 import PageContent from '../common/PageContent';
@@ -67,7 +67,6 @@ const EditApplication = () => {
             title="Are you sure you want to delete this application?"
         />
     );
-
     const tabData = [
         {
             label: 'Application overview',
@@ -75,12 +74,7 @@ const EditApplication = () => {
         },
         {
             label: 'Edit application',
-            component: (
-                <ApplicationUpdate
-                    application={application}
-                    storeApplicationMetaData={storeApplicationMetaData}
-                />
-            ),
+            component: <ApplicationUpdate application={application} />,
         },
     ];