chore: protect pages with auth

2022-04-13 18:08:32 +00:00 · 2022-04-13 18:08:32 +00:00 · 85f1a62e84
parent 6bf77b05aa
commit 85f1a62e84
9 changed files with 193 additions and 165 deletions
--- a/tubearchivist/www/next.config.js
+++ b/tubearchivist/www/next.config.js
@ -1,5 +1,3 @@
-const { withPlaiceholder } = require("@plaiceholder/next");
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  images: {
@ -8,4 +6,4 @@ const nextConfig = {
  reactStrictMode: true,
 };

-module.exports = withPlaiceholder(nextConfig);
+module.exports = nextConfig;
--- a/tubearchivist/www/src/components/BoxedContent.tsx
+++ b/tubearchivist/www/src/components/BoxedContent.tsx
@ -0,0 +1,3 @@
+export const BoxedContent: React.FC = ({ children }) => (
+  <div className="boxed-content">{children}</div>
+);
--- a/tubearchivist/www/src/components/VideoList.tsx
+++ b/tubearchivist/www/src/components/VideoList.tsx
@ -1,18 +1,22 @@
+import { useSession } from "next-auth/react";
 import NextImage from "next/image";
 import { useState } from "react";
-import ReactPlayer from "react-player/file";
 import { useQuery } from "react-query";
-import IconClose from "../images/icon-close.svg";
 import IconPlay from "../images/icon-play.svg";
 import { TA_BASE_URL } from "../lib/constants";
 import { getVideos } from "../lib/getVideos";
-import { formatNumbers } from "../lib/utils";
-import { Datum, Videos } from "../types/video";
+import type { Datum } from "../types/video";
+import { VideoPlayer } from "./VideoPlayer";
+
+type ViewStyle = "grid" | "list";

 export const VideoList = () => {
  const [selectedVideoUrl, setSelectedVideoUrl] = useState<Datum>();
-  const { data: queryData } = useQuery("videos", getVideos);
-  const { data: videos } = queryData;
+  const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
+  const { data: session } = useSession();
+  const { data, error, isLoading } = useQuery("videos", () =>
+    getVideos(session.ta_token.token)
+  );

  const handleSelectedVideo = (video: Datum) => {
    setSelectedVideoUrl(video);
@ -22,12 +26,16 @@ export const VideoList = () => {
    setSelectedVideoUrl(undefined);
  };

-  if (!videos) {
+  const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
+    setViewStyle(selectedViewStyle);
+  };
+
+  if (!isLoading && !data?.data) {
    return (
      <div className="boxed-content">
        <h2>No videos found...</h2>
        <p>
-          If you`&apos;`ve already added a channel or playlist, try going to the{" "}
+          If you&apos;ve already added a channel or playlist, try going to the{" "}
          <a href="{% url 'downloads">downloads page</a> to start the scan and
          download tasks.
        </p>
@ -37,63 +45,10 @@ export const VideoList = () => {

  return (
    <>
-      {selectedVideoUrl && (
-        <>
-          <div className="player-wrapper">
-            <div className="video-player">
-              <ReactPlayer
-                controls={true}
-                width="100%"
-                height="100%"
-                light="false"
-                playing // TODO: Not currently working
-                playsinline
-                url={`${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/media/${selectedVideoUrl.media_url}`}
-              />
-              <div className="player-title boxed-content">
-                <NextImage
-                  className="close-button"
-                  src={IconClose}
-                  width={30}
-                  height={30}
-                  alt="close-icon"
-                  onClick={handleRemoveVideoPlayer}
-                  title="Close player"
-                />
-                {/* ${watchStatusIndicator}
-            ${castButton}
-             */}
-                <div className="thumb-icon player-stats">
-                  <img src="/img/icon-eye.svg" alt="views icon" />
-                  <span>
-                    {formatNumbers(
-                      selectedVideoUrl.stats.view_count.toString()
-                    )}
-                  </span>
-                  <span>|</span>
-                  <img src="/img/icon-thumb.svg" alt="thumbs-up" />
-                  <span>
-                    {formatNumbers(
-                      selectedVideoUrl.stats.like_count.toString()
-                    )}
-                  </span>
-                </div>
-                <div className="player-channel-playlist">
-                  <h3>
-                    <a href="/channel/${channelId}/">
-                      {selectedVideoUrl.channel.channel_name}
-                    </a>
-                  </h3>
-                  {/* ${playlist} */}
-                </div>
-                <a href="/video/${videoId}/">
-                  <h2 id="video-title">{selectedVideoUrl.title}</h2>
-                </a>
-              </div>
-            </div>
-          </div>
-        </>
-      )}
+      <VideoPlayer
+        handleRemoveVideoPlayer={handleRemoveVideoPlayer}
+        selectedVideoUrl={selectedVideoUrl}
+      />

      <div className="boxed-content">
        <div className="title-bar">
@ -151,25 +106,24 @@ export const VideoList = () => {
            />
            <img
              src="/img/icon-gridview.svg"
-              onClick={() => console.log("grid view")}
-              data-origin="home"
-              data-value="grid"
+              onClick={() => handleSetViewstyle("grid")}
              alt="grid view"
            />
            <img
              src="/img/icon-listview.svg"
-              onClick={() => console.log("list view")}
-              data-origin="home"
-              data-value="list"
+              onClick={() => handleSetViewstyle("list")}
              alt="list view"
            />
          </div>
        </div>
-        <div className="video-list list">
-          {videos &&
-            videos?.map((video) => {
+        <div className={`video-list ${viewStyle}`}>
+          {data &&
+            data.data?.map((video) => {
              return (
-                <div key={video.youtube_id} className="video-item list">
+                <div
+                  key={video.youtube_id}
+                  className={`video-item ${viewStyle}`}
+                >
                  <a
                    style={{ cursor: "pointer" }}
                    onClick={() => handleSelectedVideo(video)}
--- a/tubearchivist/www/src/components/VideoPlayer.tsx
+++ b/tubearchivist/www/src/components/VideoPlayer.tsx
@ -0,0 +1,61 @@
+import NextImage from "next/image";
+import ReactPlayer from "react-player";
+import IconClose from "../images/icon-close.svg";
+import { formatNumbers } from "../lib/utils";
+
+export const VideoPlayer = ({ selectedVideoUrl, handleRemoveVideoPlayer }) => {
+  if (!selectedVideoUrl) return;
+  return (
+    <>
+      <div className="player-wrapper">
+        <div className="video-player">
+          <ReactPlayer
+            controls={true}
+            width="100%"
+            height="100%"
+            light="false"
+            playing // TODO: Not currently working
+            playsinline
+            url={`${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/media/${selectedVideoUrl.media_url}`}
+          />
+          <div className="player-title boxed-content">
+            <NextImage
+              className="close-button"
+              src={IconClose}
+              width={30}
+              height={30}
+              alt="close-icon"
+              onClick={handleRemoveVideoPlayer}
+              title="Close player"
+            />
+            {/* ${watchStatusIndicator}
+    ${castButton}
+     */}
+            <div className="thumb-icon player-stats">
+              <img src="/img/icon-eye.svg" alt="views icon" />
+              <span>
+                {formatNumbers(selectedVideoUrl.stats.view_count.toString())}
+              </span>
+              <span>|</span>
+              <img src="/img/icon-thumb.svg" alt="thumbs-up" />
+              <span>
+                {formatNumbers(selectedVideoUrl.stats.like_count.toString())}
+              </span>
+            </div>
+            <div className="player-channel-playlist">
+              <h3>
+                <a href="/channel/${channelId}/">
+                  {selectedVideoUrl.channel.channel_name}
+                </a>
+              </h3>
+              {/* ${playlist} */}
+            </div>
+            <a href="/video/${videoId}/">
+              <h2 id="video-title">{selectedVideoUrl.title}</h2>
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
--- a/tubearchivist/www/src/lib/getChannels.ts
+++ b/tubearchivist/www/src/lib/getChannels.ts
@ -1,15 +1,19 @@
 import { Channel } from "../types/channel";

-export const getChannels = async (): Promise<Channel> => {
-  return await fetch(
+export const getChannels = async (token: string): Promise<Channel> => {
+  const response = await fetch(
    `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/channel/`,
    {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
-        Authorization: `Token b4d4330462c7fc16c51873e45579b29a1a12fc90`,
+        Authorization: `Token ${token}`,
        mode: "no-cors",
      },
    }
-  ).then((res) => res.json());
+  );
+  if (!response.ok) {
+    throw new Error("Error getting channel information");
+  }
+  return response.json();
 };
--- a/tubearchivist/www/src/lib/getVideos.ts
+++ b/tubearchivist/www/src/lib/getVideos.ts
@ -1,15 +1,26 @@
 import { Videos } from "../types/video";

-export const getVideos = async (): Promise<Videos> => {
-  return await fetch(
+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/`,
    {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
-        Authorization: `Token b4d4330462c7fc16c51873e45579b29a1a12fc90`,
+        Authorization: `Token ${token}`,
        mode: "no-cors",
      },
    }
-  ).then((res) => res.json());
+  );
+
+  if (!response.ok) {
+    throw new Error("Failed to fetch videos");
+  }
+
+  return response.json();
 };
+
+// b4d4330462c7fc16c51873e45579b29a1a12fc90
--- a/tubearchivist/www/src/pages/_app.tsx
+++ b/tubearchivist/www/src/pages/_app.tsx
@ -1,40 +1,16 @@
-import type { AppProps } from "next/app";
 import { SessionProvider } from "next-auth/react";
-import Script, { ScriptProps } from "next/script";
+import type { AppProps } from "next/app";
+import { useState } from "react";
 import { Hydrate, QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
-import "../styles/globals.css";
 import "../styles/dark.css"; // TODO: Setup themeing the React way
-import { useState } from "react";
-
-// TODO: Do these scripts need to be on every page?
-
-type ClientOnlyScriptProps = {
-  src: string;
-} & ScriptProps;
-
-/**
- * This wraps next/script and returns early if `window` is not detected
- * due to next using SSR
- */
-const ClientOnlyScript = ({ src, ...props }: ClientOnlyScriptProps) => {
-  if (typeof window === "undefined") {
-    return;
-  }
-  return <Script src={src} {...props} />;
-};
+import "../styles/globals.css";

 function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  const [queryClient] = useState(() => new QueryClient());
+
  return (
    <>
-      {/* <Script
-        strategy="lazyOnload"
-        src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"
-      /> */}
-
-      {/** TODO: Detect casting before loading this? */}
-      {/* <ClientOnlyScript strategy="lazyOnload" src="/js/cast-videos.js" /> */}
      <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools />
        <Hydrate state={pageProps.dehydratedState}>
--- a/tubearchivist/www/src/pages/channel.tsx
+++ b/tubearchivist/www/src/pages/channel.tsx
@ -1,16 +1,49 @@
-import { GetServerSideProps, NextPage } from "next";
+import type { GetServerSideProps, NextPage } from "next";
+import { getSession, useSession } from "next-auth/react";
+import { useState } from "react";
+import { dehydrate, QueryClient, useQuery } from "react-query";
 import { CustomHead } from "../components/CustomHead";
 import { Layout } from "../components/Layout";
 import { TA_BASE_URL } from "../lib/constants";
 import { getChannels } from "../lib/getChannels";
-import { Channel } from "../types/channel";

-export const getServerSideProps: GetServerSideProps = async () => {
-  const channels = await getChannels();
-  return { props: { channels } };
+type ViewStyle = "grid" | "list";
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const queryClient = new QueryClient();
+  const session = await getSession(context);
+
+  if (!session) {
+    return {
+      redirect: {
+        destination: "/auth/login",
+        permanent: false,
+      },
+    };
+  }
+
+  await queryClient.prefetchQuery("channels", () =>
+    getChannels(session.ta_token.token)
+  );
+
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+    },
+  };
 };

-const Channel: NextPage<{ channels: Channel }> = ({ channels }) => {
+const Channel: NextPage = () => {
+  const { data: session } = useSession();
+  const {
+    data: { data: channels },
+  } = useQuery("channels", () => getChannels(session.ta_token.token));
+  const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
+
+  const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
+    setViewStyle(selectedViewStyle);
+  };
+
  return (
    <>
      <CustomHead title="Channels" />
@ -46,7 +79,6 @@ const Channel: NextPage<{ channels: Channel }> = ({ channels }) => {
                  id="show_subed_only"
                  onClick={() => console.log("toggleCheckbox(this)")}
                  type="checkbox"
-                  checked
                />
                {/* {% if not show_subed_only %} */}
                <label htmlFor="" className="ofbtn">
@ -62,29 +94,28 @@ const Channel: NextPage<{ channels: Channel }> = ({ channels }) => {
            <div className="view-icons">
              <img
                src="/img/icon-gridview.svg"
-                onClick={() => console.log("changeView(this)")}
-                data-origin="channel"
-                data-value="grid"
+                onClick={() => handleSetViewstyle("grid")}
                alt="grid view"
              />
              <img
                src="/img/icon-listview.svg"
-                onClick={() => console.log("changeView(this)")}
-                data-origin="channel"
-                data-value="list"
+                onClick={() => handleSetViewstyle("list")}
                alt="list view"
              />
            </div>
          </div>
-          <h2>Total matching channels: {channels?.data?.length} </h2>
-          <div className="channel-list list">
-            {/* {% if results %}
-            {% for channel in results %} */}
-            {channels &&
-              channels?.data?.map((channel) => {
+          <h2>Total matching channels: {channels?.length} </h2>
+          <div className={`channel-list ${viewStyle}`}>
+            {!channels ? (
+              <h2>No channels found...</h2>
+            ) : (
+              channels?.map((channel) => {
                return (
-                  <div key={channel?.channel_id} className="channel-item list">
-                    <div className="channel-banner list">
+                  <div
+                    key={channel?.channel_id}
+                    className={`channel-item ${viewStyle}`}
+                  >
+                    <div className={`channel-banner ${viewStyle}`}>
                      <a href="{% url 'channel_id' channel.source.channel_id %}">
                        <img
                          src={`${TA_BASE_URL}${channel?.channel_banner_url}`}
@ -92,7 +123,7 @@ const Channel: NextPage<{ channels: Channel }> = ({ channels }) => {
                        />
                      </a>
                    </div>
-                    <div className="info-box info-box-2 list">
+                    <div className={`info-box info-box-2 ${viewStyle}`}>
                      <div className="info-box-item">
                        <div className="round-img">
                          <a href="{% url 'channel_id' channel.source.channel_id %}">
@ -144,7 +175,8 @@ const Channel: NextPage<{ channels: Channel }> = ({ channels }) => {
                    </div>
                  </div>
                );
-              })}
+              })
+            )}
            {/* {% endfor %}
        {% else %} */}
            {/* <h2>No channels found...</h2> */}
--- a/tubearchivist/www/src/pages/index.tsx
+++ b/tubearchivist/www/src/pages/index.tsx
@ -1,38 +1,23 @@
-import type { GetServerSideProps, GetStaticProps, NextPage } from "next";
-import { signIn, signOut, useSession } from "next-auth/react";
+import type { GetServerSideProps, NextPage } from "next";
+import { getSession } from "next-auth/react";
 import { dehydrate, QueryClient } from "react-query";
 import { CustomHead } from "../components/CustomHead";
 import { Layout } from "../components/Layout";
 import { VideoList } from "../components/VideoList";
 import { getVideos } from "../lib/getVideos";
-import { Videos } from "../types/video";
+import type { Videos } from "../types/video";

 type HomeProps = {
  videos: Videos;
-  imagePlaceholders?: string[];
-};
-
-const SignInOutButton = ({ isSignedIn }: { isSignedIn: boolean }) => {
-  if (isSignedIn) {
-    return <button onClick={() => signOut()}>Sign Out</button>;
-  }
-  return <button onClick={() => signIn()}>Sign in</button>;
 };

 const Home: NextPage<HomeProps> = () => {
-  const { data: session, status } = useSession();
-  const authData = {
-    session,
-    status,
-  };
-
  return (
    <>
      <CustomHead />

      <Layout>
        <VideoList />
-        <SignInOutButton isSignedIn={!!session?.user} />
      </Layout>
    </>
  );
@ -40,18 +25,22 @@ const Home: NextPage<HomeProps> = () => {

 export default Home;

-// http://localhost:8000/cache/videos/3/37Kn-kIsVu8.jpg
-
-// export const getServerSideProps: GetServerSideProps = async (ctx) => {
-//   const videos = await getVideos();
-
-//   return { props: { videos } };
-// };
-
-export const getStaticProps: GetStaticProps = async () => {
+export const getServerSideProps: GetServerSideProps = async (context) => {
  const queryClient = new QueryClient();
+  const session = await getSession(context);

-  await queryClient.prefetchQuery("videos", getVideos);
+  if (!session) {
+    return {
+      redirect: {
+        destination: "/auth/login",
+        permanent: false,
+      },
+    };
+  }
+
+  await queryClient.prefetchQuery("videos", () =>
+    getVideos(session.ta_token.token)
+  );

  return {
    props: {