Adding titleImage to our context and MyDocument

components/generate/GenerateStoryComponent.tsx

@@ -5,11 +5,11 @@ import StoryPDFViewer from 'components/pdf/StoryPDFViewer';
 export default function GenerateStoryComponent() {
   return (
     <GenerateStoryContextProvider>
-      {({ story, loading }: IGenerateStoryContext) => {
+      {({ story, titleImage, loading }: IGenerateStoryContext) => {
         return (
           <div>
             {loading ? <div>Loading...</div> : null}
-            {story && <StoryPDFViewer story={story} />}
+            {story && <StoryPDFViewer story={story} titleImage={titleImage} />}
           </div>
         );
       }}

components/generate/GenerateStoryContext.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import chatOperations, { IStory } from 'operations/chatOperations';
+import imageOperations from 'operations/imageOperations';
 import {
   PropsWithChildren,
   createContext,
@@ -12,29 +13,40 @@ import {
 
 export interface IGenerateStoryContext {
   story?: IStory;
+  titleImage?: string;
   loading: boolean;
 }
 
 const GenerateStoryContext = createContext<IGenerateStoryContext>({
   story: undefined,
+  titleImage: undefined,
   loading: false
 });
 
 function GenerateStoryContextProvider({ children }: { children: PropsWithChildren<any> }) {
   const [loading, setLoading] = useState<boolean>(false);
   const [story, setStory] = useState<IStory>();
+  const [titleImage, setTitleImage] = useState<string>();
 
-  const value = useMemo<IGenerateStoryContext>(() => ({ story, loading }), [story, loading]);
+  // TODO (Patricio->Benson): should we memoize the titleImage like this? It takes the image a second to come back from the API...
+  const value = useMemo<IGenerateStoryContext>(
+    () => ({ story, titleImage, loading }),
+    [story, titleImage, loading]
+  );
 
   /*
-  TODO(Benson -> Patricio): Make network call to get images
   TODO(Benson -> Patricio): Write a helper function in this directory /generate/utils.ts
   called mergeImages(story: IStory, images: string[]): IStory;
   */
+
+  /*
+  TODO(Patricio -> Benson): This Dalle call takes a while to come back. We should probably show a loading indicator in the meantime? We'll figure it out
+  */
   const getStoryAsync = useCallback(async () => {
     setLoading(true);
     const story = await chatOperations.createStoryAsync();
-    // const images = await imageOperations.getStoryImagesAsync(story);
+    const titleImage = await imageOperations.createImageAsync(story.introduction);
+    setTitleImage(titleImage);
     setStory(story);
     setLoading(false);
   }, []);

components/generate/utils.tsx

@@ -0,0 +1,10 @@
+import { IStory } from 'operations/chatOperations';
+
+function mergeImages(story: IStory, titleImage: string): IStory {
+  return {
+    ...story,
+    titleImage
+  };
+}
+
+export default mergeImages;

components/pdf/StoryPDFViewer.tsx

@@ -18,7 +18,7 @@ const PDFViewerNoSSR = dynamic(() => import('@react-pdf/renderer').then((mod) =>
   ssr: false
 });
 
-export default function StoryPDFViewer({ story }: { story: IStory }) {
+export default function StoryPDFViewer({ story }: { story: IStory }, titleImage: string) {
   return (
     <div
       style={{
@@ -28,7 +28,7 @@ export default function StoryPDFViewer({ story }: { story: IStory }) {
       }}
     >
       <PDFViewerNoSSR style={styles.pdfContainer}>
-        <Document pages={story.pages} />
+        <Document pages={story.pages} titleImage={titleImage} />
       </PDFViewerNoSSR>
     </div>
   );
@@ -125,7 +125,7 @@ with a solidified way at dispersing the text throughout the page.
 */
 
 // TODO(Benson -> Patricio): replace hardcoded images.
-const Document = ({ pages }: { pages: { text: string }[] }) => {
+const Document = ({ pages }: { pages: { text: string }[] }, titleImage: string) => {
   return (
     <PDFDocument>
       {pages.map(({ text }, index) => {
@@ -134,7 +134,7 @@ const Document = ({ pages }: { pages: { text: string }[] }) => {
             <View key={index} style={{ ...styles.section, bottom: '10%' }}>
               <Text>{text}</Text>
             </View>
-            <Image src={imgURL} style={styles.image} />
+            <Image src={titleImage} style={styles.image} />
           </Page>
         );
       })}

operations/chatOperations.ts

@@ -24,7 +24,7 @@ function getFunctionCallArguments<T>(response: any) {
  */
 export interface IStory {
   title: string;
-  // titleImage?: string;
+  titleImage?: string;
   topic: string;
   introduction: string;
   narrativeStructure: string;