Untitled

ON click of edit enable the edit mode and display the textarea instead of para element, along woth cancel and save button.on click of save it sould call the same saveAPI which gets called on hit of submit and similarly the responseData gets updated. Also refractor the code by moving the modal component code to the ResponseModal component and the related dependent code.




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

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

                                    {/* 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 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>

                                    {/* show cancel button if edit mode is enabled */}
                                    <Button
                                        size="small"
                                        className="ux-rfi-white-button-bold float-left mt-3"
                                        // 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"></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"
                        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;