@riosst100/pwa-marketplace 2.0.8 → 2.0.9

package/src/talons/FilterTop/useFilterTop.js

@@ -1,312 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-
-import { useAppContext } from '@magento/peregrine/lib/context/app';
-
-import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
-import { useFilterState } from '@magento/peregrine/lib/talons/FilterModal';
-import { useLazyQuery, useQuery } from '@apollo/client';
-
-import {
-    getFiltersFromSearch,
-    getFilterInput,
-    getSearchFromState,
-    getStateFromSearch,
-    sortFiltersArray,
-    stripHtml
-} from '@magento/peregrine/lib/talons/FilterModal/helpers';
-
-import DEFAULT_OPERATIONS from './filterTop.gql';
-
-const DRAWER_NAME = 'filter';
-
-export const useFilterTop = props => {
-    const { filters, category, shopby, filterBy, setFilterBy } = props;
-
-    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getFilterInputsQuery, getCustomFilters } = operations;
-
-    const [runQuery, queryResponse] = useLazyQuery(getCustomFilters, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
-    });
-
-    const [isApplying, setIsApplying] = useState(false);
-    const [{ drawer }, { toggleDrawer, closeDrawer }] = useAppContext();
-    const [filterState, filterApi] = useFilterState();
-    const prevDrawer = useRef(null);
-    const isOpen = drawer === DRAWER_NAME;
-
-    const history = useHistory();
-    const { pathname, search } = useLocation();
-
-    const pathnameArr = pathname.split('/');
-
-    // const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
-
-    const { data: introspectionData } = useQuery(getFilterInputsQuery);
-
-    const filterTypeMap = useMemo(() => {
-        const typeMap = new Map();
-        if (introspectionData) {
-            introspectionData.__type.inputFields.forEach(({ name, type }) => {
-                typeMap.set(name, type.name);
-            });
-        }
-        return typeMap;
-    }, [introspectionData]);
-
-    useEffect(() => {
-
-        if (!filterTypeMap.size) {
-            return;
-        }
-
-        const filters = getFiltersFromSearch(search);
-
-        // Construct the filter arg object.
-        const newFilters = {};
-        filters.forEach((values, key) => {
-            newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
-        });
-
-        // Use the category uid for the current category page regardless of the
-        // applied filters. Follow-up in PWA-404.
-        // newFilters['category_uid'] = { eq: id };
-
-        runQuery({
-            variables: {
-                filters: newFilters,
-                category: category?.url_path,
-                shopby: shopby,
-                filterBy: filterBy,
-                search: search
-            }
-        });
-    }, [
-        runQuery,
-        filterTypeMap,
-        search,
-        category,
-        filterBy
-    ]);
-
-    const attributeCodes = useMemo(
-        () => filters.map(({ attribute_code }) => attribute_code),
-        [filters]
-    );
-
-    // Create a set of disabled filters.
-    const DISABLED_FILTERS = useMemo(() => {
-        const disabled = new Set();
-        // Disable category filtering when not on a search page.
-        if (pathname !== '/search.html') {
-            // disabled.add('category_id');
-            // disabled.add('category_uid');
-        }
-
-        return disabled;
-    }, [pathname]);
-
-    // Get "allowed" filters by intersection of filter attribute codes and
-    // schema input field types. This restricts the displayed filters to those
-    // that the api will understand.
-    const possibleFilters = useMemo(() => {
-        const nextFilters = new Set();
-        const inputFields = introspectionData
-            ? introspectionData.__type.inputFields
-            : [];
-
-        // perform mapping and filtering in the same cycle
-        for (const { name } of inputFields) {
-            const isValid = attributeCodes.includes(name);
-            const isEnabled = !DISABLED_FILTERS.has(name);
-
-            if (isValid && isEnabled) {
-                nextFilters.add(name);
-            }
-        }
-
-        nextFilters.add('card_print_version');
-
-        return nextFilters;
-    }, [DISABLED_FILTERS, attributeCodes, introspectionData]);
-
-    const isBooleanFilter = options => {
-        const optionsString = JSON.stringify(options);
-        return (
-            options.length <= 2 &&
-            (optionsString.includes(
-                JSON.stringify({
-                    __typename: 'AggregationOption',
-                    label: '0',
-                    value: '0'
-                })
-            ) ||
-                optionsString.includes(
-                    JSON.stringify({
-                        __typename: 'AggregationOption',
-                        label: '1',
-                        value: '1'
-                    })
-                ))
-        );
-    };
-
-    const {
-        called: called,
-        loading: customFiltersLoading,
-        error,
-        data
-    } = queryResponse;
-
-    const customFiltersData = customFiltersLoading && !data ? null : (data ? data.customSubFilters : null);
-
-    // useEffect(() => {
-    //     if (data) {
-    //         filters.concat(customFiltersData);
-    //     }
-    // }, [customFiltersData])
-
-    // const customFilters = [];
-
-    // iterate over filters once to set up all the collections we need
-    const [
-        filterNames,
-        filterKeys,
-        filterItems,
-        filterFrontendInput,
-        customFilters
-    ] = useMemo(() => {
-        const names = new Map();
-        const keys = new Set();
-        const frontendInput = new Map();
-        const itemsByGroup = new Map();
-        const customFiltersMap = [];
-        
-        if (customFiltersData) {
-            customFiltersData.map(({ attribute_code, options }, index) => {
-
-                customFiltersMap.push(attribute_code)
-                
-
-                const items = [];
-
-                names.set(attribute_code, '');
-                frontendInput.set(attribute_code, null);
-
-                // add filter key permutations
-                keys.add(`${attribute_code}[filter]`);
-
-                // add items
-                for (const { label, value, path } of options) {
-                    items.push({ title: stripHtml(label), value, path });
-                }
-
-                itemsByGroup.set(attribute_code, items);
-            })
-        }
-
-        return [names, keys, itemsByGroup, frontendInput, customFiltersMap];
-    }, [filters, customFiltersData, possibleFilters]);
-
-    // on apply, write filter state to location
-    useEffect(() => {
-        if (isApplying) {
-            const nextSearch = getSearchFromState(
-                search,
-                filterKeys,
-                filterState
-            );
-
-            // write filter state to history
-            history.push({ pathname, search: nextSearch });
-
-            // mark the operation as complete
-            setIsApplying(false);
-        }
-    }, [filterKeys, filterState, history, isApplying, pathname, search]);
-
-    const handleOpen = useCallback(() => {
-        toggleDrawer(DRAWER_NAME);
-    }, [toggleDrawer]);
-
-    const handleClose = useCallback(() => {
-        closeDrawer();
-    }, [closeDrawer]);
-
-    const handleApply = useCallback(() => {
-        setIsApplying(true);
-        handleClose();
-    }, [handleClose]);
-
-    const handleReset = useCallback(() => {
-        filterApi.clear();
-        setIsApplying(true);
-    }, [filterApi, setIsApplying]);
-
-    const handleKeyDownActions = useCallback(
-        event => {
-            // do not handle keyboard actions when the modal is closed
-            if (!isOpen) {
-                return;
-            }
-
-            switch (event.keyCode) {
-                // when "Esc" key fired -> close the modal
-                case 27:
-                    handleClose();
-                    break;
-            }
-        },
-        [isOpen, handleClose]
-    );
-
-    useEffect(() => {
-        const justOpened =
-            prevDrawer.current === null && drawer === DRAWER_NAME;
-        const justClosed =
-            prevDrawer.current === DRAWER_NAME && drawer === null;
-
-        // on drawer toggle, read filter state from location
-        if (justOpened || justClosed) {
-            const nextState = getStateFromSearch(
-                search,
-                filterKeys,
-                filterItems
-            );
-
-            filterApi.setItems(nextState);
-        }
-
-        // on drawer close, update the modal visibility state
-        if (justClosed) {
-            handleClose();
-        }
-
-        prevDrawer.current = drawer;
-    }, [drawer, filterApi, filterItems, filterKeys, search, handleClose]);
-
-    useEffect(() => {
-        const nextState = getStateFromSearch(search, filterKeys, filterItems);
-
-        filterApi.setItems(nextState);
-    }, [filterApi, filterItems, filterKeys, search]);
-
-    return {
-        filterApi,
-        filterItems,
-        filterKeys,
-        filterNames,
-        filterFrontendInput,
-        filterState,
-        handleApply,
-        handleClose,
-        handleKeyDownActions,
-        handleOpen,
-        handleReset,
-        isApplying,
-        isOpen,
-        customFilters
-    };
-};

