@riosst100/pwa-marketplace 1.6.1 → 1.6.2

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { func, shape, string } from 'prop-types';
 import { useIntl } from 'react-intl';
 
@@ -10,25 +10,70 @@ import { Link } from 'react-router-dom';
 import { useCustomFilters } from '@riosst100/pwa-marketplace/src/talons/CustomFilters/useCustomFilters';
 
 const CustomFilters = props => {
-    const { filterState, onRemove, clearAll, category } = props;
+    const { onRemove, clearAll, category, filters } = props;
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
 
-    const talonProps = useCustomFilters();
+    const talonProps = useCustomFilters({ filters });
 
-    const { customFiltersData, categoryUrlSuffix, search, pathname } = talonProps;
+    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]);
+
+    // console.log(activeFilters)\\
+
+    // 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(({ label, value }, index) => {
+                options.map((item, index) => {
+                    const { label, value } = item
                     // const path = '/';
 
                     // const path = resourceUrl(
@@ -51,20 +96,27 @@ const CustomFilters = props => {
                     const finalParams = params ? Object.keys(params).map(key => `${key}=${params[key]}`).join('&') : '';
                     const path = pathname + finalParams;
 
-                    items.push(
-                        <li>
-                            <Link
-                                key={index}
-                                to={path}
-                            >
-                                <li className={classes.item}>{label}</li>
-                            </Link>
-                        </li>
-                    )
+                    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 className={classes.root}>{items}</ul>
+                    <ul key={index} className={classes.root}>{items}</ul>
                 );
             }
         })
@@ -77,18 +129,4 @@ const CustomFilters = props => {
     );
 };
 
-CustomFilters.defaultProps = {
-    onRemove: null
-};
-
-CustomFilters.propTypes = {
-    classes: shape({
-        root: string,
-        item: string,
-        button: string,
-        icon: string
-    }),
-    onRemove: func
-};
-
 export default CustomFilters;

package/src/components/FilterTop/FilterBlockList/filterBlockList.js

@@ -0,0 +1,50 @@
+import React, { Fragment, useMemo } from 'react';
+import FilterTopItemGroup from './filterTopItemGroup';
+
+const labels = new WeakMap();
+
+const FilterBlockList = props => {
+    const {
+        filterApi,
+        filterState,
+        name,
+        group,
+        items,
+        onApply,
+        filterNames,
+        originalFilterState
+    } = props;
+
+    const itemElements = useMemo(() => {
+        const key = `item-${group}`;
+        return (
+            <FilterTopItemGroup
+                filterApi={filterApi}
+                filterState={filterState}
+                group={group}
+                name={name}
+                originalFilterState={originalFilterState}
+                items={items}
+                onApply={onApply}
+                labels={labels}
+                filterNames={filterNames}
+                key={key}
+            />
+        );
+    }, [
+        filterApi,
+        filterState,
+        name,
+        group,
+        items,
+        onApply
+    ]);
+
+    return (
+        <Fragment>
+            {itemElements}
+        </Fragment>
+    );
+};
+
+export default FilterBlockList;

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

@@ -0,0 +1,8 @@
+.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;
+}

package/src/components/FilterTop/FilterBlockList/filterTopItem.js

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+import defaultClasses from './filterTopItem.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+const FilterTopItem = props => {
+    const { filterApi, group, item, onApply, labels, activeFilters } = props;
+    const { removeGroup, toggleItem } = filterApi;
+    const { title, value } = item;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const label = item.label ? item.label : item.title;
+
+    const handleOnchange = useCallback(
+        e => {
+            if (group != "category_uid") {
+                removeGroup({ group });
+                if (e === item.value) {
+                    toggleItem({ group, item });
+                }
+            }
+            if (typeof onApply === 'function') {
+                onApply(group, item);
+            }
+        },
+        [group, item, onApply, removeGroup, toggleItem]
+    );
+
+    const element = activeFilters.includes(value) ? (
+        <span className={classes.item}><b>{title}</b></span>
+    ) : (
+        <span className={classes.item} onClick={() =>handleOnchange(value)}>{title}</span>
+    )
+
+    labels.set(element, label);
+
+    return element;
+};
+
+export default FilterTopItem;

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

