youtube video fallback

added in a fallback set of inputs if for some reason there is an error
when attempting to load the available videos from youtube for the
channel. also added in the `ReactQueryDevtools` to the app to help with
inspecting data loaded by the react-query client.

Author: DAC098

codewit/client/src/components/form/VideoSelect.tsx

@@ -5,69 +5,18 @@ import axios from 'axios';
 import { SelectStyles } from '../../utils/styles.js';
 import { useQuery } from '@tanstack/react-query';
 import { Label } from 'flowbite-react';
+import { VideoOption, use_yt_videos } from "../../hooks/yt_videos";
 
 interface VideoSelectProps {
   youtube_id: string,
   required?: boolean,
   onSelectVideo: (videoId: string, videoThumbnail: string) => void,
 }
 
-interface VideoOption {
-  value: string,
-  label: string,
-  thumbnail: string,
-}
-
 const VideoSelect = ({ youtube_id, required = false, onSelectVideo }: VideoSelectProps): JSX.Element => {
   const [selected_option, set_selected_option] = useState<VideoOption | null>(null);
 
-  const {data: videos, isFetching, error} = useQuery({
-    queryKey: ["youtube_videos"],
-    queryFn: async (): Promise<VideoOption[]> => {
-      const apiKey = import.meta.env.VITE_KEY;
-      const channelId = import.meta.env.VITE_CHANNEL_ID;
-
-      let rtn = [];
-      let next_page_token: string | null = null;
-
-      while (true) {
-        // results are paginated so if we are to show all of the videos in the
-        // select then we will need to retrieve all of the videos.
-        let url = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&part=snippet,id&order=date&type=video&maxResults=50`;
-
-        if (next_page_token != null) {
-          url += `&pageToken=${next_page_token}`;
-        }
-
-        const response = await axios.get(url);
-
-        if (response.data.error) {
-          throw new Error(response.data.error.message);
-        }
-
-        for (let item of response.data.items) {
-          rtn.push({
-            value: item.id.videoId,
-            label: item.snippet.title,
-            thumbnail: item.snippet.thumbnails.high.url,
-          });
-        }
-
-        if (response.data.nextPageToken != null) {
-          next_page_token = response.data.nextPageToken;
-        } else {
-          break;
-        }
-      }
-
-      return rtn;
-    },
-    // reduce the amount of times we will make the requests by caching the
-    // results.
-    staleTime: 5* 60 * 1000, // 5 minutes
-    gcTime: 5 * 60 * 1000, // 5 minutes
-    retry: false,
-  });
+  const {data: videos, isFetching, error} = use_yt_videos();
 
   useEffect(() => {
     if (youtube_id && videos != null) {
@@ -110,4 +59,4 @@ const VideoSelect = ({ youtube_id, required = false, onSelectVideo }: VideoSelec
   );
 };
 
-export default VideoSelect;
+export default VideoSelect;

codewit/client/src/hooks/yt_videos.ts

@@ -0,0 +1,62 @@
+import axios from "axios";
+import { useQuery } from "@tanstack/react-query";
+
+export interface VideoOption {
+    value: string,
+    label: string,
+    thumbnail: string,
+}
+
+export function yt_video_key(): ["youtube_videos"] {
+    return ["youtube_videos"]
+}
+
+export function use_yt_videos() {
+    return useQuery({
+        queryKey: yt_video_key(),
+        queryFn: async (): Promise<VideoOption[]> => {
+            const apiKey = import.meta.env.VITE_KEY;
+            const channelId = import.meta.env.VITE_CHANNEL_ID;
+
+            let rtn = [];
+            let next_page_token: string | null = null;
+
+            while (true) {
+                // results are paginated so if we are to show all of the videos in the
+                // select then we will need to retrieve all of the videos.
+                let url = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&part=snippet,id&order=date&type=video&maxResults=50`;
+
+                if (next_page_token != null) {
+                    url += `&pageToken=${next_page_token}`;
+                }
+
+                const response = await axios.get(url);
+
+                if (response.data.error) {
+                    throw new Error(response.data.error.message);
+                }
+
+                for (let item of response.data.items) {
+                    rtn.push({
+                        value: item.id.videoId,
+                        label: item.snippet.title,
+                        thumbnail: item.snippet.thumbnails.high.url,
+                    });
+                }
+
+                if (response.data.nextPageToken != null) {
+                    next_page_token = response.data.nextPageToken;
+                } else {
+                    break;
+                }
+            }
+
+            return rtn;
+        },
+        // reduce the amount of times we will make the requests by caching the
+        // results.
+        staleTime: 5* 60 * 1000, // 5 minutes
+        gcTime: 5 * 60 * 1000, // 5 minutes
+        retry: false,
+    });
+}

codewit/client/src/main.tsx

@@ -4,6 +4,7 @@ import * as ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { ToastContainer } from "react-toastify";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import "react-toastify/dist/ReactToastify.css";
 
 import App from './app/app';
@@ -21,6 +22,7 @@ root.render(
       <App />
       <ToastContainer position="bottom-right" autoClose={1000} />
     </BrowserRouter>
+    <ReactQueryDevtools initialIsOpen={false}/>
   </QueryClientProvider>
   // </StrictMode>
 );

codewit/client/src/pages/DemoForm.tsx

@@ -1,23 +1,13 @@
 // codewit/client/src/pages/DemoForm.tsx
 import { useEffect, useMemo, useState } from "react";
-import ReusableTable, { Column } from "../components/form/ReusableTable";
 import { toast } from "react-toastify";
-import VideoSelect from "../components/form/VideoSelect";
-import { topic_options } from "../components/form/TagSelect";
-import { language_options, get_language_option } from "../components/form/LanguageSelect";
-import CreateButton from "../components/form/CreateButton";
 import { DemoResponse, ExerciseResponse } from "@codewit/interfaces";
