@riosst100/pwa-marketplace 1.6.3 → 1.6.4

package/package.json

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

package/src/components/CustomSubCategory/subCategory.js

@@ -21,7 +21,6 @@ const SubCategory = props => {
     const subCategory = [];
     
     normalizedData && normalizedData.map(({ text, path }, index) => {
-        console.log(path)
         subCategory.push(
             <Link
                 key={index}

package/src/components/CustomSubCategoryPage/subCategoryPage.js

@@ -0,0 +1,132 @@
+import React, { Fragment, Suspense, useMemo, useRef, useState } from 'react';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './subCategoryPage.module.css';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { ShopByShimmer } from '@riosst100/pwa-marketplace/src/components/ShopBy';
+import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
+import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySearchInput';
+import { useSubCategoryPage } from '@riosst100/pwa-marketplace/src/talons/SubCategoryPage/useSubCategoryPage';
+
+const SubCategoryPage = props => {
+    const { categoryId } = props;
+    const [active, setActive] = useState('all');
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useSubCategoryPage({ searchQuery, setActive, categoryId });
+
+    const { error, loading, dataResult, categoryUrlSuffix, filteredAvailableGroups, availableGroups, alpha, category } = talonProps;
+
+    if (loading && !dataResult)
+        return <ShopByShimmer />;
+    if (error && !dataResult) return <ErrorView />;
+
+    if (!dataResult && !loading && !error) {
+        return <ShopByShimmer />;
+    }
+
+    const newAvailableGroups = searchQuery ? filteredAvailableGroups : availableGroups;
+
+    const setRelases = newAvailableGroups.map((group, index) => {
+        const optionsResult = [];
+
+        if (active === 'all' || active === group) {
+            dataResult[group].map((option, index) => {
+                const { name, url_path } = option;
+
+                optionsResult.push(<li className='list-none'>
+                    <Link to={'/' + url_path + categoryUrlSuffix} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
+                        {name}
+                    </Link>
+                </li>)
+            })
+
+            return (
+                <>
+                    {optionsResult ?
+                    <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                        <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
+                            {group}
+                        </div>
+                        <div className={cn('singles_item-list flex flex-col')}>{optionsResult}</div>
+                    </div> : ''}
+                </>
+            );
+        }
+        
+        return null;
+    });
+
+    const handleActive = (val) => {
+        setActive(val);
+        setSearchQuery('')
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{category ? category.name : 'Shop By'}</StoreTitle>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {category ? category.name : 'Shop By'}
+            </h1>
+            <div className='border border-gray-100 px-6'>
+                {dataResult ? (
+                    <div
+                        className={classes.toolbar}
+                    >
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={setSearchQuery} /></div>
+                    </div>
+                ) : ''}
+                <>
+                    <section className='single_list-indexing-container relative m-auto py-10'>
+                        <ul className='flex gap-2 justify-center flex-wrap'>
+                            <li>
+                                <button
+                                    className={cn(
+                                        'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                        'leading-4 font-medium text-base hover_bg-gray-50'
+                                    )}
+                                    onClick={() => {
+                                        handleActive('all')
+                                    }}
+                                >
+                                    {active == 'all' ? <b>All</b> : 'All'}
+                                </button>
+                            </li>
+                            {alpha.map((letter, index) => (
+                                <li key={index}>
+                                    <button
+                                        className={cn(
+                                            'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                            'leading-4 font-medium text-base ',
+                                            availableGroups.includes(letter) > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                                        )}
+                                        onClick={() => {
+                                            handleActive(letter)
+                                        }}
+                                        disabled={availableGroups.includes(letter) > 0 ? false : true}
+                                    >
+                                        {active == letter ? <b>{letter}</b> : letter}
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    </section>
+                </>
+                <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>)}
+                    </div>
+                </section>
+            </div>
+        </Fragment>
+    );
+};
+
+export default SubCategoryPage;

package/src/components/CustomSubCategoryPage/subCategoryPage.module.css

@@ -0,0 +1,46 @@
+.toolbar {
+    composes: relative from global;
+    composes: ml-2xs from global;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.tabs {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 30px;
+}
+
+.tabs_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;
+}
+
+.singlesWrapper {
+    column-count: 1;
+}
+
+@media screen and (min-width: 768px) {
+    .singlesWrapper {
+        column-count: 2;
+    }
+}
+
+@media screen and (min-width: 1023px) {
+    .singlesWrapper {
+        column-count: 3;
+    }
+}

package/src/components/SubCategory/subCategory.js

@@ -36,7 +36,7 @@ const SubCategory = props => {
     if (normalizedData.length > maxSubCategory) {
         subCategory.push(
             <Link
-                to={resourceUrl('/')}
+                to={resourceUrl('?show_subcategory=1')}
             >
                 <li className={classes.item}>{"More " + parent[0].name}</li>
             </Link>

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

@@ -10,6 +10,7 @@ import { GET_PAGE_SIZE } from './category.gql';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 import { useIntl } from 'react-intl';
 import ShopBy from '@riosst100/pwa-marketplace/src/components/ShopBy/shopBy';
+import SubCategoryPage from '@riosst100/pwa-marketplace/src/components/CustomSubCategoryPage/subCategoryPage';
 
 const MESSAGES = new Map().set(
     'NOT_FOUND',
@@ -24,7 +25,7 @@ const Category = props => {
 
     const query = new URLSearchParams(location.search);
     const shopby = query.get('shopby') || null;
-    console.log('shopyn: '+shopby)
+    const showSubcategory = query.get('show_subcategory') || null;
 
     const talonProps = useCategory({
         id: uid,
@@ -70,18 +71,28 @@ const Category = props => {
     return (
         <Fragment>
             <Meta name="description" content={metaDescription} />
-            {shopby ? <ShopBy
+            {showSubcategory ? (
+                <SubCategoryPage
                 categoryId={uid}
-                shopby={shopby}
-                isLoading={loading} /> : <CategoryContent
-                categoryId={uid}
-                classes={classes}
-                data={categoryData}
-                isLoading={loading}
-                pageControl={pageControl}
-                sortProps={sortProps}
-                pageSize={pageSize}
-            />}
+                isLoading={loading} />
+            ) : (
+                shopby ? (
+                    <ShopBy
+                    categoryId={uid}
+                    shopby={shopby}
+                    isLoading={loading} />
+                ) : (
+                    <CategoryContent
+                    categoryId={uid}
+                    classes={classes}
+                    data={categoryData}
+                    isLoading={loading}
+                    pageControl={pageControl}
+                    sortProps={sortProps}
+                    pageSize={pageSize}
+                    />
+                )
+            )}
         </Fragment>
     );
 };

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

@@ -85,6 +85,8 @@ const CategoryContent = props => {
     useMemo(() => {
             items && items.map((item, index) => {
                 if (item) {
+                    let firstLetter = null;
+
                     const { custom_attributes } = item;
                     if (custom_attributes) {
                         let cardName = '';
@@ -100,13 +102,13 @@ const CategoryContent = props => {
                         });
 
                         if (cardName) {
-                            const firstLetter = cardName.charAt(0).toUpperCase();
-                            console.log(firstLetter + " dan " + activeLetter)
-                            if (activeLetter == "all" || activeLetter != "all" && firstLetter == activeLetter) {
-                                return galleryItems.push(item);
-                            }
+                            firstLetter = cardName.charAt(0).toUpperCase();
                         }
                     }
+
+                    if (activeLetter == "all" || activeLetter != "all" && firstLetter == activeLetter) {
+                        return galleryItems.push(item);
+                    }
                 }
             }),
         [items, activeLetter]

package/src/overwrites/venia-ui/lib/components/Gallery/gallery.js

@@ -26,9 +26,6 @@ const Gallery = props => {
                     return <GalleryItemShimmer key={index} />;
                 }
 
-                // const firstLetter = item.name.charAt(0).toUpperCase();
-
-                // if (activeLetter == "all" || activeLetter != "all" && firstLetter == activeLetter) {
                 return (
                     <GalleryItem
                         key={item.id}
@@ -36,7 +33,6 @@ const Gallery = props => {
                         storeConfig={storeConfig}
                     />
                 );
-                // }
             }),
         [items, storeConfig, activeLetter]
     );

package/src/talons/SubCategoryPage/subCategoryPage.gql.js

@@ -0,0 +1,36 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                url_key
+                url_path
+                children {
+                    uid
+                    name
+                    url_path
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getCategoryContentQuery: GET_CATEGORY_CONTENT
+};

package/src/talons/SubCategoryPage/useSubCategoryPage.js

@@ -0,0 +1,111 @@
+import { useQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './subCategoryPage.gql';
+
+export const useSubCategoryPage = props => {
+
+    const { searchQuery, setActive, categoryId } = props
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfigData, getCategoryContentQuery } = operations;
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const { data: categoryData, loading, error } = useQuery(
+        getCategoryContentQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !categoryId,
+            variables: {
+                id: categoryId
+            }
+        }
+    );
+
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
+    const children =
+    categoryData && categoryData.categories.items.length
+        ? categoryData.categories.items[0].children
+        : null;
+
+    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
+
+    const 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'];
+
+    const originalDataResult = useMemo(() => {
+        if (!children) {
+            return null;
+        }
+
+        const mappingData = children.reduce((acc, item) => {
+            let firstLetter = item.name.charAt(0).toUpperCase();
+            if (!alpha.includes(firstLetter)) {
+                firstLetter = '#';
+            }
+            acc[firstLetter] = acc[firstLetter] || [];
+            acc[firstLetter].push(item);
+            return acc;
+        }, {});
+
+        return mappingData;
+    }, [children, searchQuery]);
+
+    const dataResult = useMemo(() => {
+        if (!children) {
+            return null;
+        }
+        
+        if (!children) {
+            return null;
+        }
+        
+        let options = children;
+
+        if (searchQuery) {
+            setActive('all')
+            options = options.filter(function(option) {
+                return option.name.search(new RegExp(searchQuery, "i")) != -1;
+            });
+        }
+
+        const mappingData = options.reduce((acc, item) => {
+            console.log(item)
+            let firstLetter = item.name.charAt(0).toUpperCase();
+            if (!alpha.includes(firstLetter)) {
+                firstLetter = '#';
+            }
+            acc[firstLetter] = acc[firstLetter] || [];
+            acc[firstLetter].push(item);
+            return acc;
+        }, {});
+
+        return mappingData;
+    }, [children, searchQuery]);
+
+    console.log(dataResult)
+
+    const availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
+    const filteredAvailableGroups = dataResult ? Object.keys(dataResult).sort() : [];
+
+    return {
+        error,
+        loading,
+        dataResult,
+        filteredAvailableGroups,
+        categoryUrlSuffix,
+        availableGroups,
+        alpha,
+        category
+    };
+};