From 0366970d4ef64ceec46213c3643bc46eca79f7e3 Mon Sep 17 00:00:00 2001 From: Carlos Dela Cruz Date: Tue, 24 Oct 2023 17:45:36 -0400 Subject: [PATCH 1/5] created a "favouritesAtom" to store favourited channels to local storage --- packages/react/src/components/channel/ChannelCard.tsx | 7 ++++--- packages/react/src/components/languae/languagePicker.tsx | 1 - packages/react/src/routes/favourites.tsx | 3 +++ packages/react/src/routes/router.tsx | 3 ++- packages/react/src/store/favourites.ts | 7 +++++++ 5 files changed, 16 insertions(+), 5 deletions(-) create mode 100644 packages/react/src/routes/favourites.tsx create mode 100644 packages/react/src/store/favourites.ts diff --git a/packages/react/src/components/channel/ChannelCard.tsx b/packages/react/src/components/channel/ChannelCard.tsx index 43fdf8575..4a68886d0 100644 --- a/packages/react/src/components/channel/ChannelCard.tsx +++ b/packages/react/src/components/channel/ChannelCard.tsx @@ -64,14 +64,15 @@ export function ChannelCard({ className="w-full" variant={isInFavorite ? "outline" : "secondary"} disabled={mutateLoading} - onClick={() => + onClick={() => { mutate([ { op: isInFavorite ? "remove" : "add", channel_id: id, }, - ]) - } + ]); + console.log(isInFavorite); + }} > {isInFavorite ? (
diff --git a/packages/react/src/components/languae/languagePicker.tsx b/packages/react/src/components/languae/languagePicker.tsx index d18b14d13..7dc0d8013 100644 --- a/packages/react/src/components/languae/languagePicker.tsx +++ b/packages/react/src/components/languae/languagePicker.tsx @@ -21,7 +21,6 @@ export const LanguageSelector = () => { const [currentLang, setCurrentLang] = useAtom(currentLangAtom); const [open, setOpen] = React.useState(false); const [value, setValue] = React.useState(""); - console.log(currentLang); return ( diff --git a/packages/react/src/routes/favourites.tsx b/packages/react/src/routes/favourites.tsx new file mode 100644 index 000000000..7134bb708 --- /dev/null +++ b/packages/react/src/routes/favourites.tsx @@ -0,0 +1,3 @@ +export default function Favorites() { + return

hello

; +} diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx index 423e068fc..4a7e10d8d 100644 --- a/packages/react/src/routes/router.tsx +++ b/packages/react/src/routes/router.tsx @@ -21,6 +21,7 @@ const AboutPrivacy = React.lazy(() => import("./about/privacy")); const ChannelsOrg = React.lazy(() => import("./channelsOrg")); const Channel = React.lazy(() => import("./channel")); const Kitchensink = React.lazy(() => import("@/Kitchensink")); +const Favourites = React.lazy(() => import("./favourites")); const store = getDefaultStore(); @@ -31,7 +32,7 @@ const router = createBrowserRouter([ children: [ { path: "favorites", - element:
Favorites
, + element: , }, { path: "search", diff --git a/packages/react/src/store/favourites.ts b/packages/react/src/store/favourites.ts new file mode 100644 index 000000000..429848a62 --- /dev/null +++ b/packages/react/src/store/favourites.ts @@ -0,0 +1,7 @@ +import { atom, useSetAtom } from "jotai"; +import { atomWithStorage } from "jotai/utils"; + +export const favouritesAtom = atomWithStorage( + "favourites", + null, +); From 9f353e6e3000782e077c1714532ce3a81ba13690 Mon Sep 17 00:00:00 2001 From: Carlos Dela Cruz Date: Wed, 25 Oct 2023 14:18:05 -0400 Subject: [PATCH 2/5] created a favourites route --- packages/react/src/routes/favourites.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/react/src/routes/favourites.tsx b/packages/react/src/routes/favourites.tsx index 7134bb708..668cec768 100644 --- a/packages/react/src/routes/favourites.tsx +++ b/packages/react/src/routes/favourites.tsx @@ -1,3 +1,20 @@ +import { useFavorites } from "@/services/user.service"; +import { ChannelCard } from "@/components/channel/ChannelCard"; +import { VirtuosoGrid } from "react-virtuoso"; + export default function Favorites() { - return

hello

; + const { data: favChannels } = useFavorites(); + console.log(favChannels); + return ( + <> +
+ } + /> +
+ + ); } From f793b905653c0266eb928439dc1756f80a798ab3 Mon Sep 17 00:00:00 2001 From: Carlos Dela Cruz Date: Wed, 25 Oct 2023 14:18:46 -0400 Subject: [PATCH 3/5] "Added utility types for enhanced property optionality control and introduced PartialChannel type to enforce required properties on Channel objects while keeping others optional." --- .../react/src/components/channel/ChannelCard.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/channel/ChannelCard.tsx b/packages/react/src/components/channel/ChannelCard.tsx index 4a68886d0..2fc679e1f 100644 --- a/packages/react/src/components/channel/ChannelCard.tsx +++ b/packages/react/src/components/channel/ChannelCard.tsx @@ -6,7 +6,18 @@ import { useMemo } from "react"; import { useTranslation } from "react-i18next"; import { Link } from "react-router-dom"; -interface ChannelCardProps extends Channel {} +type Omit = Pick>; +type WithNonOptional = Pick< + T, + NonOptionalKeys +> & + Partial>; +type PartialChannel = WithNonOptional< + Channel, + "id" | "name" | "photo" | "subscriber_count" | "video_count" +>; + +interface ChannelCardProps extends PartialChannel {} export function ChannelCard({ id, @@ -27,6 +38,7 @@ export function ChannelCard({ [data, id], ); + console.log(name, photo); return ( // Set min-height because react-virtuoso will break if the height is not fixed
From cde6274f853cade19b2fbb57f3f34c557ea821a5 Mon Sep 17 00:00:00 2001 From: Carlos Dela Cruz Date: Wed, 25 Oct 2023 14:22:43 -0400 Subject: [PATCH 4/5] removed console logs --- packages/react/src/components/channel/ChannelCard.tsx | 2 -- packages/react/src/routes/favourites.tsx | 1 - 2 files changed, 3 deletions(-) diff --git a/packages/react/src/components/channel/ChannelCard.tsx b/packages/react/src/components/channel/ChannelCard.tsx index 2fc679e1f..7819a0e44 100644 --- a/packages/react/src/components/channel/ChannelCard.tsx +++ b/packages/react/src/components/channel/ChannelCard.tsx @@ -37,8 +37,6 @@ export function ChannelCard({ () => data?.some((channel) => id === channel.id), [data, id], ); - - console.log(name, photo); return ( // Set min-height because react-virtuoso will break if the height is not fixed
diff --git a/packages/react/src/routes/favourites.tsx b/packages/react/src/routes/favourites.tsx index 668cec768..60af9728a 100644 --- a/packages/react/src/routes/favourites.tsx +++ b/packages/react/src/routes/favourites.tsx @@ -4,7 +4,6 @@ import { VirtuosoGrid } from "react-virtuoso"; export default function Favorites() { const { data: favChannels } = useFavorites(); - console.log(favChannels); return ( <>
From ead13341d98fde8e14f47ee42cf84684818cbd7b Mon Sep 17 00:00:00 2001 From: Carlos Dela Cruz Date: Wed, 25 Oct 2023 14:34:41 -0400 Subject: [PATCH 5/5] removed favourites store --- packages/react/src/store/favourites.ts | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 packages/react/src/store/favourites.ts diff --git a/packages/react/src/store/favourites.ts b/packages/react/src/store/favourites.ts deleted file mode 100644 index 429848a62..000000000 --- a/packages/react/src/store/favourites.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { atom, useSetAtom } from "jotai"; -import { atomWithStorage } from "jotai/utils"; - -export const favouritesAtom = atomWithStorage( - "favourites", - null, -);