UI - SectionCard API failing issue (re triggering API when it is fails)

microsoft · Feb 10, 2025 · 471d51c · 471d51c
1 parent 446b92d
commit 471d51c
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 17 deletions.
diff --git a/frontend/src/components/DraftCards/SectionCard.tsx b/frontend/src/components/DraftCards/SectionCard.tsx
@@ -138,32 +138,79 @@ const SectionCard = ({ sectionIdx }: SectionCardProps) => {
     setCharCount(sectionContent.length)
   }, [location])
 
+
+  useEffect(() => {
+   // if (appStateContext.state.failedSections.some((item) => item.title === sectionTitle) && isLoading) {
+    if (appStateContext.state?.failedSections.length >0 && appStateContext.state?.failedSections[0].title === sectionTitle && isLoading && !appStateContext.state.isFailedReqInitiated) {
+      console.log("appStateContext.state?.failedSections", appStateContext.state?.failedSections);
+      const tempItem = {
+        title: sectionTitle,
+        description: sectionDescription,
+        content: sectionContent
+      }
+      //setTimeout(()=>{
+        appStateContext?.dispatch({ type: 'REMOVED_FAILED_SECTION', payload: {section : tempItem} })
+        appStateContext?.dispatch({ type: 'UPDATE_SECTION_API_REQ_STATUS', payload:  true })
+        fetchSectionContent(sectionTitle,sectionDescription, 'failed');
+     // },10000)
+
+    }
+  }, [appStateContext.state.failedSections]);
+
   const handleOpenChange: PopoverProps['onOpenChange'] = (e, data) => setIsPopoverOpen(data.open || false)
 