-import { isFormValid } from "../utils/formValidationUtils";
-import LoadingPage from "../components/loading/LoadingPage";
-import { Modal, ModalBody, ModalFooter, ModalHeader } from "../components/ui/modal";
 import { useField, useForm } from "@tanstack/react-form";
-import { Button, Label, TextInput } from "flowbite-react";
+import { Button, Label, TextInput, HelperText } from "flowbite-react";
 import CreatableSelect from "react-select/creatable";
-import { cn, SelectStyles } from "../utils/styles";
 import Select from "react-select";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import axios from "axios";
-import { ErrorView } from "../components/error/Error";
 import {
   DndContext,
   closestCenter,
@@ -36,6 +26,18 @@ import {
 } from "@dnd-kit/sortable";
 import { Bars3Icon, TrashIcon } from "@heroicons/react/24/solid";
 
+import { cn, SelectStyles } from "../utils/styles";
+import { ErrorView } from "../components/error/Error";
+import { isFormValid } from "../utils/formValidationUtils";
+import LoadingPage from "../components/loading/LoadingPage";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "../components/ui/modal";
+import VideoSelect from "../components/form/VideoSelect";
+import { topic_options } from "../components/form/TagSelect";
+import { language_options, get_language_option } from "../components/form/LanguageSelect";
+import CreateButton from "../components/form/CreateButton";
+import ReusableTable, { Column } from "../components/form/ReusableTable";
+import { VideoOption, use_yt_videos } from "../hooks/yt_videos";
+
 interface DemoForm {
   uid?: number,
   title: string,
@@ -171,6 +173,10 @@ interface DemoFormProps {
 }
 
 function DemoForm({view, demo, on_cancel, on_created, on_updated}: DemoFormProps) {
+  const {
+    error: yt_video_error
+  } = use_yt_videos();
+
   const send_demo = useMutation({
     mutationFn: async (data: DemoForm) => {
       let body = {
@@ -216,7 +222,8 @@ function DemoForm({view, demo, on_cancel, on_created, on_updated}: DemoFormProps
       let result = await send_demo.mutateAsync(value);
 
       form.reset(demo_form(result.data));
-    }
+    },
+    validators: {}
   });
 
   useEffect(() => {
@@ -227,9 +234,7 @@ function DemoForm({view, demo, on_cancel, on_created, on_updated}: DemoFormProps
     form.reset();
   }, [view]);
 
-  return <Modal show={view} position="center" size="2xl" onClose={() => {
-    on_cancel();
-  }}>
+  return <Modal show={view} position="center" size="2xl" onClose={() => on_cancel()}>
     <ModalHeader>
       <form.Subscribe
         selector={state => ([state.values.uid])}
@@ -257,13 +262,73 @@ function DemoForm({view, demo, on_cancel, on_created, on_updated}: DemoFormProps
             />
           </div>;
         }}/>
-        <form.Field name="youtube_id" children={(field) => {
-          return <VideoSelect required youtube_id={field.state.value} onSelectVideo={(id, thumbnail) => {
-            field.handleChange(id);
-            // have to use this since the id and thunbnail are tied to the same input
-            form.setFieldValue("youtube_thumbnail", thumbnail);
-          }}/>
-        }}/>
+        {yt_video_error ?
+            <>
+                <form.Field name="youtube_id" children={(field) => {
+                    return <div className="space-y-2">
+                        <Label htmlFor={field.name}>
+                            Youtube ID
+                        </Label>
+                        <TextInput
+                            id={field.name}
+                            name={field.name}
+                            value={field.state.value}
+                            onBlur={field.handleBlur}
+                            onChange={ev => field.handleChange(ev.target.value)}
+                        />
+                        <HelperText>
+                            Only the Youtube ID which is located in the URL of a video on the site.
+                        </HelperText>
+                    </div>
+                }}/>
+                <form.Field
+                    name="youtube_thumbnail"
+                    validators={{
+                        onBlur: ({value}) => {
+                            try {
+                                let check = new URL(value);
+
+                                return undefined;
+                            } catch(err) {
+                                return "The thumbnail URL must be a valid absolute URL";
+                            }
+                        }
+                    }}
+                    children={(field) => {
+                        let invalid_color = !field.state.meta.isValid ? "failure" : undefined;
+
+                        return <div className="space-y-2">
+                            <Label htmlFor={field.name} color={invalid_color}>
+                                Youtube Thumbnail
+                            </Label>
+                            <TextInput
+                                id={field.name}
+                                name={field.name}
+                                value={field.state.value}
+                                onBlur={field.handleBlur}
+                                onChange={ev => field.handleChange(ev.target.value)}
+                                color={invalid_color}
+                            />
+                            <HelperText>
+                                {field.state.meta.errors.length !== 0 ?
+                                    field.state.meta.errors.join(", ") + ". "
+                                    :
+                                    "The full url of the video thumbnail."
+                                }
+                            </HelperText>
+                        </div>;
+                    }}
+                />
+            </>
+            :
+            <form.Field name="youtube_id" children={(field) => {
+                return <VideoSelect required youtube_id={field.state.value} onSelectVideo={(id, thumbnail) => {
+                    field.handleChange(id);
+                    // have to use this since the id and thunbnail are tied to the same input
+                    form.setFieldValue("youtube_thumbnail", thumbnail);
+                }}/>
+            }}/>
+        }
         <form.Field name="topic" children={field => {
           return <div className="space-y-2">
             <Label htmlFor={field.name}>
@@ -482,4 +547,4 @@ function SortableExerciseItem({uid, prompt, on_remove}: SortableExerciseItemProp
       <TrashIcon className="h-6 w-6"/>
     </Button>
   </div>
-}
+}