PR FIX 2

Joystream · Oct 6, 2022 · 365db54 · 365db54
1 parent 5d8869f
commit 365db54
Show file tree

Hide file tree

Showing 11 changed files with 133 additions and 144 deletions.
diff --git a/packages/atlas/src/api/hooks/categories.ts b/packages/atlas/src/api/hooks/categories.ts
@@ -11,10 +11,8 @@ export const useQnCategories = (
   opts?: QueryHookOptions<GetVideoCategoriesQuery, GetVideoCategoriesQueryVariables>
 ) => {
   const { data, ...rest } = useGetVideoCategoriesQuery({ ...opts, variables })
-  const totalVideosCount = data?.videoCategories.reduce((acc, cur) => acc + cur.activeVideosCounter, 0)
   return {
     categories: data?.videoCategories,
-    totalVideosCount,
     ...rest,
   }
 }
diff --git a/packages/atlas/src/components/FiltersBar/FiltersBar.tsx b/packages/atlas/src/components/FiltersBar/FiltersBar.tsx
@@ -1,8 +1,8 @@
 import { add } from 'date-fns'
+import { concat, intersection } from 'lodash-es'
 import { FC, ReactNode, useMemo, useRef } from 'react'
 import { CSSTransition } from 'react-transition-group'
 
-import { useQnCategories } from '@/api/hooks/categories'
 import { Text } from '@/components/Text'
 import { Button } from '@/components/_buttons/Button'
 import { SvgActionClose } from '@/components/_icons'
@@ -13,6 +13,7 @@ import { DialogModal, DialogModalProps } from '@/components/_overlays/DialogModa
 import { DialogPopover } from '@/components/_overlays/DialogPopover'
 import { PopoverImperativeHandle } from '@/components/_overlays/Popover'
 import { atlasConfig } from '@/config'
+import { displayCategories } from '@/config/categories'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { transitions } from '@/styles'
 
@@ -96,7 +97,6 @@ export const FiltersBar: FC<ReturnType<typeof useFiltersBar> & FiltersBarProps>
   const datePopoverRef = useRef<PopoverImperativeHandle>(null)
   const lengthPopoverRef = useRef<PopoverImperativeHandle>(null)
   const othersPopoverRef = useRef<PopoverImperativeHandle>(null)
