feat(warehouse): Skeleton warehouses.

src/containers/Preferences/Warehouses/Warehouses.js

@@ -1,18 +1,28 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import styled from 'styled-components';
 
-import { useWarehousesContext } from './WarehousesProvider';
+import '../../../style/pages/Preferences/warehousesList.scss';
-import WarehousesGridItems from './WarehousesGridItems';
+
+import WarehousesGrid from './WarehousesGrid';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import { compose } from 'utils';
 
 /**
  * Warehouses.
  * @returns
  */
-export default function Warehouses() {
+function Warehouses({
-  const { warehouses } = useWarehousesContext();
+  // #withDashboardActions
+  changePreferencesPageTitle,
+}) {
+  React.useEffect(() => {
+    changePreferencesPageTitle(intl.get('warehouses.label'));
+  }, [changePreferencesPageTitle]);
 
-  return warehouses.map((warehouse) => (
+  return (
-    <WarehousesGridItems warehouse={warehouse} />
+    <React.Fragment>
-  ));
+      <WarehousesGrid />
+    </React.Fragment>
+  );
 }
+export default compose(withDashboardActions)(Warehouses);

src/containers/Preferences/Warehouses/WarehousesGrid.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
+import WarehousesEmptyStatus from './WarehousesEmptyStatus';
+import { useWarehousesContext } from './WarehousesProvider';
+import { WarehousesList, WarehousesSkeleton } from './components';
+import WarehousesGridItems from './WarehousesGridItems';
+
+/**
+ * Warehouses grid.
+ */
+export default function WarehousesGrid() {
+  // Retrieve list context.
+  const { warehouses, isWarehouesLoading } = useWarehousesContext();
+
+  return (
+    <React.Fragment>
+      <WarehousesList>
+        {isWarehouesLoading ? (
+          <WarehousesSkeleton />
+        ) : isEmpty(warehouses) ? (
+          <WarehousesEmptyStatus />
+        ) : (
+          <WarehousesGridItems warehouses={warehouses} />
+        )}
+      </WarehousesList>
+    </React.Fragment>
+  );
+}

src/containers/Preferences/Warehouses/WarehousesGridItems.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import { ContextMenu2 } from '@blueprintjs/popover2';
 
 import { WarehouseContextMenu, WarehousesGrid } from './components';
@@ -10,10 +9,9 @@ import withDialogActions from '../../Dialog/withDialogActions';
 import { compose } from 'utils';
 
 /**
- * Warehouse grid items.
+ *  warehouse grid item.
- * @returns
  */
-function WarehousesGridItems({
+function WarehouseGridItem({
   // #withAlertsActions
   openAlert,
   // #withDialogActions
@@ -21,8 +19,6 @@ function WarehousesGridItems({
 
   warehouse,
 }) {
-  const { isWarehouesLoading } = useWarehousesContext();
-
   // Handle edit warehouse.
   const handleEditWarehouse = () => {
     openDialog('warehouse-form', { warehouseId: warehouse.id, action: 'edit' });
@@ -48,18 +44,28 @@ function WarehousesGridItems({
         />
       }
     >
-      <WarehousesGrid warehouse={warehouse} loading={isWarehouesLoading} />
+      <WarehousesGrid
+        title={warehouse.name}
+        code={warehouse.code}
+        city={warehouse.city}
+        country={warehouse.country}
+        email={warehouse.email}
+        phone={warehouse.phone_number}
+      />
     </ContextMenu2>
   );
 }
 
-export default compose(
+const WarehousesGridItem = compose(
   withAlertsActions,
   withDialogActions,
-)(WarehousesGridItems);
+)(WarehouseGridItem);
 
-const WarehouseGridWrap = styled.div`
+/**
-  display: flex;
+ * warehouses grid items,
-  flex-wrap: wrap;
+ */
-  margin: 15px;
+export default function WarehousesGridItems({ warehouses }) {
-`;
+  return warehouses.map((warehouse) => (
+    <WarehousesGridItem warehouse={warehouse} />
+  ));
+}

src/containers/Preferences/Warehouses/WarehousesList.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import intl from 'react-intl-universal';
-
-import '../../../style/pages/Preferences/warehousesList.scss';
-import Warehouses from './Warehouses';
-import WarehousesEmptyStatus from './WarehousesEmptyStatus';
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
-import { compose } from 'utils';
-
-function WarehousesList({
-  // #withDashboardActions
-  changePreferencesPageTitle,
-}) {
-  React.useEffect(() => {
-    changePreferencesPageTitle(intl.get('warehouses.label'));
-  }, [changePreferencesPageTitle]);
-
-  // if (type) {
-  //   return <WarehousesEmptyStatus />;
-  // }
-
-  return (
-    <WarehousesListRoot>
-      <Warehouses />
-    </WarehousesListRoot>
-  );
-}
-
-export default compose(withDashboardActions)(WarehousesList);
-
-const WarehousesListRoot = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  margin: 15px;
-`;

src/containers/Preferences/Warehouses/WarehousesProvider.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import { useWarehouses } from 'hooks/query';
+import { useWarehouses, useCashflowAccounts } from 'hooks/query';
 import PreferencesPageLoader from '../PreferencesPageLoader';
 
 const WarehousesContext = React.createContext();
@@ -10,9 +10,12 @@ const WarehousesContext = React.createContext();
 /**
  * Warehouses data provider.
  */
-function WarehousesProvider({ ...props }) {
+function WarehousesProvider({ query, ...props }) {
   // Fetch warehouses list.
-  const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses();
+  const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses(
+    query,
+    { keepPreviousData: true },
+  );
 
   // Provider state.
   const provider = {
@@ -28,11 +31,7 @@ function WarehousesProvider({ ...props }) {
       )}
     >
       <React.Fragment>
-        {/* {isWarehouesLoading ? (
+        <WarehousesContext.Provider value={provider} {...props} />
-          <PreferencesPageLoader />
-        ) : ( */}
-          <WarehousesContext.Provider value={provider} {...props} />
-        {/* )} */}
       </React.Fragment>
     </div>
   );

src/containers/Preferences/Warehouses/components.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
-import { Classes } from '@blueprintjs/core';
+import {
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Intent,
+  Classes,
+} from '@blueprintjs/core';
 import clsx from 'classnames';
-
-import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
 import { If, Icon, Can } from '../../../components';
 import { safeCallback } from 'utils';
 
+const WAREHOUSES_SKELETON_N = 9;
+
 /**
  * Warehouse context menu.
  */
@@ -39,15 +45,23 @@ export function WarehouseContextMenu({
   );
 }
 
-export function WarehousesGrid({ warehouse, loading }) {
+export function WarehousesGrid({
+  title,
+  code,
+  city,
+  country,
+  email,
+  phone_number,
+  loading,
+}) {
   return (
     <WarehouseGridWrapper>
       <WarehouseHeader>
         <WarehouseTitle className={clsx({ [Classes.SKELETON]: loading })}>
-          {warehouse.name}
+          {title}
         </WarehouseTitle>
         <WarehouseCode className={clsx({ [Classes.SKELETON]: loading })}>
-          {warehouse.code}
+          {code}
         </WarehouseCode>
         <WarehouseIcon>
           {!loading && <Icon icon="warehouse-16" iconSize={20} />}
@@ -55,23 +69,44 @@ export function WarehousesGrid({ warehouse, loading }) {
       </WarehouseHeader>
       <WarehouseContent>
         <WarehouseItem className={clsx({ [Classes.SKELETON]: loading })}>
-          {warehouse.city}
+          {city}
         </WarehouseItem>
         <WarehouseItem className={clsx({ [Classes.SKELETON]: loading })}>
-          {warehouse.country}
+          {country}
         </WarehouseItem>
         <WarehouseItem className={clsx({ [Classes.SKELETON]: loading })}>
-          {warehouse.email}
+          {email}
         </WarehouseItem>
         <WarehouseItem className={clsx({ [Classes.SKELETON]: loading })}>
-          {warehouse.phone_number}
+          {phone_number}
         </WarehouseItem>
       </WarehouseContent>
     </WarehouseGridWrapper>
   );
 }
 
-const WarehouseGridWrapper = styled.div`
+export function WarehousesSkeleton() {
+  return [...Array(WAREHOUSES_SKELETON_N)].map((key, value) => (
+    <WarehousesGrid
+      title={'warehouse.name'}
+      code={'warehouse.code'}
+      city={'warehouse.city'}
+      country={'warehouse.country'}
+      email={'warehouse.email'}
+      phone={'warehouse.phone_number'}
+      loading={true}
+    />
+  ));
+}
+
+export const WarehousesList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin: 15px;
+  height: 100%;
+`;
+
+export const WarehouseGridWrapper = styled.div`
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -89,12 +124,12 @@ const WarehouseGridWrapper = styled.div`
   }
 `;
 
-const WarehouseHeader = styled.div`
+export const WarehouseHeader = styled.div`
   position: relative;
   padding: 16px 12px 10px;
 `;
 
-const WarehouseTitle = styled.div`
+export const WarehouseTitle = styled.div`
   font-size: 14px; //22px
   font-style: inherit;
   color: #000;

src/containers/Preferences/Warehouses/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { WarehousesProvider } from './WarehousesProvider';
-import WarehousesList from './WarehousesList';
+import Warehouses from './Warehouses';
 
 /**
  * Warehouses Preferences.
@@ -9,7 +9,7 @@ import WarehousesList from './WarehousesList';
 export default function WarehousesPerences() {
   return (
     <WarehousesProvider>
-      <WarehousesList />
+      <Warehouses />
     </WarehousesProvider>
   );
 }