feat: style vendor form and list.

feat: items state selectors.

client/src/store/items/items.reducer.js

@@ -43,35 +43,13 @@ export default createReducer(initialState, {
 
     const viewId = customViewId || -1;
     const view = state.views[viewId] || {};
-    const viewPages = getItemsViewPages(state.views, viewId);
-
-    items.forEach((item) => {
-      const stateItem = state.items[item.id];
-      const itemRelation = state.itemsRelation[stateItem.id];
-
-      if (typeof itemRelation === 'undefined') {
-        state.itemsRelation[item.id] = [];
-      }
-      const filteredRelation = state.itemsRelation[item.id].filter(
-        (relation) =>
-          relation.viewId === viewId &&
-          relation.pageNumber === paginationMeta.page,
-      );
-
-      filteredRelation.push({
-        viewId,
-        pageNumber: paginationMeta.page,
-      });
-      state.itemsRelation[item.id] = filteredRelation;
-    });
 
     state.views[viewId] = {
       ...view,
       pages: {
-        ...viewPages,
+        ...(state.views?.[viewId]?.pages || {}),
         [paginationMeta.page]: {
-          ids: items.map((i) => i.id),
-          meta: paginationMeta,
+          ids: items.map((item) => item.id),
         },
       },
     };

client/src/store/items/items.selectors.js

@@ -1,7 +1,69 @@
+import { paginationLocationQuery } from "store/selectors";
+import { createSelector } from 'reselect';
+import {
+  pickItemsFromIds,
+  defaultPaginationMeta,
+} from 'store/selectors';
 
+const itemsTableQuerySelector = (state) => state.items.tableQuery;
 
+const itemsCurrentPageSelector = (state, props) => {
+  const currentViewId = state.items.currentViewId;
+  const currentView = state.items.views?.[currentViewId];
+  const currentPageId = currentView?.paginationMeta?.page;
 
-export const getItemsViewPages = (itemsViews, viewId) => {
-  return itemsViews[viewId] ? 
-    itemsViews[viewId].pages : {};
-};
+  return currentView?.pages?.[currentPageId];
+};
+const itemsDataSelector = (state) => state.items.items;
+
+const itemsPaginationSelector = (state, props) => {
+  const viewId = state.items.currentViewId;
+  return state.items.views?.[viewId]?.paginationMeta;
+};
+const customersCurrentViewIdSelector = (state) => state.customers.currentViewId;
+
+// Get items table query marged with location query.
+export const getItemsTableQueryFactory = () => 
+  createSelector(
+    paginationLocationQuery,
+    itemsTableQuerySelector,
+    (locationQuery, tableQuery) => {
+      return {
+        ...locationQuery,
+        ...tableQuery,
+      }
+    },
+  );
+
+// Retrieve items current page and view.
+export const getItemsCurrentPageFactory = () => 
+  createSelector(
+    itemsDataSelector,
+    itemsCurrentPageSelector,
+    (items, itemsIdsCurrentPage) => {
+      return typeof itemsIdsCurrentPage === 'object'
+      ? pickItemsFromIds(items, itemsIdsCurrentPage.ids) || []
+      : [];
+    },
+  );
+
+// Retrieve items pagination meta.
+export const getItemsPaginationMetaFactory = () => 
+  createSelector(
+    itemsPaginationSelector,
+    (itemsPagination) => {
+      return {
+        ...defaultPaginationMeta(),
+        ...itemsPagination,
+      };
+    }
+  );
+
+// Retrieve items current view id.
+export const getItemsCurrentViewIdFactory = () => 
+  createSelector(
+    customersCurrentViewIdSelector,
+    (currentViewId) => {
+      return currentViewId;
+    }
+  );

client/src/store/vendors/vendors.selectors.js

@@ -5,12 +5,14 @@ import {
   defaultPaginationMeta,
 } from 'store/selectors';
 
-const vendorsTableQuery = (state) => {
-  return state.vendors.tableQuery;
-};
+const vendorsTableQuery = (state) => state.vendors.tableQuery;
+const vendorByIdSelector = (state, props) =>
+  state.vendors.items[props.vendorId];
+const vendorsItemsSelector = (state) => state.vendors.items;
 
-const vendorByIdSelector = (state, props) => {
-  return state.vendors.items[props.vendorId];
+const vendorsPaginationSelector = (state, props) => {
+  const viewId = state.vendors.currentViewId;
+  return state.vendors.views?.[viewId];
 };
 
 export const getVendorsTableQuery = createSelector(
@@ -28,11 +30,9 @@ const vendorsPageSelector = (state, props, query) => {
   const viewId = state.vendors.currentViewId;
   const currentView = state.vendors.views?.[viewId];
   const currentPageId = currentView?.pages;
-  return currentView?.pages?.[currentPageId];
-  // return state.vendors.views?.[viewId]?.pages?.[query.page];
-};
 
-const vendorsItemsSelector = (state) => state.vendors.items;
+  return currentView?.pages?.[currentPageId];
+};
 
 export const getVendorCurrentPageFactory = () =>
   createSelector(
@@ -45,11 +45,6 @@ export const getVendorCurrentPageFactory = () =>
     },
   );
 
-const vendorsPaginationSelector = (state, props) => {
-  const viewId = state.vendors.currentViewId;
-  return state.vendors.views?.[viewId];
-};
-
 export const getVendorsPaginationMetaFactory = () =>
   createSelector(vendorsPaginationSelector, (vendorPage) => {
     return {