@riosst100/pwa-marketplace 1.4.7 → 1.4.9

package/package.json

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

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -4,11 +4,13 @@ import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSelle
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
 import { useCollectibleGameSets } from '@riosst100/pwa-marketplace/src/talons/CollectibleGameSets/useCollectibleGameSets';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 
 const CollectibleGameSets = props => {
     const talonProps = useCollectibleGameSets();
 
-    const { error, loading, collectibleGameSets } = talonProps;
+    const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey } = talonProps;
 
     if (loading && !collectibleGameSets)
         return '';
@@ -28,11 +30,34 @@ const CollectibleGameSets = props => {
         );
     }
 
-    const sets = collectibleGameSets.map((set, index) => {
-        const { card_set } = set;
+    const setRelases = collectibleGameSets.map((setRelease, index) => {
+        const { release_type, sets } = setRelease;
+
+        const setsResult = [];
+
+        if (sets.length) {
+            sets.map((set, index) => {
+                const { set_name, option_id } = set;
+
+                const categoryUrl = resourceUrl(
+                    `/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_set[filter]=${set_name},${option_id}`
+                );
+
+                setsResult.push(
+                    <li>
+                        <Link to={categoryUrl}>{set_name}</Link>
+                    </li>
+                );
+            });
+        }
+
         return (
             <>
-                <div><b>{card_set}</b></div>
+                <div>
+                    <div className='text-[16px] pb-2'><b>{release_type}</b></div>
+                    <hr />
+                    <ul className='pt-2'>{setsResult}</ul>
+                </div>
             </>
         );
     });
@@ -41,8 +66,8 @@ const CollectibleGameSets = props => {
     return (
         <Fragment>
             <StoreTitle>Magic: The Gathering | Sets & Expansions</StoreTitle>
-            <h3>Sets & Expansions</h3>
-            <div>{sets}</div>
+            <div className='text-[20px] pb-4 pt-5'><b>Sets & Expansions</b></div>
+            <div className='flex flex-wrap gap-[30px]'>{setRelases}</div>
         </Fragment>
     );
 };

package/src/components/FilterTop/CustomFilters/customFilters.js

@@ -30,7 +30,7 @@ const CustomFilters = props => {
     // create elements and params at the same time for efficiency
     const filterElements = useMemo(() => {
         const elements = [];
-        customFiltersData.map((filter, index) => {
+        customFiltersData && customFiltersData.map((filter, index) => {
             const { label, attribute_code, options } = filter || {};
 
             if (options.length) {
@@ -43,17 +43,19 @@ const CustomFilters = props => {
                     // );
                     // const keyAttr = `${attribute_code}[filter]`;
 
-                    Object.keys(params).forEach(function(key, index) {
-                        if (index > 1) {
-                            delete params[key];
-                        }
-                    });
+                    if (params) {
+                        Object.keys(params).forEach(function(key, index) {
+                            if (index > 1) {
+                                delete params[key];
+                            }
+                        });
+                    }
 
                     if (value != "all") {
                         params[`${attribute_code}[filter]`] = `${label},${value}`;
                     }
 
-                    const finalParams = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
+                    const finalParams = params ? Object.keys(params).map(key => `${key}=${params[key]}`).join('&') : '';
 
                     // console.log(params)
 

package/src/components/FilterTop/filterTop.js

@@ -1,139 +1,13 @@
-import React, { useMemo, useCallback, useRef } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { array, arrayOf, shape, string, number } from 'prop-types';
-import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import React from 'react';
 import CustomFilters from './CustomFilters';
-import FilterBlock from '@magento/venia-ui/lib/components/FilterModal/filterBlock';
-import defaultClasses from './filterTop.module.css';
-
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-
-import { Link } from 'react-router-dom';
-import CurrentFilters from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters';
-
-const SCROLL_OFFSET = 150;
 
-/**
- * A view that displays applicable and applied filters.
- *
- * @param {Object} props.filters - filters to display
- */
 const FilterTop = props => {
-    const { filters, filterCountToOpen, category } = props;
-    const talonProps = useFilterSidebar({ filters });
-    const {
-        filterApi,
-        filterItems,
-        filterNames,
-        filterFrontendInput,
-        filterState,
-        handleApply,
-        handleReset
-    } = talonProps;
-
-    const filterRef = useRef();
-    const classes = useStyle(defaultClasses, props.classes);
-
-    const handleApplyFilter = useCallback(
-        (...args) => {
-            const filterElement = filterRef.current;
-            if (
-                filterElement &&
-                typeof filterElement.getBoundingClientRect === 'function'
-            ) {
-                const filterTop = filterElement.getBoundingClientRect().top;
-                const windowScrollY =
-                    window.scrollY + filterTop - SCROLL_OFFSET;
-                window.scrollTo(0, windowScrollY);
-            }
-
-            handleApply(...args);
-        },
-        [handleApply, filterRef]
-    );
-
-    const filtersList = useMemo(
-        () =>
-            Array.from(filterItems, ([group, items], iteration) => {
-                const blockState = filterState.get(group);
-                const groupName = filterNames.get(group);
-                const frontendInput = filterFrontendInput.get(group);
-                return (
-                    <FilterBlock
-                        key={group}
-                        filterApi={filterApi}
-                        filterState={blockState}
-                        filterFrontendInput={frontendInput}
-                        group={group}
-                        items={items}
-                        name={groupName}
-                        onApply={handleApplyFilter}
-                        initialOpen={iteration < filterCountToOpen}
-                    />
-                );
-            }),
-        [
-            filterApi,
-            filterItems,
-            filterNames,
-            filterFrontendInput,
-            filterState,
-            filterCountToOpen,
-            handleApplyFilter
-        ]
-    );
-
-    const clearAll = filterState.size ? (
-        <div className={classes.action}>
-            <LinkButton
-                type="button"
-                onClick={handleReset}
-                data-cy="FilterSidebar-clearButton"
-            >
-                <FormattedMessage
-                    id={'filterModal.all'}
-                    defaultMessage={'All'}
-                />
-            </LinkButton>
-        </div>
-    ) : null;
-
+    const { category } = props;
     return (
         <CustomFilters
-            filterApi={filterApi}
-            filterNames={filterNames}
-            filterState={filterState}
-            clearAll={clearAll}
             category={category}
-            onRemove={handleApplyFilter}
         />
     );
 };
 
-FilterTop.defaultProps = {
-    filterCountToOpen: 3
-};
-
-FilterTop.propTypes = {
-    classes: shape({
-        action: string,
-        blocks: string,
-        body: string,
-        header: string,
-        headerTitle: string,
-        root: string,
-        root_open: string
-    }),
-    filters: arrayOf(
-        shape({
-            attribute_code: string,
-            items: array
-        })
-    ),
-    filterCountToOpen: number
-};
-
 export default FilterTop;

package/src/intercept.js

@@ -99,7 +99,7 @@ module.exports = targets => {
     {
       exact: true,
       name: "CollectibleGameSetsPage",
-      pattern: "/games/collectible-game/:urlKey/sets",
+      pattern: "/games/collectible-game/:urlKey/:productType",
       path: require.resolve("./components/CollectibleGameSetsPage/index.js"),
       authed: false,
     },

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -186,7 +186,7 @@ const CategoryContent = props => {
                     </h1>
                     {categoryDescriptionElement}
                 </div>
-                <SubCategory filters={filters} children={children} />
+                {/* <SubCategory filters={filters} children={children} /> */}
                 <FilterTop filters={filters} category={category} />
                 {/* <AttributesBlock category={category} attributesBlock={attributesBlock} /> */}
                 {/* <section className='category_brand-slider my-5'>

package/src/talons/CollectibleGameSets/collectibleGameSets.gql.js

@@ -6,6 +6,7 @@ export const GET_STORE_CONFIG_DATA = gql`
         storeConfig {
             store_code
             product_url_suffix
+            category_url_suffix
         }
     }
 `;
@@ -13,10 +14,14 @@ export const GET_STORE_CONFIG_DATA = gql`
 export const GET_COLLECTIBLE_GAME_QUERY = gql`
     query getCollectibleGameSets($categoryUrlKey: String!) {
         collectibleGameSets(categoryUrlKey: $categoryUrlKey) {
-            card_set
-            card_game
-            card_set_abbreviation
-            card_release_year
+            release_type
+            sets {
+                set_name
+                option_id
+                set_abbreviation
+                release_date
+                release_number
+            }
         }
     }
 `;

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -23,9 +23,14 @@ export const useCollectibleGameSets = props => {
         nextFetchPolicy: 'cache-first'
     });
 
+    const pathnameArr = pathname.split('/');
+
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 2];
+
     const slug = pathname.split('/').pop();
     const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
-    const categoryUrlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
+    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
+    // const categoryUrlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
 
     const { error, loading, data } = useQuery(getCollectibleGameQuery, {
         fetchPolicy: 'cache-and-network',
@@ -60,6 +65,8 @@ export const useCollectibleGameSets = props => {
     return {
         error,
         loading,
-        collectibleGameSets
+        collectibleGameSets,
+        categoryUrlSuffix,
+        categoryUrlKey
     };
 };