Untitled

responseData=[
    {
      rfiId: 14501,
      id: 18001,
      question: 'What is React Router?',
      description: '',
      answers: Array(7) [
        { id: 151, quesnId: 18001, answer: 'ismail updated', state: 'AL' },
        { id: 251, quesnId: 18001, answer: 'ismail2 updated', state: 'AL' },
        { id: 201, quesnId: 18001, answer: 'ismail1 updated', state: 'AL' }
]}]




currently in the function handleSaveResponse, we are mapping through the questions array rather than mapping through the answers array where we have id and quesnId both. Also update the comapring logic -> if (question.id === quesnId && question.rfid === id) ,correctly to where we compare id and quesnid




import React, { useState, useEffect } 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, AppContext } from '@d-lift/core';
import webService from '@/Services/WebService';
import rfiUtil from '@/Util/RFIUtil';
import ConstantKeys from '@/Constants/ConstantKeys';

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

    const [filteredStates, setFilteredStates] = useAppState('filteredStates', []);

    const refTableContent = rfiUtil.getRefTableDataByCacheName(
        ConstantKeys.REF_TABLE.CREATE_RFI_REF_TABLES,
    );

    useEffect(() => {
        const stateList = rfiUtil.getAuthorizedStateList();
        if (refTableContent) {
            const filteredStateValues = refTableContent.STATE.filter((state) =>
                stateList.includes(state.CODE),
            );
            setFilteredStates(filteredStateValues);
        }

        console.log(responseData);
        // let state_val=
    }, []);

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

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

    const handleSubmitResponse = async () => {
        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) {
                // Update the responseData with the new answer
                const updatedQuestions = responseData.map((question) => {
                    if (question.id === currentQuestion.id) {
                        console.log({ ...question });
                        return {
                            ...question,
                            answers: [...question.answers, response.data],
                        };
                    }

                    return question;
                });
                console.log(updatedQuestions);

                const updatedResponseObject = {
                    ...responseData,
                    questions: updatedQuestions,
                };

                updateResponseData(updatedResponseObject);

                hideResponseModal();

                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();
        }
    };

    const toggleEdit = (prevAns) => {
        if (prevAns) {
            AppContext.model.setValue('responseModal.answer', prevAns);
        }
        setEditMode(!editMode);
    };

    const handleSaveResponse = async (id, quesnId, state) => {
        try {
            Lift.spinner.show();

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

            const responseObj = await webService.submitRFIResponse({
                requestBody: saveRequest,
            });

            console.log(responseObj);
            console.log(responseData);
            

            if (responseObj.message.code === 200) {
                // Update the responseData with the new answer
                const updatedQuestions = responseData.map((question) => {
                    if (question.id === quesnId && question.rfid === id) {
                        return {
                            ...question,
                            answers: question.answers.map((answer) => 
                                answer.id === id ? responseObj.data : answer
                            ),
                        };
                    }

                    return question;
                });
                console.log(updatedQuestions);

                const updatedResponseObject = {
                    ...responseData,
                    questions: updatedQuestions,
                };

                updateResponseData(updatedResponseObject);
                toggleEdit();

                Lift.Application.Notification.success('Response updated successfully');
            } else {
                Lift.Application.Notification.error('Response could not be updated');
            }
        } catch (error) {
            Lift.Application.Notification.error('Response could not be updated');
        } finally {
            Lift.spinner.hide();
        }
    };

    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 showIf={!editMode}>{answer.answer}</Para>

                                    <Textarea
                                        id="response"
                                        showIf={editMode}
                                        maxLength="100"
                                        model="responseModal.answer"
                                        placeholderText="Placeholder text"
                                        validationRules="alphaNumericCheck"
                                        errormessages={{
                                            alphaNumericCheck: 'only_alphabets_allowed',
                                        }}
                                        rows="5"
                                        wrap="hard"
                                        change={(e) =>
                                            setResponseModal({
                                                ...responseModal,
                                                answer: e.target.value,
                                            })
                                        }></Textarea>
                                    <Button
                                        id={`edit-btn-${index}-${aIndex}`}
                                        size="small"
                                        className="ux-rfi-green-button float-right mt-2 mb-2"
                                        labelKey="edit_response"
                                        showIf={!editMode}
                                        click={() => toggleEdit(answer.answer)}></Button>

                                    <Button
                                        showIf={editMode}
                                        size="small"
                                        className="ux-rfi-white-button-bold float-left mt-2 mb-2"
                                        click={toggleEdit}
                                        labelKey="cancel_btn"></Button>

                                    <Button
                                        showIf={editMode}
                                        id={`edit-btn-${index}-${aIndex}`}
                                        size="small"
                                        click={() =>
                                            handleSaveResponse(
                                                answer.id,
                                                answer.quesnId,
                                                answer.state,
                                            )
                                        }
                                        className="ux-rfi-green-button float-right mt-2 mb-2"
                                        labelKey="save_response"></Button>
                                </AccordianElement>
                            </Accordian>
                        ))}

                        <Button
                            id={`respond-btn-${index}`}
                            size="small"
                            className="ux-rfi-green-button float-right mt-2 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"
                        list="filteredStates"
                        optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                        optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                        defaultOption="true"
                        change={(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,
    updateResponseData: PropTypes.func.isRequired,
};

export default Questions;