-  const { categories } = useQnCategories()
   const nftStatusInputs = useMemo(
     () => (
       <FilterContentContainer>
@@ -121,8 +121,8 @@ export const FiltersBar: FC<ReturnType<typeof useFiltersBar> & FiltersBarProps>
   const categoriesInputs = useMemo(
     () => (
       <FilterContentContainer>
-        {categories &&
-          categories.map((category) => (
+        {displayCategories &&
+          displayCategories.map((category) => (
             <Checkbox
               name="category-filter"
               label={category.name as string}
@@ -137,7 +137,7 @@ export const FiltersBar: FC<ReturnType<typeof useFiltersBar> & FiltersBarProps>
           ))}
       </FilterContentContainer>
     ),
-    [categories, categoriesFilter, setCategoriesFilter]
+    [categoriesFilter, setCategoriesFilter]
   )
 
   const dateUploadedInputs = useMemo(
@@ -226,13 +226,13 @@ export const FiltersBar: FC<ReturnType<typeof useFiltersBar> & FiltersBarProps>
           onChange={setExcludePaidPromotionalMaterialFilter}
           name="other-filters"
           label="Paid promotional material"
-          value={!!excludePaidPromotionalMaterialFilter}
+          value={excludePaidPromotionalMaterialFilter}
         />
         <Checkbox
           onChange={setExcludeMatureContentRatingFilter}
           name="other-filters"
           label="Mature content rating"
-          value={!!excludeMatureContentRatingFilter}
+          value={excludeMatureContentRatingFilter}
         />
       </FilterContentContainer>
     ),
@@ -244,6 +244,50 @@ export const FiltersBar: FC<ReturnType<typeof useFiltersBar> & FiltersBarProps>
     ]
   )
 
+  const handleSetOwnedNftWhereInput = () => {
+    setOwnedNftWhereInput((value) => {
+      return {
+        ...value,
+        OR: [
+          nftStatusFilter?.includes('AuctionTypeEnglish')
+            ? {
+                transactionalStatusAuction: {
+                  auctionType_json: { isTypeOf_eq: 'AuctionTypeEnglish' },
+                },
+              }
+            : {},
+          nftStatusFilter?.includes('AuctionTypeOpen')
+            ? {
+                transactionalStatusAuction: {
+                  auctionType_json: { isTypeOf_eq: 'AuctionTypeOpen' },
+                },
+              }
+            : {},
+          nftStatusFilter?.includes('TransactionalStatusBuyNow')
+            ? {
+                transactionalStatus_json: { isTypeOf_eq: 'TransactionalStatusBuyNow' },
+              }
+            : {},
+          nftStatusFilter?.includes('TransactionalStatusIdle')
+            ? {
+                transactionalStatus_json: { isTypeOf_eq: 'TransactionalStatusIdle' },
+              }
+            : {},
+        ],
+      }
+    })
+  }
+
+  const mappedUniqueCategories = categoriesFilter
+    ? intersection(
+        concat(
+          ...displayCategories
+            .filter(({ id }) => categoriesFilter.includes(id))
+            .map((category) => category.videoCategories)
+        )
+      )
+    : undefined
+
   if (betweenBaseAndSMMatch) {
     return (
       <MobileFilterDialog
@@ -274,7 +318,7 @@ export const FiltersBar: FC<ReturnType<typeof useFiltersBar> & FiltersBarProps>
                 {nftStatusInputs}
               </MobileFilterContainer>
             )}
-            {categories && activeFilters.includes('categories') && (
+            {activeFilters.includes('categories') && (
               <MobileFilterContainer>
                 <Text as="span" color="colorText" variant="h100">
                   Categories
@@ -331,7 +375,7 @@ export const FiltersBar: FC<ReturnType<typeof useFiltersBar> & FiltersBarProps>
               isExplicit_eq: excludeMatureContentRatingFilter ? !excludeMatureContentRatingFilter : undefined,
               category: categoriesFilter
                 ? {
-                    id_in: categoriesFilter,
+                    id_in: mappedUniqueCategories,
                   }
                 : undefined,
               language:
@@ -342,37 +386,7 @@ export const FiltersBar: FC<ReturnType<typeof useFiltersBar> & FiltersBarProps>
                   : undefined,
               ...getDurationRules(),
             }))
-            setOwnedNftWhereInput((value) => {
-              return {
-                ...value,
-                OR: [
-                  nftStatusFilter?.includes('AuctionTypeEnglish')
-                    ? {
-                        transactionalStatusAuction: {
-                          auctionType_json: { isTypeOf_eq: 'AuctionTypeEnglish' },
-                        },
-                      }
-                    : {},
-                  nftStatusFilter?.includes('AuctionTypeOpen')
-                    ? {
-                        transactionalStatusAuction: {
-                          auctionType_json: { isTypeOf_eq: 'AuctionTypeOpen' },
-                        },
-                      }
-                    : {},
-                  nftStatusFilter?.includes('TransactionalStatusBuyNow')
-                    ? {
-                        transactionalStatus_json: { isTypeOf_eq: 'TransactionalStatusBuyNow' },
-                      }
-                    : {},
-                  nftStatusFilter?.includes('TransactionalStatusIdle')
-                    ? {
-                        transactionalStatus_json: { isTypeOf_eq: 'TransactionalStatusIdle' },
-                      }
-                    : {},
-                ],
-              }
-            })
+            handleSetOwnedNftWhereInput()
             setIsFiltersOpen(false)
           },
         }}
@@ -411,37 +425,7 @@ export const FiltersBar: FC<ReturnType<typeof useFiltersBar> & FiltersBarProps>
                 disabled: !nftStatusFilter && !canClearNftStatusFilter,
                 onClick: () => {
                   categoriesPopoverRef.current?.hide()
-                  setOwnedNftWhereInput((value) => {
-                    return {
-                      ...value,
-                      OR: [
-                        nftStatusFilter?.includes('AuctionTypeEnglish')
-                          ? {
-                              transactionalStatusAuction: {
-                                auctionType_json: { isTypeOf_eq: 'AuctionTypeEnglish' },
-                              },
-                            }
-                          : {},
-                        nftStatusFilter?.includes('AuctionTypeOpen')
-                          ? {
-                              transactionalStatusAuction: {
-                                auctionType_json: { isTypeOf_eq: 'AuctionTypeOpen' },
-                              },
-                            }
-                          : {},
-                        nftStatusFilter?.includes('TransactionalStatusBuyNow')
-                          ? {
-                              transactionalStatus_json: { isTypeOf_eq: 'TransactionalStatusBuyNow' },
-                            }
-                          : {},
-                        nftStatusFilter?.includes('TransactionalStatusIdle')
-                          ? {
-                              transactionalStatus_json: { isTypeOf_eq: 'TransactionalStatusIdle' },
-                            }
-                          : {},
-                      ],
-                    }
-                  })
+                  handleSetOwnedNftWhereInput()
                 },
               }}
               secondaryButton={{
@@ -453,7 +437,7 @@ export const FiltersBar: FC<ReturnType<typeof useFiltersBar> & FiltersBarProps>
               {nftStatusInputs}
             </DialogPopover>
           )}
