From 421a3f2af402220bfd240b621270580e31a8426f Mon Sep 17 00:00:00 2001 From: Nathan Arthur Date: Wed, 7 Aug 2024 17:10:47 -0400 Subject: [PATCH 01/36] move featured teachings to top of discover page --- package-lock.json | 6 +++--- src/containers/discover/index.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index da61f0653..9e447f8b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14933,9 +14933,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001642", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz", - "integrity": "sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==", + "version": "1.0.30001650", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001650.tgz", + "integrity": "sha512-fgEc7hP/LB7iicdXHUI9VsBsMZmUmlVJeQP2qqQW+3lkqVhbmjEU8zp+h5stWeilX+G7uXuIUIIlWlDw9jdt8g==", "funding": [ { "type": "opencollective", diff --git a/src/containers/discover/index.tsx b/src/containers/discover/index.tsx index 83985160f..bcd63b004 100644 --- a/src/containers/discover/index.tsx +++ b/src/containers/discover/index.tsx @@ -17,6 +17,7 @@ import Presenters from '~src/components/organisms/cardSlider/section/presenters' export default function Discover(): JSX.Element { return (
+ - Date: Fri, 9 Aug 2024 11:45:41 -0400 Subject: [PATCH 02/36] Add stub "Continue Listening" carousel --- public/compiled-lang/br.json | 18 +++++++++++ public/compiled-lang/de.json | 18 +++++++++++ public/compiled-lang/en.json | 18 +++++++++++ public/compiled-lang/es.json | 18 +++++++++++ public/compiled-lang/fr.json | 18 +++++++++++ public/compiled-lang/ja.json | 18 +++++++++++ public/compiled-lang/ru.json | 18 +++++++++++ public/compiled-lang/zh.json | 18 +++++++++++ public/lang/br.json | 9 ++++++ public/lang/de.json | 9 ++++++ public/lang/en.json | 9 ++++++ public/lang/es.json | 9 ++++++ public/lang/fr.json | 9 ++++++ public/lang/ja.json | 9 ++++++ public/lang/ru.json | 9 ++++++ public/lang/zh.json | 9 ++++++ .../cardSlider/section/continueListening.tsx | 32 +++++++++++++++++++ src/containers/discover/index.tsx | 15 +++++++++ 18 files changed, 263 insertions(+) create mode 100644 src/components/organisms/cardSlider/section/continueListening.tsx diff --git a/public/compiled-lang/br.json b/public/compiled-lang/br.json index aefa40f2d..77f4e5572 100644 --- a/public/compiled-lang/br.json +++ b/public/compiled-lang/br.json @@ -1439,6 +1439,18 @@ "value": "Conferencias Anteriores" } ], + "discover__continueListeningNext": [ + { + "type": 0, + "value": "Next continue listening" + } + ], + "discover__continueListeningPrevious": [ + { + "type": 0, + "value": "Previous continue listening" + } + ], "discover__featuredTeachingsNext": [ { "type": 0, @@ -1553,6 +1565,12 @@ "value": "Congressos recentes" } ], + "discover_continueListeningHeading": [ + { + "type": 0, + "value": "Continue Listening" + } + ], "discover_featuredTeachingsHeading": [ { "type": 0, diff --git a/public/compiled-lang/de.json b/public/compiled-lang/de.json index 9aabc7ea4..fb8b8c92e 100644 --- a/public/compiled-lang/de.json +++ b/public/compiled-lang/de.json @@ -1439,6 +1439,18 @@ "value": "Previous recent conferences" } ], + "discover__continueListeningNext": [ + { + "type": 0, + "value": "Next continue listening" + } + ], + "discover__continueListeningPrevious": [ + { + "type": 0, + "value": "Previous continue listening" + } + ], "discover__featuredTeachingsNext": [ { "type": 0, @@ -1553,6 +1565,12 @@ "value": "Aktuelle Konferenzen" } ], + "discover_continueListeningHeading": [ + { + "type": 0, + "value": "Continue Listening" + } + ], "discover_featuredTeachingsHeading": [ { "type": 0, diff --git a/public/compiled-lang/en.json b/public/compiled-lang/en.json index fcf840ba6..0399a4de7 100644 --- a/public/compiled-lang/en.json +++ b/public/compiled-lang/en.json @@ -1439,6 +1439,18 @@ "value": "Previous recent conferences" } ], + "discover__continueListeningNext": [ + { + "type": 0, + "value": "Next continue listening" + } + ], + "discover__continueListeningPrevious": [ + { + "type": 0, + "value": "Previous continue listening" + } + ], "discover__featuredTeachingsNext": [ { "type": 0, @@ -1553,6 +1565,12 @@ "value": "Recent Conferences" } ], + "discover_continueListeningHeading": [ + { + "type": 0, + "value": "Continue Listening" + } + ], "discover_featuredTeachingsHeading": [ { "type": 0, diff --git a/public/compiled-lang/es.json b/public/compiled-lang/es.json index f07380c92..93f4ba5cd 100644 --- a/public/compiled-lang/es.json +++ b/public/compiled-lang/es.json @@ -1459,6 +1459,18 @@ "value": "Previous recent conferences" } ], + "discover__continueListeningNext": [ + { + "type": 0, + "value": "Next continue listening" + } + ], + "discover__continueListeningPrevious": [ + { + "type": 0, + "value": "Previous continue listening" + } + ], "discover__featuredTeachingsNext": [ { "type": 0, @@ -1573,6 +1585,12 @@ "value": "Conferencias recientes" } ], + "discover_continueListeningHeading": [ + { + "type": 0, + "value": "Continue Listening" + } + ], "discover_featuredTeachingsHeading": [ { "type": 0, diff --git a/public/compiled-lang/fr.json b/public/compiled-lang/fr.json index 589dd1374..865f4022e 100644 --- a/public/compiled-lang/fr.json +++ b/public/compiled-lang/fr.json @@ -1439,6 +1439,18 @@ "value": "Previous recent conferences" } ], + "discover__continueListeningNext": [ + { + "type": 0, + "value": "Next continue listening" + } + ], + "discover__continueListeningPrevious": [ + { + "type": 0, + "value": "Previous continue listening" + } + ], "discover__featuredTeachingsNext": [ { "type": 0, @@ -1553,6 +1565,12 @@ "value": "Conférences récentes" } ], + "discover_continueListeningHeading": [ + { + "type": 0, + "value": "Continue Listening" + } + ], "discover_featuredTeachingsHeading": [ { "type": 0, diff --git a/public/compiled-lang/ja.json b/public/compiled-lang/ja.json index ef7b2b5f6..e7a60d746 100644 --- a/public/compiled-lang/ja.json +++ b/public/compiled-lang/ja.json @@ -1459,6 +1459,18 @@ "value": "Previous recent conferences" } ], + "discover__continueListeningNext": [ + { + "type": 0, + "value": "Next continue listening" + } + ], + "discover__continueListeningPrevious": [ + { + "type": 0, + "value": "Previous continue listening" + } + ], "discover__featuredTeachingsNext": [ { "type": 0, @@ -1573,6 +1585,12 @@ "value": "最近の大会・総会" } ], + "discover_continueListeningHeading": [ + { + "type": 0, + "value": "Continue Listening" + } + ], "discover_featuredTeachingsHeading": [ { "type": 0, diff --git a/public/compiled-lang/ru.json b/public/compiled-lang/ru.json index 19f704745..24f93df97 100644 --- a/public/compiled-lang/ru.json +++ b/public/compiled-lang/ru.json @@ -1439,6 +1439,18 @@ "value": "Previous recent conferences" } ], + "discover__continueListeningNext": [ + { + "type": 0, + "value": "Next continue listening" + } + ], + "discover__continueListeningPrevious": [ + { + "type": 0, + "value": "Previous continue listening" + } + ], "discover__featuredTeachingsNext": [ { "type": 0, @@ -1553,6 +1565,12 @@ "value": "Недавние конференции" } ], + "discover_continueListeningHeading": [ + { + "type": 0, + "value": "Continue Listening" + } + ], "discover_featuredTeachingsHeading": [ { "type": 0, diff --git a/public/compiled-lang/zh.json b/public/compiled-lang/zh.json index 3edff280c..536e0ed70 100644 --- a/public/compiled-lang/zh.json +++ b/public/compiled-lang/zh.json @@ -1443,6 +1443,18 @@ "value": "Previous recent conferences" } ], + "discover__continueListeningNext": [ + { + "type": 0, + "value": "Next continue listening" + } + ], + "discover__continueListeningPrevious": [ + { + "type": 0, + "value": "Previous continue listening" + } + ], "discover__featuredTeachingsNext": [ { "type": 0, @@ -1557,6 +1569,12 @@ "value": "最新大会" } ], + "discover_continueListeningHeading": [ + { + "type": 0, + "value": "Continue Listening" + } + ], "discover_featuredTeachingsHeading": [ { "type": 0, diff --git a/public/lang/br.json b/public/lang/br.json index b3d526b6f..57bfc2493 100644 --- a/public/lang/br.json +++ b/public/lang/br.json @@ -2738,5 +2738,14 @@ }, "account__heading": { "string": "Configurações da conta" + }, + "discover__continueListeningNext": { + "string": "Next continue listening" + }, + "discover__continueListeningPrevious": { + "string": "Previous continue listening" + }, + "discover_continueListeningHeading": { + "string": "Continue Listening" } } \ No newline at end of file diff --git a/public/lang/de.json b/public/lang/de.json index c7347e872..e68041f7f 100644 --- a/public/lang/de.json +++ b/public/lang/de.json @@ -2738,5 +2738,14 @@ }, "account__heading": { "string": "Kontoeinstellungen" + }, + "discover__continueListeningNext": { + "string": "Next continue listening" + }, + "discover__continueListeningPrevious": { + "string": "Previous continue listening" + }, + "discover_continueListeningHeading": { + "string": "Continue Listening" } } \ No newline at end of file diff --git a/public/lang/en.json b/public/lang/en.json index 57afcc1c4..ef1c77c88 100644 --- a/public/lang/en.json +++ b/public/lang/en.json @@ -690,6 +690,12 @@ "discover__conferencesPrevious": { "string": "Previous recent conferences" }, + "discover__continueListeningNext": { + "string": "Next continue listening" + }, + "discover__continueListeningPrevious": { + "string": "Previous continue listening" + }, "discover__featuredTeachingsNext": { "string": "Next featured teachings" }, @@ -747,6 +753,9 @@ "discover_conferencesHeading": { "string": "Recent Conferences" }, + "discover_continueListeningHeading": { + "string": "Continue Listening" + }, "discover_featuredTeachingsHeading": { "string": "Featured Teachings" }, diff --git a/public/lang/es.json b/public/lang/es.json index bf54850c0..542e5f857 100644 --- a/public/lang/es.json +++ b/public/lang/es.json @@ -2738,5 +2738,14 @@ }, "account__heading": { "string": "Configuración de la cuenta" + }, + "discover__continueListeningNext": { + "string": "Next continue listening" + }, + "discover__continueListeningPrevious": { + "string": "Previous continue listening" + }, + "discover_continueListeningHeading": { + "string": "Continue Listening" } } \ No newline at end of file diff --git a/public/lang/fr.json b/public/lang/fr.json index edc2428a9..ec006220b 100644 --- a/public/lang/fr.json +++ b/public/lang/fr.json @@ -2738,5 +2738,14 @@ }, "account__heading": { "string": "Paramètres du compte" + }, + "discover__continueListeningNext": { + "string": "Next continue listening" + }, + "discover__continueListeningPrevious": { + "string": "Previous continue listening" + }, + "discover_continueListeningHeading": { + "string": "Continue Listening" } } \ No newline at end of file diff --git a/public/lang/ja.json b/public/lang/ja.json index d8bd17efb..746464877 100644 --- a/public/lang/ja.json +++ b/public/lang/ja.json @@ -2738,5 +2738,14 @@ }, "account__heading": { "string": "アカウントの設定" + }, + "discover__continueListeningNext": { + "string": "Next continue listening" + }, + "discover__continueListeningPrevious": { + "string": "Previous continue listening" + }, + "discover_continueListeningHeading": { + "string": "Continue Listening" } } \ No newline at end of file diff --git a/public/lang/ru.json b/public/lang/ru.json index d74ca4cf7..f2d7b8f16 100644 --- a/public/lang/ru.json +++ b/public/lang/ru.json @@ -2738,5 +2738,14 @@ }, "account__heading": { "string": "Настройки учетной записи" + }, + "discover__continueListeningNext": { + "string": "Next continue listening" + }, + "discover__continueListeningPrevious": { + "string": "Previous continue listening" + }, + "discover_continueListeningHeading": { + "string": "Continue Listening" } } \ No newline at end of file diff --git a/public/lang/zh.json b/public/lang/zh.json index cce5b6f7c..8b537032e 100644 --- a/public/lang/zh.json +++ b/public/lang/zh.json @@ -2738,5 +2738,14 @@ }, "account__heading": { "string": "账户设置" + }, + "discover__continueListeningNext": { + "string": "Next continue listening" + }, + "discover__continueListeningPrevious": { + "string": "Previous continue listening" + }, + "discover_continueListeningHeading": { + "string": "Continue Listening" } } \ No newline at end of file diff --git a/src/components/organisms/cardSlider/section/continueListening.tsx b/src/components/organisms/cardSlider/section/continueListening.tsx new file mode 100644 index 000000000..0bc023927 --- /dev/null +++ b/src/components/organisms/cardSlider/section/continueListening.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { useIntl } from 'react-intl'; + +import { CardRecordingFragment } from '~src/components/molecules/card/__generated__/recording'; +import CardRecording from '~src/components/molecules/card/recording'; + +import { useInfiniteGetSectionFeaturedTeachingsQuery } from './__generated__/featuredTeachings'; +import Section from './index'; + +export default function ContinueListening(): JSX.Element { + const intl = useIntl(); + return ( +
( + + )} + /> + ); +} diff --git a/src/containers/discover/index.tsx b/src/containers/discover/index.tsx index bcd63b004..9a0e3089d 100644 --- a/src/containers/discover/index.tsx +++ b/src/containers/discover/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { useGetWithAuthGuardDataQuery } from '~components/HOCs/__generated__/withAuthGuard'; import BlogPosts from '~components/organisms/cardSlider/section/blogPosts'; import Conferences from '~components/organisms/cardSlider/section/conferences'; import FeaturedTeachings from '~components/organisms/cardSlider/section/featuredTeachings'; @@ -9,14 +10,28 @@ import StorySeasons from '~components/organisms/cardSlider/section/storySeasons' import Topics from '~components/organisms/cardSlider/section/topics'; import TrendingMusic from '~components/organisms/cardSlider/section/trendingMusic'; import TrendingTeachings from '~components/organisms/cardSlider/section/trendingTeachings'; +import { getSessionToken } from '~lib/cookies'; import Audiobooks from '~src/components/organisms/cardSlider/section/audiobooks'; import BibleBooks from '~src/components/organisms/cardSlider/section/bibleBooks'; +import ContinueListening from '~src/components/organisms/cardSlider/section/continueListening'; import EgwAudiobooks from '~src/components/organisms/cardSlider/section/egwAudiobooks'; //egw import Presenters from '~src/components/organisms/cardSlider/section/presenters'; export default function Discover(): JSX.Element { + const sessionToken = getSessionToken(); + + const authResult = useGetWithAuthGuardDataQuery( + {}, + { + enabled: !!sessionToken, + retry: false, + } + ); + const user = authResult.data?.me?.user; + return (
+ {user ? : ''} From 997d2e26d309eed914f38a35bcdc1479c54488f7 Mon Sep 17 00:00:00 2001 From: Jake Coble Date: Fri, 9 Aug 2024 16:31:53 -0400 Subject: [PATCH 03/36] Write a GraphQL query for the "Continue Listening" carousel --- .../section/continueListening.graphql | 27 +++++++++++++++++++ .../cardSlider/section/continueListening.tsx | 4 +-- 2 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 src/components/organisms/cardSlider/section/continueListening.graphql diff --git a/src/components/organisms/cardSlider/section/continueListening.graphql b/src/components/organisms/cardSlider/section/continueListening.graphql new file mode 100644 index 000000000..3be0248b7 --- /dev/null +++ b/src/components/organisms/cardSlider/section/continueListening.graphql @@ -0,0 +1,27 @@ +query getSectionContinueListening($language: Language!, $first: Int! = 15) { + me { + user { + ...continueListening + } + } +} + +fragment continueListening on User { + downloadHistory( + language: $language + first: $first + hasIncompletePlaybackSession: true + ) { + edges { + node { + recording { + ...cardRecording + } + } + } + pageInfo { + hasNextPage + endCursor + } + } +} diff --git a/src/components/organisms/cardSlider/section/continueListening.tsx b/src/components/organisms/cardSlider/section/continueListening.tsx index 0bc023927..1643b8f2d 100644 --- a/src/components/organisms/cardSlider/section/continueListening.tsx +++ b/src/components/organisms/cardSlider/section/continueListening.tsx @@ -4,14 +4,14 @@ import { useIntl } from 'react-intl'; import { CardRecordingFragment } from '~src/components/molecules/card/__generated__/recording'; import CardRecording from '~src/components/molecules/card/recording'; -import { useInfiniteGetSectionFeaturedTeachingsQuery } from './__generated__/featuredTeachings'; +import { useInfiniteGetSectionContinueListeningQuery } from './__generated__/continueListening'; import Section from './index'; export default function ContinueListening(): JSX.Element { const intl = useIntl(); return (
Date: Mon, 12 Aug 2024 10:42:46 -0400 Subject: [PATCH 04/36] Create GraphQL query to populate Continue Listening section --- .../section/continueListening.graphql | 38 +++++++++---------- .../cardSlider/section/continueListening.tsx | 4 ++ 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/components/organisms/cardSlider/section/continueListening.graphql b/src/components/organisms/cardSlider/section/continueListening.graphql index 3be0248b7..094770a70 100644 --- a/src/components/organisms/cardSlider/section/continueListening.graphql +++ b/src/components/organisms/cardSlider/section/continueListening.graphql @@ -1,27 +1,25 @@ -query getSectionContinueListening($language: Language!, $first: Int! = 15) { +query getSectionContinueListening( + $language: Language! + $first: Int! = 3 + $after: String = null +) { me { user { - ...continueListening - } - } -} - -fragment continueListening on User { - downloadHistory( - language: $language - first: $first - hasIncompletePlaybackSession: true - ) { - edges { - node { - recording { - ...cardRecording + continueListening: downloadHistory( + language: $language + first: $first + after: $after + ) { + nodes { + recording { + ...cardRecording + } + } + pageInfo { + hasNextPage + endCursor } } } - pageInfo { - hasNextPage - endCursor - } } } diff --git a/src/components/organisms/cardSlider/section/continueListening.tsx b/src/components/organisms/cardSlider/section/continueListening.tsx index 1643b8f2d..2b809121c 100644 --- a/src/components/organisms/cardSlider/section/continueListening.tsx +++ b/src/components/organisms/cardSlider/section/continueListening.tsx @@ -9,6 +9,7 @@ import Section from './index'; export default function ContinueListening(): JSX.Element { const intl = useIntl(); + return (
+ p?.me?.user.continueListening.nodes?.map((n) => n.recording) + } Card={(p: { node: CardRecordingFragment }) => ( )} From fef0e5111b2a4458243489f113f4f8f83ead9e76 Mon Sep 17 00:00:00 2001 From: Jake Coble Date: Mon, 12 Aug 2024 11:53:21 -0400 Subject: [PATCH 05/36] Don't show Featured Teachings to logged in users --- src/containers/discover/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/containers/discover/index.tsx b/src/containers/discover/index.tsx index 9a0e3089d..b4b0621be 100644 --- a/src/containers/discover/index.tsx +++ b/src/containers/discover/index.tsx @@ -31,8 +31,7 @@ export default function Discover(): JSX.Element { return (
- {user ? : ''} - + {user ? : } Date: Tue, 13 Aug 2024 09:52:15 -0400 Subject: [PATCH 06/36] Move user auth check into new hook --- src/components/HOCs/withAuthGuard.tsx | 9 ++------- src/containers/discover/index.tsx | 16 +++------------- src/lib/hooks/useIsAuthenticated.ts | 13 +++++++++++++ 3 files changed, 18 insertions(+), 20 deletions(-) create mode 100644 src/lib/hooks/useIsAuthenticated.ts diff --git a/src/components/HOCs/withAuthGuard.tsx b/src/components/HOCs/withAuthGuard.tsx index e7c83d0c3..6b1a892c4 100644 --- a/src/components/HOCs/withAuthGuard.tsx +++ b/src/components/HOCs/withAuthGuard.tsx @@ -3,8 +3,7 @@ import React from 'react'; import Login from '~components/molecules/login'; import { getCurrentRequest } from '~lib/api/storeRequest'; import { getSessionToken } from '~lib/cookies'; - -import { useGetWithAuthGuardDataQuery } from './__generated__/withAuthGuard'; +import useIsAuthenticated from '~lib/hooks/useIsAuthenticated'; function withAuthGuard

( Component: React.ComponentType

, @@ -12,11 +11,7 @@ function withAuthGuard

( ): React.ComponentType

{ function WithAuthGuard(props: P) { const sessionToken = getSessionToken(getCurrentRequest()); - const { data, isLoading } = useGetWithAuthGuardDataQuery( - {}, - { retry: false } - ); - const isUserLoggedIn = !!data?.me?.user.email; + const { isUserLoggedIn, isLoading } = useIsAuthenticated(); return (sessionToken && isLoading) || isUserLoggedIn ? ( diff --git a/src/containers/discover/index.tsx b/src/containers/discover/index.tsx index b4b0621be..77a0141cf 100644 --- a/src/containers/discover/index.tsx +++ b/src/containers/discover/index.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; -import { useGetWithAuthGuardDataQuery } from '~components/HOCs/__generated__/withAuthGuard'; import BlogPosts from '~components/organisms/cardSlider/section/blogPosts'; import Conferences from '~components/organisms/cardSlider/section/conferences'; import FeaturedTeachings from '~components/organisms/cardSlider/section/featuredTeachings'; @@ -10,7 +9,7 @@ import StorySeasons from '~components/organisms/cardSlider/section/storySeasons' import Topics from '~components/organisms/cardSlider/section/topics'; import TrendingMusic from '~components/organisms/cardSlider/section/trendingMusic'; import TrendingTeachings from '~components/organisms/cardSlider/section/trendingTeachings'; -import { getSessionToken } from '~lib/cookies'; +import useIsAuthenticated from '~lib/hooks/useIsAuthenticated'; import Audiobooks from '~src/components/organisms/cardSlider/section/audiobooks'; import BibleBooks from '~src/components/organisms/cardSlider/section/bibleBooks'; import ContinueListening from '~src/components/organisms/cardSlider/section/continueListening'; @@ -18,20 +17,11 @@ import EgwAudiobooks from '~src/components/organisms/cardSlider/section/egwAudio import Presenters from '~src/components/organisms/cardSlider/section/presenters'; export default function Discover(): JSX.Element { - const sessionToken = getSessionToken(); - - const authResult = useGetWithAuthGuardDataQuery( - {}, - { - enabled: !!sessionToken, - retry: false, - } - ); - const user = authResult.data?.me?.user; + const { isUserLoggedIn } = useIsAuthenticated(); return (

- {user ? : } + {isUserLoggedIn ? : } Date: Tue, 13 Aug 2024 17:04:12 -0400 Subject: [PATCH 07/36] Don't fetch data while a fetch is in progress --- src/components/organisms/cardSlider/section/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/organisms/cardSlider/section/index.tsx b/src/components/organisms/cardSlider/section/index.tsx index ac091ba86..1270f4f10 100644 --- a/src/components/organisms/cardSlider/section/index.tsx +++ b/src/components/organisms/cardSlider/section/index.tsx @@ -64,7 +64,7 @@ export default function Section({ }: SectionProps): JSX.Element { const language = useLanguageId(); - const { data, fetchNextPage } = infiniteQuery( + const { data, fetchNextPage, isFetchingNextPage } = infiniteQuery( 'after', { language }, { @@ -90,11 +90,11 @@ export default function Section({ const preload = useCallback( ({ index, total }: { index: number; total: number }) => { - if (index + PRELOAD_COUNT >= total) { + if (index + PRELOAD_COUNT >= total && !isFetchingNextPage) { fetchNextPage(); } }, - [fetchNextPage] + [fetchNextPage, isFetchingNextPage] ); // Check if there's content to render, if not, return an empty JSX element From 3a0d8f53d81c1016fede99caa6f4b932323d2c02 Mon Sep 17 00:00:00 2001 From: Jake Coble Date: Wed, 14 Aug 2024 10:22:28 -0400 Subject: [PATCH 08/36] Use a custom root selector for Continue Listening's query --- .../cardSlider/section/continueListening.tsx | 1 + src/components/organisms/cardSlider/section/index.tsx | 11 +++++++++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/organisms/cardSlider/section/continueListening.tsx b/src/components/organisms/cardSlider/section/continueListening.tsx index 2b809121c..ae92d6963 100644 --- a/src/components/organisms/cardSlider/section/continueListening.tsx +++ b/src/components/organisms/cardSlider/section/continueListening.tsx @@ -28,6 +28,7 @@ export default function ContinueListening(): JSX.Element { selectNodes={(p) => p?.me?.user.continueListening.nodes?.map((n) => n.recording) } + selectRoot={(p) => p?.me?.user.continueListening} Card={(p: { node: CardRecordingFragment }) => ( )} diff --git a/src/components/organisms/cardSlider/section/index.tsx b/src/components/organisms/cardSlider/section/index.tsx index 1270f4f10..d9ba6f7d6 100644 --- a/src/components/organisms/cardSlider/section/index.tsx +++ b/src/components/organisms/cardSlider/section/index.tsx @@ -27,6 +27,7 @@ type SectionRoot = { }; type NodeSelector = (page?: T) => Maybe[]>; +type RootSelector = (page: T) => Maybe>; type Card = (props: { node: SectionNode }) => JSX.Element; type SectionProps = { @@ -38,6 +39,10 @@ type SectionProps = { minCardWidth?: number; seeAllUrl?: string; selectNodes?: NodeSelector, N>; + selectRoot?: RootSelector< + InferGraphqlInfiniteQueryType, + N + >; Card: Card; }; @@ -58,6 +63,7 @@ export default function Section({ infiniteQuery, heading, selectNodes = defaultSelectNodes, + selectRoot = selectSectionRoot, Card, seeAllUrl, ...props @@ -68,8 +74,9 @@ export default function Section({ 'after', { language }, { - getNextPageParam: (last: Maybe) => { - const r = selectSectionRoot(last); + getNextPageParam: (last: Maybe) => { + if (!last) return; + const r = selectRoot(last); if (!r) return; return { language, From 2cda61b4a268be97f090e5f18cc339bdd5215cdf Mon Sep 17 00:00:00 2001 From: Jake Coble Date: Wed, 14 Aug 2024 10:24:45 -0400 Subject: [PATCH 09/36] Don't try to fetch a new page of data if there isn't one --- .../organisms/cardSlider/section/index.tsx | 39 +++++++++++-------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/src/components/organisms/cardSlider/section/index.tsx b/src/components/organisms/cardSlider/section/index.tsx index d9ba6f7d6..9c73ad9a6 100644 --- a/src/components/organisms/cardSlider/section/index.tsx +++ b/src/components/organisms/cardSlider/section/index.tsx @@ -70,21 +70,22 @@ export default function Section({ }: SectionProps): JSX.Element { const language = useLanguageId(); - const { data, fetchNextPage, isFetchingNextPage } = infiniteQuery( - 'after', - { language }, - { - getNextPageParam: (last: Maybe) => { - if (!last) return; - const r = selectRoot(last); - if (!r) return; - return { - language, - after: r.pageInfo.endCursor, - }; - }, - } - ); + const { data, fetchNextPage, isFetchingNextPage, hasNextPage } = + infiniteQuery( + 'after', + { language }, + { + getNextPageParam: (last: Maybe) => { + if (!last) return; + const r = selectRoot(last); + if (!r) return; + return { + language, + after: r.pageInfo.endCursor, + }; + }, + } + ); const cards = useMemo( () => @@ -97,11 +98,15 @@ export default function Section({ const preload = useCallback( ({ index, total }: { index: number; total: number }) => { - if (index + PRELOAD_COUNT >= total && !isFetchingNextPage) { + if ( + index + PRELOAD_COUNT >= total && + !isFetchingNextPage && + hasNextPage + ) { fetchNextPage(); } }, - [fetchNextPage, isFetchingNextPage] + [fetchNextPage, isFetchingNextPage, hasNextPage] ); // Check if there's content to render, if not, return an empty JSX element From 2d572a8160e567d03be949b35ed2116a840ad1e0 Mon Sep 17 00:00:00 2001 From: Jake Coble Date: Thu, 15 Aug 2024 14:59:30 -0400 Subject: [PATCH 10/36] Don't fetch new pages for sliders if there are none --- .../cardSlider/section/continueListening.tsx | 2 +- .../organisms/cardSlider/section/index.tsx | 28 ++++++++++++------- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/components/organisms/cardSlider/section/continueListening.tsx b/src/components/organisms/cardSlider/section/continueListening.tsx index ae92d6963..3778bd11a 100644 --- a/src/components/organisms/cardSlider/section/continueListening.tsx +++ b/src/components/organisms/cardSlider/section/continueListening.tsx @@ -28,7 +28,7 @@ export default function ContinueListening(): JSX.Element { selectNodes={(p) => p?.me?.user.continueListening.nodes?.map((n) => n.recording) } - selectRoot={(p) => p?.me?.user.continueListening} + selectPageInfo={(p) => p?.me?.user.continueListening.pageInfo} Card={(p: { node: CardRecordingFragment }) => ( )} diff --git a/src/components/organisms/cardSlider/section/index.tsx b/src/components/organisms/cardSlider/section/index.tsx index 9c73ad9a6..f2fb8164e 100644 --- a/src/components/organisms/cardSlider/section/index.tsx +++ b/src/components/organisms/cardSlider/section/index.tsx @@ -18,16 +18,17 @@ export type SectionNode = T & { canonicalPath: string; }; +type PageInfo = { + hasNextPage: boolean; + endCursor: string | null; +}; type SectionRoot = { nodes: SectionNode[]; - pageInfo: { - hasNextPage: boolean; - endCursor: string | null; - }; + pageInfo: PageInfo; }; type NodeSelector = (page?: T) => Maybe[]>; -type RootSelector = (page: T) => Maybe>; +type PageInfoSelector = (page?: T) => Maybe; type Card = (props: { node: SectionNode }) => JSX.Element; type SectionProps = { @@ -39,7 +40,7 @@ type SectionProps = { minCardWidth?: number; seeAllUrl?: string; selectNodes?: NodeSelector, N>; - selectRoot?: RootSelector< + selectPageInfo?: PageInfoSelector< InferGraphqlInfiniteQueryType, N >; @@ -59,11 +60,15 @@ function defaultSelectNodes(page?: T): Maybe[]> { return selectSectionRoot(page)?.nodes || []; } +function defaultSelectPageInfo(page?: T): Maybe { + return selectSectionRoot(page)?.pageInfo || null; +} + export default function Section({ infiniteQuery, heading, selectNodes = defaultSelectNodes, - selectRoot = selectSectionRoot, + selectPageInfo = defaultSelectPageInfo, Card, seeAllUrl, ...props @@ -77,11 +82,14 @@ export default function Section({ { getNextPageParam: (last: Maybe) => { if (!last) return; - const r = selectRoot(last); - if (!r) return; + const pageInfo = selectPageInfo(last); + if (!pageInfo?.hasNextPage) { + console.warn('No more pages to fetch'); + return; + } return { language, - after: r.pageInfo.endCursor, + after: pageInfo.endCursor, }; }, } From 19db71f7986d06c082c2cef9e2981e9c5c34baa7 Mon Sep 17 00:00:00 2001 From: Jake Coble Date: Thu, 15 Aug 2024 16:49:02 -0400 Subject: [PATCH 11/36] Remove warning about no more pages to fetch --- src/components/organisms/cardSlider/section/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/organisms/cardSlider/section/index.tsx b/src/components/organisms/cardSlider/section/index.tsx index f2fb8164e..a3bc9bdfd 100644 --- a/src/components/organisms/cardSlider/section/index.tsx +++ b/src/components/organisms/cardSlider/section/index.tsx @@ -83,10 +83,7 @@ export default function Section({ getNextPageParam: (last: Maybe) => { if (!last) return; const pageInfo = selectPageInfo(last); - if (!pageInfo?.hasNextPage) { - console.warn('No more pages to fetch'); - return; - } + if (!pageInfo?.hasNextPage) return; return { language, after: pageInfo.endCursor, From 408d89923dc4225e664e11c7b05107f1d7cb310f Mon Sep 17 00:00:00 2001 From: Jake Coble Date: Tue, 20 Aug 2024 11:26:23 -0400 Subject: [PATCH 12/36] Add blank loading cards to Continue Listening --- .../cardSlider/section/continueListening.tsx | 1 + .../organisms/cardSlider/section/index.tsx | 22 ++++++++++++++++--- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/components/organisms/cardSlider/section/continueListening.tsx b/src/components/organisms/cardSlider/section/continueListening.tsx index 3778bd11a..8cebfd9cf 100644 --- a/src/components/organisms/cardSlider/section/continueListening.tsx +++ b/src/components/organisms/cardSlider/section/continueListening.tsx @@ -32,6 +32,7 @@ export default function ContinueListening(): JSX.Element { Card={(p: { node: CardRecordingFragment }) => ( )} + showLoading /> ); } diff --git a/src/components/organisms/cardSlider/section/index.tsx b/src/components/organisms/cardSlider/section/index.tsx index a3bc9bdfd..c06bc7e51 100644 --- a/src/components/organisms/cardSlider/section/index.tsx +++ b/src/components/organisms/cardSlider/section/index.tsx @@ -4,6 +4,8 @@ import { FormattedMessage } from 'react-intl'; import LineHeading from '~components/atoms/lineHeading'; import CardSlider from '~components/organisms/cardSlider'; +import CardWithTheme from '~src/components/molecules/card/base/withTheme'; +import loadingStyles from '~src/components/molecules/loadingCards.module.scss'; import { useLanguageId } from '~src/lib/useLanguageId'; import { GraphqlInfiniteQuery, @@ -45,6 +47,7 @@ type SectionProps = { N >; Card: Card; + showLoading?: boolean; }; function isSectionRoot(v: unknown): v is SectionRoot { @@ -71,11 +74,12 @@ export default function Section({ selectPageInfo = defaultSelectPageInfo, Card, seeAllUrl, + showLoading = false, ...props }: SectionProps): JSX.Element { const language = useLanguageId(); - const { data, fetchNextPage, isFetchingNextPage, hasNextPage } = + const { data, fetchNextPage, isFetchingNextPage, hasNextPage, isLoading } = infiniteQuery( 'after', { language }, @@ -115,10 +119,18 @@ export default function Section({ ); // Check if there's content to render, if not, return an empty JSX element - if (cards.length < 1) { + if (cards.length < 1 && !(isLoading && showLoading)) { return <>; } + const loadingCards: JSX.Element[] = []; + + for (let i = 0; i < 6; i++) { + loadingCards.push( + + ); + } + return (
@@ -129,7 +141,11 @@ export default function Section({ )} - + {isLoading && showLoading ? ( + + ) : ( + + )}
); } From 2f9e7443ccc4438e781a196e66aafa430e5a67ec Mon Sep 17 00:00:00 2001 From: Jake Coble Date: Tue, 20 Aug 2024 17:37:14 -0400 Subject: [PATCH 13/36] Replace Continue Listening with Featured Teachings if there is no data --- .../organisms/cardSlider/section/continueListening.tsx | 2 ++ src/components/organisms/cardSlider/section/index.tsx | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/organisms/cardSlider/section/continueListening.tsx b/src/components/organisms/cardSlider/section/continueListening.tsx index 8cebfd9cf..e2c88c371 100644 --- a/src/components/organisms/cardSlider/section/continueListening.tsx +++ b/src/components/organisms/cardSlider/section/continueListening.tsx @@ -5,6 +5,7 @@ import { CardRecordingFragment } from '~src/components/molecules/card/__generate import CardRecording from '~src/components/molecules/card/recording'; import { useInfiniteGetSectionContinueListeningQuery } from './__generated__/continueListening'; +import FeaturedTeachings from './featuredTeachings'; import Section from './index'; export default function ContinueListening(): JSX.Element { @@ -33,6 +34,7 @@ export default function ContinueListening(): JSX.Element { )} showLoading + blankNode={} /> ); } diff --git a/src/components/organisms/cardSlider/section/index.tsx b/src/components/organisms/cardSlider/section/index.tsx index c06bc7e51..3f221b80a 100644 --- a/src/components/organisms/cardSlider/section/index.tsx +++ b/src/components/organisms/cardSlider/section/index.tsx @@ -48,6 +48,7 @@ type SectionProps = { >; Card: Card; showLoading?: boolean; + blankNode?: JSX.Element; }; function isSectionRoot(v: unknown): v is SectionRoot { @@ -75,6 +76,7 @@ export default function Section({ Card, seeAllUrl, showLoading = false, + blankNode = <>, ...props }: SectionProps): JSX.Element { const language = useLanguageId(); @@ -120,7 +122,7 @@ export default function Section({ // Check if there's content to render, if not, return an empty JSX element if (cards.length < 1 && !(isLoading && showLoading)) { - return <>; + return blankNode; } const loadingCards: JSX.Element[] = []; From 0562b83d2e952bac6479c7a7f1659cc52bb5e9f1 Mon Sep 17 00:00:00 2001 From: Jake Coble Date: Wed, 21 Aug 2024 17:53:41 -0400 Subject: [PATCH 14/36] Smoothly swap from Continue Listening to Featured Teachings on page load --- .../cardSlider/section/continueListening.tsx | 9 ++++++--- .../cardSlider/section/featuredTeachings.tsx | 8 +++++++- .../organisms/cardSlider/section/index.module.scss | 5 +++++ .../organisms/cardSlider/section/index.tsx | 13 +++++++------ src/containers/discover/index.tsx | 5 +++-- 5 files changed, 28 insertions(+), 12 deletions(-) diff --git a/src/components/organisms/cardSlider/section/continueListening.tsx b/src/components/organisms/cardSlider/section/continueListening.tsx index e2c88c371..2d1786c96 100644 --- a/src/components/organisms/cardSlider/section/continueListening.tsx +++ b/src/components/organisms/cardSlider/section/continueListening.tsx @@ -5,14 +5,18 @@ import { CardRecordingFragment } from '~src/components/molecules/card/__generate import CardRecording from '~src/components/molecules/card/recording'; import { useInfiniteGetSectionContinueListeningQuery } from './__generated__/continueListening'; -import FeaturedTeachings from './featuredTeachings'; import Section from './index'; -export default function ContinueListening(): JSX.Element { +export default function ContinueListening({ + hidden, +}: { + hidden: boolean; +}): JSX.Element { const intl = useIntl(); return (