refactor: get rid of prop drilling title

experiment-station · Dec 16, 2023 · 54e999c · 54e999c
1 parent 5dad1e7
commit 54e999c
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 17 deletions.
diff --git a/components/episode-ai-summary/episode-ai-summary-generator.tsx b/components/episode-ai-summary/episode-ai-summary-generator.tsx
@@ -22,26 +22,23 @@ type State =
     }
   | {
       status: 'summarizing';
-      transcription: string;
     }
   | {
       status: 'transcribing';
     };
 
 export function EpisodeAISummaryGenerator({
   id,
-  title,
 }: {
   id: Tables<'episode'>['id'];
-  title: Tables<'episode'>['title'];
 }) {
   const [state, setState] = useState<State>({ status: 'idle' });
 
   const generate = useCallback(async () => {
     try {
       setState({ status: 'transcribing' });
-      const transcription = await transcribeEpisode(id);
-      setState({ status: 'summarizing', transcription });
+      await transcribeEpisode(id);
+      setState({ status: 'summarizing' });
     } catch (error) {
       setState({ message: 'Failed to transcribe episode', status: 'error' });
     }
@@ -73,11 +70,7 @@ export function EpisodeAISummaryGenerator({
     case 'summarizing':
       return (
         <EpisodeAISummaryPanel>
-          <EpisodeAISummaryStreamer
-            id={id}
-            title={title}
-            transcription={state.transcription}
-          />
+          <EpisodeAISummaryStreamer id={id} />
         </EpisodeAISummaryPanel>
       );
 

diff --git a/components/episode-ai-summary/episode-ai-summary-streamer.tsx b/components/episode-ai-summary/episode-ai-summary-streamer.tsx
@@ -7,11 +7,9 @@ import React, { useEffect, useRef } from 'react';
 
 type Props = {
   id: Tables<'episode'>['id'];
-  title: Tables<'episode'>['title'];
-  transcription: string;
 };
 
-export function EpisodeAISummaryStreamer({ id, title, transcription }: Props) {
+export function EpisodeAISummaryStreamer({ id }: Props) {
   const startedRef = useRef(false);
 
   const { messages, reload, setMessages } = useChat({
@@ -34,7 +32,7 @@ export function EpisodeAISummaryStreamer({ id, title, transcription }: Props) {
     ]);
 
     void reload();
-  }, [reload, setMessages, title, transcription]);
+  }, [reload, setMessages]);
 
   const assistantMessages = messages.filter((m) => m.role === 'assistant');
 

diff --git a/components/episode-ai-summary/episode-ai-summary.tsx b/components/episode-ai-summary/episode-ai-summary.tsx
@@ -14,7 +14,6 @@ import { EpisodeAISummaryPlaceholder } from './episode-ai-summary-placeholder';
 
 type Props = {
   id: Tables<'episode'>['id'];
-  title: Tables<'episode'>['title'];
 };
 
 export async function EpisodeAISummary(props: Props) {
@@ -42,7 +41,7 @@ export async function EpisodeAISummary(props: Props) {
       );
     }
 
-    return <EpisodeAISummaryGenerator id={props.id} title={props.title} />;
+    return <EpisodeAISummaryGenerator id={props.id} />;
   }
 
   const [episodeContent] = data;

diff --git a/components/episode-detail.tsx b/components/episode-detail.tsx
@@ -81,7 +81,7 @@ async function EpisodeDetailPage(props: { id: Tables<'episode'>['id'] }) {
       show={data.show}
       title={data.title}
     >
-      <EpisodeAISummary id={data.id} title={data.title} />
+      <EpisodeAISummary id={data.id} />
     </EpisodeDetailContent>
   );
 }