refactor: ItemComponent

src/components/item.tsx

@@ -0,0 +1,28 @@
+import { Channel, Playlist, Video } from "piped-api/dist/types";
+import { VideoComponent } from "./video";
+import { PlaylistComponent } from "./playlist";
+import { ChannelComponent } from "./channel";
+
+export function ItemComponent({ item, channel }: ItemComponentProps) {
+  if (item.type === "stream") {
+    item = item as Video;
+    return <VideoComponent video={item} uploaderAvatar={channel.avatarUrl} />;
+  } else if (item.type === "playlist") {
+    item = item as Playlist;
+    return (
+      <PlaylistComponent playlist={item} uploaderAvatar={channel.avatarUrl} />
+    );
+  } else if (item.type === "channel") {
+    item = item as Channel;
+    return <ChannelComponent channel={item} />;
+  } else {
+    <div className="" key={Math.random()}>
+      Idk how to render this
+    </div>;
+  }
+}
+
+type ItemComponentProps = {
+  channel: Channel;
+  item: Video | Playlist | Channel;
+};

src/components/video.tsx

@@ -38,7 +38,9 @@ export function VideoComponent({ video, uploaderAvatar }: VideoComponentProps) {
           <div className="flex flex-row items-center">
             <EyeIcon className="w-6 h-6 p-1" />
             <p className="flex-none text-md">
-              {`${shortenNumber(video.views)} • ${video.uploadedDate}`}
+              {`${shortenNumber(video.views)}${
+                video.uploadedDate ? ` • ${video.uploadedDate}` : ""
+              }`}
             </p>
           </div>
         </div>

src/pages/channel.tsx

@@ -1,16 +1,11 @@
-import { Channel, Playlist, Tab, Video } from "piped-api/dist/types";
+import { Channel, Tab } from "piped-api/dist/types";
-import {
+import { SkeletonVideoComponent, VideoContainer } from "../components/video";
-  SkeletonVideoComponent,
-  VideoComponent,
-  VideoContainer,
-} from "../components/video";
 import { useParams, useSearchParams } from "react-router-dom";
 import { Button, Card, CardFooter } from "@nextui-org/react";
 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";
+import { ItemComponent } from "../components/item";
 
 export default function ChannelPage() {
   const { id } = useParams();
@@ -135,48 +130,20 @@ class ChannelPageСomponent extends React.Component<
             })}
           </div>
 
-          {tabId !== "videos" ? (
+          <VideoContainer>
-            <VideoContainer>
+            {(tabId !== "videos"
-              {tab?.content.map((item) => {
+              ? tab?.content || []
-                if (item.type === "stream") {
+              : channel.relatedStreams
-                  item = item as Video;
+            ).map((item) => {
-                  return (
+              return (
-                    <VideoComponent
+                <ItemComponent
-                      video={item}
+                  key={Math.random()}
-                      key={item.url}
+                  item={item}
-                      uploaderAvatar={channel.avatarUrl}
+                  channel={channel}
-                    />
-                  );
-                } else if (item.type === "playlist") {
-                  item = item as Playlist;
-                  return (
-                    <PlaylistComponent
-                      playlist={item}
-                      key={item.url}
-                      uploaderAvatar={channel.avatarUrl}
-                    />
-                  );
-                } else if (item.type === "channel") {
-                  item = item as Channel;
-                  return <ChannelComponent key={item.url} channel={item} />;
-                } else {
-                  <div className="" key={Math.random()}>
-                    Idk how to render this
-                  </div>;
-                }
-              })}
-            </VideoContainer>
-          ) : (
-            <VideoContainer>
-              {channel.relatedStreams.map((video) => (
-                <VideoComponent
-                  video={video}
-                  key={video.url}
-                  uploaderAvatar={channel.avatarUrl}
                 />
-              ))}
+              );
-            </VideoContainer>
+            })}
-          )}
+          </VideoContainer>
         </div>
       );
     }