[NHUB-252] fix(ui): Company products not saved after switching tabs

assets/companies/actions.js

@@ -97,23 +97,28 @@ export function fetchCompanyUsers(companyId, force = false) {
  * Creates new company
  *
  */
-export function postCompany() {
+export function postCompany(permissions = null) {
     return function (dispatch, getState) {
 
         const company = getState().companyToEdit;
         const url = `/companies/${company._id ? company._id : 'new'}`;
 
-        return server.post(url, company)
-            .then(function() {
-                if (company._id) {
-                    notify.success(gettext('Company updated successfully'));
-                } else {
-                    notify.success(gettext('Company created successfully'));
-                }
-                dispatch(fetchCompanies());
-            })
-            .catch((error) => errorHandler(error, dispatch, setError));
-
+        return (permissions == null ?
+            Promise.resolve() :
+            dispatch(savePermissions(company, permissions))
+        ).then(() => {
+            return server.post(url, company)
+                .then(function() {
+                    if (company._id) {
+                        notify.success(gettext('Company updated successfully'));
+                    } else {
+                        notify.success(gettext('Company created successfully'));
+                    }
+                    dispatch(fetchProducts());
+                    dispatch(fetchCompanies());
+                })
+                .catch((error) => errorHandler(error, dispatch, setError));
+        });
     };
 }
 
@@ -140,11 +145,6 @@ export function fetchProducts() {
 export function savePermissions(company, permissions) {
     return function (dispatch) {
         return server.post(`/companies/${company._id}/permissions`, permissions)
-            .then(() => {
-                notify.success(gettext('Company updated successfully'));
-                dispatch(fetchProducts());
-                dispatch(fetchCompanies());
-            })
             .catch((error) => errorHandler(error, dispatch, setError));
     };
 }

assets/companies/components/CompaniesApp.jsx

@@ -1,63 +1,81 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
+
 import {gettext} from 'utils';
-import {
-    newCompany,
-    fetchCompanies,
-} from '../actions';
+import {newCompany, fetchCompanies} from '../actions';
 import {setSearchQuery} from 'search/actions';
-import Companies from './Companies';
-import ListBar from 'components/ListBar';
+import {searchQuerySelector} from 'search/selectors';
 
-class CompaniesApp extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-    }
+import ListBar from 'components/ListBar';
+import SearchResults from 'search/components/SearchResults';
+import CompanyList from './CompanyList';
+import EditCompany from './EditCompany';
 
-    render() {
-        return (
-            [<ListBar
-                key="CompanyBar"
-                onNewItem={this.props.newCompany}
-                setQuery={this.props.setQuery}
-                fetch={this.props.fetchCompanies}
+function CompaniesApp({
+    newCompany,
+    setQuery,
+    fetchCompanies,
+    isLoading,
+    activeQuery,
+    totalCompanies,
+    companyToEdit,
+}) {
+    return (
+        <React.Fragment>
+            <ListBar
+                onNewItem={newCompany}
+                setQuery={setQuery}
+                fetch={fetchCompanies}
                 buttonText={gettext('New Company')}
-            />,
-            <Companies key="Companies" />
-            ]
-        );
-    }
+            />
+            <div className="flex-row">
+                {isLoading ? (
+                    <div className="col d">
+                        <div className="progress">
+                            <div className="progress-bar" style={{width: '25%'}} />
+                        </div>
+                    </div>
+                ) : (
+                    <div className="flex-col flex-column">
+                        {!activeQuery ? null : (
+                            <SearchResults
+                                totalItems={totalCompanies}
+                                totalItemsLabel={activeQuery}
+                            />
+                        )}
+                        <CompanyList />
+                    </div>
+                )}
+                {!companyToEdit ? null : (
+                    <EditCompany key={companyToEdit._id || '_new'} />
+                )}
+            </div>
+        </React.Fragment>
+    );
 }
 
 CompaniesApp.propTypes = {
-    companies: PropTypes.arrayOf(PropTypes.object),
     companyToEdit: PropTypes.object,
-    activeCompanyId: PropTypes.string,
-    selectCompany: PropTypes.func,
-    editCompany: PropTypes.func,
-    saveCompany: PropTypes.func,
-    deleteCompany: PropTypes.func,
     newCompany: PropTypes.func,
-    cancelEdit: PropTypes.func,
     isLoading: PropTypes.bool,
     activeQuery: PropTypes.string,
     totalCompanies: PropTypes.number,
-    companyOptions: PropTypes.arrayOf(PropTypes.object),
-    companiesById: PropTypes.object,
-    companyUsers: PropTypes.arrayOf(PropTypes.object),
     fetchCompanies: PropTypes.func,
-    fetchCompanyUsers: PropTypes.func,
     setQuery: PropTypes.func,
-    errors: PropTypes.object,
-    dispatch: PropTypes.func,
 };
 
+const mapStateToProps = (state) => ({
+    isLoading: state.isLoading,
+    totalCompanies: state.totalCompanies,
+    activeQuery: searchQuerySelector(state),
+    companyToEdit: state.companyToEdit,
+});
 
 const mapDispatchToProps = {
-    newCompany,
-    fetchCompanies,
+    newCompany: newCompany,
+    fetchCompanies: fetchCompanies,
     setQuery: setSearchQuery,
 };
 
-export default connect(null, mapDispatchToProps)(CompaniesApp);
+export default connect(mapStateToProps, mapDispatchToProps)(CompaniesApp);

assets/companies/components/CompanyList.jsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import CompanyListItem from './CompanyListItem';
+import {connect} from 'react-redux';
+
 import {gettext} from 'utils';
+import {selectCompany} from '../actions';
+import {companiesSubscriberIdEnabled} from 'ui/selectors';
+
+import CompanyListItem from './CompanyListItem';
 
 
-function CompanyList({companies, onClick, activeCompanyId, companyTypes, showSubscriberId}) {
+function CompanyList({companies, selectCompany, activeCompanyId, companyTypes, showSubscriberId}) {
     const list = companies.map((company) =>
         <CompanyListItem
             key={company._id}
             company={company}
-            onClick={onClick}
+            onClick={selectCompany}
             isActive={activeCompanyId===company._id}
             type={companyTypes.find((ctype) => ctype.id === company.company_type)}
             showSubscriberId={showSubscriberId}
@@ -42,11 +47,22 @@ function CompanyList({companies, onClick, activeCompanyId, companyTypes, showSub
 }
 
 CompanyList.propTypes = {
-    companies: PropTypes.array.isRequired,
-    onClick: PropTypes.func.isRequired,
+    companies: PropTypes.arrayOf(PropTypes.object).isRequired,
     activeCompanyId: PropTypes.string,
     companyTypes: PropTypes.array,
     showSubscriberId: PropTypes.bool,
+    selectCompany: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+    companies: state.companies.map((id) => state.companiesById[id]),
+    activeCompanyId: state.activeCompanyId,
+    companyTypes: state.companyTypes,
+    showSubscriberId: companiesSubscriberIdEnabled(state),
+});
+
+const mapDispatchToProps = {
+    selectCompany: selectCompany,
 };
 
-export default CompanyList;
+export default connect(mapStateToProps, mapDispatchToProps)(CompanyList);