Merge branches 'next' and 'next' of github:HolodexNet/Holodex into next

HolodexNet · Oct 26, 2023 · 5242afd · 5242afd
2 parents 11c152d + 09c90fe
commit 5242afd
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git 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<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type WithNonOptional<T, NonOptionalKeys extends keyof T> = Pick<
+  T,
+  NonOptionalKeys
+> &
+  Partial<Omit<T, NonOptionalKeys>>;
+type PartialChannel = WithNonOptional<
+  Channel,
+  "id" | "name" | "photo" | "subscriber_count" | "video_count"
+>;
+
+interface ChannelCardProps extends PartialChannel {}
 
 export function ChannelCard({
   id,
@@ -26,7 +37,6 @@ export function ChannelCard({
     () => data?.some((channel) => id === channel.id),
     [data, id],
   );
-
   return (
     // Set min-height because react-virtuoso will break if the height is not fixed
     <div className="flex h-full min-h-[24rem] w-full flex-col items-center gap-2 rounded-md bg-base-3 p-4">
@@ -64,14 +74,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 ? (
           <div className="i-heroicons:heart-solid" />

diff --git a/packages/react/src/routes/favourites.tsx b/packages/react/src/routes/favourites.tsx
@@ -0,0 +1,19 @@
+import { useFavorites } from "@/services/user.service";
+import { ChannelCard } from "@/components/channel/ChannelCard";
+import { VirtuosoGrid } from "react-virtuoso";
+
+export default function Favorites() {
+  const { data: favChannels } = useFavorites();
+  return (
+    <>
+      <div className="h-full w-full p-4 md:p-8">
+        <VirtuosoGrid
+          useWindowScroll
+          listClassName="w-full grid grid-cols-[repeat(auto-fill,_minmax(240px,_1fr))] gap-x-4 gap-y-6"
+          data={favChannels?.flat() ?? []}
+          itemContent={(_, channel) => <ChannelCard {...channel} />}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
@@ -25,6 +25,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();
 
@@ -35,7 +36,7 @@ const router = createBrowserRouter([
     children: [
       {
         path: "favorites",
-        element: <div>Favorites</div>,
+        element: <Favourites />,
       },
       {
         path: "search",