Untitled

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,
);