@riosst100/pwa-marketplace 1.6.9 → 1.7.1

package/src/overwrites/venia-ui/lib/index.module.css

@@ -0,0 +1,137 @@
+@import './tokens.module.css';
+
+:global(*) {
+    /* composes: box-border from global; */
+    box-sizing: border-box;
+}
+
+/* TODO @TW: cannot compose */
+:global(html) {
+    /* composes: text-[100%] from global; */
+    font-size: 100%;
+    /* composes: text-normal from global; */
+    font-weight: 400;
+    /* composes: leading-none from global; */
+    line-height: 1;
+    /* composes: antialiased from global; */
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+}
+
+:global(html[data-scroll-lock='true']),
+:global(html[data-scroll-lock='true'] body) {
+    height: 100%;
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+}
+
+/* TODO @TW: cannot compose */
+:global(body),
+:global(button),
+:global(input),
+:global(select),
+:global(textarea) {
+    /* composes: text-gray-900 from global; */
+    /* color: rgb(var(--venia-global-color-text)); */
+    color: rgb(23 32 38);
+}
+
+:global(body) {
+    /* composes: m-0 from global; */
+    margin: 0;
+    /* composes: p-0 from global; */
+    padding: 0;
+}
+
+:global(h1),
+:global(h2),
+:global(h3),
+:global(h4),
+:global(h5),
+:global(h6) {
+    /* composes: font-base from global; */
+    font-size: 1rem;
+    /* composes: font-normal from global; */
+    font-weight: 400;
+    /* composes: m-0 from global; */
+    margin: 0;
+}
+
+:global(h1) {
+    /* composes: text-xl from global; */
+    font-size: 1.5rem;
+}
+
+:global(h2) {
+    /* composes: text-lg from global; */
+    font-size: 1.25rem;
+}
+
+:global(a) {
+    /* composes: text-current from global; */
+    color: currentColor;
+    /* composes: no-underline from global; */
+    text-decoration: none;
+}
+
+:global(p) {
+    /* composes: m-0 from global; */
+    margin: 0;
+}
+
+:global(dl),
+:global(ol),
+:global(ul) {
+    /* composes: list-none from global; */
+    list-style-type: none;
+    /* composes: m-0 from global; */
+    margin: 0;
+    /* composes: p-0 from global; */
+    padding: 0;
+}
+
+:global(dd),
+:global(dt) {
+    /* composes: m-0 from global; */
+    margin: 0;
+}
+
+/* TODO @TW: cannot compose */
+:global(button) {
+    /* composes: bg-transparent from global; */
+    background: none;
+    /* composes: border-0 from global; */
+    border: 0;
+    /* composes: cursor-pointer from global; */
+    cursor: pointer;
+    /* composes: text-[100%] from global; */
+    font-size: 100%;
+    /* composes: p-0 from global; */
+    padding: 0;
+    touch-action: manipulation;
+    /* composes: select-none from global; */
+    user-select: none;
+    /* composes: appearance-none from global; */
+    -webkit-appearance: none;
+}
+
+:global(button:disabled) {
+    /* composes: cursor-default from global; */
+    cursor: default;
+    touch-action: none;
+}
+
+:global(.braintree-sheet__content--form
+        .braintree-form__field-group
+        .braintree-form__field
+        .braintree-form__hosted-field
+        input.braintree-form__raw-input) {
+    color: #8f8f8f !important;
+}
+
+:global(.braintree-sheet__content--form
+        .braintree-form__field-group
+        .braintree-form__descriptor) {
+    color: #757575 !important;
+}

package/src/overwrites/venia-ui/lib/tokens.module.css

