wip create context

components/generate/GenerateStoryComponent.tsx

@@ -1,8 +1,9 @@
 'use-client';
 import chatOperations from 'operations/chatOperations';
 import { useState } from 'react';
+import GenerateStoryContextProvider, { IGenerateStoryContext } from './GenerateStoryContext';
 
-export default function GenerateStory() {
+export default function GenerateStoryComponent() {
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState();
 
@@ -13,6 +14,9 @@ export default function GenerateStory() {
     setLoading(false);
   };
 
+  return (
+    <GenerateStoryContextProvider>
+      {({ story }: IGenerateStoryContext) => {
         return (
           <main className="flex min-h-screen flex-col items-center justify-between p-24">
             <button
@@ -26,4 +30,7 @@ export default function GenerateStory() {
             {JSON.stringify(data)}
           </main>
         );
+      }}
+    </GenerateStoryContextProvider>
+  );
 }

components/generate/GenerateStoryContext.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { IStory } from 'operations/chatOperations';
+import { PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+
+export interface IGenerateStoryContext {
+  story?: IStory;
+  setStory: (story: IStory) => void;
+  images: string[];
+  setImages: (images: string[]) => void;
+}
+
+const GenerateStoryContext = createContext<IGenerateStoryContext>({
+  story: undefined,
+  setStory: () => {},
+  images: [],
+  setImages: () => {}
+});
+
+function GenerateStoryContextProvider({ children }: { children: PropsWithChildren<any> }) {
+  const [story, setStory] = useState<IStory>();
+  /*
+   Note(Benson): For now images is an array of urls where each index in the array
+   corresponds to the page number. 
+   i.e., index 0 could be title, index 1 is the first page in pages, etc.
+   */
+  const [images, setImages] = useState<string[]>([]);
+
+  const value = useMemo<IGenerateStoryContext>(
+    () => ({ story, setStory, images, setImages }),
+    [story, setStory, images, setImages]
+  );
+
+  return (
+    <GenerateStoryContext.Provider value={value}>
+      {typeof children === 'function' ? children(value) : children}
+    </GenerateStoryContext.Provider>
+  );
+}
+
+export const useGenerateStoryContext = (): IGenerateStoryContext =>
+  useContext(GenerateStoryContext);
+
+export default GenerateStoryContextProvider;

components/generate/index.ts

@@ -0,0 +1,3 @@
+import GenerateStoryComponent from './GenerateStoryComponent';
+
+export default GenerateStoryComponent;

operations/chatOperations.ts

@@ -17,19 +17,19 @@ function getFunctionCallArguments<T>(response: any) {
   return JSON.parse(response.text.function_call.arguments);
 }
 
-// export interface IStory {
+export interface IStory {
-//     title: string;
+  title: string;
-//     topic: string;
+  topic: string;
-//     introduction: string;
+  introduction: string;
-//     narrativeStructure: string;
+  narrativeStructure: string;
-//     archetypes_characters: string;
+  archetypes_characters: string;
-//     pages: { text: string }[]
+  pages: { text: string }[];
-// }
+}
 
 async function createStoryAsync(
   systemPrompt = DEFAULT_SYSTEM_PROMPT,
   userPrompt = DEFAULT_USER_PROMPT
-): Promise<any> {
+): Promise<IStory> {
   const messages = [
     {
       role: 'system',
@@ -42,7 +42,7 @@ async function createStoryAsync(
   ];
   const data = await post('/api/open-ai/chat', generateRequestPayload(messages));
   // const data = await post('/api/revalidate', generateRequestPayload(messages));
-  return getFunctionCallArguments<any>(data);
+  return getFunctionCallArguments<IStory>(data);
 }
 
 export default { createStoryAsync };