Remove language query from InfiniteChannelWithVideosGrid (#1195)

* remove language query

* add empty fallback

src/api/hooks/index.ts

@@ -9,4 +9,3 @@ export * from './video'
 export * from './membership'
 export * from './queryNode'
 export * from './workers'
-export * from './languages'

src/api/hooks/languages.ts

@@ -1,13 +0,0 @@
-import { QueryHookOptions } from '@apollo/client'
-
-import { GetLanguagesQuery, GetLanguagesQueryVariables, useGetLanguagesQuery } from '@/api/queries'
-
-type LanguagesOpts = QueryHookOptions<GetLanguagesQuery>
-export const useLanguages = (variables?: GetLanguagesQueryVariables, opts?: LanguagesOpts) => {
-  const { data, ...rest } = useGetLanguagesQuery({ ...opts, variables })
-
-  return {
-    languages: data?.languages,
-    ...rest,
-  }
-}

src/api/queries/__generated__/baseTypes.generated.ts

@@ -261,29 +261,6 @@ export type Language = {
   iso: Scalars['String']
 }
 
-export type LanguageWhereInput = {
-  id_eq?: Maybe<Scalars['ID']>
-  id_in?: Maybe<Array<Scalars['ID']>>
-  iso_eq?: Maybe<Scalars['String']>
-  iso_contains?: Maybe<Scalars['String']>
-  iso_startsWith?: Maybe<Scalars['String']>
-  iso_endsWith?: Maybe<Scalars['String']>
-  iso_in?: Maybe<Array<Scalars['String']>>
-}
-
-export enum LanguageOrderByInput {
-  CreatedAtAsc = 'createdAt_ASC',
-  CreatedAtDesc = 'createdAt_DESC',
-  UpdatedAtAsc = 'updatedAt_ASC',
-  UpdatedAtDesc = 'updatedAt_DESC',
-  DeletedAtAsc = 'deletedAt_ASC',
-  DeletedAtDesc = 'deletedAt_DESC',
-  IsoAsc = 'iso_ASC',
-  IsoDesc = 'iso_DESC',
-  CreatedInBlockAsc = 'createdInBlock_ASC',
-  CreatedInBlockDesc = 'createdInBlock_DESC',
-}
-
 export type Query = {
   __typename?: 'Query'
   /** Get follows counts for a list of channels */
@@ -299,7 +276,6 @@ export type Query = {
   channelViews?: Maybe<EntityViewsInfo>
   channels: Array<Channel>
   channelsConnection: ChannelConnection
-  languages: Array<Language>
   membershipByUniqueInput?: Maybe<Membership>
   memberships: Array<Membership>
   /** Get list of most followed channels */
@@ -365,13 +341,6 @@ export type QueryChannelsConnectionArgs = {
   orderBy?: Maybe<Array<ChannelOrderByInput>>
 }
 
-export type QueryLanguagesArgs = {
-  offset?: Maybe<Scalars['Int']>
-  limit?: Maybe<Scalars['Int']>
-  where?: Maybe<LanguageWhereInput>
-  orderBy?: Maybe<Array<LanguageOrderByInput>>
-}
-
 export type QueryMembershipByUniqueInputArgs = {
   where: MembershipWhereUniqueInput
 }

src/api/queries/__generated__/languages.generated.tsx

@@ -1,58 +0,0 @@
-import { gql } from '@apollo/client'
-import * as Apollo from '@apollo/client'
-
-import * as Types from './baseTypes.generated'
-
-export type GetLanguagesQueryVariables = Types.Exact<{
-  offset?: Types.Maybe<Types.Scalars['Int']>
-  limit?: Types.Maybe<Types.Scalars['Int']>
-  where?: Types.Maybe<Types.LanguageWhereInput>
-  orderBy?: Types.Maybe<Array<Types.LanguageOrderByInput> | Types.LanguageOrderByInput>
-}>
-
-export type GetLanguagesQuery = {
-  __typename?: 'Query'
-  languages: Array<{ __typename?: 'Language'; id: string; iso: string }>
-}
-
-export const GetLanguagesDocument = gql`
-  query GetLanguages($offset: Int, $limit: Int, $where: LanguageWhereInput, $orderBy: [LanguageOrderByInput!]) {
-    languages(offset: $offset, limit: $limit, where: $where, orderBy: $orderBy) {
-      id
-      iso
-    }
-  }
-`
-
-/**
- * __useGetLanguagesQuery__
- *
- * To run a query within a React component, call `useGetLanguagesQuery` and pass it any options that fit your needs.
- * When your component renders, `useGetLanguagesQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useGetLanguagesQuery({
- *   variables: {
- *      offset: // value for 'offset'
- *      limit: // value for 'limit'
- *      where: // value for 'where'
- *      orderBy: // value for 'orderBy'
- *   },
- * });
- */
-export function useGetLanguagesQuery(
-  baseOptions?: Apollo.QueryHookOptions<GetLanguagesQuery, GetLanguagesQueryVariables>
-) {
-  return Apollo.useQuery<GetLanguagesQuery, GetLanguagesQueryVariables>(GetLanguagesDocument, baseOptions)
-}
-export function useGetLanguagesLazyQuery(
-  baseOptions?: Apollo.LazyQueryHookOptions<GetLanguagesQuery, GetLanguagesQueryVariables>
-) {
-  return Apollo.useLazyQuery<GetLanguagesQuery, GetLanguagesQueryVariables>(GetLanguagesDocument, baseOptions)
-}
-export type GetLanguagesQueryHookResult = ReturnType<typeof useGetLanguagesQuery>
-export type GetLanguagesLazyQueryHookResult = ReturnType<typeof useGetLanguagesLazyQuery>
-export type GetLanguagesQueryResult = Apollo.QueryResult<GetLanguagesQuery, GetLanguagesQueryVariables>

src/api/queries/index.ts

@@ -4,4 +4,3 @@ export * from './__generated__/channels.generated'
 export * from './__generated__/search.generated'
 export * from './__generated__/videos.generated'
 export * from './__generated__/memberships.generated'
-export * from './__generated__/languages.generated'

src/api/queries/languages.graphql

@@ -1,6 +0,0 @@
-query GetLanguages($offset: Int, $limit: Int, $where: LanguageWhereInput, $orderBy: [LanguageOrderByInput!]) {
-  languages(offset: $offset, limit: $limit, where: $where, orderBy: $orderBy) {
-    id
-    iso
-  }
-}

src/api/schemas/extendedQueryNode.graphql

@@ -258,29 +258,6 @@ type Language {
   iso: String!
 }
 
-input LanguageWhereInput {
-  id_eq: ID
-  id_in: [ID!]
-  iso_eq: String
-  iso_contains: String
-  iso_startsWith: String
-  iso_endsWith: String
-  iso_in: [String!]
-}
-
-enum LanguageOrderByInput {
-  createdAt_ASC
-  createdAt_DESC
-  updatedAt_ASC
-  updatedAt_DESC
-  deletedAt_ASC
-  deletedAt_DESC
-  iso_ASC
-  iso_DESC
-  createdInBlock_ASC
-  createdInBlock_DESC
-}
-
 type Query {
   # Lookup a membership by its ID
   membershipByUniqueInput(where: MembershipWhereUniqueInput!): Membership
@@ -320,8 +297,6 @@ type Query {
 
   # Free text search across videos and channels
   search(limit: Int, text: String!, whereVideo: VideoWhereInput, whereChannel: ChannelWhereInput): [SearchFTSOutput!]!
-
-  languages(offset: Int, limit: Int, where: LanguageWhereInput, orderBy: [LanguageOrderByInput!]): [Language!]!
 }
 
 type Subscription {

src/components/InfiniteGrids/InfiniteChannelWithVideosGrid.tsx

@@ -1,7 +1,5 @@
-import React, { FC, Fragment, useCallback, useEffect, useMemo, useState } from 'react'
-import { CSSTransition } from 'react-transition-group'
+import React, { FC, Fragment, useCallback, useState } from 'react'
 
-import { useLanguages } from '@/api/hooks'
 import {
   ChannelEdge,
   ChannelOrderByInput,
@@ -13,9 +11,16 @@ import {
 import { ChannelWithVideos } from '@/components/ChannelWithVideos'
 import { useInfiniteGrid } from '@/components/InfiniteGrids/useInfiniteGrid'
 import { languages } from '@/config/languages'
-import { GridHeadingContainer, LoadMoreButton, Select, SkeletonLoader, Text, TitleContainer } from '@/shared/components'
+import {
+  EmptyFallback,
+  GridHeadingContainer,
+  LoadMoreButton,
+  Select,
+  SkeletonLoader,
+  Text,
+  TitleContainer,
+} from '@/shared/components'
 import { SvgGlyphChevronRight } from '@/shared/icons'
-import { transitions } from '@/shared/theme'
 
 import { AdditionalLink, LanguageSelectWrapper, LoadMoreButtonWrapper, Separator } from './InfiniteGrid.style'
 
@@ -54,9 +59,8 @@ export const InfiniteChannelWithVideosGrid: FC<InfiniteChannelWithVideosGridProp
   maximumCount,
   additionalSortFn,
 }) => {
-  const [selectedLanguage, setSelectedLanguage] = useState<string | null | undefined>(null)
+  const [selectedLanguage, setSelectedLanguage] = useState<string | null | undefined>('en')
   const [targetRowsCount, setTargetRowsCount] = useState(INITIAL_ROWS)
-  const { languages: queryNodeLanguages, loading: languagesLoading } = useLanguages()
   const fetchMore = useCallback(() => {
     setTargetRowsCount((prevState) => prevState + 3)
   }, [])
@@ -98,29 +102,6 @@ export const InfiniteChannelWithVideosGrid: FC<InfiniteChannelWithVideosGridProp
 
   const itemsToShow = [...displayedItems, ...placeholderItems]
 
-  const mappedLanguages = useMemo(() => {
-    const mergedLanguages: Array<{ name: string; value: string }> = []
-    if (queryNodeLanguages) {
-      queryNodeLanguages.forEach((language) => {
-        const matchedLanguage = languages.find((item) => item.value === language.iso)
-        if (matchedLanguage) {
-          mergedLanguages.push({
-            name: matchedLanguage?.name,
-            value: language.id,
-          })
-        }
-      })
-    }
-    return mergedLanguages
-  }, [queryNodeLanguages])
-
-  // Set initial language
-  useEffect(() => {
-    if (mappedLanguages.length && languageSelector) {
-      setSelectedLanguage(mappedLanguages.find((item) => item.name === 'English')?.value)
-    }
-  }, [mappedLanguages, languageSelector])
-
   const onSelectLanguage = (value?: string | null) => {
     setTargetRowsCount(INITIAL_ROWS)
     setSelectedLanguage(value)
@@ -133,24 +114,15 @@ export const InfiniteChannelWithVideosGrid: FC<InfiniteChannelWithVideosGridProp
           <TitleContainer>
             {!isReady ? <SkeletonLoader height={23} width={250} /> : <Text variant="h4">{title}</Text>}
             {languageSelector && (
-              <CSSTransition
-                in={!!queryNodeLanguages?.length}
-                timeout={parseInt(transitions.timings.loading)}
-                classNames={transitions.names.fade}
-                mountOnEnter
-                unmountOnExit
-              >
-                <LanguageSelectWrapper>
-                  <Select
-                    items={mappedLanguages}
-                    disabled={languagesLoading}
-                    value={selectedLanguage}
-                    size="small"
-                    helperText={null}
-                    onChange={onSelectLanguage}
-                  />
-                </LanguageSelectWrapper>
-              </CSSTransition>
+              <LanguageSelectWrapper>
+                <Select
+                  items={languages}
+                  value={selectedLanguage}
+                  size="small"
+                  helperText={null}
+                  onChange={onSelectLanguage}
+                />
+              </LanguageSelectWrapper>
             )}
             {additionalLink && (
               <AdditionalLink
@@ -166,12 +138,22 @@ export const InfiniteChannelWithVideosGrid: FC<InfiniteChannelWithVideosGridProp
           </TitleContainer>
         )}
       </GridHeadingContainer>
-      {itemsToShow.map((channel, idx) => (
-        <Fragment key={`channels-with-videos-${idx}`}>
-          <ChannelWithVideos channelId={channel.id} />
-          {idx + 1 < itemsToShow.length && <Separator />}
-        </Fragment>
-      ))}
+      {itemsToShow.length ? (
+        itemsToShow.map((channel, idx) => (
+          <Fragment key={`channels-with-videos-${idx}`}>
+            <ChannelWithVideos channelId={channel.id} />
+            {idx + 1 < itemsToShow.length && <Separator />}
+          </Fragment>
+        ))
+      ) : (
+        <>
+          <EmptyFallback
+            title={`No channels found in ${languages.find((language) => language.value === selectedLanguage)?.name}`}
+            variant="large"
+          />
+          <Separator />
+        </>
+      )}
       {shouldShowLoadMoreButton && (
         <LoadMoreButtonWrapper>
           <LoadMoreButton onClick={fetchMore} label="Show more channels" />