Untitled

in the modal if an answer from a state is already there, then throw an error saying "Response from state already exist, please modify your response."

below is the value of responseData
 responseData = {
                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',
                            },
							{
                                id: 101,
                                quesnId: 18001,
                                answer: 'React Router for React.',
                                state: 'LA',
                            },
                        ],
                    },
                    {
                        rfiId: 14501,
                        id: 18051,
                        question: 'What are the main components provided by React Router?',
                        description: '',
                        answers: [],
                    },
                ],
            };








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

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({ questionId: null, answerId: null });

    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);
        }
    }, []);

    const getStateDsc = (stateCode) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.STATE, stateCode);
    };

    const showResponseModal = (question) => {
        setCurrentQuestion(question);
        setResponseModal({ state: '', answer: '' });
        setOpenModal(true);
        AppContext.pagedetails.getPageContext().clearValidations();
    };

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

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

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

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

            if (response.message.code === 200) {
                const updatedQuestions = responseData.map((question) => {
                    if (question.id === currentQuestion.id) {
                        let answers = question.answers ? question.answers : [responseRequest];
                        question = {
                            ...question,
                            answers: answers,
                        };
                    }
                    return question;
                });

                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');
            }
        } catch (error) {
            Lift.Application.Notification.error('Response could not be submitted');
        } finally {
            Lift.spinner.hide();
        }
    };

    const toggleEdit = (questionId, answerId, prevAns) => {
        if (prevAns) {
            AppContext.model.setValue('responseModal.answer', prevAns);
        }
        setEditMode((prevState) =>
            prevState.questionId === questionId && prevState.answerId === answerId
                ? { questionId: null, answerId: null }
                : { questionId, answerId },
        );
    };

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

            if (responseObj.message.code === 200) {
                const updatedQuestions = responseData.map((question) => {
                    if (question.id === quesnId) {
                        return {
                            ...question,
                            answers: question.answers.map((answer) =>
                                answer.id === id
                                    ? { ...answer, answer: responseModal.answer }
                                    : answer,
                            ),
                        };
                    }
                    return question;
                });

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

                updateResponseData(updatedResponseObject);
                toggleEdit(null, null);

                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={getStateDsc(answer.state)}>
                                    <Para
                                        showIf={
                                            !(
                                                editMode.questionId === question.id &&
                                                editMode.answerId === answer.id
                                            )
                                        }>
                                        {answer.answer}
                                    </Para>

                                    <Textarea
                                        id="response"
                                        showIf={
                                            editMode.questionId === question.id &&
                                            editMode.answerId === answer.id
                                        }
                                        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>
                                    <Button
                                        id={`edit-btn-${index}-${aIndex}`}
                                        size="small"
                                        className="ux-rfi-green-button float-right mt-2 mb-2"
                                        labelKey="edit_response"
                                        showIf={
                                            !(
                                                editMode.questionId === question.id &&
                                                editMode.answerId === answer.id
                                            )
                                        }
                                        click={() =>
                                            toggleEdit(question.id, answer.id, answer.answer)
                                        }></Button>

                                    <Button
                                        showIf={
                                            editMode.questionId === question.id &&
                                            editMode.answerId === answer.id
                                        }
                                        size="small"
                                        className="ux-rfi-white-button-bold float-left mt-2 mb-2"
                                        click={() => toggleEdit(question.id, answer.id)}
                                        labelKey="cancel_btn"></Button>

                                    <Button
                                        showIf={
                                            editMode.questionId === question.id &&
                                            editMode.answerId === answer.id
                                        }
                                        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"
                        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,
    updateResponseData: PropTypes.func.isRequired,
};

export default Questions;