@@ -0,0 +1,14 @@
+.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/FilterTop/FilterBlockList/filterTopItemGroup.js

@@ -0,0 +1,91 @@
+import React, { useMemo, useEffect } from 'react';
+import FilterTopItem from './filterTopItem';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './filterTopItemGroup.module.css';
+import CurrentTopFilter from '@riosst100/pwa-marketplace/src/components/FilterTop/CurrentTopFilters/currentTopFilter';
+
+const FilterTopItemGroup = props => {
+    const { filterApi, filterState, group, items, onApply, labels, filterNames, originalFilterState } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const currentGroup = group;
+    const { removeItem } = filterApi;
+    const activeFilters = [];
+
+    // Current Filters
+    const filterElements = useMemo(() => {
+        const elements = [];
+        for (const [group, items] of originalFilterState) {
+            for (const item of items) {
+                const { title, value } = item || {};
+                const key = `${group}::${title}_${value}`;
+
+                if (group === currentGroup) {
+                    activeFilters.push(item.value)
+                    elements.push(
+                        <CurrentTopFilter
+                            group={group}
+                            item={item}
+                            removeItem={removeItem}
+                            onRemove={onApply}
+                        />
+                    );
+                }
+            }
+        }
+
+        return elements;
+    }, [originalFilterState, removeItem, onApply]);
+
+    const radioItems = useMemo(() => {
+        return items.map(item => {
+            const code = `item-${group}-${item.value}`;
+            return (
+                <FilterTopItem
+                    key={code}
+                    filterApi={filterApi}
+                    filterState={filterState}
+                    group={group}
+                    activeFilters={activeFilters}
+                    item={item}
+                    onApply={onApply}
+                    labels={labels}
+                />
+            );
+        });
+    }, [filterApi, filterState, group, items, labels, onApply]);
+
+    const fieldValue = useMemo(() => {
+        if (filterState) {
+            for (const item of items) {
+                if (filterState.has(item)) {
+                    return item.value;
+                }
+            }
+        }
+
+        return null;
+    }, [filterState, items]);
+    const field = `item-${group}`;
+    const fieldApi = useFieldApi(field);
+    const fieldState = useFieldState(field);
+    useEffect(() => {
+        if (field && fieldValue === null) {
+            fieldApi.reset();
+        } else if (field && fieldValue !== fieldState.value) {
+            fieldApi.setValue(fieldValue);
+        }
+    }, [field, fieldApi, fieldState.value, fieldValue]);
+
+    return (
+        <div className={classes.root}>
+            {radioItems}
+            {filterElements && filterElements.length ? filterElements : <span className={classes.item}><b>All</b></span>}
+        </div>
+    );
+};
+
+export default FilterTopItemGroup;

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

@@ -0,0 +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;
+}

package/src/components/FilterTop/FilterBlockList/index.js

@@ -0,0 +1 @@
+export { default } from './filterBlockList';

package/src/components/FilterTop/filterTop.js