@@ -0,0 +1,167 @@
+/* global tokens */
+:global(:root) {
+    /* animation */
+    --venia-global-anim-bounce: cubic-bezier(0.5, 1.8, 0.9, 0.8);
+    --venia-global-anim-in: cubic-bezier(0, 0, 0.2, 1);
+    --venia-global-anim-out: cubic-bezier(0.4, 0, 1, 1);
+    --venia-global-anim-standard: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* color */
+    --venia-global-color-blue-100: 194 200 255;
+    --venia-global-color-blue-400: 71 139 255;
+    /* --venia-global-color-blue-500: 51 109 255; */
+    /* --venia-global-color-blue-600: 41 84 255; */
+    --venia-global-color-blue-700: 31 57 255;
+    /* --venia-global-color-blue-800: 23 43 196; */
+    --venia-global-color-gray-50: 255 255 255;
+    /* --venia-global-color-gray-75: 250 250 250; */
+    --venia-global-color-gray-100: 244 245 245;
+    /* --venia-global-color-gray-200: 234 235 235; */
+    --venia-global-color-gray-300: 161 151 145;
+    --venia-global-color-gray-400: 181 184 186;
+    --venia-global-color-gray-500: 149 154 157;
+    --venia-global-color-gray-600: 118 123 127;
+    --venia-global-color-gray-700: 84 93 99;
+    /* --venia-global-color-gray-800: 51 63 71; */
+    --venia-global-color-gray-900: 23 32 38;
+    --venia-global-color-gray: var(--venia-global-color-gray-100);
+    --venia-global-color-gray-dark: var(--venia-global-color-gray-300);
+    --venia-global-color-gray-darker: var(--venia-global-color-gray-600);
+    /* --venia-global-color-green-400: 51 171 132; */
+    --venia-global-color-green-500: 45 157 120;
+    /* --venia-global-color-green-600: 38 142 108; */
+    /* --venia-global-color-green-700: 18 128 92; */
+    --venia-global-color-orange: 241 99 33;
+    --venia-global-color-red-400: 236 91 98;
+    /* --venia-global-color-red-500: 227 72 80; */
+    /* --venia-global-color-red-600: 215 55 63; */
+    --venia-global-color-red-700: 201 37 45;
+    /* --venia-global-color-red-800: 161 30 36; */
+    --venia-global-color-teal: var(--venia-global-color-blue-400);
+    /* --venia-global-color-teal-dark: var(--venia-global-color-blue-600); */
+    --venia-global-color-teal-light: var(--venia-global-color-gray-100);
+
+    /* color by semantics */
+    /* --venia-global-color-background: var(--venia-global-color-gray-50); */
+    --venia-global-color-border: var(--venia-global-color-gray-300);
+    --venia-global-color-error: var(--venia-global-color-red-700);
+    --venia-global-color-text: var(--venia-global-color-gray-900);
+    /* --venia-global-color-text-alt: var(--venia-global-color-gray-darker); */
+    --venia-global-color-text-hint: var(--venia-global-color-gray-500);
+    /* --venia-global-color-warning-dark: var(--venia-global-color-red-700); */
+    /* --venia-global-color-warning-light: var(--venia-global-color-gray-100); */
+
+    /* font family */
+    /* --venia-global-fontFamily-sansSerif: 'Muli', sans-serif; */
+    /* --venia-global-fontFamily-serif: 'Source Serif Pro', serif; */
+
+    /* font size */
+    /* --venia-global-fontSize-50: 0.6875rem; */
+    /* 11px */
+    /* --venia-global-fontSize-75: 0.75rem; */
+    /* 12px */
+    /* --venia-global-fontSize-100: 0.875rem; */
+    /* 14px */
+    /* --venia-global-fontSize-200: 1rem; */
+    /* 16px */
+    /* --venia-global-fontSize-300: 1.125rem; */
+    /* 18px */
+    /* --venia-global-fontSize-400: 1.25rem; */
+    /* 20px */
+    /* --venia-global-fontSize-500: 1.375rem; */
+    /* 22px */
+    /* --venia-global-fontSize-600: 1.5rem; */
+    /* 24px */
+    /* --venia-global-fontSize-700: 1.75rem; */
+    /* 28px */
+    /* --venia-global-fontSize-800: 2rem; */
+    /* 32px */
+    /* --venia-global-fontSize-900: 2.25rem; */
+    /* 36px */
+    /* --venia-global-fontSize-1000: 2.5rem; */
+    /* 40px */
+    /* --venia-global-fontSize-1100: 3rem; */
+    /* 48px */
+    /* --venia-global-fontSize-1200: 3.5rem; */
+    /* 56px */
+
+    /* font weight */
+    /* --venia-global-fontWeight-normal: 400; */
+    /* --venia-global-fontWeight-semibold: 600; */
+    /* --venia-global-fontWeight-bold: 700; */
+
+    /* line height */
+    /* --venia-global-lineHeight-100: 1; */
+    /* --venia-global-lineHeight-200: 1.25; */
+    /* --venia-global-lineHeight-300: 1.5; */
+    /* --venia-global-lineHeight-400: 1.75; */
+    /* --venia-global-lineHeight-500: 2; */
+
+    /* dimensions */
+    --venia-global-maxWidth: 1180px;
+    --venia-global-header-minHeight: 5rem;
+}
+
+@media (max-width: 959px) {
+    :global(:root) {
+        --venia-global-header-minHeight: 3.5rem;
+    }
+}
+
+/* alias tokens */
+:global(:root) {
+    /* colors */
+    --venia-brand-color-1-100: var(--venia-global-color-blue-100);
+    /* --venia-brand-color-1-400: var(--venia-global-color-blue-400); */
+    /* --venia-brand-color-1-500: var(--venia-global-color-blue-500); */
+    /* --venia-brand-color-1-600: var(--venia-global-color-blue-600); */
+    --venia-brand-color-1-700: var(--venia-global-color-blue-700);
+    /* --venia-brand-color-1-800: var(--venia-global-color-blue-800); */
+
+    /* typography - heading */
+    /*
+    --venia-global-typography-heading-XL-fontSize: var(
+        --venia-global-fontSize-600
+    );
+    --venia-global-typography-heading-L-fontSize: var(
+        --venia-global-fontSize-400
+    );
+    --venia-global-typography-heading-M-fontSize: var(
+        --venia-global-fontSize-300
+    );
+    --venia-global-typography-heading-S-fontSize: var(
+        --venia-global-fontSize-200
+    );
+    --venia-global-typography-heading-XS-fontSize: var(
+        --venia-global-fontSize-100
+    );
+    --venia-global-typography-heading-lineHeight: calc(
+        var(--venia-global-lineHeight-200) * 1em
+    );
+    */
+
+    /* typography - body */
+    /* --venia-typography-body-XXXL-fontSize: var(--venia-global-fontSize-600); */
+    /* --venia-typography-body-XXL-fontSize: var(--venia-global-fontSize-500); */
+    /* --venia-typography-body-XL-fontSize: var(--venia-global-fontSize-400); */
+    /* --venia-typography-body-L-fontSize: var(--venia-global-fontSize-300); */
+    /* --venia-typography-body-M-fontSize: var(--venia-global-fontSize-200); */
+    /* --venia-typography-body-S-fontSize: var(--venia-global-fontSize-100); */
+    /* --venia-typography-body-XS-fontSize: var(--venia-global-fontSize-50); */
+    /*
+    --venia-typography-body-lineHeight: calc(
+        var(--venia-global-lineHeight-300) * 1em
+    );
+    */
+
+    /* typography - detail */
+    /*
+    --venia-typography-detail-XL-fontSize: var(--venia-global-fontSize-200);
+    --venia-typography-detail-L-fontSize: var(--venia-global-fontSize-100);
+    --venia-typography-detail-M-fontSize: var(--venia-global-fontSize-75);
+    --venia-typography-detail-S-fontSize: var(--venia-global-fontSize-50);
+    --venia-typography-detail-lineHeight: calc(
+        var(--venia-global-lineHeight-200) * 1em
+    );
+    */
+}

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

