Web: People: Applied Filter loader

products/ASC.People/Client/src/components/pages/Home/Section/Filter/index.js

@@ -6,9 +6,16 @@ import result from "lodash/result";
 import { withTranslation } from "react-i18next";
 import { withRouter } from "react-router";
 import { getFilterByLocation } from "../../../../../helpers/converters";
-import { store, FilterInput } from "asc-web-common";
+import { store, FilterInput, Loaders } from "asc-web-common";
 import { isMobileOnly } from "react-device-detect";
-const { isAdmin } = store.auth.selectors;
+import { getFilter, getGroups } from "../../../../../store/people/selectors";
+const {
+  isAdmin,
+  getCurrentUser,
+  getLanguage,
+  getSettings,
+  getIsLoaded,
+} = store.auth.selectors;
 
 const getEmployeeStatus = (filterValues) => {
   const employeeStatus = result(
@@ -241,8 +248,8 @@ class SectionFilterContent extends React.Component {
 
   render() {
     const selectedFilterData = this.getSelectedFilterData();
-    const { t, i18n } = this.props;
-    return (
+    const { t, language, isLoaded } = this.props;
+    return isLoaded ? (
       <FilterInput
         getFilterData={this.getData}
         getSortData={this.getSortData}
@@ -252,21 +259,25 @@ class SectionFilterContent extends React.Component {
         directionDescLabel={t("DirectionDescLabel")}
         placeholder={t("Search")}
         needForUpdate={this.needForUpdate}
-        language={i18n.language}
+        language={language}
         contextMenuHeader={t("AddFilter")}
         isMobile={isMobileOnly}
       />
+    ) : (
+      <Loaders.Filter />
     );
   }
 }
 
 function mapStateToProps(state) {
   return {
-    user: state.auth.user,
-    groups: state.people.groups,
-    filter: state.people.filter,
-    settings: state.auth.settings,
+    user: getCurrentUser(state),
+    language: getLanguage(state),
+    groups: getGroups(state),
+    filter: getFilter(state),
+    settings: getSettings(state),
     isAdmin: isAdmin(state),
+    isLoaded: getIsLoaded(state),
   };
 }
 

products/ASC.People/Client/src/components/pages/Home/Section/Paging/index.js

@@ -3,12 +3,16 @@ import { connect } from "react-redux";
 import { fetchPeople } from "../../../../../store/people/actions";
 import { Paging } from "asc-web-components";
 import { useTranslation } from "react-i18next";
+import { getFilter } from "../../../../../store/people/selectors";
+import { store, Loaders } from "asc-web-common";
+const { getIsLoaded } = store.auth.selectors;
 
 const SectionPagingContent = ({
   fetchPeople,
   filter,
   onLoading,
   selectedCount,
+  isLoaded,
 }) => {
   const { t } = useTranslation();
   const onNextClick = useCallback(
@@ -119,31 +123,36 @@ const SectionPagingContent = ({
 
   //console.log("SectionPagingContent render", filter);
 
-  return filter.total < filter.pageCount ? (
-    <></>
+  return isLoaded ? (
+    !filter || filter.total < filter.pageCount ? (
+      <></>
+    ) : (
+      <Paging
+        previousLabel={t("PreviousPage")}
+        nextLabel={t("NextPage")}
+        pageItems={pageItems}
+        onSelectPage={onChangePage}
+        countItems={countItems}
+        onSelectCount={onChangePageSize}
+        displayItems={false}
+        disablePrevious={!filter.hasPrev()}
+        disableNext={!filter.hasNext()}
+        previousAction={onPrevClick}
+        nextAction={onNextClick}
+        openDirection="top"
+        selectedPageItem={selectedPageItem} //FILTER CURRENT PAGE
+        selectedCountItem={selectedCountItem} //FILTER PAGE COUNT
+      />
+    )
   ) : (
-    <Paging
-      previousLabel={t("PreviousPage")}
-      nextLabel={t("NextPage")}
-      pageItems={pageItems}
-      onSelectPage={onChangePage}
-      countItems={countItems}
-      onSelectCount={onChangePageSize}
-      displayItems={false}
-      disablePrevious={!filter.hasPrev()}
-      disableNext={!filter.hasNext()}
-      previousAction={onPrevClick}
-      nextAction={onNextClick}
-      openDirection="top"
-      selectedPageItem={selectedPageItem} //FILTER CURRENT PAGE
-      selectedCountItem={selectedCountItem} //FILTER PAGE COUNT
-    />
+    <Loaders.Filter />
   );
 };
 
 function mapStateToProps(state) {
   return {
-    filter: state.people.filter,
+    filter: getFilter(state),
+    isLoaded: getIsLoaded(state),
   };
 }
 

products/ASC.People/Client/src/store/people/selectors.js

@@ -434,3 +434,7 @@ export const getUsersToRemoveIds = createSelector(
 );
 
 export const hasUsersToRemove = createSelector([getUsersToRemove], hasAny);
+
+export const getFilter = (state) => state.people.filter;
+
+export const getGroups = (state) => state.people.groups;

web/ASC.Web.Common/src/store/auth/selectors.js

@@ -173,3 +173,5 @@ export const getTotalNotificationsCount = createSelector(
     return totalNotifications;
   }
 );
+
+export const getIsLoaded = state => state.auth.isLoaded;