@ludo.ninja/components 1.4.1 → 1.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "private": false,
   "scripts": {
     "dev": "next dev -p 4000",

package/src/hooks/index.ts

@@ -2,6 +2,7 @@ export * from './likes/useGetLikesAsset';
 export * from './apollo';
 export * from './favorites';
 export * from './galleries';
+export * from './searchFiltersConnector';
 
 
 

package/src/hooks/searchFiltersConnector/index.tsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/router';
+
+import { searchSchema as schema } from '@ludo.ninja/api';
+
+import { useFetchSearchResultSelections } from '@/api/server-preferences/queries/fetchSearchResultSelections';
+import {
+  DefaultsCollectionsSearchPageProps,
+  DefaultsNftSearchPageProps,
+} from '@/api/server-preferences/queries/fetchSearchResultSelections/queryData';
+
+import Filters from '@/components/filters';
+
+import { SelectsType } from '@/system/Filters/type';
+
+export const useSearchFiltersConnector = function <
+  TFilterInput extends
+      | schema.ICreationFilterInput
+    | schema.ICollectionFilterInput = schema.ICreationFilterInput
+>({
+    defaults,
+    isDisabledTypeFilters,
+    isMobile,
+  }: {
+  defaults: DefaultsNftSearchPageProps | DefaultsCollectionsSearchPageProps;
+  isDisabledTypeFilters?: boolean;
+  isMobile: boolean;
+}) {
+  const defaultCopyWithoutTerm = {
+    time: defaults.time,
+    blockchain: defaults.blockchain,
+    category: defaults.category,
+    status: defaults.status,
+    ...('type' in defaults
+      ? {
+        type: defaults.type,
+      }
+      : {}),
+  } as TFilterInput;
+
+  const { searchResultSelections } = useFetchSearchResultSelections();
+
+  const [filterInput, setFilterInput] = useState<TFilterInput>(
+    defaultCopyWithoutTerm
+  );
+
+  const router = useRouter();
+
+  useEffect(() => {
+    router.replace(
+      {
+        query: {
+          ...router.query,
+          ...defaultCopyWithoutTerm,
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+  }, []);
+
+  const handleFilterInput = async (
+    fieldName:
+      | keyof schema.ICreationFilterInput
+      | keyof schema.ICollectionFilterInput,
+    fieldValue: string
+  ) => {
+    await router.replace(
+      {
+        query: { ...router.query, [fieldName]: fieldValue },
+      },
+      undefined,
+      { shallow: true }
+    );
+    setFilterInput((prevFilters) => ({
+      ...prevFilters,
+      [fieldName]: fieldValue,
+    }));
+  };
+  const handleMobileFilterInput = async (
+    newFilters: schema.ICreationFilterInput | schema.ICollectionFilterInput
+  ) => {
+    await router.replace(
+      {
+        query: { ...router.query, ...newFilters },
+      },
+      undefined,
+      { shallow: true }
+    );
+    setFilterInput((prevFilters) => ({
+      ...prevFilters,
+      ...newFilters,
+    }));
+  };
+  const handleResetFilter = () => {
+    if (searchResultSelections) {
+      const filterInitialStateNft = {
+        ...(isDisabledTypeFilters
+          ? {}
+          : { type: searchResultSelections.typeSelections[0]?.id }),
+        time: searchResultSelections.timeSelections[0]?.id,
+        blockchain: searchResultSelections.blockchainSelections[0]?.id,
+        category: searchResultSelections.categorySelections[0]?.id,
+        status: searchResultSelections.statusSelections[0]?.id,
+      };
+      setFilterInput(filterInitialStateNft as TFilterInput);
+      router.replace(
+        {
+          query: {
+            ...router.query,
+            ...filterInitialStateNft,
+          },
+        },
+        undefined,
+        { shallow: true }
+      );
+    }
+  };
+  return {
+    filterInput,
+    renderFilters: filterInput.time ||
+      filterInput.status ||
+      filterInput.category ||
+      filterInput.blockchain ? (
+      <>
+        {searchResultSelections && (
+          <Filters
+            filterInput={filterInput}
+            selectData={
+              [
+                ...(!isDisabledTypeFilters
+                  ? [
+                    {
+                      id: 1,
+                      data: {
+                        selectName: 'type',
+                        selectOptions: searchResultSelections.typeSelections,
+                      },
+                    },
+                  ]
+                  : []),
+                {
+                  id: 2,
+                  data: {
+                    selectName: 'blockchain',
+                    selectOptions: searchResultSelections.blockchainSelections,
+                  },
+                },
+                {
+                  id: 3,
+                  data: {
+                    selectName: 'category',
+                    selectOptions: searchResultSelections.categorySelections,
+                  },
+                },
+                {
+                  id: 4,
+                  data: {
+                    selectName: 'time',
+                    selectOptions: searchResultSelections.timeSelections,
+                  },
+                },
+                {
+                  id: 5,
+                  data: {
+                    selectName: 'status',
+                    selectOptions: searchResultSelections.statusSelections,
+                  },
+                },
+              ] as SelectsType[]
+            }
+            filterInputHandler={handleFilterInput}
+            handleResetFilter={handleResetFilter}
+            handleMobileFilterInput={handleMobileFilterInput}
+            isMobile={isMobile}
+          />
+        )}
+      </>
+    ) : (
+      <></>
+    ),
+  };
+};

package/src/system/Filters/helpers.ts

@@ -1,9 +1,9 @@
 import {
-  ISelection,
-  Maybe,
-} from '@ludo.ninja/api/build/graphql_tools/__generated__/preferencesHost/schema';
+  preferencesSchema
+} from '@ludo.ninja/api';
+import { Maybe } from "graphql/jsutils/Maybe";
 
-type Selection = Maybe<Pick<ISelection, 'label'> & { id: string }>;
+type Selection = Maybe<Pick<preferencesSchema.ISelection, 'label'> & { id: string }>;
 
 export const findDefaultFilterValue = (
   queryValue: string | string[] | undefined,

package/src/system/Filters/index.ts

@@ -0,0 +1,2 @@
+export * from './type';
+export * from './helpers';

package/src/system/index.ts

@@ -8,6 +8,7 @@ export * from './Tabs';
 export * from './Buttons';
 export * from './Cards';
 export * from './Forms';
+export * from './Filters';
 export { default as CardsHolder } from './CardsHolderWithSkeleton/CardsHolder';
 export { default as CardsError } from './CardsHolderWithSkeleton/CardsHolder/CardsError';
 export { default as CardsNoResults } from './CardsHolderWithSkeleton/CardsHolder/CardsNoResults';