refactor: class components

src/index.css

@@ -1,10 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  body {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%23f1f5f9'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
-    @apply bg-gray-200;
-  }
-}

src/pages/channel.tsx

@@ -1,5 +1,4 @@
 import { Channel, Tab, Video } from "piped-api/dist/types";
-import { useEffect, useState } from "react";
 import {
   SkeletonVideoComponent,
   VideoComponent,
@@ -8,34 +7,67 @@ import {
 import { useParams, useSearchParams } from "react-router-dom";
 import { Button, Card, CardFooter } from "@nextui-org/react";
 import { capitalize } from "../components/utils";
+import React from "react";
 
 export default function ChannelPage() {
-  const [channel, setChannel] = useState<Channel>();
-  const [tab, setTab] = useState<Tab>();
-
   const { id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const tabId = searchParams.get("tabId") || "videos";
 
-  useEffect(() => {
+  return (
-    async function getChannel() {
+    <ChannelPageСomponent
-      const channel = (await window.piped_api.channel(id || "")) as Channel;
+      id={id}
-      setChannel(channel);
+      setSearchParams={setSearchParams}
+      tabId={tabId}
+    />
+  );
+}
+
+class ChannelPageСomponent extends React.Component<
+  { id; setSearchParams; tabId },
+  { channel: Channel; tab: Tab | undefined }
+> {
+  async componentDidMount() {
+    const channel = (await window.piped_api.channel(
+      this.props.id || ""
+    )) as Channel;
+
+    if (this.props.tabId === "videos") {
+      return this.setState({ channel });
     }
 
-    async function getTab(name: string) {
+    if (!this.state?.tab) {
-      const tab = await window.piped_api.channelTabs(channel?.tabs[name].data);
+      const tab = await window.piped_api.channelTabs(
-      setTab(tab);
+        channel.tabs[this.props.tabId].data
+      );
+
+      this.setState({ channel, tab });
+    }
   }
 
-    if (!channel) {
+  async updateTab() {
-      getChannel();
+    if (this.props.tabId === "videos") {
+      return;
+    }
+    const { channel } = this.state;
+    const tab = await window.piped_api.channelTabs(
+      channel.tabs[this.props.tabId].data
+    );
+    this.setState({ channel, tab });
   }
 
-    if (!tab && tabId !== "videos") {
+  componentDidUpdate() {
-      getTab(tabId);
+    if (!this.state.tab) {
+      this.updateTab();
     }
-  });
+  }
+  render() {
+    if (!this.state) {
+      return null;
+    }
+
+    const { channel, tab } = this.state;
+    const { setSearchParams, tabId } = this.props;
 
     if (!channel) {
       return (
@@ -76,7 +108,11 @@ export default function ChannelPage() {
                 <Button
                   onClick={() => {
                     setSearchParams({ tabId: String(index) });
-                  setTab(undefined);
+
+                    this.setState({
+                      ...this.state,
+                      tab: undefined,
+                    });
                   }}
                   key={tab.name}
                   className="text-xl font-bold mt-4"
@@ -122,4 +158,5 @@ export default function ChannelPage() {
         </div>
       );
     }
+  }
 }

src/pages/trending.tsx

@@ -1,20 +1,22 @@
 import { Video } from "piped-api/dist/types";
-import { useEffect, useState } from "react";
 import { SkeletonVideoComponent, VideoComponent } from "../components/video";
+import React from "react";
 
-export default function TrendingPage() {
+export default class TrendingPage extends React.Component {
-  const [trending, setTrending] = useState([] as Video[]);
+  state: { trending: Video[] } = {
+    trending: [],
+  };
 
-  useEffect(() => {
+  async componentDidMount() {
-    async function getTrending() {
+    console.log("trending");
-      const trending = await window.piped_api.trending("US");
+    const trending = await window.piped_api.trending(
-      setTrending(trending);
+      localStorage.getItem("region") || "US"
+    );
+    this.setState({ trending });
   }
 
-    if (trending.length === 0) {
+  render() {
-      getTrending();
+    const { trending } = this.state;
-    }
-  });
 
     if (trending.length === 0) {
       return (
@@ -33,4 +35,5 @@ export default function TrendingPage() {
         ))}
       </div>
     );
+  }
 }