-  async function fetchSectionContent(sectionTitle: string, sectionDescription: string) {
+  async function fetchSectionContent(sectionTitle: string, sectionDescription: string , isReqFrom = '') {
     setIsLoading(true)
     const sectionGenerateRequest: SectionGenerateRequest = { sectionTitle, sectionDescription }
 
     const response = await sectionGenerate(sectionGenerateRequest)
     const responseBody = await response.json()
 
-    const updatedSection: Section = {
-      title: sectionTitle,
-      description: sectionDescription,
-      content: responseBody.section_content
-    }
-    appStateContext?.dispatch({ type: 'UPDATE_SECTION', payload: { sectionIdx: sectionIdx, section: updatedSection } })
-    let content = updatedSection.content || ''
+    if(responseBody?.error?.includes("429")) {
+      console.log("retriggerd !!!")
+      const failedSectionItems = {
+        title: sectionTitle,
+        description: sectionDescription,
+        content: sectionContent
+      }
+      appStateContext?.dispatch({ type: 'ADD_FAILED_SECTION', payload:  failedSectionItems })
+      if(isReqFrom == 'failed')
+      appStateContext?.dispatch({ type: 'UPDATE_SECTION_API_REQ_STATUS', payload:  false })
+
+      setTimeout(()=>{
+       // fetchSectionContent(sectionTitle,sectionDescription)
+      },5000)
+
+    }else{
+      const updatedSection: Section = {
+        title: sectionTitle,
+        description: sectionDescription,
+        content: responseBody.section_content
+      }
+      appStateContext?.dispatch({ type: 'UPDATE_SECTION', payload: { sectionIdx: sectionIdx, section: updatedSection } })
+      let content = updatedSection.content || ''
+
+      // limit the character count to 2000
+      if (content.length > sectionCharacterLimit) {
+        content = content.slice(0, sectionCharacterLimit)
+      }
+
+      setCharCount(content.length)
+      setIsLoading(false)
 
-    // limit the character count to 2000
-    if (content.length > sectionCharacterLimit) {
-      content = content.slice(0, sectionCharacterLimit)
+      //appStateContext?.dispatch({ type: 'REMOVED_FAILED_SECTION', payload:  updatedSection })
+
+      appStateContext?.dispatch({ type: 'REMOVED_FAILED_SECTION', payload: {section : updatedSection} })
+
+      if(isReqFrom == 'failed')
+        appStateContext?.dispatch({ type: 'UPDATE_SECTION_API_REQ_STATUS', payload:  false })
     }
 
-    setCharCount(content.length)
-    setIsLoading(false)
+
   }
 
+
+
   useEffect(() => {
     if (sectionContent === '' && !isLoading && !isManuallyCleared) {
       fetchSectionContent(sectionTitle, sectionDescription)

diff --git a/frontend/src/pages/draft/Draft.tsx b/frontend/src/pages/draft/Draft.tsx
@@ -1,12 +1,13 @@
-import { useContext } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import styles from './Draft.module.css'
 import { useLocation, useNavigate } from 'react-router-dom'
 import TitleCard from '../../components/DraftCards/TitleCard'
 import SectionCard from '../../components/DraftCards/SectionCard'
 import { Document, Packer, Paragraph, TextRun } from 'docx'
 import { saveAs } from 'file-saver'
 import { AppStateContext } from '../../state/AppProvider'
-import { CommandBarButton, Stack } from '@fluentui/react'
+import { CommandBarButton, Stack } from '@fluentui/react';
+import { Section } from '../../api/models'
 
 const Draft = (): JSX.Element => {
   const appStateContext = useContext(AppStateContext)
@@ -16,9 +17,24 @@ const Draft = (): JSX.Element => {
   // get draftedDocument from context
   const draftedDocument = appStateContext?.state.draftedDocument
   const sections = draftedDocument?.sections ?? []
+
+  const [sectionItems , setSectionItems] = useState<Section[]>([])
   const aiWarningLabel = 'AI-generated content may be incorrect'
 
   // redirect to home page if draftedDocument is empty
+
+  useEffect(() => {
+    sections.forEach((item, index) => {
+      setTimeout(() => {
+        setSectionItems((prev) => [...prev, item]); 
+      }, index * 500); 
+    });
+  }, []); 
+
+  useEffect(()=>{
+    console.log("sectionItems", sectionItems)
+  },[sectionItems])
+
   if (!draftedDocument) {
     navigate('/')
   }
@@ -100,7 +116,7 @@ const Draft = (): JSX.Element => {
   return (
     <Stack className={styles.container}>
       <TitleCard />
-      {(sections ?? []).map((_, index) => (
+      {(sectionItems ?? []).map((_, index : any) => (
         <SectionCard key={index} sectionIdx={index} />
       ))}
       <Stack className={styles.buttonContainer}>

diff --git a/frontend/src/state/AppProvider.tsx b/frontend/src/state/AppProvider.tsx
@@ -30,7 +30,9 @@ export interface AppState {
   draftedDocument: DraftedDocument | null
   draftedDocumentTitle: string
   isGenerating: boolean
-  isRequestInitiated : boolean
+  isRequestInitiated : boolean,
+  failedSections : Section[],
+  isFailedReqInitiated : boolean,
 }
 
 export type Action =
@@ -59,6 +61,10 @@ export type Action =
   | { type: 'GENERATE_ISLODING'; payload: boolean }
   | { type: 'SET_IS_REQUEST_INITIATED'; payload: boolean }
 
+  | { type: 'ADD_FAILED_SECTION'; payload: Section }
+  | { type: 'REMOVED_FAILED_SECTION'; payload: {section : Section} }
+  | { type: 'UPDATE_SECTION_API_REQ_STATUS'; payload: boolean }
+
 const initialState: AppState = {
   isChatHistoryOpen: false,
   chatHistoryLoadingState: ChatHistoryLoadingState.Loading,
@@ -77,6 +83,8 @@ const initialState: AppState = {
   draftedDocumentTitle: '',
   isGenerating: false,
   isRequestInitiated: false,
+  failedSections : [],
+  isFailedReqInitiated : false
 }
 
 export const AppStateContext = createContext<

diff --git a/frontend/src/state/AppReducer.tsx b/frontend/src/state/AppReducer.tsx
@@ -105,6 +105,19 @@ export const appStateReducer = (state: AppState, action: Action): AppState => {
       return { ...state, isGenerating: action.payload }
       case 'SET_IS_REQUEST_INITIATED' : 
       return {...state, isRequestInitiated : action.payload}
+    case 'ADD_FAILED_SECTION':
+       var tempFailedSections = [...state.failedSections];
+       const exists = tempFailedSections.some((item) => item.title === action.payload.title);
+       if (!exists) 
+        tempFailedSections.push(action.payload);
+        return { ...state , failedSections : [...tempFailedSections]  }
+     case 'REMOVED_FAILED_SECTION' : 
+      var tempFailedSections = [...state.failedSections];
+      tempFailedSections = state.failedSections.filter((item) => item.title !== action.payload.section.title);
+      return { ...state , failedSections : [...tempFailedSections] }
+    case 'UPDATE_SECTION_API_REQ_STATUS' : 
+      return {...state, isFailedReqInitiated : action.payload}
+
     default:
       return state
   }