Implementation of channel pages almost completed

HolodexNet · Jun 3, 2024 · 3d3b590 · 3d3b590
1 parent 91c9c48
commit 3d3b590
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 26 deletions.
diff --git a/packages/react/src/routes/channel.tsx b/packages/react/src/routes/channel.tsx
@@ -7,10 +7,16 @@ import { getChannelBannerImages } from "@/lib/utils";
 import { useChannel } from "@/services/channel.service";
 import { Tabs, TabsList, TabsTrigger } from "@/shadcn/ui/tabs";
 import { ExternalLink } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
-import { Link, Outlet, useNavigate, useParams } from "react-router-dom";
+import {
+  Link,
+  Outlet,
+  useLocation,
+  useNavigate,
+  useParams,
+} from "react-router-dom";
 
 export type ChannelOutletContext = {
   id: string;
@@ -21,21 +27,16 @@ export default function Channel() {
   const { t } = useTranslation();
   const { id } = useParams();
   const navigate = useNavigate();
+  const location = useLocation();
 
   const [tab, setTab] = useState("");
 
   const { data: channel } = useChannel(id!);
 
-  const onTabChange = (tab: string) => {
-    // Open Musicdex when selected music tab
-    if (tab === "music") return open("https://music.holodex.net");
-
-    setTab(tab);
-    navigate(`/channel/${channel?.id}/${tab}`);
-  };
-
   if (!id || !channel) return <Loading size="md" />;
 
+  console.log(location.pathname.split("/"));
+
   return (
     <>
       <Helmet>
@@ -50,8 +51,13 @@ export default function Channel() {
               : ""
           }
         />
-        <Tabs value={tab} onValueChange={onTabChange}>
-          <div className="bg-base-3 border-b-base-5 sticky top-0 z-50 flex flex-col gap-8 border-b-[1px] py-4 shadow-md">
+        <Tabs
+          value={location.pathname.split("/").at(-1)}
+          onValueChange={(tab) =>
+            tab !== "music" && navigate(`/channel/${channel?.id}/${tab}`)
+          }
+        >
+          <div className="bg-base-3 border-b-base-5 sticky top-0 z-50 flex flex-col gap-8 border-b-[1px] py-4 shadow-lg">
             <div className="container flex items-center gap-4">
               <ChannelImg channelId={channel?.id} />
               <div className="flex flex-col overflow-hidden">
@@ -96,9 +102,11 @@ export default function Channel() {
               <TabsTrigger value="collabs">
                 {t("views.channel.collabs")}
               </TabsTrigger>
-              <TabsTrigger value="music" className="gap-2">
-                {t("views.channel.music")}
-                <ExternalLink size={16} />
+              <TabsTrigger value="music" className="gap-2" asChild>
+                <Link target="_blank" to="https://music.holodex.net">
+                  {t("views.channel.music")}
+                  <ExternalLink size={16} />
+                </Link>
               </TabsTrigger>
               <TabsTrigger value="about">
                 {t("views.channel.about")}

diff --git a/packages/react/src/routes/channel/ChannelAbout.tsx b/packages/react/src/routes/channel/ChannelAbout.tsx
@@ -0,0 +1,35 @@
+import { useOutletContext } from "react-router-dom";
+import { ChannelOutletContext } from "../channel";
+import { useTranslation } from "react-i18next";
+
+export default function ChannelAbout() {
+  const { t } = useTranslation();
+  const { channel } = useOutletContext<ChannelOutletContext>();
+
+  return (
+    <div className="container flex gap-4 py-4 max-sm:flex-col-reverse">
+      <div className="bg-base-3 w-full whitespace-pre-wrap rounded-lg p-4">
+        {channel.description}
+      </div>
+      <div className="bg-base-3 divide-base-5 h-fit w-full shrink-0 flex-col divide-y-2 rounded-lg p-4 md:w-80 [&>p]:py-2">
+        <h3 className="pb-2 text-xl font-bold">
+          {t("component.channelInfo.stats")}
+        </h3>
+        <p>
+          {t("component.channelInfo.videoCount", {
+            0: Number(channel.video_count).toLocaleString(),
+          })}
+        </p>
+        <p>
+          {t("component.channelInfo.clipCount", {
+            n: Number(channel.clip_count).toLocaleString(),
+          })}
+        </p>
+        <p>
+          {Number(channel.view_count).toLocaleString()}
+          {t("component.channelInfo.totalViews")}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/react/src/routes/channel/ChannelVideos.tsx b/packages/react/src/routes/channel/ChannelVideos.tsx
@@ -3,7 +3,7 @@ import { ChannelOutletContext } from "../channel";
 import { useChannelVideos } from "@/services/channel.service";
 import { MainVideoListing } from "@/components/video/MainVideoListing";
 
-export default function ChannelVideos() {
+export default function ChannelVideos({ type }: { type: ChannelVideoType }) {
   const { id, channel } = useOutletContext<ChannelOutletContext>();
 
   const {
@@ -12,9 +12,7 @@ export default function ChannelVideos() {
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-  } = useChannelVideos(id, "videos");
-
-  console.log(videos);
+  } = useChannelVideos(id, type);
 
   return (
     <div className="container py-4">

diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
@@ -5,7 +5,6 @@ import { orgAtom } from "@/store/org";
 import { Frame } from "@/components/layout/Frame";
 import { NavigateToMusicdex } from "@/components/channel/NavigateToMusicdex";
 import React from "react";
-import ChannelVideos from "./channel/ChannelVideos";
 
 const Login = React.lazy(() => import("./login"));
 const Settings = React.lazy(() => import("./settings"));
@@ -26,6 +25,8 @@ const AboutPrivacy = React.lazy(() => import("./about/privacy"));
 const Watch = React.lazy(() => import("./watch"));
 const ChannelsOrg = React.lazy(() => import("./channelsOrg"));
 const Channel = React.lazy(() => import("./channel"));
+const ChannelVideos = React.lazy(() => import("./channel/ChannelVideos"));
+const ChannelAbout = React.lazy(() => import("./channel/ChannelAbout"));
 const EditVideo = React.lazy(() => import("./editVideo"));
 const Kitchensink = React.lazy(() => import("@/Kitchensink"));
 const Playlists = React.lazy(() => import("./playlists"));
@@ -77,19 +78,19 @@ const router = createBrowserRouter([
         children: [
           {
             index: true,
-            element: <ChannelVideos />,
+            element: <ChannelVideos type="videos" />,
           },
           {
             path: "about",
-            element: <div>Channel_About</div>,
+            element: <ChannelAbout />,
           },
           {
             path: "clips",
-            element: <div>Channel_Clips</div>,
+            element: <ChannelVideos type="clips" />,
           },
           {
             path: "collabs",
-            element: <div>Channel_Collabs</div>,
+            element: <ChannelVideos type="collabs" />,
           },
           {
             path: "music",

diff --git a/packages/react/src/services/channel.service.ts b/packages/react/src/services/channel.service.ts
@@ -68,13 +68,13 @@ export function useChannel(
 
 export function useChannelVideos(
   channelId: string,
-  type: "videos" | "collabs" | "clips",
+  type: ChannelVideoType,
   params?: UseChannelVideosParams,
 ) {
   const client = useClient();
 
   return useInfiniteQuery<VideoBase[], HTTPError>({
-    queryKey: ["channel", channelId, "videos"],
+    queryKey: ["channel", channelId, type],
     initialPageParam: 0,
     queryFn: async ({ pageParam }) =>
       await client(`/api/v2/channels/${channelId}/${type}`, {

diff --git a/packages/react/src/types/channel.d.ts b/packages/react/src/types/channel.d.ts
@@ -1,4 +1,5 @@
 type ChannelType = "vtuber" | "subber";
+type ChannelVideoType = "videos" | "collabs" | "clips";
 
 interface ChannelBase {
   id: string;