From b62b903ed5493d53b2d30440b11eb4d042c772ee Mon Sep 17 00:00:00 2001 From: Sean Norwood Date: Wed, 13 Apr 2022 20:53:39 +0000 Subject: [PATCH] chore: misc changes Clean up some code inconsistencies Try to handle async stuff better --- .../www/src/components/VideoList.tsx | 10 +-- .../www/src/components/VideoPlayer.tsx | 89 ++++++++++--------- tubearchivist/www/src/lib/getChannels.ts | 20 ++--- tubearchivist/www/src/lib/getPlaylists.ts | 20 ++--- tubearchivist/www/src/lib/getVideos.ts | 20 ++--- .../www/src/pages/api/auth/[...nextauth].ts | 20 ++--- tubearchivist/www/src/pages/channel.tsx | 3 +- tubearchivist/www/src/pages/index.tsx | 3 +- tubearchivist/www/src/pages/playlist.tsx | 9 +- 9 files changed, 98 insertions(+), 96 deletions(-) diff --git a/tubearchivist/www/src/components/VideoList.tsx b/tubearchivist/www/src/components/VideoList.tsx index cea97fd..9f87721 100644 --- a/tubearchivist/www/src/components/VideoList.tsx +++ b/tubearchivist/www/src/components/VideoList.tsx @@ -122,7 +122,7 @@ export const VideoList = () => {
{data && - data.data?.map((video) => { + data?.data?.map((video) => { return (
{ >
- @@ -171,7 +171,7 @@ export const VideoList = () => { className="video-desc-player" id={`video-info-${video.youtube_id}`} > - {video.player.watched ? ( + {video?.player?.watched ? ( seen-icon { if (!selectedVideoUrl) return; return ( <> -
-
- -
- +
+ - {/* ${watchStatusIndicator} +
+ + {/* ${watchStatusIndicator} ${castButton} */} -
- views icon - - {formatNumbers(selectedVideoUrl.stats.view_count.toString())} - - | - thumbs-up - - {formatNumbers(selectedVideoUrl.stats.like_count.toString())} - +
+ views icon + + {formatNumbers(selectedVideoUrl.stats.view_count.toString())} + + | + thumbs-up + + {formatNumbers(selectedVideoUrl.stats.like_count.toString())} + +
+
+

+ + {selectedVideoUrl.channel.channel_name} + +

+ {/* ${playlist} */} +
+ +

{selectedVideoUrl.title}

+
-
-

- - {selectedVideoUrl.channel.channel_name} - -

- {/* ${playlist} */} -
- -

{selectedVideoUrl.title}

-
-
+ )} ); }; diff --git a/tubearchivist/www/src/lib/getChannels.ts b/tubearchivist/www/src/lib/getChannels.ts index bb2fbb8..3e6ef94 100644 --- a/tubearchivist/www/src/lib/getChannels.ts +++ b/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 => { - const response = await fetch( - `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/channel/`, - { - headers: { - Accept: "application/json", - "Content-Type": "application/json", - Authorization: `Token ${token}`, - mode: "no-cors", - }, - } - ); + 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"); } diff --git a/tubearchivist/www/src/lib/getPlaylists.ts b/tubearchivist/www/src/lib/getPlaylists.ts index 05a6537..c2b5ecb 100644 --- a/tubearchivist/www/src/lib/getPlaylists.ts +++ b/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 => { - const response = await fetch( - `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/playlist/`, - { - headers: { - Accept: "application/json", - "Content-Type": "application/json", - Authorization: `Token ${token}`, - mode: "no-cors", - }, - } - ); + 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"); } diff --git a/tubearchivist/www/src/lib/getVideos.ts b/tubearchivist/www/src/lib/getVideos.ts index 1c46380..a97a706 100644 --- a/tubearchivist/www/src/lib/getVideos.ts +++ b/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 => { 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/`, - { - headers: { - Accept: "application/json", - "Content-Type": "application/json", - Authorization: `Token ${token}`, - mode: "no-cors", - }, - } - ); + 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"); diff --git a/tubearchivist/www/src/pages/api/auth/[...nextauth].ts b/tubearchivist/www/src/pages/api/auth/[...nextauth].ts index 5a63b4d..62dfb76 100644 --- a/tubearchivist/www/src/pages/api/auth/[...nextauth].ts +++ b/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/`, - { - method: "POST", - body: JSON.stringify(payload), - headers: { - "Content-Type": "application/json", - "Accept-Language": "en-US", - }, - } - ); + 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 diff --git a/tubearchivist/www/src/pages/channel.tsx b/tubearchivist/www/src/pages/channel.tsx index 061ffc7..8cc36ef 100644 --- a/tubearchivist/www/src/pages/channel.tsx +++ b/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 ? (

No channels found...

) : ( - channels?.data.map((channel) => { + channels?.data?.map((channel) => { return (
{ }; } - await queryClient.prefetchQuery("videos", () => + await queryClient.prefetchQuery(["videos", session.ta_token.token], () => getVideos(session.ta_token.token) ); return { props: { dehydratedState: dehydrate(queryClient), + session, }, }; }; diff --git a/tubearchivist/www/src/pages/playlist.tsx b/tubearchivist/www/src/pages/playlist.tsx index 06111c0..6d95bec 100644 --- a/tubearchivist/www/src/pages/playlist.tsx +++ b/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("grid"); @@ -119,7 +124,7 @@ const Playlist = () => {
{/* {% if results %} {% for playlist in results %} */} - {!playlists ? ( + {!isLoading && !playlists ? (

No playlists found...

) : ( playlists?.map((playlist) => {