@@ -1,13 +1,131 @@
-import React from 'react';
-import CustomFilters from './CustomFilters';
-
-const FilterTop = props => {
-    const { category } = props;
-    return (
-        <CustomFilters
-            category={category}
-        />
-    );
-};
-
-export default FilterTop;
+import React, { useMemo, useCallback, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { array, arrayOf, shape, string, number } from 'prop-types';
+import { useFilterTop } from '@riosst100/pwa-marketplace/src/talons/FilterTop';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import FilterTopBlock from './filterTopBlock';
+import defaultClasses from './filterTop.module.css';
+import { Filter } from 'iconsax-react';
+import cn from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+
+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, allowedFilters } = props;
+    const talonProps = useFilterTop({ filters });
+    const {
+        filterApi,
+        filterItems,
+        filterNames,
+        filterFrontendInput,
+        filterState,
+        handleApply,
+        handleReset,
+        customFilters
+    } = talonProps;
+
+    const filterRef = useRef();
+
+    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 history = useHistory();
+
+    const handleCategoryApplyFilter = 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);
+            // }
+
+            history.push('/'+args[1].path+'.html');
+
+            if (args[0] != "category_uid") {
+                handleApply(...args);
+            }
+        },
+        [handleApply, filterRef]
+    );
+
+    // const allowedFiltersArr = [];
+
+    // allowedFilters.length && allowedFilters.map((val, index) => {
+    //     allowedFiltersArr.push(val.code);
+    // });
+    // const allowedFiltersArr = ['card_rarity','card_print_version','card_set', 'card_product_type'];
+
+    console.log(customFilters)
+
+    const filtersList = useMemo(
+        () =>
+            Array.from(filterItems, ([group, items], iteration) => {
+                const blockState = filterState.get(group);
+                const groupName = filterNames.get(group);
+                const frontendInput = filterFrontendInput.get(group);
+                if (customFilters && customFilters.length && customFilters.includes(group)) {
+
+                    return (
+                        <FilterTopBlock
+                            key={group}
+                            filterNames={filterNames}
+                            filterApi={filterApi}
+                            filterState={blockState}
+                            originalFilterState={filterState}
+                            filterFrontendInput={frontendInput}
+                            group={group}
+                            items={items}
+                            name={groupName}
+                            onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
+                            initialOpen={iteration < filterCountToOpen}
+                        />
+                    );
+                }
+            }),
+        [
+            filterApi,
+            filterItems,
+            filterNames,
+            filterFrontendInput,
+            filterState,
+            filterCountToOpen,
+            customFilters,
+            handleApplyFilter
+        ]
+    );
+
+    return (
+        <div>{filtersList}</div>
+    );
+};
+
+export default FilterTop;

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

@@ -1,58 +1,23 @@
-.root {
-    composes: bg-white from global;
-    composes: bottom-0 from global;
-    composes: hidden from global;
-    composes: max-w-modal from global;
-    composes: w-full from global;
-    composes: z-foreground from global;
-    grid-template-rows: 1fr 7rem;
-
-    composes: lg_grid from global;
-}
-
-.body {
-    composes: overflow-auto from global;
-}
-
-.header {
-    composes: flex from global;
-    composes: justify-between from global;
-    composes: pb-0 from global;
-    composes: pt-5 from global;
-    composes: px-5 from global;
-}
-
-.headerTitle {
-    composes: flex from global;
-    composes: items-center from global;
-    composes: leading-none from global;
-    composes: text-lg from global;
-}
-
-.action {
-    composes: pb-0 from global;
-    composes: pt-xs from global;
-    composes: px-xs from global;
-}
-
-/* TODO @TW: cannot compose */
-.action button {
-    /* composes: text-sm from global; */
-    font-size: 0.875rem;
-    /* composes: no-underline from global; */
-    text-decoration: none;
-}
-
-.blocks {
-    composes: pb-0 from global;
-    composes: pt-xs from global;
-    composes: px-xs from global;
-}
-
-/* TODO @TW: cannot compose */
-.blocks > li:last-child {
-    /* composes: border-b-2 from global; */
-    /* composes: border-solid from global; */
-    /* composes: border-subtle from global; */
-    border-bottom: 2px solid rgb(var(--venia-global-color-border));
-}
+.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/FilterTop/filterTop.shimmer.js

@@ -1,24 +1,24 @@
-import React from 'react';
-import { shape, string } from 'prop-types';
-import { useStyle } from '@magento/venia-ui/lib/classify';
-
-import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
-import defaultClasses from './filterTop.module.css';
-
-const FilterTop = props => {
-    const classes = useStyle(defaultClasses, props.classes);
-
-    return (
-        <aside className={classes.root} aria-live="polite" aria-busy="true">
-            <Shimmer width="95%" height="70vh" style={{ marginBottom: 25 }} />
-        </aside>
-    );
-};
-
-FilterTop.propTypes = {
-    classes: shape({
-        root: string
-    })
-};
-
-export default FilterTop;
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './filterTop.module.css';
+
+const FilterTop = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <aside className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width="95%" height="70vh" style={{ marginBottom: 25 }} />
+        </aside>
+    );
+};
+
+FilterTop.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default FilterTop;