Add favorites to continue listening carousel

audioverse-org · Oct 24, 2024 · b4aeca8 · b4aeca8
1 parent 3ff27f7
commit b4aeca8
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 8 deletions.
diff --git a/src/components/organisms/cardSlider/section/continueListening.graphql b/src/components/organisms/cardSlider/section/continueListening.graphql
@@ -2,6 +2,7 @@ query getSectionContinueListening(
 	$language: Language!
 	$first: Int! = 3
 	$after: String = null
+	$getFavorites: Boolean = false
 ) {
 	me {
 		user {
@@ -10,7 +11,7 @@ query getSectionContinueListening(
 				first: $first
 				after: $after
 				hasIncompletePlaybackSession: true
-			) {
+			) @skip(if: $getFavorites) {
 				nodes {
 					recording {
 						...cardRecording
@@ -21,6 +22,19 @@ query getSectionContinueListening(
 					endCursor
 				}
 			}
+			favoriteRecordings(
+				first: $first
+				after: $after
+				viewerPlaybackSessionStatus: UNSTARTED
+			) @include(if: $getFavorites) {
+				nodes {
+					...cardRecording
+				}
+				pageInfo {
+					hasNextPage
+					endCursor
+				}
+			}
 		}
 	}
 }
diff --git a/src/components/organisms/cardSlider/section/continueListening.tsx b/src/components/organisms/cardSlider/section/continueListening.tsx
@@ -1,10 +1,14 @@
+import { Maybe } from 'graphql/jsutils/Maybe';
 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 { useInfiniteGetSectionContinueListeningQuery } from './__generated__/continueListening';
+import {
+	GetSectionContinueListeningQuery,
+	useInfiniteGetSectionContinueListeningQuery,
+} from './__generated__/continueListening';
 import Section from './index';
 
 export default function ContinueListening(): JSX.Element {
@@ -13,6 +17,28 @@ export default function ContinueListening(): JSX.Element {
 	return (
 		<Section
 			infiniteQuery={useInfiniteGetSectionContinueListeningQuery}
+			variables={{
+				getFavorites: false,
+			}}
+			options={{
+				getNextPageParam: (
+					lastPage: Maybe<GetSectionContinueListeningQuery>
+				) => {
+					const hasMoreHistory =
+						lastPage?.me?.user.continueListening?.pageInfo.hasNextPage;
+					const historyEndCursor =
+						lastPage?.me?.user.continueListening?.pageInfo.endCursor;
+					const favoritesEndCursor =
+						lastPage?.me?.user.favoriteRecordings?.pageInfo.endCursor;
+					const getFavorites = !hasMoreHistory;
+					const after = getFavorites ? favoritesEndCursor : historyEndCursor;
+
+					return {
+						getFavorites,
+						after,
+					};
+				},
+			}}
 			heading={intl.formatMessage({
 				id: 'discover_continueListeningHeading',
 				defaultMessage: 'Continue Listening',
@@ -25,10 +51,15 @@ export default function ContinueListening(): JSX.Element {
 				id: 'discover__continueListeningNext',
 				defaultMessage: 'Next continue listening',
 			})}
-			selectNodes={(p) =>
-				p?.me?.user.continueListening.nodes?.map((n) => n.recording)
+			selectNodes={(p) => [
+				...(p?.me?.user.continueListening?.nodes?.map((n) => n.recording) ??
+					[]),
+				...(p?.me?.user.favoriteRecordings?.nodes ?? []),
+			]}
+			selectPageInfo={(p) =>
+				p?.me?.user.continueListening?.pageInfo ||
+				p?.me?.user.favoriteRecordings?.pageInfo
 			}
-			selectPageInfo={(p) => p?.me?.user.continueListening.pageInfo}
 			Card={(p: { node: CardRecordingFragment }) => (
 				<CardRecording recording={p.node} />
 			)}

diff --git a/src/components/organisms/cardSlider/section/index.tsx b/src/components/organisms/cardSlider/section/index.tsx
@@ -32,9 +32,10 @@ type NodeSelector<T, N> = (page?: T) => Maybe<SectionNode<N>[]>;
 type PageInfoSelector<T> = (page?: T) => Maybe<PageInfo>;
 type Card<T> = (props: { node: SectionNode<T> }) => JSX.Element;
 
-type SectionProps<T, V, N> = {
+type SectionProps<T, V, O, N> = {
 	infiniteQuery: T;
 	variables?: V;
+	options?: O;
 	heading: string | JSX.Element;
 	previous: string;
 	next: string;
@@ -65,9 +66,10 @@ function defaultSelectPageInfo<T, N>(page?: T): Maybe<PageInfo> {
 	return selectSectionRoot<T, N>(page)?.pageInfo || null;
 }
 
-export default function Section<T extends GraphqlInfiniteQuery, V, N>({
+export default function Section<T extends GraphqlInfiniteQuery, V, O, N>({
 	infiniteQuery,
 	variables,
+	options,
 	heading,
 	selectNodes = defaultSelectNodes,
 	selectPageInfo = defaultSelectPageInfo,
@@ -76,7 +78,7 @@ export default function Section<T extends GraphqlInfiniteQuery, V, N>({
 	isDarkBg,
 	hasBg,
 	...props
-}: SectionProps<T, V, N>): JSX.Element {
+}: SectionProps<T, V, O, N>): JSX.Element {
 	const language = useLanguageId();
 
 	const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
@@ -92,6 +94,7 @@ export default function Section<T extends GraphqlInfiniteQuery, V, N>({
 						after: pageInfo.endCursor,
 					};
 				},
+				...options,
 			},
 		);