From f438e80d3a83082833fa46184fd573ff27ac42b0 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Wed, 6 Dec 2023 23:36:32 +0100
Subject: [PATCH] Add login button instead of watchlist when user is not login

---
 front/packages/ui/src/home/watchlist.tsx | 95 +++++++++++++-----------
 front/translations/en.json               |  3 +-
 front/translations/fr.json               |  3 +-
 3 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/front/packages/ui/src/home/watchlist.tsx b/front/packages/ui/src/home/watchlist.tsx
index f2462674..11d845d1 100644
--- a/front/packages/ui/src/home/watchlist.tsx
+++ b/front/packages/ui/src/home/watchlist.tsx
@@ -24,6 +24,7 @@ import {
 	WatchlistKind,
 	WatchlistP,
 	getDisplayDate,
+	useAccount,
 } from "@kyoo/models";
 import { useYoshiki } from "yoshiki/native";
 import { ItemGrid } from "../browse/grid";
@@ -31,56 +32,66 @@ import { InfiniteFetch } from "../fetch-infinite";
 import { useTranslation } from "react-i18next";
 import { Header } from "./genre";
 import { EpisodeBox, episodeDisplayNumber } from "../details/episode";
+import { View } from "react-native";
+import { Button, P, ts } from "@kyoo/primitives";
 
 export const WatchlistList = () => {
 	const { t } = useTranslation();
 	const { css } = useYoshiki();
+	const account = useAccount();
 
 	return (
 		<>
 			<Header title={t("home.watchlist")} />
-			<InfiniteFetch
-				query={WatchlistList.query()}
-				layout={{ ...ItemGrid.layout, layout: "horizontal" }}
-				getItemType={(x, i) =>
-					(x.kind === WatchlistKind.Show && x.watchStatus?.nextEpisode) || (x.isLoading && i % 2)
-						? "episode"
-						: "item"
-				}
-				empty={t("home.none")}
-			>
-				{(x, i) => {
-					const episode = x.kind === WatchlistKind.Show ? x.watchStatus?.nextEpisode : null;
-					return (x.kind === WatchlistKind.Show && x.watchStatus?.nextEpisode) ||
-						(x.isLoading && i % 2) ? (
-						<EpisodeBox
-							isLoading={x.isLoading as any}
-							name={episode ? `${x.name} ${episodeDisplayNumber(episode)}` : undefined}
-							overview={episode?.name}
-							thumbnail={episode?.thumbnail ?? x.thumbnail}
-							href={episode?.href}
-							watchedPercent={x.watchStatus?.watchedPercent || null}
-							// TODO: support this on mobile too
-							// @ts-expect-error This is a web only property
-							{...css({ gridColumnEnd: "span 2" })}
-						/>
-					) : (
-						<ItemGrid
-							isLoading={x.isLoading as any}
-							href={x.href}
-							name={x.name!}
-							subtitle={!x.isLoading ? getDisplayDate(x) : undefined}
-							poster={x.poster}
-							watchStatus={x.watchStatus?.status || null}
-							watchPercent={x.watchStatus?.watchedPercent || null}
-							unseenEpisodesCount={
-								x.kind === WatchlistKind.Show ? x.watchStatus?.unseenEpisodesCount : null
-							}
-							type={x.kind === WatchlistKind.Movie ? "movie" : "show"}
-						/>
-					);
-				}}
-			</InfiniteFetch>
+			{account ? (
+				<InfiniteFetch
+					query={WatchlistList.query()}
+					layout={{ ...ItemGrid.layout, layout: "horizontal" }}
+					getItemType={(x, i) =>
+						(x.kind === WatchlistKind.Show && x.watchStatus?.nextEpisode) || (x.isLoading && i % 2)
+							? "episode"
+							: "item"
+					}
+					empty={t("home.none")}
+				>
+					{(x, i) => {
+						const episode = x.kind === WatchlistKind.Show ? x.watchStatus?.nextEpisode : null;
+						return (x.kind === WatchlistKind.Show && x.watchStatus?.nextEpisode) ||
+							(x.isLoading && i % 2) ? (
+							<EpisodeBox
+								isLoading={x.isLoading as any}
+								name={episode ? `${x.name} ${episodeDisplayNumber(episode)}` : undefined}
+								overview={episode?.name}
+								thumbnail={episode?.thumbnail ?? x.thumbnail}
+								href={episode?.href}
+								watchedPercent={x.watchStatus?.watchedPercent || null}
+								// TODO: support this on mobile too
+								// @ts-expect-error This is a web only property
+								{...css({ gridColumnEnd: "span 2" })}
+							/>
+						) : (
+							<ItemGrid
+								isLoading={x.isLoading as any}
+								href={x.href}
+								name={x.name!}
+								subtitle={!x.isLoading ? getDisplayDate(x) : undefined}
+								poster={x.poster}
+								watchStatus={x.watchStatus?.status || null}
+								watchPercent={x.watchStatus?.watchedPercent || null}
+								unseenEpisodesCount={
+									x.kind === WatchlistKind.Show ? x.watchStatus?.unseenEpisodesCount : null
+								}
+								type={x.kind === WatchlistKind.Movie ? "movie" : "show"}
+							/>
+						);
+					}}
+				</InfiniteFetch>
+			) : (
+				<View {...css({ justifyContent: "center", alignItems: "center" })}>
+					<P>{t("home.watchlistLogin")}</P>
+					<Button text={t("login.login")} href={"/login"} {...css({ minWidth: ts(24), margin: ts(2) })}/>
+				</View>
+			)}
 		</>
 	);
 };
diff --git a/front/translations/en.json b/front/translations/en.json
index b969458b..cb17c603 100644
--- a/front/translations/en.json
+++ b/front/translations/en.json
@@ -4,7 +4,8 @@
 		"news": "News",
 		"watchlist": "Continue watching",
 		"info": "See more",
-		"none": "No episodes"
+		"none": "No episodes",
+		"watchlistLogin": "To keep track of what you watched or plan to watch, you need to login."
 	},
 	"show": {
 		"play": "Play",
diff --git a/front/translations/fr.json b/front/translations/fr.json
index bb28f436..f44291df 100644
--- a/front/translations/fr.json
+++ b/front/translations/fr.json
@@ -4,7 +4,8 @@
 		"news": "Nouveautés",
 		"watchlist": "Continuer de regarder",
 		"info": "Voir plus",
-		"none": "Aucun episode"
+		"none": "Aucun episode",
+		"watchlistLogin": "Pour suivre ce que vous avez regardé ou prévoyez de regarder, vous devez vous connecter."
 	},
 	"show": {
 		"play": "Lecture",