From 0b4108297930666e0bc78b00f83083c68c41d66a Mon Sep 17 00:00:00 2001
From: Artemy <artegoser@gmail.com>
Date: Thu, 10 Aug 2023 13:22:58 +0300
Subject: [PATCH] refactor: ItemComponent

---
 src/components/item.tsx  | 28 +++++++++++++++++
 src/components/video.tsx |  4 ++-
 src/pages/channel.tsx    | 65 ++++++++++------------------------------
 3 files changed, 47 insertions(+), 50 deletions(-)
 create mode 100644 src/components/item.tsx

diff --git a/src/components/item.tsx b/src/components/item.tsx
new file mode 100644
index 0000000..db1f096
--- /dev/null
+++ b/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;
+};
diff --git a/src/components/video.tsx b/src/components/video.tsx
index 6d5b2fa..321a22c 100644
--- a/src/components/video.tsx
+++ b/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>
diff --git a/src/pages/channel.tsx b/src/pages/channel.tsx
index 4748c34..d61caae 100644
--- a/src/pages/channel.tsx
+++ b/src/pages/channel.tsx
@@ -1,16 +1,11 @@
-import { Channel, Playlist, Tab, Video } from "piped-api/dist/types";
-import {
-  SkeletonVideoComponent,
-  VideoComponent,
-  VideoContainer,
-} from "../components/video";
+import { Channel, Tab } from "piped-api/dist/types";
+import { SkeletonVideoComponent, 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>
-              {tab?.content.map((item) => {
-                if (item.type === "stream") {
-                  item = item as Video;
-                  return (
-                    <VideoComponent
-                      video={item}
-                      key={item.url}
-                      uploaderAvatar={channel.avatarUrl}
-                    />
-                  );
-                } 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>
+            {(tabId !== "videos"
+              ? tab?.content || []
+              : channel.relatedStreams
+            ).map((item) => {
+              return (
+                <ItemComponent
+                  key={Math.random()}
+                  item={item}
+                  channel={channel}
                 />
-              ))}
-            </VideoContainer>
-          )}
+              );
+            })}
+          </VideoContainer>
         </div>
       );
     }