chore: misc changes

Clean up some code inconsistencies
Try to handle async stuff better

tubearchivist/www/src/components/VideoList.tsx

@@ -122,7 +122,7 @@ export const VideoList = () => {
         </div>
         <div className={`video-list ${viewStyle}`}>
           {data &&
-            data.data?.map((video) => {
+            data?.data?.map((video) => {
               return (
                 <div
                   key={video.youtube_id}
@@ -134,11 +134,11 @@ export const VideoList = () => {
                   >
                     <div className="video-thumb-wrap list">
                       <div className="video-thumb">
-                        <NextImage
+                        <img
                           src={`${TA_BASE_URL}/cache/${video.vid_thumb_url}`}
                           alt="video-thumb"
-                          width={250}
-                          height={145}
+                          // width={250}
+                          // height={145}
                           // blurDataURL={placeholder}
                           // placeholder="blur"
                         />
@@ -171,7 +171,7 @@ export const VideoList = () => {
                       className="video-desc-player"
                       id={`video-info-${video.youtube_id}`}
                     >
-                      {video.player.watched ? (
+                      {video?.player?.watched ? (
                         <img
                           src="/img/icon-seen.svg"
                           alt="seen-icon"

tubearchivist/www/src/components/VideoPlayer.tsx

@@ -1,22 +1,24 @@
 import NextImage from "next/image";
 import ReactPlayer from "react-player";
 import IconClose from "../images/icon-close.svg";
+import { TA_BASE_URL } from "../lib/constants";
 import { formatNumbers } from "../lib/utils";
 
 export const VideoPlayer = ({ selectedVideoUrl, handleRemoveVideoPlayer }) => {
   if (!selectedVideoUrl) return;
   return (
     <>
+      {selectedVideoUrl && (
         <div className="player-wrapper">
           <div className="video-player">
             <ReactPlayer
               controls={true}
               width="100%"
               height="100%"
-            light="false"
+              light={false}
               playing // TODO: Not currently working
               playsinline
-            url={`${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/media/${selectedVideoUrl.media_url}`}
+              url={`${TA_BASE_URL}/media/${selectedVideoUrl?.media_url}`}
             />
             <div className="player-title boxed-content">
               <NextImage
@@ -56,6 +58,7 @@ export const VideoPlayer = ({ selectedVideoUrl, handleRemoveVideoPlayer }) => {
             </div>
           </div>
         </div>
+      )}
     </>
   );
 };

tubearchivist/www/src/lib/getChannels.ts

@@ -1,17 +1,15 @@
 import { Channel } from "../types/channel";
+import { TA_BASE_URL } from "./constants";
 
 export const getChannels = async (token: string): Promise<Channel> => {
-  const response = await fetch(
-    `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/channel/`,
-    {
+  const response = await fetch(`${TA_BASE_URL}/api/channel/`, {
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json",
       Authorization: `Token ${token}`,
       mode: "no-cors",
     },
-    }
-  );
+  });
   if (!response.ok) {
     throw new Error("Error getting channel information");
   }

tubearchivist/www/src/lib/getPlaylists.ts

@@ -1,17 +1,15 @@
 import { Playlist } from "../types/playlist";
+import { TA_BASE_URL } from "./constants";
 
 export const getPlaylists = async (token: string): Promise<Playlist> => {
-  const response = await fetch(
-    `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/playlist/`,
-    {
+  const response = await fetch(`${TA_BASE_URL}/api/playlist/`, {
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json",
       Authorization: `Token ${token}`,
       mode: "no-cors",
     },
-    }
-  );
+  });
   if (!response.ok) {
     throw new Error("Error getting channel information");
   }

tubearchivist/www/src/lib/getVideos.ts

@@ -1,20 +1,18 @@
 import { Videos } from "../types/video";
+import { TA_BASE_URL } from "./constants";
 
 export const getVideos = async (token: string): Promise<Videos> => {
   if (!token) {
     throw new Error("Missing API token in request to get videos");
   }
-  const response = await fetch(
-    `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/video/`,
-    {
+  const response = await fetch(`${TA_BASE_URL}/api/video/`, {
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json",
       Authorization: `Token ${token}`,
       mode: "no-cors",
     },
-    }
-  );
+  });
 
   if (!response.ok) {
     throw new Error("Failed to fetch videos");

tubearchivist/www/src/pages/api/auth/[...nextauth].ts

@@ -1,5 +1,6 @@
 import NextAuth from "next-auth";
 import CredentialsProvider from "next-auth/providers/credentials";
+import { TA_BASE_URL } from "../../../lib/constants";
 
 type TA_Token = {
   token: string;
@@ -29,17 +30,14 @@ export default NextAuth({
           password: credentials.password,
         };
 
-        const res = await fetch(
-          `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/login/`,
-          {
+        const res = await fetch(`${TA_BASE_URL}/api/login/`, {
           method: "POST",
           body: JSON.stringify(payload),
           headers: {
             "Content-Type": "application/json",
             "Accept-Language": "en-US",
           },
-          }
-        );
+        });
 
         const ta_token: TA_Token = await res.json();
         // If no error and we have user data, return it

tubearchivist/www/src/pages/channel.tsx

@@ -29,6 +29,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   return {
     props: {
       dehydratedState: dehydrate(queryClient),
+      session,
     },
   };
 };
@@ -114,7 +115,7 @@ const Channel: NextPage = () => {
             {!channels.data ? (
               <h2>No channels found...</h2>
             ) : (
-              channels?.data.map((channel) => {
+              channels?.data?.map((channel) => {
                 return (
                   <div
                     key={channel?.channel_id}

tubearchivist/www/src/pages/index.tsx

@@ -38,13 +38,14 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     };
   }
 
-  await queryClient.prefetchQuery("videos", () =>
+  await queryClient.prefetchQuery(["videos", session.ta_token.token], () =>
     getVideos(session.ta_token.token)
   );
 
   return {
     props: {
       dehydratedState: dehydrate(queryClient),
+      session,
     },
   };
 };

tubearchivist/www/src/pages/playlist.tsx

@@ -33,6 +33,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
   return {
     props: {
       dehydratedState: dehydrate(queryClient),
+      session,
     },
   };
 };
@@ -41,7 +42,11 @@ const Playlist = () => {
   const { data: session } = useSession();
   const {
     data: { data: playlists },
-  } = useQuery("playlists", () => getPlaylists(session.ta_token.token));
+    error,
+    isLoading,
+  } = useQuery("playlists", () => getPlaylists(session.ta_token.token), {
+    enabled: !!session.ta_token.token,
+  });
 
   const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
 
@@ -119,7 +124,7 @@ const Playlist = () => {
         <div className={`playlist-list ${viewStyle}`}>
           {/* {% if results %}
             {% for playlist in results %} */}
-          {!playlists ? (
+          {!isLoading && !playlists ? (
             <h2>No playlists found...</h2>
           ) : (
             playlists?.map((playlist) => {