Untitled

update the below code to save/update the responseData only on click of sumbit on the questions screen. I need to update the same object which is getting rendered on the questions screen.

the previous responseData is like const response = {
                rfiId: 14501,
                description: 'This is the description for the RFI.',
                questions: [
                    {
                        rfiId: 14501,
                        id: 18001,
                        question: 'What is React Router?',
                        description:
                            'Duis sit amet rhoncus est. Praesent elit nibh, venenatis lacinia consequat eu, lacinia in felis. Curabitur consectetur tempus est, tempor uis, nec convallis enim commodo ac.Nullam sit amet justo nec est sagittis rutrum. Vestibulum lectus tortor, finibus sed ipsum sed, condimentum malesuada enim. Donec interdum, odio ac consectetur vulputate, sem nisi facilisis quam, id sollicitudin nibh magna sed justo. Pellentesque euismod imperdiet arcu in vestibulum. Sed sed varius nulla, vitae accumsan ni sodales vehicula. Duis viverra metus dui, eget malesuada quam vehicula ac. Nunc ultrices sapien arcu, et ullamcorper turpis egestas at.rem maximus purus ullamcorper consectetur.',
                        answers: [
                            {
                                id: 101,
                                quesnId: 18001,
                                answer: 'React Router is a routing library for React.',
                                state: 'IOWA',
                            },
                        ],
                    },
                    {
                        rfiId: 14501,
                        id: 18051,
                        question: 'What are the main components provided by React Router?',
                        description: '',
                        answers: [],
                    },
                ],
            };
After hitting SUBMIT we need to update the responseData with the response received. we need to append this response as another object inside the responseData.questions.answers

example:answers: [
                            {
                                id: 101,
                                quesnId: 18001,
                                answer: 'React Router is a routing library for React.',
                                state: 'IOWA',
                            },
                            {
                                "id": 101,
                                "quesnId": 18001,
                                "answer": "ismail",
                                "state": "AL"
                            },
                        ],



import React, { useState, useEffect } from 'react';
import { withPage, Lift, useAppState, Util } from '@d-lift/core';
import { useLocation } from 'react-router-dom';
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');

    useEffect(() => {
        loadResponseData(rfi);
        console.log(rfi);
    }, [rfi]);

    const loadResponseData = async (rfi) => {
        try {
            Lift.spinner.show();

            const response = await webService.getFullDetails({
                requestBody: { rfiId: rfi?.id },
            });

            console.log(response);
            if (response) {
                setResponseData(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) => {
        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">
            <BodySection>
                <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">
                                        {/* {calculateResponseStats(responseData.questions)} */}
                                    </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>

                {responseData && <Questions responseData={responseData.questions}></Questions>}
            </BodySection>
        </Page>
    );
};

export default withPage(
    {
        Description: 'Respond to an RFI page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
    },
    RFIResponse,
);



import React, { useState } from 'react';
import {
    Accordian,
    AccordianElement,
    Label,
    Button,
    Modal,
    Para,
    Selectbox,
    Group,
    Textarea,
} from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import '@/Validations/customValidations';
import { useAppState ,Lift} from '@d-lift/core';
import webService from '@/Services/WebService';

const Questions = ({ responseData }) => {
    const [openModal, setOpenModal] = useAppState('openModal', false);
    const [responseModal, setResponseModal] = useAppState('responseModal', { state: '', answer: '' });
    const [currentQuestion, setCurrentQuestion] = useState(null);

    const showResponseModal = (question) => {
        setCurrentQuestion(question);
        setOpenModal(true);
    };

    const hideResponseModal = () => {
        setOpenModal(false);
        setResponseModal({ state: '', answer: '' });
        setCurrentQuestion(null);
    };

    const handleSubmitResponse = async () => {
        if (currentQuestion) {
            try {
                Lift.spinner.show();

                const responseRequest = {
                    quesnId: currentQuestion.id,
                    id: currentQuestion.id,
                    answer: responseModal.answer,
                    state: responseModal.state
                };

                const response = await webService.submitRFIResponse({
                    requestBody: responseRequest,
                });

                console.log(response);

                if (response.message.code === 200) {
                    Lift.Application.Notification.success('Response saved successfully');
                } else {
                    Lift.Application.Notification.error('Response could not be submitted');
                }

                hideResponseModal();
            } catch (error) {
                Lift.Application.Notification.error('Response could not be submitted');
            } finally {
                Lift.spinner.hide();
            }
        } else {
            Lift.Application.Notification.error('Please fill in all fields');
        }
    };

    return (
        <div className="ux-rfi-green-border mt-4">
            <Label labelKey="Questions"></Label>

            {responseData?.map((question, index) => (
                <Accordian id={`outer-accordian-${index}`} key={question.id}>
                    <AccordianElement headerText={question.question}>
                        <Label>{question?.answers?.length} &nbsp Responses:</Label>

                        {question?.answers?.map((answer, aIndex) => (
                            <Accordian id={`inner-accordian-${index}-${aIndex}`} key={answer.id}>
                                <AccordianElement headerText={answer.state}>
                                    <Para>{answer.answer}</Para>

                                    <Button
                                        id={`edit-btn-${index}-${aIndex}`}
                                        size="small"
                                        className="ux-rfi-green-button float-right mt-4 mb-2"
                                        labelKey="edit_response"
                                    ></Button>
                                </AccordianElement>
                            </Accordian>
                        ))}

                        <Button
                            id={`respond-btn-${index}`}
                            size="small"
                            className="ux-rfi-green-button float-right mt-4 mb-2"
                            labelKey="respond_question"
                            click={() => showResponseModal(question)}></Button>
                    </AccordianElement>
                </Accordian>
            ))}

            <Modal isOpen={openModal}>
                <Group width="3,4">
                    <Label labelKey="respond_as" />
                    <Selectbox
                        id="respond_as"
                        model="responseModal.state"
                        defaultOptionLabelKey="select_state"
                        ref-table="STATE"
                        defaultOption="true"
                        onChange={(e) => setResponseModal({ ...responseModal, state: e.target.value })}
                    ></Selectbox>
                </Group>
                <Label labelKey="response"></Label>
                <Textarea
                    id="response"
                    maxLength="100"
                    model="responseModal.answer"
                    placeholderText="Placeholder text"
                    validationRules="alphaNumericCheck"
                    errormessages={{ alphaNumericCheck: 'only_alphabets_allowed' }}
                    rows="5"
                    wrap="hard"
                    onChange={(e) => setResponseModal({ ...responseModal, answer: e.target.value })}
                ></Textarea>
                <Group>
                    <Button
                        size="small"
                        className="ux-rfi-white-button-bold float-left mt-3"
                        click={hideResponseModal}
                        labelKey="cancel_btn"></Button>
                    <Button
                        size="small"
                        className="ux-rfi-green-button float-right mt-3"
                        click={handleSubmitResponse}
                        labelKey="submit_ans_btn"></Button>
                </Group>
            </Modal>
        </div>
    );
};

Questions.propTypes = {
    responseData: PropTypes.array.isRequired,
};

export default Questions;