@@ -27,7 +27,21 @@ export const GET_COLLECTIBLE_GAME_QUERY = gql`
     }
 `;
 
+export const GET_SPORT_CARDS_SETS_QUERY = gql`
+    query getSportCardsSets($categoryUrlKey: String!, $setType: String) {
+        sportCardsSets(categoryUrlKey: $categoryUrlKey, setType: $setType) {
+            group
+            sets {
+                set_name
+                option_id
+                release_year
+            }
+        }
+    }
+`;
+
 export default {
     getStoreConfigData: GET_STORE_CONFIG_DATA,
-    getCollectibleGameQuery: GET_COLLECTIBLE_GAME_QUERY
+    getCollectibleGameQuery: GET_COLLECTIBLE_GAME_QUERY,
+    getSportCardsSetsQuery: GET_SPORT_CARDS_SETS_QUERY
 };

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -27,8 +27,6 @@ export const useCollectibleGameSets = props => {
         nextFetchPolicy: 'cache-first'
     });
 
-    // console.log(sortby)
-
     const pathnameArr = pathname.split('/');
 
     const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
@@ -58,8 +56,6 @@ export const useCollectibleGameSets = props => {
             return null;
         }
 
-        // console.log(sortby)
-
         const sortbyData = [];
         if (sortby != 'all') {
             collectibleGameSets.map((setRelease, index) => {
@@ -71,7 +67,6 @@ export const useCollectibleGameSets = props => {
                             // groupingSetsByYear.splice(release_year, 0, set);
                             const result = sortbyData.find(item => item.release_type === release_year);
 
-                            // console.log(result)
                             // groupingSetsByYear[release_year] = set;
                             if (result) {
                                 result.sets.push(set)
@@ -94,8 +89,6 @@ export const useCollectibleGameSets = props => {
 
     const availableGroups = collectibleGameSets && collectibleGameSets.length ? collectibleGameSets.map(({ release_type }) => release_type) : [];
 
-    // console.log(collectibleGameSets)
-
     const filteredCollectibleGameSets = useMemo(() => {
         if (!collectibleGameSets) {
             return null;
@@ -108,8 +101,6 @@ export const useCollectibleGameSets = props => {
             setActive('all')
 
             collectibleGameSets.map(({ release_type, sets }, index) => {
-
-                // console.log(sets)
                 const newSets = sets.filter(function(set) {
                     return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || set.set_abbreviation.search(new RegExp(searchQuery, "i")) != -1 || release_type.search(new RegExp(searchQuery, "i")) != -1;
                     // return set.set_name.includes(searchQuery);
@@ -122,8 +113,6 @@ export const useCollectibleGameSets = props => {
                     })
                 }
             })
-
-            // console.log(filteredSets)
         }
 
         return searchQuery ? filteredSets : collectibleGameSets;

package/src/talons/FilterTop/useFilterTop.js

@@ -98,8 +98,6 @@ export const useFilterTop = props => {
         return disabled;
     }, [pathname]);
 
-    // console.log(introspectionData)
-
     // 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.

package/src/talons/ShopBy/useShopBy.js

@@ -27,10 +27,6 @@ export const useShopBy = props => {
         nextFetchPolicy: 'cache-first'
     });
 
-    
-
-    // // console.log(sortby)
-
     const pathnameArr = pathname.split('/');
     
     const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
@@ -55,20 +51,15 @@ export const useShopBy = props => {
         if (!data) {
             return null;
         }
-
-        // console.log(data)
         
         const rawData = data.shopByData;
         if (!rawData) {
             return null;
         }
-
-        // console.log(rawData)
         
         let options = rawData[0].options;
 
         const mappingData = options.reduce((acc, item) => {
-            // console.log(item)
             let firstLetter = item.label.charAt(0).toUpperCase();
             if (!alpha.includes(firstLetter)) {
                 firstLetter = '#';
@@ -78,10 +69,6 @@ export const useShopBy = props => {
             return acc;
         }, {});
 
-        
-
-        // console.log(mappingData)
-
         const sortbyData = [];
 
         return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : mappingData;
@@ -91,15 +78,11 @@ export const useShopBy = props => {
         if (!data) {
             return null;
         }
-
-        // console.log(data)
         
         const rawData = data.shopByData;
         if (!rawData) {
             return null;
         }
-
-        // console.log(rawData)
         
         let options = rawData[0].options;
 
@@ -111,7 +94,6 @@ export const useShopBy = props => {
         }
 
         const mappingData = options.reduce((acc, item) => {
-            // console.log(item)
             let firstLetter = item.label.charAt(0).toUpperCase();
             if (!alpha.includes(firstLetter)) {
                 firstLetter = '#';
@@ -121,10 +103,6 @@ export const useShopBy = props => {
             return acc;
         }, {});
 
-        
-
-        // console.log(mappingData)
-
         const sortbyData = [];
 
         return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : mappingData;

package/src/talons/SportCardsSets/sportCardsSets.gql.js

@@ -0,0 +1,46 @@
+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_SPORT_CARDS_SETS_QUERY = gql`
+    query getSportCardsSets($categoryUrlKey: String!, $setType: String) {
+        sportCardsSets(categoryUrlKey: $categoryUrlKey, setType: $setType) {
+            group
+            sets {
+                set_name
+                option_id
+                release_year
+                sc_league
+            }
+        }
+    }
+`;
+
+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 default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getSportCardsSetsQuery: GET_SPORT_CARDS_SETS_QUERY,
+    getCategoryContentQuery: GET_CATEGORY_CONTENT
+};

package/src/talons/SportCardsSets/useSportCardsSets.js

@@ -0,0 +1,170 @@
+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 './sportCardsSets.gql';
+
+export const useSportCardsSets = props => {
+
+    const { searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab } = props
+
+    const { value: sortby } = currentSort
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfigData, getSportCardsSetsQuery, getCategoryContentQuery } = operations;
+    const { pathname } = useLocation();
+    const [
+        ,
+        {
+            actions: { setPageLoading }
+        }
+    ] = useAppContext();
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        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 categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
+
+    const { error, loading, data } = useQuery(getSportCardsSetsQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !storeConfigData,
+        variables: {
+            categoryUrlKey: categoryUrlKey,
+            setType: setType
+        }
+    });
+
+    // console.log(data)
+
+    const isBackgroundLoading = !!data && loading;
+
+    const availableLeagues = [];
+
+    const sportCardsSets = useMemo(() => {
+        if (!data) {
+            return null;
+        }
+        
+        const sportCardsSets = data.sportCardsSets;
+        if (!sportCardsSets) {
+            return null;
+        }
+
+        const sortbyData = [];
+        // if (activeTab == 'year') {
+
+        //     console.log(activeTab)
+            sportCardsSets.map((setRelease, index) => {
+                const { group, sets } = setRelease;
+                if (sets.length) {
+                    sets.map((set, index) => {
+                        const { release_year, sc_league } = set;
+                        if (sc_league) {
+                            if (!availableLeagues.includes(sc_league)) {
+                                availableLeagues.push(sc_league);
+                            }
+                        }
+                        // if (release_year) {
+                        //     // groupingSetsByYear.splice(release_year, 0, set);
+                        //     const result = sortbyData.find(item => item.group === release_year);
+
+                        //     // groupingSetsByYear[release_year] = set;
+                        //     if (result) {
+                        //         result.sets.push(set)
+                        //     } else {
+                        //         // if (sortby == "date" || sortby == "newest" && sortbyData.length < 2) {
+                        //             sortbyData.push({
+                        //                 'group': release_year,
+                        //                 'sets': [set]
+                        //             })
+                        //         // }
+                        //     }
+                        // }
+                    })
+                }
+            })
+        // }
+
+        return activeTab == "year" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.group.toLowerCase().localeCompare(a.group.toLowerCase())) : sortbyData : sportCardsSets.slice().sort((a, b) => a.group.toLowerCase().localeCompare(b.group.toLowerCase()));
+    }, [data, activeTab]);
+
+    const availableGroups = sportCardsSets && sportCardsSets.length ? sportCardsSets.map(({ group }) => group) : [];
+
+    // const availableLeagues = sportCardsSets && sportCardsSets.length ? sportCardsSets.map(({ sets }) => sportCardsSets.map(({ sc_league }) => sc_league)) : [];
+// console.log(availableLeagues)
+    // sc_league
+
+    const filteredsportCardsSets = useMemo(() => {
+        if (!sportCardsSets) {
+            return null;
+        }
+
+        const filteredSets = [];
+
+        if (searchQuery) {
+
+            setActive('all')
+
+            sportCardsSets.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 : sportCardsSets;
+    }, [sportCardsSets, searchQuery, sortby]);
+
+    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;
+
+    return {
+        error,
+        loading,
+        sportCardsSets,
+        filteredsportCardsSets,
+        categoryUrlSuffix,
+        categoryUrlKey,
+        productType,
+        availableGroups,
+        category,
+        // availableLeagues
+    };
+};

package/src/talons/SubCategoryPage/useSubCategoryPage.js

@@ -80,7 +80,6 @@ export const useSubCategoryPage = props => {
         }
 
         const mappingData = options.reduce((acc, item) => {
-            console.log(item)
             let firstLetter = item.name.charAt(0).toUpperCase();
             if (!alpha.includes(firstLetter)) {
                 firstLetter = '#';
@@ -93,8 +92,6 @@ export const useSubCategoryPage = props => {
         return mappingData;
     }, [children, searchQuery]);
 
-    console.log(dataResult)
-
     const availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
     const filteredAvailableGroups = dataResult ? Object.keys(dataResult).sort() : [];