refactor: detach ApplicationList from global settings (#666)

* refactor: add missing prop-types dependency

* refactor: detach ApplicationList from global settings

* refactor: destructure props inline

Co-authored-by: Fredrik Strand Oseberg <fredrik.no@gmail.com>

frontend/package.json

@@ -71,6 +71,7 @@
     "lodash.flow": "3.5.0",
     "node-fetch": "2.6.7",
     "prettier": "2.5.1",
+    "prop-types": "^15.8.1",
     "react": "17.0.2",
     "react-dnd": "14.0.5",
     "react-dnd-html5-backend": "14.1.0",

frontend/src/component/application/application-list-component.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { CircularProgress } from '@material-ui/core';
 import { Warning } from '@material-ui/icons';
@@ -25,49 +25,45 @@ const Empty = () => (
     </React.Fragment>
 );
 
-class ClientStrategies extends Component {
+const ClientStrategies = ({ fetchAll, applications }) => {
-    static propTypes = {
+    const [filter, setFilter] = useState('');
-        applications: PropTypes.array,
-        fetchAll: PropTypes.func.isRequired,
-        settings: PropTypes.object.isRequired,
-        updateSetting: PropTypes.func.isRequired,
-    };
 
-    componentDidMount() {
+    useEffect(() => {
-        this.props.fetchAll();
+        fetchAll();
+    }, [fetchAll]);
+
+    const filteredApplications = useMemo(() => {
+        const regExp = new RegExp(filter, 'i');
+        return filter
+            ? applications?.filter(a => regExp.test(a.appName))
+            : applications;
+    }, [applications, filter]);
+
+    if (!filteredApplications) {
+        return <CircularProgress variant="indeterminate" />;
     }
 
-    render() {
+    return (
-        const { applications } = this.props;
+        <>
-
+            <div className={commonStyles.searchField}>
-        if (!applications) {
+                <SearchField value={filter} updateValue={setFilter} />
-            return <CircularProgress variant="indeterminate" />;
+            </div>
-        }
+            <PageContent headerContent={<HeaderTitle title="Applications" />}>
-        return (
+                <div className={commonStyles.fullwidth}>
-            <>
+                    {filteredApplications.length > 0 ? (
-                <div className={commonStyles.searchField}>
+                        <AppsLinkList apps={filteredApplications} />
-                    <SearchField
+                    ) : (
-                        value={this.props.settings.filter}
+                        <Empty />
-                        updateValue={this.props.updateSetting.bind(
+                    )}
-                            this,
-                            'filter'
-                        )}
-                    />
                 </div>
-                <PageContent
+            </PageContent>
-                    headerContent={<HeaderTitle title="Applications" />}
+        </>
-                >
+    );
-                    <div className={commonStyles.fullwidth}>
+};
-                        {applications.length > 0 ? (
+
-                            <AppsLinkList apps={applications} />
+ClientStrategies.propTypes = {
-                        ) : (
+    applications: PropTypes.array,
-                            <Empty />
+    fetchAll: PropTypes.func.isRequired,
-                        )}
+};
-                    </div>
-                </PageContent>
-            </>
-        );
-    }
-}
 
 export default ClientStrategies;

frontend/src/component/application/application-list-container.js

@@ -1,20 +1,14 @@
 import { connect } from 'react-redux';
 import ApplicationList from './application-list-component';
-import { fetchAll } from './../../store/application/actions';
+import { fetchAll } from '../../store/application/actions';
-import { updateSettingForGroup } from '../../store/settings/actions';
 
-const mapStateToProps = state => {
+const mapStateToProps = state => ({
-    const applications = state.applications.get('list').toJS();
+    applications: state.applications.get('list').toJS(),
-    const settings = state.settings.toJS().application || {};
+});
 
-    const regex = new RegExp(settings.filter, 'i');
+const mapDispatchToProps = {
-
+    fetchAll,
-    return {
-        applications: settings.filter ? applications.filter(a => regex.test(a.appName)) : applications,
-        settings,
-    };
 };
-const mapDispatchToProps = { fetchAll, updateSetting: updateSettingForGroup('application') };
 
 const Container = connect(mapStateToProps, mapDispatchToProps)(ApplicationList);
 

frontend/yarn.lock

@@ -10062,6 +10062,15 @@ prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 proxy-addr@~2.0.5:
   version "2.0.6"
   resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz"