UI - Draft API request chagnes

Author: Bangarraju-Microsoft

frontend/src/api/api.ts

@@ -371,7 +371,7 @@ export const historyMessageFeedback = async (messageId: string, feedback: string
   return response
 }
 
-export const sectionGenerate = async (options: SectionGenerateRequest): Promise<Response> => {
+export const sectionGenerate = async (options: SectionGenerateRequest[]): Promise<Response> => {
   // set timeout to 10 seconds
   const abortController = new AbortController()
   const abortSignal = abortController.signal
@@ -380,10 +380,13 @@ export const sectionGenerate = async (options: SectionGenerateRequest): Promise<
     abortController.abort()
   }, 10000)
 
-  let body = JSON.stringify({
-    sectionTitle: options.sectionTitle,
-    sectionDescription: options.sectionDescription
-  })
+  // let body = JSON.stringify({
+  //   sectionTitle: options.sectionTitle,
+  //   sectionDescription: options.sectionDescription
+  // })
+
+  let body = JSON.stringify(options)
+
 
   const response = await fetch('/section/generate', {
     method: 'POST',

frontend/src/components/DraftCards/SectionCard.tsx

@@ -142,7 +142,7 @@ const SectionCard = ({ sectionIdx }: SectionCardProps) => {
 
   async function fetchSectionContent(sectionTitle: string, sectionDescription: string) {
     setIsLoading(true)
-    const sectionGenerateRequest: SectionGenerateRequest = { sectionTitle, sectionDescription }
+    const sectionGenerateRequest = [{'sectionTitle' : sectionTitle, 'sectionDescription': sectionDescription }]
 
     const response = await sectionGenerate(sectionGenerateRequest)
     const responseBody = await response.json()
@@ -164,11 +164,11 @@ const SectionCard = ({ sectionIdx }: SectionCardProps) => {
     setIsLoading(false)
   }
 
-  useEffect(() => {
-    if (sectionContent === '' && !isLoading && !isManuallyCleared) {
-      fetchSectionContent(sectionTitle, sectionDescription)
-    }
-  }, [sectionContent, isLoading, isManuallyCleared])
+  // useEffect(() => {
+  //   if (sectionContent === '' && !isLoading && !isManuallyCleared) {
+  //     fetchSectionContent(sectionTitle, sectionDescription)
+  //   }
+  // }, [sectionContent, isLoading, isManuallyCleared])
 
   return (
     <Stack className={classes.sectionCard}>

frontend/src/pages/draft/Draft.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useEffect } from 'react'
 import styles from './Draft.module.css'
 import { useLocation, useNavigate } from 'react-router-dom'
 import TitleCard from '../../components/DraftCards/TitleCard'
@@ -7,12 +7,26 @@ import { Document, Packer, Paragraph, TextRun } from 'docx'
 import { saveAs } from 'file-saver'
 import { AppStateContext } from '../../state/AppProvider'
 import { CommandBarButton, Stack } from '@fluentui/react'
+import { sectionGenerate, SectionGenerateRequest } from '../../api'
+
+// Define the type for the section
+interface Section {
+  title: string;
+  description: string;
+}
+
+// Define the type for the request object
+interface RequestObject {
+  sectionTitle: string;
+  sectionDescription: string;
+}
 
 const Draft = (): JSX.Element => {
   const appStateContext = useContext(AppStateContext)
   const location = useLocation()
   const navigate = useNavigate()
 
+
   // get draftedDocument from context
   const draftedDocument = appStateContext?.state.draftedDocument
   const sections = draftedDocument?.sections ?? []
@@ -23,6 +37,33 @@ const Draft = (): JSX.Element => {
     navigate('/')
   }
 
+
+ // Fetch function with type annotations
+async function fetchAllSectionContent(req: RequestObject[]): Promise<void> {
+  console.log("req", req);
+  try {
+    const response = await sectionGenerate(req);
+    const responseBody = await response.json();
+    console.log("responseBody", responseBody);
+  } catch (error) {
+    console.error("Error fetching section content:", error);
+  }
+}
+// Function to generate the API request array
+const generateAPIRequest = (sections: Section[]): RequestObject[] => {
+  return sections.map((section) => ({
+    sectionTitle: section.title,
+    sectionDescription: section.description,
+  }));
+};
+
+  useEffect(()=>{
+      if(sections.length>0){
+        const requestArray = generateAPIRequest(sections);
+        fetchAllSectionContent(requestArray)
+      }
+  },[])
+
   const exportToWord = () => {
     const doc = new Document({
       sections: [