Merge pull request #7 from anna-murphy/fix/upload-feedback

update upload to use shared form and include on submit feedback

README.md

@@ -1,5 +1,5 @@
 # Capes in the Dark Web App
 
-This Firebase + Astro web application is used to hold the web platform for the RPG *Capes in the Dark*. The Capes in the West March podcast feed is also hosted through this application, and managed through the `/admin` panel.
+This Firebase + Astro web application is used to hold the web platform for the RPG _Capes in the Dark_. The Capes in the West March podcast feed is also hosted through this application, and managed through the `/admin` panel.
 
 To access the site itself, go to [https://capes-in-the-dark.web.app](https://capes-in-the-dark.web.app).

src/admin-portal/components/EpisodeForm.tsx

@@ -12,7 +12,12 @@ import { Timestamp } from "firebase/firestore";
 
 interface EpisodeFormPromps {
   episodeData?: PodcastEpisode;
-  parseFile?: (file: File) => Promise<{ downloadUrl: string; size: number }>;
+  parseFile?: (
+    file: File,
+    season: number,
+    episode: number,
+    title: string,
+  ) => Promise<{ downloadUrl: string; size: number }>;
   submit: (episode: PodcastEpisode) => void;
   submitLabel: string;
 }
@@ -44,7 +49,12 @@ export function EpisodeForm({
       if (parseFile === undefined) return editedEpisodeData.file;
       if (uploadedFile === undefined)
         throw new Error("Don't forget to upload an episode!");
-      return await parseFile(uploadedFile);
+      return await parseFile(
+        uploadedFile,
+        editedEpisodeData.season,
+        editedEpisodeData.episode,
+        editedEpisodeData.title,
+      );
     },
     [parseFile, editedEpisodeData],
   );
@@ -56,12 +66,18 @@ export function EpisodeForm({
       event.preventDefault();
       try {
         const { downloadUrl, size } = await doParseFile(file);
-        const publishDate = episodeData === undefined ? Timestamp.fromDate(new Date()) : episodeData.publishDate as unknown as Timestamp;
+        const publishDate =
+          episodeData === undefined
+            ? Timestamp.fromDate(new Date())
+            : (episodeData.publishDate as unknown as Timestamp);
         submit(
-          makeEpisodeData({
-            ...editedEpisodeData,
-            file: { downloadUrl, size },
-          }, publishDate),
+          makeEpisodeData(
+            {
+              ...editedEpisodeData,
+              file: { downloadUrl, size },
+            },
+            publishDate,
+          ),
         );
       } catch (ex) {
         setError((ex as { message: string }).message);
@@ -185,7 +201,10 @@ function startingEpisodeData(
   };
 }
 
-function makeEpisodeData(editedData: EditedEpisodeData, publishDate: Timestamp): PodcastEpisode {
+function makeEpisodeData(
+  editedData: EditedEpisodeData,
+  publishDate: Timestamp,
+): PodcastEpisode {
   return {
     feed: "Capes in the West March",
     title: editedData.title,

src/admin-portal/components/index.ts

@@ -0,0 +1 @@
+export * from "./EpisodeForm";

src/admin-portal/index.tsx

@@ -1,9 +1,7 @@
 import React from "react";
-
-import { EpisodeView, Login, Upload } from "./views";
-
 import type { UserCredential } from "firebase/auth";
-import { EditEpisode } from "./views/EditEpisode";
+
+import { EpisodeView, EditEpisode, Login, Upload } from "./views";
 
 const PAGES = ["EPISODES", "EDIT", "UPLOAD"] as const;
 type Page = (typeof PAGES)[number];
@@ -53,9 +51,20 @@ export function AdminPortal(): JSX.Element {
             />
           ) : undefined}
           {page === "EDIT" && editId !== undefined ? (
-            <EditEpisode id={editId} />
+            <EditEpisode
+              id={editId}
+              onFinish={() => {
+                setPage("EPISODES");
+              }}
+            />
+          ) : undefined}
+          {page === "UPLOAD" ? (
+            <Upload
+              onFinish={() => {
+                setPage("EPISODES");
+              }}
+            />
           ) : undefined}
-          {page === "UPLOAD" ? <Upload /> : undefined}
         </>
       ) : undefined}
     </>

src/admin-portal/views/EditEpisode.tsx

@@ -2,13 +2,14 @@ import React from "react";
 import { doc, getDoc, setDoc } from "firebase/firestore";
 
 import { firestore } from "@admin-portal/utils/firebase";
-import { EpisodeForm } from "@admin-portal/components/EpisodeForm";
+import { EpisodeForm } from "@admin-portal/components";
 
 interface EditEpisodeProps {
   id: string;
+  onFinish: () => void;
 }
 
-export function EditEpisode({ id }: EditEpisodeProps): JSX.Element {
+export function EditEpisode({ id, onFinish }: EditEpisodeProps): JSX.Element {
   const documentReference = React.useMemo(
     () => doc(firestore, `api/v1/episodes/${id}`),
     [id],
@@ -32,7 +33,13 @@ export function EditEpisode({ id }: EditEpisodeProps): JSX.Element {
 
   const update = React.useCallback(
     (editedEpisode: PodcastEpisode) => {
-      void setDoc(documentReference, editedEpisode);
+      setDoc(documentReference, editedEpisode)
+        .then(() => {
+          onFinish();
+        })
+        .catch((ex) => {
+          setError((ex as { message: string }).message);
+        });
     },
     [documentReference],
   );

src/admin-portal/views/EpisodeView.tsx

@@ -63,5 +63,12 @@ export function EpisodeView({ goToEpisode }: EpisodeViewProps): JSX.Element {
 }
 
 function formatEpisodeTitle(episode: PodcastEpisode): JSX.Element {
-  return <>{episode.title} <span className="text-sky-600 dark:text-sky:300">({episode.metadata.season}-{episode.metadata.episode})</span></>;
+  return (
+    <>
+      {episode.title}{" "}
+      <span className="text-sky-600 dark:text-sky:300">
+        ({episode.metadata.season}-{episode.metadata.episode})
+      </span>
+    </>
+  );
 }