feat: 🎸 integration traits with jelly-js (#522)

* feat: 🎸 integration traits with jelly-js * feat: 🎸 filter using traits * feat: 🎸 filter traits from filter menu * feat: 🎸 updated filter integration * feat: 🎸 reset last index when filter is removed * refactor: 💡 some more code cleanup * refactor: 💡 code cleanup * refactor: 💡 cleanup
Psychedelic · Sep 13, 2022 · cc50d0b · cc50d0b
1 parent f3a423a
commit cc50d0b
Show file tree

Hide file tree

Showing 13 changed files with 148 additions and 98 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "@dfinity/principal": "^0.10.2",
     "@psychedelic/cap-js": "^0.0.7",
     "@psychedelic/icns-js": "^0.1.11",
-    "@psychedelic/jelly-js": "0.1.0-beta.202209051659-b7269fd",
+    "@psychedelic/jelly-js": "0.1.0-beta.202209091032-e94a8f5",
     "@psychedelic/plug-inpage-provider": "2.3.0-alpha.1",
     "@radix-ui/react-accordion": "^0.1.5",
     "@radix-ui/react-checkbox": "^0.1.4",
@@ -163,5 +163,4 @@
       ]
     ]
   }
-}
-
+}
diff --git a/src/components/core/accordions/checkbox-filter-accordion.tsx b/src/components/core/accordions/checkbox-filter-accordion.tsx
@@ -31,7 +31,7 @@ export const CheckboxFilterAccordion = ({
     traitsValue: string,
     checkboxKey: string,
   ) =>
-    traits.some((trait) => {      
+    traits.some((trait) => {
       return (
         trait.values.includes(traitsValue.toString()) &&
         trait.key === checkboxKey
@@ -96,13 +96,14 @@ export const CheckboxFilterAccordion = ({
           <Form>
             {checkboxData.values.map((data: any) => (
               <Checkbox
-                key={`${checkboxData.key}+${data.value}`}
-                value={`${checkboxData.key}+${data.value}`}
+                key={`${checkboxData.key}+${data.name}`}
+                value={`${checkboxData.key}+${data.name}`}
                 percentage={data.rarity}
                 occurence={data.occurance}
+                tokenCount={Number(data.tokenCount)}
                 handleSelectedFilters={handleSelectedFilters}
                 filterValueExists={filterValueExists(
-                  data.value,
+                  data.name,
                   checkboxData.key,
                 )}
               />

diff --git a/src/components/core/checkbox/checkbox.tsx b/src/components/core/checkbox/checkbox.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { roundOffDecimalValue } from '../../../utils/nfts';
 import { Wrapper, RarityValue } from './styles';
 
 export type CheckboxProps = {
@@ -11,46 +10,47 @@ export type CheckboxProps = {
   handleSelectedFilters: (
     value: React.MouseEvent<HTMLInputElement, MouseEvent>,
   ) => void;
+  tokenCount: number;
 };
 
 export const Checkbox = ({
   value,
-  percentage,
-  occurence,
   filterValueExists,
+  tokenCount,
   handleSelectedFilters,
 }: CheckboxProps) => (
-  <Wrapper
-    role="checkbox"
-    tabIndex={0}
-    onKeyDown={(event: any) => {
-      // Keyboard accessibility
-      if (
-        event.keyCode === 13 &&
-        typeof handleSelectedFilters === 'function'
-      ) {
-        event.target.value = value;
-        handleSelectedFilters(event);
-      }
-    }}
-  >
-    <label htmlFor={value}>
-      <input
-        type="checkbox"
-        id={value}
-        name={value}
-        value={value}
-        onClick={handleSelectedFilters}
-        // checks if value exists in array and sets checked to true
-        checked={filterValueExists}
-        readOnly
-      />
-      <span />
-      {value.split('+')[1]}
-    </label>
-    <RarityValue>{`${occurence} (${roundOffDecimalValue(
-      Number(percentage),
-      1,
-    )}%)`}</RarityValue>
-  </Wrapper>
+  <>
+    {value.split('+')[1] !== '' && (
+      <Wrapper
+        role="checkbox"
+        tabIndex={0}
+        onKeyDown={(event: any) => {
+          // Keyboard accessibility
+          if (
+            event.keyCode === 13 &&
+            typeof handleSelectedFilters === 'function'
+          ) {
+            event.target.value = value;
+            handleSelectedFilters(event);
+          }
+        }}
+      >
+        <label htmlFor={value}>
+          <input
+            type="checkbox"
+            id={value}
+            name={value}
+            value={value}
+            onClick={handleSelectedFilters}
+            // checks if value exists in array and sets checked to true
+            checked={filterValueExists}
+            readOnly
+          />
+          <span />
+          {value.split('+')[1]}
+        </label>
+        <RarityValue>{tokenCount}</RarityValue>
+      </Wrapper>
+    )}
+  </>
 );
diff --git a/src/components/core/checkbox/styles.ts b/src/components/core/checkbox/styles.ts
@@ -36,6 +36,8 @@ export const Wrapper = styled('div', {
       height: '17px',
       cursor: 'pointer',
       display: 'inline-block',
+      position: 'relative',
+      bottom: '-2px',
     },
 
     '& input[type="checkbox"]:checked + span:before': {

diff --git a/src/components/core/chips/filtered-traits-chip.tsx b/src/components/core/chips/filtered-traits-chip.tsx
@@ -9,6 +9,7 @@ import {
   Image,
 } from './styles';
 import { Icon } from '../../icons';
+import { nftsActions, useAppDispatch } from '../../../store';
 
 export interface FilteredTraitsChipProps {
   name?: string;
@@ -24,6 +25,7 @@ export const FilteredTraitsChip = ({
   removeFilter,
 }: FilteredTraitsChipProps) => {
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
 
   return (
     <TraitChipContainer type="filtered">
@@ -35,7 +37,12 @@ export const FilteredTraitsChip = ({
         <TraitName>{name}</TraitName>
         <TraitRim>{rim}</TraitRim>
       </TraitSpecsContainer>
-      <TraitActionContainer onClick={() => removeFilter()}>
+      <TraitActionContainer
+        onClick={() => {
+          removeFilter();
+          dispatch(nftsActions.setLastIndex(undefined));
+        }}
+      >
         <Icon icon="close" size="md" />
       </TraitActionContainer>
     </TraitChipContainer>

diff --git a/src/components/core/empty-states/empty-state.tsx b/src/components/core/empty-states/empty-state.tsx
@@ -1,5 +1,9 @@
 import { useTranslation } from 'react-i18next';
-import { filterActions, useAppDispatch } from '../../../store';
+import {
+  filterActions,
+  nftsActions,
+  useAppDispatch,
+} from '../../../store';
 import { ButtonType } from '../../../constants/empty-states';
 import { Plug } from '../../plug';
 import { ActionButton } from '../buttons';
@@ -33,6 +37,7 @@ export const EmptyState = ({
           <div
             role="button"
             onClick={() => {
+              dispatch(nftsActions.setLastIndex(undefined));
               dispatch(
                 filterActions.removeFilter(
                   `${t('translation:buttons.action.myNfts')}`,
@@ -53,6 +58,7 @@ export const EmptyState = ({
                   `${t('translation:buttons.action.myNfts')}`,
                 ),
               );
+              dispatch(nftsActions.setLastIndex(undefined));
               dispatch(filterActions.setMyNfts(false));
               dispatch(filterActions.clearAllFilters());
             }}

diff --git a/src/components/filters/filters.tsx b/src/components/filters/filters.tsx
@@ -9,6 +9,7 @@ import {
   settingsActions,
   useSettingsStore,
   notificationActions,
+  nftsActions,
 } from '../../store';
 import {
   ActionButton,
@@ -119,6 +120,7 @@ export const Filters = ({
     switch (true) {
       case filterCategoryExists && filterNameExists:
         dispatch(filterActions.removeFilter(filterName));
+        dispatch(nftsActions.setLastIndex(undefined));
         break;
       case filterCategoryExists && !filterNameExists:
         dispatch(
@@ -278,6 +280,7 @@ export const Filters = ({
                       onClick={() => {
                         dispatch(filterActions.removeFilter(myNfts));
                         dispatch(filterActions.setMyNfts(false));
+                        dispatch(nftsActions.setLastIndex(undefined));
                       }}
                     >
                       {t('translation:buttons.action.allNfts')}

diff --git a/src/components/items/collection-items.tsx b/src/components/items/collection-items.tsx
@@ -7,6 +7,7 @@ import {
   useNFTSStore,
   settingsActions,
   usePlugStore,
+  nftsActions,
 } from '../../store';
 import { useNFTSFetcher } from '../../integrations/kyasshu';
 import { NftList } from '../nft-list';
@@ -58,6 +59,7 @@ export const CollectionItems = () => {
   const handleRemoveFilter = (appliedFilter: any) => {
     // TODO: apply sorting to fetch kyasshu API
     // eslint-disable-next-line no-console
+    dispatch(nftsActions.setLastIndex(undefined));
     if (
       appliedFilter.filterCategory ===
       `${t('translation:filters.priceRange')}`
@@ -252,6 +254,9 @@ export const CollectionItems = () => {
                           rim={`${appliedFilter.filterCategory}`}
                           appliedFilterValue={appliedFilter}
                           removeFilter={() => {
+                            dispatch(
+                              nftsActions.setLastIndex(undefined),
+                            );
                             dispatch(
                               filterActions.removeTraitsFilter({
                                 value,

diff --git a/src/components/nft-list/nft-list.tsx b/src/components/nft-list/nft-list.tsx
@@ -16,6 +16,7 @@ import {
   usePriceValues,
   useTraitsPayload,
   isNFTOwner,
+  getTraitPayloadData,
 } from '../../integrations/kyasshu/utils';
 import { parseAmountToE8SAsNum } from '../../utils/formatters';
 import { getSortValue } from '../../utils/sorting';
@@ -36,6 +37,7 @@ export const NftList = () => {
     useFilterStore();
   const { principalId, isConnected } = usePlugStore();
   const traitsPayload = useTraitsPayload();
+
   const priceValues = usePriceValues();
   // eslint-disable-next-line object-curly-newline
   let payload = {};
@@ -74,6 +76,9 @@ export const NftList = () => {
     dispatch(
       nftsActions.getAllNFTs({
         payload,
+        traits: traitsPayload.length
+          ? getTraitPayloadData(traitsPayload)
+          : undefined,
         sort: getSortValue(sortBy),
         order: 'd',
         lastIndex: lastIndexValue && BigInt(lastIndexValue),

diff --git a/src/integrations/kyasshu/index.ts b/src/integrations/kyasshu/index.ts
@@ -11,7 +11,7 @@ import {
 } from '../../store';
 import { parseAmountToE8SAsNum } from '../../utils/formatters';
 import { getSortValue } from '../../utils/sorting';
-import { useTraitsPayload, usePriceValues } from './utils';
+import { useTraitsPayload, usePriceValues, getTraitPayloadData } from './utils';
 
 export const useNFTSFetcher = () => {
   const dispatch = useAppDispatch();
@@ -66,6 +66,7 @@ export const useNFTSFetcher = () => {
     dispatch(
       nftsActions.getAllNFTs({
         payload,
+        traits: traitsPayload.length ? getTraitPayloadData(traitsPayload) : undefined,
         sort: getSortValue(sortBy),
         order: 'd',
         page: lastIndexValue,

diff --git a/src/integrations/kyasshu/utils.ts b/src/integrations/kyasshu/utils.ts
@@ -13,6 +13,18 @@ export const useTraitsPayload = () => {
   return traits.filter((trait) => trait?.values?.length);
 };
 
+export const getTraitPayloadData = (traits: any) => {
+  const traitData = traits.reduce(
+    (acc: any, { name, values }: any) => ({
+      ...acc,
+      [name]: [...values],
+    }),
+    {},
+  );
+
+  return traitData;
+};
+
 export const usePriceValues = () => {
   const { t } = useTranslation();
   const { defaultFilters } = useFilterStore();