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();
 
@@ -14,16 +15,22 @@ export default function GenerateStory() {
   };
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <button
-        onClick={getStory}
-        className="mb-10 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
-      >
-        Run A New Story
-      </button>
+    <GenerateStoryContextProvider>
+      {({ story }: IGenerateStoryContext) => {
+        return (
+          <main className="flex min-h-screen flex-col items-center justify-between p-24">
+            <button
+              onClick={getStory}
+              className="mb-10 rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
+            >
+              Run A New Story
+            </button>
 
-      {loading ? <div className="mb10">Loading...</div> : null}
-      {JSON.stringify(data)}
-    </main>
+            {loading ? <div className="mb10">Loading...</div> : null}
+            {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 {
-//     title: string;
-//     topic: string;
-//     introduction: string;
-//     narrativeStructure: string;
-//     archetypes_characters: string;
-//     pages: { text: string }[]
-// }
+export interface IStory {
+  title: string;
+  topic: string;
+  introduction: string;
+  narrativeStructure: string;
+  archetypes_characters: 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 };