Untitled
unknown
plain_text
a year ago
6.1 kB
6
Indexable
Update the bellow code to display the value of stats as {responseStats} is going as undefined. also refractor the code so that the RFIResponse code is importing RFIDetails details component similar to Questions, and move the code and dependent related code to RFIDetails screen code. import React, { useEffect } from 'react'; import { withPage, Lift, useAppState, Util } from '@d-lift/core'; import BodySection from '@/Layout/BodySection'; import webService from '@/Services/WebService'; import Questions from './Components/Questions'; import { Button, Label, Column, Page, Header, Row, Para } from '@d-lift/uxcomponents'; import './response.scss'; const RFIResponse = () => { const [responseData, setResponseData] = useAppState('responseData', false); const [rfi, setRfi] = useAppState('rfi'); const [responseStats, setResponseStats] = useAppState(''); const updateResponseData = (newResponseData) => { setResponseData(newResponseData); }; useEffect(() => { if (rfi) { loadResponseData(rfi); console.log(rfi); } }, [rfi]); useEffect(() => { if (responseData) { const stats = calculateResponseStats(responseData.questions); setResponseStats(stats); console.log(stats); console.log(responseStats); } }, [responseData]); const loadResponseData = async (rfi) => { try { Lift.spinner.show(); const response = await webService.getFullDetails({ requestBody: { rfiId: rfi?.id }, }); console.log(response); if (response) { updateResponseData(response); Lift.Application.Notification.success('Response Data loaded successfully'); } } catch (error) { console.log(error); Lift.Application.Notification.error('Failed to load Response Data'); } finally { Lift.spinner.hide(); } }; const calculateResponseStats = (data) => { console.log(data); const totalQuestions = data.length; const answeredQuestions = data.filter((q) => q?.answers && q?.answers.length > 0).length; const percentageAnswered = totalQuestions > 0 ? ((answeredQuestions / totalQuestions) * 100).toFixed(2) : 0; return `${answeredQuestions} of ${totalQuestions} (${percentageAnswered}%)`; }; return ( <Page ref-table-list="OFFERING,STATE,PROGRAM,CATEGORY"> <BodySection> {/* <RFIDetails> starts from here */} <div className="ux-rfi-grey-border w-100 mt-3"> <Header className="pt-3 ux-rfi-font-header" size="2"> {' '} {rfi.title} </Header> <Row> <Column className="col-9"> <Row className="d-flex flex-wrap"> <Para className="mr-2 mt-2 p-1 ml-3 ux-rfi-label-normal ux-rfi-green-label"> {Util.getRefTableDescriptionByCode('OFFERING', rfi.offering)} </Para> <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"> {Util.getRefTableDescriptionByCode('CATEGORY', rfi.category)} </Para> <Para className="ux-rfi-green-label mt-2 mr-2 p-1 ux-rfi-label-normal"> {Util.getRefTableDescriptionByCode('PROGRAM', rfi.programs)} </Para> </Row> </Column> <Column> <div className="ux-rfi-grey-border"> <Label labelKey="requested_by" className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label> <Para className="ux-rfi-bold"> {Util.getRefTableDescriptionByCode('STATE', rfi.state)} </Para> <Label labelKey="due" className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"></Label> <Para className="ux-rfi-bold">{rfi.dueDt}</Para> <Label labelKey="responses" className="mt-1 ux-rfi-label-normal ux-rfi-grey-font"> <Para className="ux-rfi-bold">{responseStats}</Para> </Label> <div className="m-0 p-1"> <Button id="summarizeBtn" size="small" className="ux-rfi-green-button" // click={} labelKey="summarize_btn"></Button> </div> </div> </Column> </Row> </div> <div className="ux-rfi-grey-border w-100 mt-3"> <Para className="mt-2 scrollable-content">{rfi.description}</Para> </div> {/* <RFIDetails> ends here */} {responseData && ( <Questions responseData={responseData.questions} updateResponseData={updateResponseData}></Questions> )} </BodySection> </Page> ); }; export default withPage( { Description: 'Respond to an RFI page', ContentManager: true, LayoutStyle: 'rfi-dashboard', }, RFIResponse, );
Editor is loading...
Leave a Comment