feat: channels in channel

package-lock.json

@@ -11,7 +11,7 @@
         "@heroicons/react": "^2.0.18",
         "@nextui-org/react": "^2.0.7",
         "framer-motion": "^10.15.1",
-        "piped-api": "^1.2.1",
+        "piped-api": "^1.2.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.14.2"
@@ -4439,9 +4439,9 @@
       }
     },
     "node_modules/piped-api": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/piped-api/-/piped-api-1.2.1.tgz",
-      "integrity": "sha512-HoJPQVEiDkwPFTwl29pg1zRcCm7GGZjW5pWt35A8uRRPb6475NgmZT0K+Z+GPtC4j78rbcGK2NEdkZceibW9gQ==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/piped-api/-/piped-api-1.2.2.tgz",
+      "integrity": "sha512-eSzyanTMRGq3c9xCsSSlDXQ7jmd9auLvRIP5RNwv7yIkYBQjBxbQI5CR1vLcmKnD1tw4XdBF15aLIh0Jru3iIw==",
       "dependencies": {
         "axios": "^1.4.0"
       }

package.json

@@ -13,7 +13,7 @@
     "@heroicons/react": "^2.0.18",
     "@nextui-org/react": "^2.0.7",
     "framer-motion": "^10.15.1",
-    "piped-api": "^1.2.1",
+    "piped-api": "^1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2"

src/App.tsx

@@ -4,6 +4,7 @@ import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
 import TrendingPage from "./pages/trending";
 import { NavbarComponent } from "./components/navbar";
 import ChannelPage from "./pages/channel";
+import { useState } from "react";
 
 declare global {
   interface Window {
@@ -12,9 +13,14 @@ declare global {
 }
 function App() {
   window.piped_api = new PipedAPI();
+  const [key, setKey] = useState(Math.random());
+
+  window.addEventListener("reRenderPage", () => {
+    setKey(Math.random());
+  });
 
   return (
-    <HashRouter>
+    <HashRouter key={key}>
       <NavbarComponent />
       <Routes>
         <Route path="/" element={<Navigate to="/trending" />} />

src/components/channel.tsx

@@ -0,0 +1,44 @@
+import { Avatar, Card, CardBody, CardHeader, Link } from "@nextui-org/react";
+import { Channel } from "piped-api/dist/types";
+import { useNavigate } from "react-router-dom";
+import { CheckCircleIcon } from "@heroicons/react/24/solid";
+import { shortenNumber } from "./utils";
+export function ChannelComponent({
+  channel,
+  uploaderAvatar,
+}: ChannelComponentProps) {
+  const navigate = useNavigate();
+
+  return (
+    <Card
+      isPressable
+      onPress={() => {
+        navigate(channel.url || "");
+      }}
+      shadow="none"
+    >
+      <CardHeader>
+        <Avatar
+          className="flex-none"
+          src={uploaderAvatar ? uploaderAvatar : channel.thumbnail}
+        />
+        <Link color="foreground" className="pl-4" href={`#${channel.url}`}>
+          <div className="flex flex-row items-center">
+            <p className="text-md">{channel.name}</p>
+            {channel.verified && <CheckCircleIcon className="w-6 h-6 p-1" />}
+          </div>
+        </Link>
+      </CardHeader>
+      <CardBody className="flex gap-3 flex-row">
+        <p className="flex-none text-md">
+          {`${shortenNumber(channel.videos || -1)} videos`}
+        </p>
+      </CardBody>
+    </Card>
+  );
+}
+
+type ChannelComponentProps = {
+  channel: Channel;
+  uploaderAvatar?: string;
+};

src/components/utils.ts

@@ -20,3 +20,7 @@ export function getTheme() {
     return "light";
   }
 }
+
+export function reRenderPage() {
+  window.dispatchEvent(new Event("reRenderPage"));
+}

src/pages/channel.tsx

@@ -10,6 +10,7 @@ import { capitalize } from "../components/utils";
 import React from "react";
 import { PlaylistComponent } from "../components/playlist";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
+import { ChannelComponent } from "../components/channel";
 
 export default function ChannelPage() {
   const { id } = useParams();
@@ -58,11 +59,20 @@ class ChannelPageСomponent extends React.Component<
     this.setState({ channel, tab });
   }
 
-  componentDidUpdate() {
-    if (!this.state.tab) {
-      this.updateTab();
+  async updateChannel() {
+    const channel = (await window.piped_api.channel(
+      this.props.id || ""
+    )) as Channel;
+
+    this.setState({ ...this.state, channel });
+  }
+
+  async componentDidUpdate() {
+    if (this.props.id !== this.state?.channel?.id) {
+      await this.updateChannel();
     }
   }
+
   render() {
     if (!this.state) {
       return null;
@@ -111,13 +121,10 @@ class ChannelPageСomponent extends React.Component<
             {channel.tabs.map((tab, index) => {
               return (
                 <Button
-                  onClick={() => {
-                    setSearchParams({ tabId: String(index) });
+                  onClick={async () => {
+                    await setSearchParams({ tabId: String(index) });
 
-                    this.setState({
-                      ...this.state,
-                      tab: undefined,
-                    });
+                    await this.updateTab();
                   }}
                   key={tab.name}
                   className="text-xl font-bold mt-4"
@@ -151,7 +158,7 @@ class ChannelPageСomponent extends React.Component<
                   );
                 } else if (item.type === "channel") {
                   item = item as Channel;
-                  return <div>Soon...</div>;
+                  return <ChannelComponent key={item.url} channel={item} />;
                 } else {
                   <div className="" key={Math.random()}>
                     Idk how to render this