Merge pull request #178 from SigwoTechnologies/refactor/stores

Refactor/stores

jest.config.js

@@ -13,6 +13,18 @@ const customJestConfig = {
   // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
   moduleDirectories: ['node_modules', '<rootDir>/'],
+  moduleNameMapper: {
+    '@store/*': ['<rootDir>/src/store'],
+    '@assets/*': ['<rootDir>/assets/'],
+    '@ui/*': ['<rootDir>/components/ui/'],
+    '@components/*': ['<rootDir>/components/'],
+    '@widgets/*': ['<rootDir>/components/widgets/'],
+    '@containers/*': ['<rootDir>/containers/'],
+    '@layout/*': ['<rootDir>/layouts/'],
+    '@utils/*': ['<rootDir>/utils/'],
+    '@hooks': ['<rootDir>/hooks'],
+    '@types': ['<rootDir>/types'],
+  },
   testEnvironment: 'jest-environment-jsdom',
   preset: 'ts-jest',
   testEnvironment: 'node',

src/common/minting/commands/common/activate-item-command.spec.ts

@@ -132,6 +132,14 @@ describe('ActivateItemCommand', () => {
           cid: '123',
           imageUrl: 'url',
           item: { itemId: '123' } as Item,
+          collection: {
+            name: 'ab',
+            description: 'ab',
+            image: {
+              url: 'url',
+              cid: 'cid',
+            },
+          },
           tokenId: 123,
         } as MintState;
 

src/common/minting/commands/common/activate-item-command.ts

@@ -1,9 +1,9 @@
+import { rejectWithHttp } from '../../../../store/error/error-handler';
 import ActivateItemRequest from '../../../types/activate-item-request';
 import ICommand from '../../interfaces/command.interface';
 import MintError from '../../enums/mint-error.enum';
 import MintState from '../../types/mint-state';
 import IItemService from '../../../../features/leda-nft/interfaces/item-service.interface';
-import { rejectWithHttp } from '../../../../store/error/error-handler';
 
 export default class ActivateItemCommand implements ICommand<MintState> {
   private readonly itemService: IItemService;

src/common/minting/commands/common/mint-nft-command.spec.ts

@@ -1,9 +1,9 @@
 import { ContractReceipt, Event } from 'ethers';
+import * as ErrorHandler from '../../../../store/error/error-handler';
 import MintError from '../../enums/mint-error.enum';
 import ICommand from '../../interfaces/command.interface';
 import MintState from '../../types/mint-state';
 import MintNftCommand from './mint-nft-command';
-import * as errorHandler from '../../../../store/error/error-handler';
 
 const nftServiceMock = {
   init: jest.fn(),
@@ -213,7 +213,7 @@ describe('MintNftCommand', () => {
 
         const expected = { ...state, error: MintError.MintNftFailure };
 
-        jest.spyOn(errorHandler, 'rejectWithMetamask').mockResolvedValue(expected);
+        jest.spyOn(ErrorHandler, 'rejectWithMetamask').mockResolvedValue(expected);
 
         nftServiceMock.mint.mockRejectedValue('something went wrong.');
 

src/common/minting/commands/common/store-draft-item-command.ts

@@ -1,9 +1,9 @@
+import * as ErrorHandler from '../../../../store/error/error-handler';
 import ICommand from '../../interfaces/command.interface';
 import MintError from '../../enums/mint-error.enum';
 import MintState from '../../types/mint-state';
 import IItemService from '../../../../features/leda-nft/interfaces/item-service.interface';
 import DraftItemRequest from '../../../types/draft-item-request';
-import { rejectWithHttp } from '../../../../store/error/error-handler';
 
 export default class StoreDraftItemCommand implements ICommand<MintState> {
   private readonly itemService: IItemService;
@@ -36,7 +36,10 @@ export default class StoreDraftItemCommand implements ICommand<MintState> {
 
       state.item = await this.itemService.create(item);
     } catch (ex) {
-      return rejectWithHttp(ex, () => ({ ...state, error: MintError.StoreDraftItemFailure }));
+      return ErrorHandler.rejectWithHttp(ex, () => ({
+        ...state,
+        error: MintError.StoreDraftItemFailure,
+      }));
     }
 
     return state;

src/common/minting/commands/common/store-ipfs-object-command.ts

@@ -1,8 +1,8 @@
+import { rejectWithHttp } from '../../../../store/error/error-handler';
 import ICommand from '../../interfaces/command.interface';
 import MintError from '../../enums/mint-error.enum';
 import MintState from '../../types/mint-state';
 import IImageService from '../../../../features/leda-nft/interfaces/image-service.interface';
-import { rejectWithHttp } from '../../../../store/error/error-handler';
 
 export default class StoreIpfsObjectCommand implements ICommand<MintState> {
   private readonly imageService: IImageService;
@@ -35,7 +35,10 @@ export default class StoreIpfsObjectCommand implements ICommand<MintState> {
         state.collection.image.cid = cidResponse;
       }
     } catch (ex) {
-      return rejectWithHttp(ex, () => ({ ...state, error: MintError.IpfsStoreFailure }));
+      return rejectWithHttp(ex, () => ({
+        ...state,
+        error: MintError.IpfsStoreFailure,
+      }));
     }
 
     return state;

src/common/minting/commands/lazy/generate-voucher-command.ts

@@ -1,9 +1,9 @@
 import { ethers } from 'ethers';
+import { rejectWithMetamask } from '../../../../store/error/error-handler';
 import ICommand from '../../interfaces/command.interface';
 import MintError from '../../enums/mint-error.enum';
 import MintState from '../../types/mint-state';
 import ILazyMintService from '../../../../features/leda-nft/interfaces/lazy-mint-service.interface';
-import { rejectWithMetamask } from '../../../../store/error/error-handler';
 import IImageService from '../../../../features/leda-nft/interfaces/image-service.interface';
 
 export default class GenerateVoucherCommand implements ICommand<MintState> {

src/common/minting/commands/lazy/get-voucher-command.ts

@@ -1,5 +1,5 @@
-import IItemService from '../../../../features/leda-nft/interfaces/item-service.interface';
 import { rejectWithHttp } from '../../../../store/error/error-handler';
+import IItemService from '../../../../features/leda-nft/interfaces/item-service.interface';
 import MintError from '../../enums/mint-error.enum';
 import ICommand from '../../interfaces/command.interface';
 import MintState from '../../types/mint-state';

src/common/minting/commands/lazy/store-voucher-command.ts

@@ -1,9 +1,9 @@
+import { rejectWithHttp } from '../../../../store/error/error-handler';
 import ICommand from '../../interfaces/command.interface';
 import MintError from '../../enums/mint-error.enum';
 import MintState from '../../types/mint-state';
 import IItemService from '../../../../features/leda-nft/interfaces/item-service.interface';
 import ProcessLazyItemRequest from '../../../types/process-lazy-item-request';
-import { rejectWithHttp } from '../../../../store/error/error-handler';
 
 export default class StoreVoucherCommand implements ICommand<MintState> {
   private readonly itemService: IItemService;

src/common/minting/commands/lazy/transfer-command.ts

@@ -1,8 +1,8 @@
+import { rejectWithHttp } from '../../../../store/error/error-handler';
 import IItemService from '../../../../features/leda-nft/interfaces/item-service.interface';
 import MintError from '../../enums/mint-error.enum';
 import ICommand from '../../interfaces/command.interface';
 import MintState from '../../types/mint-state';
-import { rejectWithHttp } from '../../../../store/error/error-handler';
 
 export default class TransferCommand implements ICommand<MintState> {
   private readonly itemService: IItemService;

src/components/auth/withAuth.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/router';
-import { selectAuthState } from '../../features/auth/store/auth.slice';
 import useAppSelector from '../../store/hooks/useAppSelector';
+import { selectAuthState } from '../../features/auth/store/auth.slice';
 
 const withAuth = (WrappedConmponent: React.FunctionComponent) => {
   const Component = (props: object) => {

src/components/collections/collection-introduction.component.tsx

@@ -1,13 +1,12 @@
 import Image from 'next/image';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
-import { selectCollectionsState } from '../../features/collections/store/collections.slice';
 import useAppSelector from '../../store/hooks/useAppSelector';
-import { formattedAddress } from '../../utils/getFormattedAddress';
 import appConfig from '../../common/configuration/app.config';
+import { formattedAddress } from '../../utils/getFormattedAddress';
 
 const CollectionIntroductionComponent = () => {
-  const { selectedCollection } = useAppSelector(selectCollectionsState);
+  const { selectedCollection } = useAppSelector((state) => state.marketplace);
 
   const lastUpdateDate = new Date(selectedCollection.updatedAt).toLocaleDateString();
 

src/components/collections/collection-items.component.tsx → src/components/collections/collection-items.tsx

@@ -6,33 +6,30 @@ import useAppDispatch from '../../store/hooks/useAppDispatch';
 import useAppSelector from '../../store/hooks/useAppSelector';
 import { Item as ItemType } from '../../types/item';
 
-const CollectionProductsComponent = () => {
+export const CollectionItemsArea = () => {
   const dispatch = useAppDispatch();
-  const {
-    selectedCollection,
-    collectionItemsFiltering: {
-      itemsPagination: { items, totalCount },
-      itemsFilters,
-      isCollectionNftsLoading,
-    },
-  } = useAppSelector((state) => state.collections);
+  const { items, itemsCount, selectedCollection, isPagingLoading, filters } = useAppSelector(
+    (state) => state.marketplace
+  );
 
-  const hasMore = items.length < totalCount;
+  const hasMore = items.length < itemsCount;
 
   const handleNext = useCallback(() => {
     if (hasMore) {
-      const newPage = Math.floor(items.length / itemsFilters.limit + 1);
-      const filters = { ...itemsFilters, page: newPage };
-      dispatch(findPagedCollectionItems({ collectionId: selectedCollection.id, filters }));
+      const newPage = Math.floor(items.length / filters.limit + 1);
+      const newFilters = { ...filters, page: newPage };
+      dispatch(
+        findPagedCollectionItems({ collectionId: selectedCollection.id, filters: newFilters })
+      );
     }
-  }, [dispatch, hasMore, itemsFilters, items, selectedCollection.id]);
+  }, [dispatch, filters, hasMore, items.length, selectedCollection.id]);
 
   const infiniteScrollSettings = {
     style: { overflow: 'inherit' },
     dataLength: items.length,
     handleNext,
     hasMore,
-    loading: isCollectionNftsLoading,
+    loading: isPagingLoading,
     endMessageDisplay: 'Looking for more NFTs?',
     endMessageLink: '/create',
     endMessageLinkDetails: 'Create one!',
@@ -64,5 +61,3 @@ const CollectionProductsComponent = () => {
     </div>
   );
 };
-
-export default CollectionProductsComponent;

src/components/collections/collections-filter.component.tsx

@@ -1,16 +1,13 @@
 import NiceSelect from '@ui/nice-select';
 import clsx from 'clsx';
 import { useState } from 'react';
-import {
-  selectCollectionsState,
-  setCollectionsFilters,
-} from '../../features/collections/store/collections.slice';
 import useAppDispatch from '../../store/hooks/useAppDispatch';
 import useAppSelector from '../../store/hooks/useAppSelector';
+import { setCollectionsFilters } from '../../features/marketplace/store/marketplace.slice';
 
 const CollectionsFilter = () => {
   const dispatch = useAppDispatch();
-  const { collectionsFilters } = useAppSelector(selectCollectionsState);
+  const { collectionsFilters } = useAppSelector((state) => state.marketplace);
   const [isOpen, setIsOpen] = useState(false);
   const [localSearch, setLocalSearch] = useState('');
   const handleTriggerButton = () => setIsOpen((prev) => !prev);

src/components/collections/collections-rendered.tsx

@@ -1,19 +1,18 @@
 import InfiniteScroll from '@components/common/InfiniteScroll';
 import { useCallback } from 'react';
-import { findPagedCollections } from '../../features/collections/store/collections.actions';
-import { selectCollectionsState } from '../../features/collections/store/collections.slice';
 import useAppDispatch from '../../store/hooks/useAppDispatch';
 import useAppSelector from '../../store/hooks/useAppSelector';
+import { findPagedCollections } from '../../features/collections/store/collections.actions';
 import { ICollection } from '../../types/ICollection';
 import CollectionComponent from './collection.component';
 
 const CollectionRendered = () => {
   const dispatch = useAppDispatch();
-  const { collectionsFilters, collectionPagination, isPagingLoading } =
-    useAppSelector(selectCollectionsState);
-  const { collections, totalCount } = collectionPagination;
+  const { collectionsFilters, isPagingLoading, collections, collectionsCount } = useAppSelector(
+    (state) => state.marketplace
+  );
 
-  const hasMore = collections.length < totalCount;
+  const hasMore = collections.length < collectionsCount;
 
   const handleNext = useCallback(() => {
     if (hasMore) {

src/components/collections/items-collection-filter.component.tsx

@@ -5,11 +5,11 @@ import Sticky from '@ui/sticky';
 import { useEffect, useMemo, useState } from 'react';
 import { Range } from 'react-range';
 import { IRenderTrackParams } from 'react-range/lib/types';
-import { findPriceRange } from '../../features/collections/store/collections.actions';
-import { setCollectionsNftsFilters } from '../../features/collections/store/collections.slice';
 import useAppDispatch from '../../store/hooks/useAppDispatch';
 import useAppSelector from '../../store/hooks/useAppSelector';
 import { selectUiReducer } from '../../store/ui/ui.slice';
+import { setFilters } from '../../features/marketplace/store/marketplace.slice';
+import { findCollectionsByPriceRange } from '../../features/collections/store/collections.actions';
 
 type PriceRange = {
   cheapest: number;
@@ -30,21 +30,20 @@ const ItemCollectionFilter = () => {
   });
   const [valuesRange, setValuesRange] = useState<number[]>([]);
   const [step, setStep] = useState(DEFAULT_STEP);
-  const {
-    selectedCollection,
-    collectionItemsFiltering: { itemsFilters, itemsPagination },
-  } = useAppSelector((state) => state.collections);
+  const { items, itemsCount, selectedCollection, filters } = useAppSelector(
+    (state) => state.marketplace
+  );
 
   const stickyPadding = useMemo(
     () => (isNetworkAdviceOpen ? '150px' : '100px'),
     [isNetworkAdviceOpen]
   );
 
   useEffect(() => {
-    if (itemsPagination.items.length && itemsPagination.totalCount) {
-      const itemsWithPrice = itemsPagination.items.filter((item) => item.price !== null);
+    if (items.length && itemsCount) {
+      const itemsWithPrice = items.filter((item) => item.price !== null);
       if (itemsWithPrice.length) {
-        dispatch(findPriceRange(selectedCollection.id)).then(({ payload }) => {
+        dispatch(findCollectionsByPriceRange(selectedCollection.id)).then(({ payload }) => {
           const { from, to } = payload as { from: number; to: number };
           setPriceRange({
             cheapest: from,
@@ -53,12 +52,12 @@ const ItemCollectionFilter = () => {
         });
       }
     }
-  }, [dispatch, itemsPagination.items, itemsPagination.totalCount, selectedCollection.id]);
+  }, [dispatch, items, itemsCount, selectedCollection.id]);
 
   useEffect(() => {
-    if (Number(itemsFilters.mostExpensive) > 0 && Number(itemsFilters.cheapest) > 0)
-      setValuesRange([+itemsFilters.cheapest, +itemsFilters.mostExpensive]);
-  }, [itemsFilters.mostExpensive, itemsFilters.cheapest]);
+    if (Number(filters.mostExpensive) > 0 && Number(filters.cheapest) > 0)
+      setValuesRange([+filters.cheapest, +filters.mostExpensive]);
+  }, [filters.mostExpensive, filters.cheapest]);
 
   useEffect(() => {
     if (cheapest >= 0 && mostExpensive >= 0) {
@@ -71,7 +70,7 @@ const ItemCollectionFilter = () => {
   }, [cheapest, mostExpensive]);
 
   const handleLikesChange = (likesDirection: string) => {
-    dispatch(setCollectionsNftsFilters({ ...itemsFilters, likesDirection }));
+    dispatch(setFilters({ ...filters, likesDirection }));
   };
 
   const renderTrack = (props: IRenderTrackParams) => (
@@ -84,7 +83,7 @@ const ItemCollectionFilter = () => {
 
   const handleSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      dispatch(setCollectionsNftsFilters({ ...itemsFilters, search: localSearch }));
+      dispatch(setFilters({ ...filters, search: localSearch }));
     }
   };
 
@@ -94,8 +93,8 @@ const ItemCollectionFilter = () => {
 
   const handlePriceRangeFinalChange = ([from, to]: number[]) => {
     dispatch(
-      setCollectionsNftsFilters({
-        ...itemsFilters,
+      setFilters({
+        ...filters,
         priceRange: { from, to },
       })
     );

src/components/create-page/nft-collection.component.tsx

@@ -2,11 +2,10 @@ import clsx from 'clsx';
 import { useEffect, useRef, useState } from 'react';
 import Modal from 'react-bootstrap/Modal';
 import { AiOutlinePlus } from 'react-icons/ai';
+import useAppDispatch from '@store/hooks/useAppDispatch';
+import useAppSelector from '@store/hooks/useAppSelector';
 import { findUserCollectionsWithoutItems } from '../../features/account/store/account.actions';
-import { selectUserCollectionsWithoutItems } from '../../features/account/store/account.slice';
 import useMetamask from '../../features/auth/hooks/useMetamask';
-import useAppDispatch from '../../store/hooks/useAppDispatch';
-import useAppSelector from '../../store/hooks/useAppSelector';
 import { CollectionCreateType } from '../../types/collection-type';
 
 const collectionsErrors = {
@@ -19,7 +18,7 @@ const NftCollectionComponent = () => {
   const dispatch = useAppDispatch();
   const { address } = useMetamask();
   const [open, setOpen] = useState(false);
-  const userCollections = useAppSelector(selectUserCollectionsWithoutItems);
+  const myCollections = useAppSelector((state) => state.marketplace.collections);
   const [dropdownCollection, setDropdownCollection] = useState('');
   const [collectionModalOpen, setCollectionModalOpen] = useState(false);
   const [selectedCollectionImage, setSelectedCollectionImage] = useState(null);
@@ -54,7 +53,7 @@ const NftCollectionComponent = () => {
     handleDropdown();
   };
 
-  const existOnUserCollections = userCollections.find((col) => col.name === collectionInput.name);
+  const existOnUserCollections = myCollections.find((col) => col.name === collectionInput.name);
 
   const handleSaveCollection = () => {
     if (collectionInput.name.length <= 3) setCollectionError(collectionsErrors.ShortString);
@@ -123,7 +122,7 @@ const NftCollectionComponent = () => {
           >
             Default Collection
           </li>
-          {userCollections
+          {myCollections
             .filter((col) => col.name !== 'LedaNFT')
             .map((userCollection) => (
               <li