Untitled

refractor the below code to put the modal code in another componed nad use that here as ResponseModal component. it should be in a way that submit button is working as expected



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, updateResponseData }) => {
    const [openModal, setOpenModal] = useAppState('openModal', false);
    const [responseModal, setResponseModal] = useAppState('responseModal', {
        state: '',
        answer: '',
    });
    const [currentQuestion, setCurrentQuestion] = useState(null);
    const [editMode, setEditMode] = 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) {
                    // 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();
            }
        } else {
            Lift.Application.Notification.error('Please fill in all fields');
        }
    };

    const enableEditMode = () => {
        setEditMode(true);
    };

    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}>
                                    <div showIf={editMode}>
                                        {/* show PARA if edit mode is NOT enabled */}
                                        <Para>{answer.answer}</Para>

                                        {/* show EDIT button if edit mode is NOT enabled */}
                                        <Button
                                            id={`edit-btn-${index}-${aIndex}`}
                                            size="small"
                                            className="ux-rfi-green-button float-right mt-2 mb-2"
                                            labelKey="edit_response"></Button>
                                    </div>

                                    <div showIf={!editMode}>
                                        {/* show TEXTAREA if edit mode is enabled */}
                                        <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>

                                        {/* show cancel button if edit mode is enabled */}
                                        <Button
                                            size="small"
                                            className="ux-rfi-white-button-bold float-left mt-2 mb-2"
                                            // click={hideResponseModal}
                                            labelKey="cancel_btn"></Button>

                                        {/* show SAVE button if edit mode is enabled */}
                                        <Button
                                            id={`edit-btn-${index}-${aIndex}`}
                                            size="small"
                                            className="ux-rfi-green-button float-right mt-2 mb-2"
                                            labelKey="save_response"
                                            click={() =>
                                                enableEditMode()
                                            }></Button>
                                    </div>
                                </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"
                        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,
    updateResponseData: PropTypes.func.isRequired,
};

export default Questions;