package/src/talons/Header/logo.gql.js

@@ -1,19 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const getStoreConfig = gql`
-    query {
-        storeConfig {
-            header_logo_src
-            base_url
-            store_code
-            base_media_url
-            logo_width
-            logo_height
-            logo_alt
-        }
-    }
-`;
-
-export default {
-    getStoreConfig,
-};

package/src/talons/Header/useLogo.js

@@ -1,19 +0,0 @@
-import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
-import DEFAULT_OPERATIONS from './logo.gql';
-import { useQuery } from '@apollo/client';
-
-export const useLogo = props => {
-
-    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
-    const { getStoreConfig } = operations;
-    const { data, loading, error } = useQuery(getStoreConfig, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
-    });
-
-    return {
-        error,
-        data,
-        loading
-    };
-};

package/src/talons/LegoSets/legoSets.gql.js

@@ -1,59 +0,0 @@
-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_LEGO_SETS_QUERY = gql`
-    query getLegoSets($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String, $activeFilter: String) {
-        legoSets(categoryUrlKey: $categoryUrlKey, activeTab: $activeTab, filters: $filters, shopby: $shopby, activeFilter: $activeFilter) {
-            group
-            sets {
-                set_name
-                option_id
-                release_year
-            }
-        }
-    }
-`;
-
-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
-            }
-        }
-    }
-`;
-
-export const GET_FILTER_INPUTS = gql`
-    query GetFilterInputsForCategory {
-        __type(name: "ProductAttributeFilterInput") {
-            inputFields {
-                name
-                type {
-                    name
-                }
-            }
-        }
-    }
-`;
-
-export default {
-    getStoreConfigData: GET_STORE_CONFIG_DATA,
-    getLegoSetsQuery: GET_LEGO_SETS_QUERY,
-    getCategoryContentQuery: GET_CATEGORY_CONTENT,
-    getFilterInputsQuery: GET_FILTER_INPUTS,
-};

package/src/talons/LegoSets/useLegoSets.js

@@ -1,222 +0,0 @@
-import { useQuery, useLazyQuery } 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 './legoSets.gql';
-import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
-
-export const useLegoSets = props => {
-
-    const { searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter } = props
-
-    const { value: sortby } = currentSort
-
-    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
-    const { getStoreConfigData, getLegoSetsQuery, getCategoryContentQuery, getFilterInputsQuery } = operations;
-    const { pathname, search } = useLocation();
-    const [runQuery, queryResponse] = useLazyQuery(getLegoSetsQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
-    });
-
-    const pathnameArr = pathname.split('/');
-
-    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
-    const parentCategoryUrlKey = pathnameArr[pathnameArr.length - 2].replace('.html','');
-    const productType = shopby;
-    
-    
-
-    // const { error, loading, data } = useQuery(getLegoSetsQuery, {
-    //     fetchPolicy: 'cache-and-network',
-    //     nextFetchPolicy: 'cache-first',
-    //     skip: !storeConfigData,
-    //     variables: {
-    //         categoryUrlKey: categoryUrlKey,
-    //         setType: setType
-    //     }
-    // });
-    const { data: introspectionData } = useQuery(getFilterInputsQuery);
-
-    const filterTypeMap = useMemo(() => {
-        const typeMap = new Map();
-        if (introspectionData) {
-            introspectionData.__type.inputFields.forEach(({ name, type }) => {
-                typeMap.set(name, type.name);
-            });
-        }
-        return typeMap;
-    }, [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
-                        }
-                    )
-                }   
-            }
-        }
-    });
-
-    useEffect(() => {
-        // console.log("MASUK")
-
-        // if (queryResponse.data) {
-
-        
-
-        // Use the category uid for the current category page regardless of the
-        // applied filters. Follow-up in PWA-404.
-        // newFilters['category_uid'] = { eq: id };
-
-        runQuery({
-            variables: {
-                filters: newFilters,
-                categoryUrlKey: categoryUrlKey,
-                activeTab: activeTab,
-                shopby: shopby,
-                activeFilter: activeFilter
-            }
-        });
-    // }
-    }, [
-        runQuery,
-        activeTab,
-        activeFilter
-        // queryResponse
-        // filterTypeMap,
-        // search,
-        // newFilters,
-        // shopby,
-        // categoryUrlKey
-    ]);
-
-    const { data: storeConfigData } = useQuery(getStoreConfigData, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
-    });
-
-    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
-
-    // { data: queryResponse, error, loading }
-
-    
-
-    // console.log(data)
-
-    // const isBackgroundLoading = !!data && loading;
-
-    const availableLeagues = [];
-
-    // console.log(queryResponse.data)
-
-    const legoSets = useMemo(() => {
-        if (!queryResponse) {
-            return null;
-        }
-
-        // console.log(data)
-        
-        const legoSets = queryResponse?.data?.legoSets;
-        if (!legoSets) {
-            return null;
-        }
-
-        return legoSets.slice().sort((a, b) =>a.group.toLowerCase().localeCompare(b.group.toLowerCase()));
-    }, [queryResponse]);
-
-    const availableGroups = legoSets && legoSets.length ? legoSets.map(({ group }) => group) : [];
-
-    // const availableLeagues = legoSets && legoSets.length ? legoSets.map(({ sets }) => legoSets.map(({ sc_league }) => sc_league)) : [];
-// console.log(availableLeagues)
-    // sc_league
-
-    const filteredLegoSets = useMemo(() => {
-        if (!legoSets) {
-            return null;
-        }
-
-        const filteredSets = [];
-
-        if (searchQuery) {
-
-            // useEffect(() => {
-            //     setActive('all')
-            // }, [active]);
-
-            legoSets.map(({ group, sets }, index) => {
-                const newSets = sets.filter(function(set) {
-                    return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || group.search(new RegExp(searchQuery, "i")) != -1;
-                    // return set.set_name.includes(searchQuery);
-                });
-
-                if (newSets && newSets.length) {
-                    filteredSets.push({
-                        'group': group,
-                        'sets': newSets
-                    })
-                }
-            })
-        }
-
-        return searchQuery ? filteredSets : legoSets;
-    }, [legoSets, searchQuery]);
-
-    // useEffect(() => {
-    //     setPageLoading(isBackgroundLoading);
-    // }, [isBackgroundLoading, setPageLoading]);
-
-    const { data: categoryData, loading: categoryLoading } = 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 error = queryResponse?.error;
-    const loading = queryResponse?.loading;
-
-    // console.log(legoSets)
-
-    return {
-        error,
-        loading,
-        legoSets,
-        filteredLegoSets,
-        categoryUrlSuffix,
-        categoryUrlKey,
-        productType,
-        availableGroups,
-        category,
-        // availableLeagues
-    };
-};

package/src/talons/MegaMenu/megaMenu.gql.js

@@ -1,70 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_STORE_CONFIG_DATA = gql`
-    query GetStoreConfigForMegaMenu {
-        # eslint-disable-next-line @graphql-eslint/require-id-when-available
-        storeConfig {
-            store_code
-            category_url_suffix
-        }
-    }
-`;
-
-export const GET_MEGA_MENU = gql`
-    query getMegaMenu {
-        # eslint-disable-next-line @graphql-eslint/require-id-when-available
-        categoryList {
-            uid
-            name
-            # eslint-disable-next-line @graphql-eslint/require-id-when-available
-            children {
-                uid
-                include_in_menu
-                name
-                position
-                url_path
-                shop_by {
-                    name
-                    items {
-                        name
-                        url_path
-                    }
-                }
-                # eslint-disable-next-line @graphql-eslint/require-id-when-available
-                children {
-                    uid
-                    include_in_menu
-                    name
-                    position
-                    url_path
-                    shop_by {
-                        name
-                        items {
-                            name
-                            url_path
-                        }
-                    }
-                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
-                    children {
-                        uid
-                        include_in_menu
-                        name
-                        position
-                        url_path
-                        shop_by {
-                            name
-                            items {
-                                name
-                                url_path
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-`;
-
-export default {
-    getMegaMenuQuery: GET_MEGA_MENU,
-    getStoreConfigQuery: GET_STORE_CONFIG_DATA
-};