-          {categories && activeFilters.includes('categories') && (
+          {activeFilters.includes('categories') && (
             <DialogPopover
               ref={categoriesPopoverRef}
               trigger={
@@ -470,7 +454,7 @@ export const FiltersBar: FC<ReturnType<typeof useFiltersBar> & FiltersBarProps>
                   setVideoWhereInput((value) => ({
                     ...value,
                     category: {
-                      id_in: categoriesFilter,
+                      id_in: mappedUniqueCategories,
                     },
                   }))
                 },

diff --git a/packages/atlas/src/config/categories.tsx b/packages/atlas/src/config/categories.tsx
@@ -10,6 +10,7 @@ export type DisplayCategory = {
   coverImgUrl: string
   name: string
   videoCategories: CategoryId[]
+  defaultVideoCategory: CategoryId
 }
 
 export const displayCategories: DisplayCategory[] = [
@@ -20,6 +21,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#D92E61',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/science-and-technology.webp',
     videoCategories: ['63-2', '65-2'],
+    defaultVideoCategory: '63-2',
   },
   {
     id: '1',
@@ -28,6 +30,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#E7BE2D',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/pets-and-animals.webp',
     videoCategories: ['59-2', '61-2'],
+    defaultVideoCategory: '59-2',
   },
   {
     id: '2',
@@ -36,6 +39,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#BD4BE4',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/film-and-animation.webp',
     videoCategories: ['63-2'],
+    defaultVideoCategory: '63-2',
   },
   {
     id: '3',
@@ -44,6 +48,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#BDE933',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/people-and-blogs.webp',
     videoCategories: ['65-2'],
+    defaultVideoCategory: '65-2',
   },
   {
     id: '4',
@@ -52,6 +57,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#54A7F0',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/entertainment.webp',
     videoCategories: ['59-2'],
+    defaultVideoCategory: '59-2',
   },
   {
     id: '5',
@@ -60,6 +66,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#DD379D',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/education.webp',
     videoCategories: ['61-2'],
+    defaultVideoCategory: '61-2',
   },
   {
     id: '6',
@@ -68,6 +75,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#5A7AEE',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/travel-and-events.webp',
     videoCategories: ['65-2', '59-2'],
+    defaultVideoCategory: '65-2',
   },
   {
     id: '7',
@@ -76,6 +84,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#41EE5A',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/sports.webp',
     videoCategories: ['59-2', '61-2'],
+    defaultVideoCategory: '59-2',
   },
   {
     id: '8',
@@ -84,6 +93,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#9455E8',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/gaming.webp',
     videoCategories: ['61-2'],
+    defaultVideoCategory: '61-2',
   },
   {
     id: '9',
@@ -92,6 +102,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#4FE1F2',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/comedy.webp',
     videoCategories: ['59-2'],
+    defaultVideoCategory: '59-2',
   },
   {
     id: '10',
@@ -100,6 +111,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#6E5FEC',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/autos-and-vehicles.webp',
     videoCategories: ['61-2', '59-2', '63-2'],
+    defaultVideoCategory: '61-2',
   },
   {
     id: '11',
@@ -108,6 +120,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#E57827',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/howto-and-style.webp',
     videoCategories: ['61-2', '63-2'],
+    defaultVideoCategory: '61-2',
   },
   {
     id: '12',
@@ -116,6 +129,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#6EEC3A',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/music.webp',
     videoCategories: ['59-2', '65-2'],
+    defaultVideoCategory: '59-2',
   },
   {
     id: '13',
@@ -124,6 +138,7 @@ export const displayCategories: DisplayCategory[] = [
     color: '#E141D6',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/nonprofit-and-activism.webp',
     videoCategories: ['63-2', '65-2', '59-2', '61-2'],
+    defaultVideoCategory: '63-2',
   },
   {
     id: '14',
@@ -132,11 +147,13 @@ export const displayCategories: DisplayCategory[] = [
     color: '#48F0B3',
     coverImgUrl: 'https://eu-central-1.linodeobjects.com/atlas-assets/category-images/news-and-politics.webp',
     videoCategories: ['63-2'],
+    defaultVideoCategory: '63-2',
   },
 ]
 
+export const displayCategoriesLookup = createLookup(displayCategories)
+
 export const findDisplayCategory = (id?: string | null) => {
-  const displayCategoriesLookup = createLookup(displayCategories)
   if (!id) return null
   return displayCategoriesLookup[id]
 }

diff --git a/packages/atlas/src/hooks/useVideoCategoriesWithCounter.ts b/packages/atlas/src/hooks/useVideoCategoriesWithCounter.ts