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,41 +25,33 @@ 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]);
 
-    render() {
+    const filteredApplications = useMemo(() => {
-        const { applications } = this.props;
+        const regExp = new RegExp(filter, 'i');
+        return filter
+            ? applications?.filter(a => regExp.test(a.appName))
+            : applications;
+    }, [applications, filter]);
 
-        if (!applications) {
+    if (!filteredApplications) {
         return <CircularProgress variant="indeterminate" />;
     }
+
     return (
         <>
             <div className={commonStyles.searchField}>
-                    <SearchField
+                <SearchField value={filter} updateValue={setFilter} />
-                        value={this.props.settings.filter}
-                        updateValue={this.props.updateSetting.bind(
-                            this,
-                            'filter'
-                        )}
-                    />
             </div>
-                <PageContent
+            <PageContent headerContent={<HeaderTitle title="Applications" />}>
-                    headerContent={<HeaderTitle title="Applications" />}
-                >
                 <div className={commonStyles.fullwidth}>
-                        {applications.length > 0 ? (
+                    {filteredApplications.length > 0 ? (
-                            <AppsLinkList apps={applications} />
+                        <AppsLinkList apps={filteredApplications} />
                     ) : (
                         <Empty />
                     )}
@@ -67,7 +59,11 @@ class ClientStrategies extends Component {
             </PageContent>
         </>
     );
-    }
+};
-}
+
+ClientStrategies.propTypes = {
+    applications: PropTypes.array,
+    fetchAll: PropTypes.func.isRequired,
+};
 
 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"