From 8b86c327c52b2a2f2d7636a68800591b9a6d4fea Mon Sep 17 00:00:00 2001
From: Sean Norwood <norwood.sean@gmail.com>
Date: Wed, 13 Apr 2022 15:09:08 -0500
Subject: [PATCH] chore: don't run client side query until token is available

---
 tubearchivist/www/src/components/VideoList.tsx |  8 ++++++--
 tubearchivist/www/src/lib/getVideos.ts         |  2 --
 tubearchivist/www/src/pages/channel.tsx        | 15 ++++++++++-----
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/tubearchivist/www/src/components/VideoList.tsx b/tubearchivist/www/src/components/VideoList.tsx
index f56a0ca..cea97fd 100644
--- a/tubearchivist/www/src/components/VideoList.tsx
+++ b/tubearchivist/www/src/components/VideoList.tsx
@@ -14,8 +14,12 @@ export const VideoList = () => {
   const [selectedVideoUrl, setSelectedVideoUrl] = useState<Datum>();
   const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
   const { data: session } = useSession();
-  const { data, error, isLoading } = useQuery("videos", () =>
-    getVideos(session.ta_token.token)
+  const { data, error, isLoading } = useQuery(
+    ["videos", session?.ta_token?.token],
+    () => getVideos(session.ta_token.token),
+    {
+      enabled: !!session?.ta_token?.token,
+    }
   );
 
   const handleSelectedVideo = (video: Datum) => {
diff --git a/tubearchivist/www/src/lib/getVideos.ts b/tubearchivist/www/src/lib/getVideos.ts
index 7739105..1c46380 100644
--- a/tubearchivist/www/src/lib/getVideos.ts
+++ b/tubearchivist/www/src/lib/getVideos.ts
@@ -22,5 +22,3 @@ export const getVideos = async (token: string): Promise<Videos> => {
 
   return response.json();
 };
-
-// b4d4330462c7fc16c51873e45579b29a1a12fc90
diff --git a/tubearchivist/www/src/pages/channel.tsx b/tubearchivist/www/src/pages/channel.tsx
index 5165e5f..061ffc7 100644
--- a/tubearchivist/www/src/pages/channel.tsx
+++ b/tubearchivist/www/src/pages/channel.tsx
@@ -36,8 +36,13 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 const Channel: NextPage = () => {
   const { data: session } = useSession();
   const {
-    data: { data: channels },
-  } = useQuery("channels", () => getChannels(session.ta_token.token));
+    data: channels,
+    error,
+    isLoading,
+  } = useQuery("channels", () => getChannels(session.ta_token.token), {
+    enabled: !!session?.ta_token?.token,
+  });
+
   const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
 
   const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
@@ -104,12 +109,12 @@ const Channel: NextPage = () => {
               />
             </div>
           </div>
-          <h2>Total matching channels: {channels?.length} </h2>
+          <h2>Total matching channels: {channels?.data?.length} </h2>
           <div className={`channel-list ${viewStyle}`}>
-            {!channels ? (
+            {!channels.data ? (
               <h2>No channels found...</h2>
             ) : (
-              channels?.map((channel) => {
+              channels?.data.map((channel) => {
                 return (
                   <div
                     key={channel?.channel_id}