@riosst100/pwa-marketplace 2.6.0 → 2.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/SetsData/setsData.js

@@ -30,6 +30,7 @@ const SetsData = props => {
     const [activeFilter, setActiveFilter] = useState('');
     const [activeYear, setActiveYear] = useState('');
     const [searchQuery, setSearchQuery] = useState('');
+    const [setsFilters, setSetsFilters] = useState([]);
     
     const shopby = query.get('shopby') || null;
     const setType = query.get('set_type') || null;
@@ -67,16 +68,14 @@ const SetsData = props => {
 
     const classes = useStyle(defaultClasses);
 
-    const talonProps = useSetsData({ activeFilter, activeYear, searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
+    const talonProps = useSetsData({ setsFilters, activeFilter, activeYear, searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
 
-    const { error, loading, setsData, categoryUrlSuffix, categoryUrlKey, productType, filteredSetsData, availableGroups, availableYears, category, attributeData, pageInfo } = talonProps;
+    const { error, loading, setsData, availableFilters, categoryUrlSuffix, categoryUrlKey, productType, filteredSetsData, availableGroups, availableYears, category, attributeData, pageInfo } = talonProps;
 
-    if (loading && !setsData)
-        return <SetsDataShimmer />;
-    if (error && !setsData) return <ErrorView />;
-
-    if (!setsData && !loading && !error) {
+    if (loading) {
         return <SetsDataShimmer />;
+    } else if (error) {
+        return <ErrorView />;
     }
 
     const setsLengthArr = [];
@@ -209,6 +208,23 @@ const SetsData = props => {
         setActive('all')
     }
 
+    const handleSetsFilters = (code, val) => {
+        setSetsFilters((prevFilters) => {
+            const updated = [...prevFilters];
+            const index = updated.findIndex((f) => f.code === code);
+
+            if (index !== -1) {
+                // Update value jika code sudah ada
+                updated[index].value = val;
+            } else {
+                // Tambahkan jika belum ada
+                updated.push({ code, value: val });
+            }
+
+            return updated;
+        });
+    };
+
     let alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
 
     let title = pageInfo ? pageInfo.title : 'All S2ets';
@@ -216,12 +232,12 @@ const SetsData = props => {
         title = "Sets | By Year";
     }
     
-    const availableFilters = [
-        'Theme',
-        'Sub-Theme',
-        'Interest',
-        'Age Level'
-    ];
+    // const availableFilters = [
+    //     'Theme',
+    //     'Sub-Theme',
+    //     'Interest',
+    //     'Age Level'
+    // ];
 
     const handleActiveFilter = (val) => {
         setActiveFilter(val);
@@ -262,6 +278,9 @@ const SetsData = props => {
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
             <Breadcrumbs categoryId={categoryId} currentFilter={activeFilters} customPage={shopby == "singles" ? "Mini-Figures" : title} />
+            {pageInfo && !pageInfo.hide_title && <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {title}
+            </h1>}
             {shopby == "secret_lair" ? <>
                 <ul className={classes.nav}>
                     {availableYears.map((group, index) => (
@@ -286,33 +305,22 @@ const SetsData = props => {
                     </li>
                 </ul>
             </> : ''}
-            {shopby == "lego_set_name" && activeTab == "all" ? <>
-                <ul className={classes.nav}>
-                    {availableFilters.map((group, index) => (
-                    <li key={index} className={classes.nav_item}>
-                        <button
-                            onClick={() => {
-                                handleActiveFilter(group)
-                            }}
-                        >
-                            {activeFilter == group ? <b>{group}</b> : group}
-                        </button>
-                    </li>
+            {availableFilters ? <>
+                {availableFilters.map(({code, options}, index) => (
+                <ul className={classes.nav} key={index}>
+                    {options.map((value, index) => (
+                        <li key={index} className={classes.nav_item}>
+                            <button
+                                onClick={() => {
+                                    handleSetsFilters(code, value)
+                                }}
+                            >
+                                {setsFilters.find(f => f.code === code && f.value === value) || !setsFilters.length && index == 0 ? <b>{value}</b> : value}
+                            </button>
+                        </li>
                     ))}
-                    <li key={"all"} className={classes.nav_item}>
-                        <button
-                            onClick={() => {
-                                handleActiveFilter('')
-                            }}
-                        >
-                            {!activeFilter ? <b>A-Z</b> : 'A-Z'}
-                        </button>
-                    </li>
-                </ul>
+                </ul>))}
             </> : ''}
-            {!pageInfo.hide_title && <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
-                {title}
-            </h1>}
             {activeTab == "year" && availableGroups ? <ul className={classes.nav}>
                 {availableGroups.map((group, index) => (
                 <li key={index} className={classes.nav_item}>
@@ -335,7 +343,7 @@ const SetsData = props => {
                 </button>
             </li>
             </ul> : ''}
-            {pageInfo.filter_group && <ul className={classes.nav}>
+            {pageInfo && pageInfo.filter_group && <ul className={classes.nav}>
                 {availableGroups.map((group, index) => (
                     <li key={index} className={classes.nav_item}>
                         <button

package/src/components/SetsData/setsData.module.css

@@ -1,7 +1,7 @@
 .nav {
     composes: flex from global;
     composes: flex-wrap from global;
-    margin: 50px 0 30px 0;
+    margin: 0 0 20px 0;
     composes: gap-[10px] from global;
 }
 

package/src/components/ShopBy/shopBy.js

@@ -112,12 +112,13 @@ const ShopBy = props => {
 
     const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredAvailableGroups, availableGroups, attributeData, alpha, category, activeFilters, pageInfo } = talonProps;
 
-    if (loading && !dataResult)
-        return <ShopByShimmer />;
-    if (error && !dataResult) return <ErrorView />;
+    console.log('error', error)
+    console.log('loading', loading)
 
-    if (!dataResult && !loading && !error) {
+    if (loading) {
         return <ShopByShimmer />;
+    } else if (error) {
+        return <ErrorView />;
     }
 
     const newAvailableGroups = searchQuery ? filteredAvailableGroups : availableGroups;
@@ -425,7 +426,7 @@ const ShopBy = props => {
                 <Divider className="mb-5 px-4 mt-5" />
                 <section className='singles-container'>
                     <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
-                        {Object.keys(dataResult).length != 0 ? setRelases : (searchQuery ? <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found for <b>{searchQuery}</b> search query.</div> : <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found.</div>)}
+                        {dataResult && Object.keys(dataResult).length != 0 ? setRelases : (searchQuery ? <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found for <b>{searchQuery}</b> search query.</div> : <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found.</div>)}
                     </div>
                 </section>
             </div>

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItemRadioGroup.js

@@ -19,7 +19,7 @@ const FilterItemRadioGroup = props => {
     const { filterApi, subFilterItems, allowedSubFilters, subFilter, filterState, group, isSubFilter, items, onApply, labels,isListExpanded = true, itemCountToShow = 5 } = props;
     const radioItems = useMemo(() => {
         return items.map((item,index) => {
-            if (!isListExpanded && index >= itemCountToShow) {
+            if (index >= itemCountToShow) {
                 return null;
             }
 

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.js

@@ -260,6 +260,8 @@ const FilterList = props => {
     const { pathname, search } = useLocation();
 
     const showMoreItem = useMemo(() => {
+        console.log('itemCountToShow')
+        console.log(itemCountToShow)
         if (items.length <= itemCountToShow) {
             return null;
         }
@@ -288,7 +290,6 @@ const FilterList = props => {
             </li>
         );
     }, [
-        handleShowMore,
         items,
         itemCountToShow,
         formatMessage,

package/src/talons/SetsData/setsData.gql.js

@@ -12,12 +12,16 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_SETS_DATA_QUERY = gql`
-    query getSetsData($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String, $activeFilter: String) {
-        getSetsData(categoryUrlKey: $categoryUrlKey, activeTab: $activeTab, filters: $filters, shopby: $shopby, activeFilter: $activeFilter) {
+    query getSetsData($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String, $activeFilter: String, $set_filters: [SetFiltersInput]) {
+        getSetsData(categoryUrlKey: $categoryUrlKey, activeTab: $activeTab, filters: $filters, shopby: $shopby, activeFilter: $activeFilter, set_filters: $set_filters) {
             attribute {
                 attribute_code
                 label
             }
+            available_filters {
+                code
+                options
+            }
             page_info {
                 title
                 hide_title

package/src/talons/SetsData/useSetsData.js

@@ -8,7 +8,7 @@ import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/tal
 
 export const useSetsData = props => {
 
-    const { searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter, activeYear } = props
+    const { setsFilters, searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter, activeYear } = props
 
     const { value: sortby } = currentSort
 
@@ -26,7 +26,11 @@ export const useSetsData = props => {
     const parentCategoryUrlKey = pathnameArr[pathnameArr.length - 2].replace('.html','');
     const productType = shopby;
     
-    const { data: introspectionData } = useQuery(getFilterInputsQuery);
+    const { data: introspectionData,loading: introspectionLoading,error: introspectionDataError } = useQuery(getFilterInputsQuery, {
+        variables: {},
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
 
     const filterTypeMap = useMemo(() => {
         const typeMap = new Map();
@@ -39,35 +43,54 @@ export const useSetsData = props => {
     }, [introspectionData]);
     const filters = getFiltersFromSearch(search);
 
-    // console.log(search)
+    
 
     // Construct the filter arg object.
-    const newFilters = {};
-    filters.forEach((values, key) => {
-        newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
-// console.log(key)
-// console.log(values)
-        
-        if (key == "sc_baseball_release") {
-            for(let item of values) {
-                if(item) {
-                    // console.log(item.split(',')[0])
-                    const data = search.split('&');
-                    data.pop();
-                    activeFilters.push(
-                        {
-                            'label': item.split(',')[0],
-                            'path': data
+    // const newFilters = {};
+    // filters.forEach((values, key) => {
+    //     newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+    //     if (key == "sc_baseball_release") {
+    //         for(let item of values) {
+    //             if(item) {
+    //                 const data = search.split('&');
+    //                 data.pop();
+    //                 activeFilters.push(
+    //                     {
+    //                         'label': item.split(',')[0],
+    //                         'path': data
+    //                     }
+    //                 )
+    //             }   
+    //         }
+    //     }
+    // });
+    const { newFilters, activeFilters } = useMemo(() => {
+        const resultFilters = {};
+        const resultActiveFilters = [];
+
+        if (filterTypeMap.size) {
+            filters.forEach((values, key) => {
+                resultFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+
+                if (key === "sc_baseball_release") {
+                    for (let item of values) {
+                        if (item) {
+                            const data = search.split('&');
+                            data.pop();
+                            resultActiveFilters.push({
+                                label: item.split(',')[0],
+                                path: data
+                            });
                         }
-                    )
-                }   
-            }
+                    }
+                }
+            });
         }
-    });
 
-    useEffect(() => {
-        // console.log("MASUK")
+        return { newFilters: resultFilters, activeFilters: resultActiveFilters };
+    }, [filterTypeMap]);
 
+    useEffect(() => {
         // if (queryResponse.data) {
 
         
@@ -81,6 +104,7 @@ export const useSetsData = props => {
                 filters: newFilters,
                 categoryUrlKey: pathname,
                 activeTab: activeTab,
+                set_filters: setsFilters,
                 shopby: shopby,
                 activeFilter: activeFilter
             }
@@ -89,11 +113,12 @@ export const useSetsData = props => {
     }, [
         runQuery,
         activeTab,
-        activeFilter
+        activeFilter,
+        setsFilters,
         // queryResponse
         // filterTypeMap,
         // search,
-        // newFilters,
+        newFilters,
         // shopby,
         // categoryUrlKey
     ]);
@@ -181,6 +206,14 @@ export const useSetsData = props => {
         return queryResponse?.data?.getSetsData?.attribute;
     }, [queryResponse]);
 
+    const availableFilters = useMemo(() => {
+        if (!queryResponse) {
+            return null;
+        }
+
+        return queryResponse?.data?.getSetsData?.available_filters;
+    }, [queryResponse]);
+
     const pageInfo = useMemo(() => {
         if (!queryResponse) {
             return null;
@@ -269,6 +302,7 @@ export const useSetsData = props => {
         availableYears,
         category,
         attributeData,
+        availableFilters,
         pageInfo
     };
 };

package/src/talons/ShopBy/useShopBy.js

@@ -22,7 +22,7 @@ export const useShopBy = props => {
     //     }
     // ] = useAppContext();
 
-    const [runQuery, queryResponse] = useLazyQuery(getShopByDataQuery, {
+    const [runQuery, {data: queryResponse, loading, error}] = useLazyQuery(getShopByDataQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first'
     });
@@ -50,7 +50,7 @@ export const useShopBy = props => {
         return typeMap;
     }, [introspectionData]);
 
-    const activeFilters = [];
+    // const activeFilters = [];
 
     // if (!filterTypeMap.size) {
     //     return;
@@ -59,26 +59,51 @@ export const useShopBy = props => {
     const filters = getFiltersFromSearch(search);
 
     // Construct the filter arg object.
-    const newFilters = {};
-    filters.forEach((values, key) => {
-        newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+    // const newFilters = {};
+    // filters.forEach((values, key) => {
+    //     newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
         
-        if (key == "sc_baseball_release") {
-            for(let item of values) {
-                if(item) {
-                    // console.log(item.split(',')[0])
-                    const data = search.split('&');
-                    data.pop();
-                    activeFilters.push(
-                        {
-                            'label': item.split(',')[0],
-                            'path': data
+    //     if (key == "sc_baseball_release") {
+    //         for(let item of values) {
+    //             if(item) {
+    //                 // console.log(item.split(',')[0])
+    //                 const data = search.split('&');
+    //                 data.pop();
+    //                 activeFilters.push(
+    //                     {
+    //                         'label': item.split(',')[0],
+    //                         'path': data
+    //                     }
+    //                 )
+    //             }   
+    //         }
+    //     }
+    // });
+    const { newFilters, activeFilters } = useMemo(() => {
+        const resultFilters = {};
+        const resultActiveFilters = [];
+
+        if (filterTypeMap.size) {
+            filters.forEach((values, key) => {
+                resultFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+
+                if (key === "sc_baseball_release") {
+                    for (let item of values) {
+                        if (item) {
+                            const data = search.split('&');
+                            data.pop();
+                            resultActiveFilters.push({
+                                label: item.split(',')[0],
+                                path: data
+                            });
                         }
-                    )
-                }   
-            }
+                    }
+                }
+            });
         }
-    });
+
+        return { newFilters: resultFilters, activeFilters: resultActiveFilters };
+    }, [filterTypeMap]);
 
     useEffect(() => {
 
@@ -130,7 +155,7 @@ export const useShopBy = props => {
             return null;
         }
         
-        const rawData = queryResponse?.data?.shopByData?.data;
+        const rawData = queryResponse?.shopByData?.data?.options;
         if (!rawData) {
             return null;
         }
@@ -160,7 +185,7 @@ export const useShopBy = props => {
             return null;
         }
         
-        const rawData = queryResponse?.data?.shopByData?.data;
+        const rawData = queryResponse?.shopByData?.data?.options;
         if (!rawData) {
             return null;
         }
@@ -227,7 +252,7 @@ export const useShopBy = props => {
     }
 
 
-    const attributeData = queryResponse?.data?.shopByData?.data && queryResponse?.data?.shopByData.data.length ? queryResponse.data.shopByData.data[0] : null
+    const attributeData = queryResponse?.shopByData?.data && queryResponse?.shopByData.data.length ? queryResponse.shopByData.data[0] : null
 
     const { data: categoryData, loading: categoryLoading } = useQuery(
         getCategoryContentQuery,
@@ -246,7 +271,7 @@ export const useShopBy = props => {
             return null;
         }
 
-        return queryResponse?.data?.shopByData?.page_info;
+        return queryResponse?.shopByData?.page_info;
     }, [queryResponse]);
 
     const category =
@@ -255,8 +280,8 @@ export const useShopBy = props => {
             : null;
 
     return {
-        // error,
-        // loading,
+        error,
+        loading,
         dataResult,
     //     collectibleGameSets,
         filteredAvailableGroups,