@riosst100/pwa-marketplace 1.8.1 → 1.8.3

package/package.json

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

package/src/components/CustomSubCategory/subCategory.js

@@ -1,11 +1,8 @@
 import { useSubCategory } from '@riosst100/pwa-marketplace/src/talons/SubCategory/useSubCategory';
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import defaultClasses from './subCategory.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
-import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets/collectibleGameSets';
 
 const SubCategory = props => {
     const { children } = props;
@@ -34,17 +31,6 @@ const SubCategory = props => {
     }
 
     return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';
-
-    // const [activeTab, setActiveTab] = useState('singles')
-
-    return (
-        <>
-            <ul className={classes.root}>
-                <li className={classes.item}>All Sets</li>
-                <li className={classes.item}>Expansion Sets</li>
-            </ul>
-        </>
-    )
 };
 
 export default SubCategory;

package/src/components/FilterTop/FilterBlockList/filterTopItemGroup.module.css

@@ -4,7 +4,7 @@
     composes: mt-3 from global;
     composes: gap-[10px] from global;
     margin-bottom: 10px;
-    justify-content: center;
+    /* justify-content: center; */
 }
 
 .item {

package/src/components/FilterTop/filterTop.js

@@ -22,8 +22,8 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterTop = props => {
-    const { filters, filterCountToOpen, allowedFilters } = props;
-    const talonProps = useFilterTop({ filters });
+    const { filters, filterCountToOpen, allowedFilters, category } = props;
+    const talonProps = useFilterTop({ filters, category });
     const {
         filterApi,
         filterItems,

package/src/components/FilterTop/filterTop.module.css

@@ -4,7 +4,7 @@
     composes: mt-3 from global;
     composes: gap-[10px] from global;
     margin-bottom: 10px;
-    justify-content: center;
+    /* justify-content: center; */
 }
 
 .item {

package/src/components/FilterTopBackup/CustomFilters/customFilter.js

@@ -1,83 +1,83 @@
-import React, { useCallback } from 'react';
-import { useIntl } from 'react-intl';
-import { shape, string, func } from 'prop-types';
-import { X as Remove } from 'react-feather';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import Icon from '@magento/venia-ui/lib/components/Icon';
-import Trigger from '@magento/venia-ui/lib/components/Trigger';
-import defaultClasses from './customFilter.module.css';
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-
-import { Link } from 'react-router-dom';
-
-const CustomFilter = props => {
-    const { group, item, onRemove } = props;
-    const classes = useStyle(defaultClasses, props.classes);
-    const { formatMessage } = useIntl();
-
-    const ariaLabel = formatMessage(
-        {
-            id: 'filterModal.action.clearFilterItem.ariaLabel',
-            defaultMessage: 'Clear filter "{name}"'
-        },
-        {
-            name: item.label ? item.label : item.title
-        }
-    );
-
-    const normalizedData = [
-        {
-            'label': 'Sealed Products',
-            'path': '/'
-        },
-        {
-            'label': 'Singles',
-            'path': '/'
-        },
-        {
-            'label': 'Supplies',
-            'path': '/'
-        }
-    ];
-
-    const subCategory = [];
-
-    const customAttributeLandingPage = ['card_set', 'sc_baseball_release'];
-
-    if (customAttributeLandingPage.includes(group)) {
-        normalizedData && normalizedData.map(({ label, path }, index) => {
-            subCategory.push(
-                <Link
-                    key={index}
-                    to={resourceUrl(path)}
-                >
-                    <li className={classes.item}>{label}</li>
-                </Link>
-            )
-        });
-    }
-
-
-    return (
-        <ul className={classes.root}>{subCategory}</ul>
-        // <span className={classes.root} data-cy="CustomFilter-root">
-        //     <span className={classes.text}>
-        //         {item.label ? item.label : item.title}
-        //     </span>
-        // </span>
-    );
-};
-
-export default CustomFilter;
-
-CustomFilter.defaultProps = {
-    onRemove: null
-};
-
-CustomFilter.propTypes = {
-    classes: shape({
-        root: string
-    }),
-    onRemove: func
-};
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { shape, string, func } from 'prop-types';
+import { X as Remove } from 'react-feather';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import Trigger from '@magento/venia-ui/lib/components/Trigger';
+import defaultClasses from './customFilter.module.css';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import { Link } from 'react-router-dom';
+
+const CustomFilter = props => {
+    const { group, item, onRemove } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+
+    const ariaLabel = formatMessage(
+        {
+            id: 'filterModal.action.clearFilterItem.ariaLabel',
+            defaultMessage: 'Clear filter "{name}"'
+        },
+        {
+            name: item.label ? item.label : item.title
+        }
+    );
+
+    const normalizedData = [
+        {
+            'label': 'Sealed Products',
+            'path': '/'
+        },
+        {
+            'label': 'Singles',
+            'path': '/'
+        },
+        {
+            'label': 'Supplies',
+            'path': '/'
+        }
+    ];
+
+    const subCategory = [];
+
+    const customAttributeLandingPage = ['card_set', 'sc_baseball_release'];
+
+    if (customAttributeLandingPage.includes(group)) {
+        normalizedData && normalizedData.map(({ label, path }, index) => {
+            subCategory.push(
+                <Link
+                    key={index}
+                    to={resourceUrl(path)}
+                >
+                    <li className={classes.item}>{label}</li>
+                </Link>
+            )
+        });
+    }
+
+
+    return (
+        <ul className={classes.root}>{subCategory}</ul>
+        // <span className={classes.root} data-cy="CustomFilter-root">
+        //     <span className={classes.text}>
+        //         {item.label ? item.label : item.title}
+        //     </span>
+        // </span>
+    );
+};
+
+export default CustomFilter;
+
+CustomFilter.defaultProps = {
+    onRemove: null
+};
+
+CustomFilter.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    onRemove: func
+};

package/src/components/FilterTopBackup/CustomFilters/customFilter.module.css

@@ -1,22 +1,22 @@
-.root {
-    composes: flex from global;
-    composes: flex-wrap from global;
-    composes: mt-3 from global;
-    composes: gap-[15px] from global;
-    margin-bottom: 10px;
-}
-
-.item {
-    composes: px-4 from global;
-    composes: py-2 from global;
-    composes: transition-colors from global;
-    composes: duration-150 from global;
-    composes: border from global;
-    composes: border-solid from global;
-    composes: leading-normal from global;
-    composes: text-base from global;
-    composes: text-colorDefault from global;
-    composes: bg-white from global;
-    composes: border-gray-100 from global;
-    border-radius: 5px;
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 10px;
+}
+
+.item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
 }

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

@@ -1,131 +1,131 @@
-import React, { useCallback, useMemo } from 'react';
-import { func, shape, string } from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { useStyle } from '@magento/venia-ui/lib/classify';
-import CustomFilter from './customFilter';
-import defaultClasses from './customFilters.module.css';
-import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
-import { Link } from 'react-router-dom';
-import { useCustomFilters } from '@riosst100/pwa-marketplace/src/talons/CustomFilters/useCustomFilters';
-
-const CustomFilters = props => {
-    const { onRemove, clearAll, category, filters } = props;
-    const classes = useStyle(defaultClasses, props.classes);
-    const { formatMessage } = useIntl();
-
-    const talonProps = useCustomFilters({ filters });
-
-    const { 
-        customFiltersData, 
-        categoryUrlSuffix, 
-        search, 
-        pathname,
-        filterApi,
-        // filterItems,
-        // filterNames,
-        // filterFrontendInput,
-        filterState
-     } = talonProps;
-
-    const params = search ? JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') : {};
-
-    const { removeItem } = filterApi;
-
-    const activeFilters = useMemo(() => {
-        const elements = [];
-        for (const [group, items] of filterState) {
-            for (const item of items) {
-                elements.push(
-                    {
-                        group: group,
-                        item: item,
-                        removeItem: removeItem
-                    }
-                );
-            }
-        }
-
-        return elements;
-    }, [filterState, removeItem]);
-
-
-    // const handleClick = useCallback(() => {
-    //     removeItem({ group, item });
-    // }, [group, item, removeItem]);
-
-    // create elements and params at the same time for efficiency
-    const filterElements = useMemo(() => {
-        const elements = [];
-        customFiltersData && customFiltersData.map((filter, index) => {
-            const { label, attribute_code, options } = filter || {};
-
-            const group = attribute_code;
-
-            // const handleClick = useCallback(() => {
-            //     removeItem({ group, item });
-            //     if (typeof onRemove === 'function') {
-            //         onRemove(group, item);
-            //     }
-            // }, [group, item, removeItem, onRemove]);
-
-            if (options.length) {
-                const items = [];
-                options.map((item, index) => {
-                    const { label, value } = item
-                    // const path = '/';
-
-                    // const path = resourceUrl(
-                    //     `/${category.url_path}${categoryUrlSuffix || ''}?${attribute_code}[filter]=${label},${value}`
-                    // );
-                    // const keyAttr = `${attribute_code}[filter]`;
-
-                    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 = params ? Object.keys(params).map(key => `${key}=${params[key]}`).join('&') : '';
-                    const path = pathname + finalParams;
-
-                    if (value != "all") {
-                        items.push(
-                            <li key={index}>
-                                <Link
-                                    to={path}
-                                >
-                                    <span className={classes.item}>{label}</span>
-                                </Link>
-                            </li>
-                        )
-                    } else {
-                        items.push(
-                            <li key={index}>
-                                <span className={classes.item} onClick={removeItem({ group, item })}>{label}</span>
-                            </li>
-                        )
-                    }
-                });
-
-                elements.push(
-                    <ul key={index} className={classes.root}>{items}</ul>
-                );
-            }
-        })
-
-        return elements;
-    }, [customFiltersData]);
-
-    return (
-        <>{filterElements}</>
-    );
-};
-
-export default CustomFilters;
+import React, { useCallback, useMemo } from 'react';
+import { func, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import CustomFilter from './customFilter';
+import defaultClasses from './customFilters.module.css';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { Link } from 'react-router-dom';
+import { useCustomFilters } from '@riosst100/pwa-marketplace/src/talons/CustomFilters/useCustomFilters';
+
+const CustomFilters = props => {
+    const { onRemove, clearAll, category, filters } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+
+    const talonProps = useCustomFilters({ filters, category });
+
+    const { 
+        customFiltersData, 
+        categoryUrlSuffix, 
+        search, 
+        pathname,
+        filterApi,
+        // filterItems,
+        // filterNames,
+        // filterFrontendInput,
+        filterState
+     } = talonProps;
+
+    const params = search ? JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') : {};
+
+    const { removeItem } = filterApi;
+
+    const activeFilters = useMemo(() => {
+        const elements = [];
+        for (const [group, items] of filterState) {
+            for (const item of items) {
+                elements.push(
+                    {
+                        group: group,
+                        item: item,
+                        removeItem: removeItem
+                    }
+                );
+            }
+        }
+
+        return elements;
+    }, [filterState, removeItem]);
+
+
+    // const handleClick = useCallback(() => {
+    //     removeItem({ group, item });
+    // }, [group, item, removeItem]);
+
+    // create elements and params at the same time for efficiency
+    const filterElements = useMemo(() => {
+        const elements = [];
+        customFiltersData && customFiltersData.map((filter, index) => {
+            const { label, attribute_code, options } = filter || {};
+
+            const group = attribute_code;
+
+            // const handleClick = useCallback(() => {
+            //     removeItem({ group, item });
+            //     if (typeof onRemove === 'function') {
+            //         onRemove(group, item);
+            //     }
+            // }, [group, item, removeItem, onRemove]);
+
+            if (options.length) {
+                const items = [];
+                options.map((item, index) => {
+                    const { label, value } = item
+                    // const path = '/';
+
+                    // const path = resourceUrl(
+                    //     `/${category.url_path}${categoryUrlSuffix || ''}?${attribute_code}[filter]=${label},${value}`
+                    // );
+                    // const keyAttr = `${attribute_code}[filter]`;
+
+                    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 = params ? Object.keys(params).map(key => `${key}=${params[key]}`).join('&') : '';
+                    const path = pathname + finalParams;
+
+                    if (value != "all") {
+                        items.push(
+                            <li key={index}>
+                                <Link
+                                    to={path}
+                                >
+                                    <span className={classes.item}>{label}</span>
+                                </Link>
+                            </li>
+                        )
+                    } else {
+                        items.push(
+                            <li key={index}>
+                                <span className={classes.item} onClick={removeItem({ group, item })}>{label}</span>
+                            </li>
+                        )
+                    }
+                });
+
+                elements.push(
+                    <ul key={index} className={classes.root}>{items}</ul>
+                );
+            }
+        })
+
+        return elements;
+    }, [customFiltersData]);
+
+    return (
+        <>{filterElements}</>
+    );
+};
+
+export default CustomFilters;

package/src/components/FilterTopBackup/CustomFilters/customFilters.module.css

@@ -1,23 +1,23 @@
-.root {
-    composes: flex from global;
-    composes: flex-wrap from global;
-    composes: mt-3 from global;
-    composes: gap-[15px] from global;
-    margin-bottom: 10px;
-    justify-content: center;
-}
-
-.item {
-    composes: px-4 from global;
-    composes: py-2 from global;
-    composes: transition-colors from global;
-    composes: duration-150 from global;
-    composes: border from global;
-    composes: border-solid from global;
-    composes: leading-normal from global;
-    composes: text-base from global;
-    composes: text-colorDefault from global;
-    composes: bg-white from global;
-    composes: border-gray-100 from global;
-    border-radius: 5px;
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 10px;
+    /* justify-content: center; */
+}
+
+.item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
 }

package/src/components/FilterTopBackup/CustomFilters/index.js

@@ -1 +1 @@
-export { default } from './customFilters';
+export { default } from './customFilters';

package/src/components/FilterTopBackup/filterTop.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import CustomFilters from './CustomFilters';
-
-const FilterTop = props => {
-    const { category, filters } = props;
-    return (
-        <CustomFilters
-            category={category}
-            filters={filters}
-        />
-    );
-};
-
-export default FilterTop;
+import React from 'react';
+import CustomFilters from './CustomFilters';
+
+const FilterTop = props => {
+    const { category, filters } = props;
+    return (
+        <CustomFilters
+            category={category}
+            filters={filters}
+        />
+    );
+};
+
+export default FilterTop;