Fix integration search/sort form

GladysAssistant · Jan 10, 2022 · b694c65 · b694c65
1 parent f499d43
commit b694c65
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 63 deletions.
diff --git a/front/src/actions/integration.js b/front/src/actions/integration.js
@@ -7,20 +7,60 @@ import { integrations, integrationsByType, categories } from '../config/integrat
 const HIDDEN_CATEGORIES_FOR_NON_ADMIN_USERS = ['device', 'weather'];
 
 const actions = store => ({
-  getIntegrations(state, category = null) {
-    let selectedIntegrations = integrationsByType[category] || integrations;
-    let categoriesFiltered = categories;
-    if (state.user && state.user.role !== USER_ROLE.ADMIN) {
+  getIntegrations(state, intl, category, searchKeyword = '', orderDir = 'asc') {
+    const { user = {} } = state;
+
+    // Load all or category related integrations
+    let selectedIntegrations = category ? integrationsByType[category] || [] : integrations;
+    // Load all categories
+    let integrationCategories = categories;
+    // Total size
+    let totalSize = integrations.length;
+
+    // Filter integrations and categories according to user role
+    if (user.role !== USER_ROLE.ADMIN) {
       selectedIntegrations = selectedIntegrations.filter(
         i => HIDDEN_CATEGORIES_FOR_NON_ADMIN_USERS.indexOf(i.type) === -1
       );
-      categoriesFiltered = categoriesFiltered.filter(i => HIDDEN_CATEGORIES_FOR_NON_ADMIN_USERS.indexOf(i.type) === -1);
+
+      integrationCategories = integrationCategories.filter(
+        i => HIDDEN_CATEGORIES_FOR_NON_ADMIN_USERS.indexOf(i.type) === -1
+      );
+
+      totalSize = integrations.filter(i => HIDDEN_CATEGORIES_FOR_NON_ADMIN_USERS.indexOf(i.type) === -1);
+    }
+
+    // Translate with i18n
+    selectedIntegrations = selectedIntegrations.map(integration => {
+      const name = get(intl.dictionary, `integration.${integration.key}.title`, { default: integration.key });
+      const description = get(intl.dictionary, `integration.${integration.key}.description`, {
+        default: ''
+      });
+      return { ...integration, name, description };
+    });
+
+    // Filter
+    if (searchKeyword && searchKeyword.length > 0) {
+      selectedIntegrations = selectedIntegrations.filter(integration => {
+        const { name, description } = integration;
+        return name.toLowerCase().includes(searchKeyword) || description.toLowerCase().includes(searchKeyword);
+      });
+    }
+
+    // Sort
+    if (orderDir === 'asc') {
+      selectedIntegrations.sort((a, b) => a.name.localeCompare(b.name));
+    } else if (orderDir === 'desc') {
+      selectedIntegrations.sort((a, b) => b.name.localeCompare(a.name));
     }
+
     store.setState({
       integrations: selectedIntegrations,
-      totalSize: selectedIntegrations.length,
-      integrationCategories: categoriesFiltered,
-      searchKeyword: ''
+      totalSize,
+      integrationCategories,
+      searchKeyword,
+      orderDir,
+      selectedCategory: category
     });
   },
   async getServices(state, podId = null) {
@@ -71,32 +111,11 @@ const actions = store => ({
       console.error(e);
     }
   },
-  getIntegrationByCategory(state, category) {
-    let selectedIntegrations = category ? integrationsByType[category] || [] : integrations;
-    if (state.user && state.user.role !== USER_ROLE.ADMIN) {
-      selectedIntegrations = selectedIntegrations.filter(
-        i => HIDDEN_CATEGORIES_FOR_NON_ADMIN_USERS.indexOf(i.type) === -1
-      );
-    }
-    store.setState({
-      integrations: selectedIntegrations,
-      searchKeyword: ''
-    });
-  },
   search(state, e, intl) {
-    if (!e.target.value || e.target.value === '') {
-      this.getIntegrationByCategory(state.category);
-    } else {
-      const keyword = e.target.value.toLowerCase();
-      store.setState({
-        integrations: state.integrations.filter(integration => {
-          const name = get(intl.dictionary, `integration.${integration.key}.title`, { default: '' });
-          const description = get(intl.dictionary, `integration.${integration.key}.description`, { default: '' });
-          return name.toLowerCase().includes(keyword) || description.toLowerCase().includes(keyword);
-        }),
-        searchKeyword: keyword
-      });
-    }
+    this.getIntegrations(intl, state.selectedCategory, e.target.value, state.orderDir);
+  },
+  changeOrderDir(state, e, intl) {
+    this.getIntegrations(intl, state.selectedCategory, state.searchKeyword, e.target.value);
   }
 });
 

diff --git a/front/src/actions/main.js b/front/src/actions/main.js
@@ -1,5 +1,4 @@
 import createActionsProfilePicture from './profilePicture';
-import createActionsIntegration from './integration';
 import { getDefaultState } from '../utils/getDefaultState';
 import { route } from 'preact-router';
 import get from 'get-value';
@@ -19,7 +18,6 @@ const OPEN_PAGES = [
 
 function createActions(store) {
   const actionsProfilePicture = createActionsProfilePicture(store);
-  const integrations = createActionsIntegration(store);
 
   const actions = {
     handleRoute(state, e) {
@@ -97,7 +95,7 @@ function createActions(store) {
     }
   };
 
-  return Object.assign(actions, actionsProfilePicture, integrations);
+  return Object.assign(actions, actionsProfilePicture);
 }
 
 export default createActions;
diff --git a/front/src/components/app.jsx b/front/src/components/app.jsx
@@ -262,7 +262,6 @@ const AppRouter = connect(
 class MainApp extends Component {
   componentWillMount() {
     this.props.checkSession();
-    this.props.getIntegrations();
   }
 
   render({ user }, {}) {

diff --git a/front/src/config/i18n/en.json b/front/src/config/i18n/en.json
@@ -290,7 +290,7 @@
   "integration": {
     "root": {
       "title": "Integrations",
-      "subtitle": "1 - {{length}} of {{total}} integrations",
+      "subtitle": "{{length}} of {{total}} integrations",
       "searchPlaceholder": "Search integrations",
       "restartButton": "Restart",
       "stopButton": "Stop",

diff --git a/front/src/config/i18n/fr.json b/front/src/config/i18n/fr.json
@@ -290,7 +290,7 @@
   "integration": {
     "root": {
       "title": "Intégrations",
-      "subtitle": "1 - {{length}} de {{total}} intégrations",
+      "subtitle": "{{length}} de {{total}} intégrations",
       "searchPlaceholder": "Chercher une intégration",
       "restartButton": "Redémarrer",
       "stopButton": "Arrêter",

diff --git a/front/src/routes/integration/IntegrationMenu.jsx b/front/src/routes/integration/IntegrationMenu.jsx
@@ -1,13 +1,8 @@
-import { connect } from 'unistore/preact';
 import { Text } from 'preact-i18n';
 import { Link } from 'preact-router/match';
-import actions from '../../actions/integration';
 
-const IntegrationMenu = connect(
-  'integrationCategories',
-  actions
-)(({ integrationCategories, getIntegrationByCategory }) => {
-  const refreshIntegrations = category => () => getIntegrationByCategory(category);
+const IntegrationMenu = ({ integrationCategories, getIntegrations, intl }) => {
+  const refreshIntegrations = category => () => getIntegrations(intl, category);
 
   return (
     <div class="list-group list-group-transparent mb-0">
@@ -37,6 +32,6 @@ const IntegrationMenu = connect(
       ))}
     </div>
   );
-});
+};
 
 export default IntegrationMenu;
diff --git a/front/src/routes/integration/IntegrationPage.jsx b/front/src/routes/integration/IntegrationPage.jsx
@@ -1,16 +1,14 @@
 import { Component } from 'preact';
-import { connect } from 'unistore/preact';
 import { Text, Localizer } from 'preact-i18n';
 import IntegrationMenu from './IntegrationMenu';
 import IntegrationCategory from './IntegrationCategory';
-import actions from '../../actions/integration';
-import withIntlAsProp from '../../utils/withIntlAsProp';
 
-@connect('integrations,currentUrl,totalSize,searchKeyword,user', actions)
 class IntegrationPage extends Component {
+  changeOrderDirWithI18n = e => this.props.changeOrderDir(e, this.props.intl);
   searchWithI18n = e => this.props.search(e, this.props.intl);
 
-  render({ category, integrations, totalSize, currentUrl, searchKeyword, user }) {
+  render(props) {
+    const { category, integrations, totalSize, currentUrl, searchKeyword, user, orderDir } = props;
     return (
       <div class="page">
         <div class="page-main">
@@ -25,11 +23,11 @@ class IntegrationPage extends Component {
                     <Text id="integration.root.subtitle" fields={{ length: integrations.length, total: totalSize }} />
                   </div>
                   <div class="page-options d-flex">
-                    <select class="form-control custom-select w-auto">
-                      <option value="asc">
+                    <select class="form-control custom-select w-auto" onChange={this.changeOrderDirWithI18n}>
+                      <option value="asc" selected={orderDir === 'asc'}>
                         <Text id="global.orderDirAsc" />
                       </option>
-                      <option value="desc">
+                      <option value="desc" selected={orderDir === 'desc'}>
                         <Text id="global.orderDirDesc" />
                       </option>
                     </select>
@@ -51,7 +49,7 @@ class IntegrationPage extends Component {
                 </div>
                 <div class="row">
                   <div class="col-lg-3">
-                    <IntegrationMenu currentUrl={currentUrl} />
+                    <IntegrationMenu {...props} />
                   </div>
                   <div class="col-lg-9">
                     <div class="row row-cards">
@@ -71,4 +69,4 @@ class IntegrationPage extends Component {
   }
 }
 
-export default withIntlAsProp(IntegrationPage);
+export default IntegrationPage;
diff --git a/front/src/routes/integration/index.js b/front/src/routes/integration/index.js
@@ -2,22 +2,23 @@ import { Component } from 'preact';
 import { connect } from 'unistore/preact';
 import IntegrationPage from './IntegrationPage';
 import actions from '../../actions/integration';
+import withIntlAsProp from '../../utils/withIntlAsProp';
 
-@connect('user', actions)
+@connect('user,integrations,integrationCategories,currentUrl,totalSize,searchKeyword,orderDir,user', actions)
 class Integration extends Component {
   componentDidMount() {
-    this.props.getIntegrations(this.props.category);
+    this.props.getIntegrations(this.props.intl, this.props.category, null);
   }
 
   componentDidUpdate(prevProps) {
     if (prevProps.user !== this.props.user) {
-      this.props.getIntegrations(this.props.category);
+      this.props.getIntegrations(this.props.intl, this.props.category, null);
     }
   }
 
-  render({ category }, {}) {
-    return <IntegrationPage category={category} />;
+  render(props, {}) {
+    return <IntegrationPage {...props} />;
   }
 }
 
-export default Integration;
+export default withIntlAsProp(Integration);