Untitled

update the code for isStateAuthorized() so that the function returns true i.e. if the logged in user does not have the state in the filteredState list then the edit button is disabled for that question. (The person shoud  not be able to edit the answer for the states which he is not authorized to or is not present in the filteredstate list)




import React, { useState, useEffect } from 'react';
import {
    Accordian,
    AccordianElement,
    Label,
    Button,
    Modal,
    Para,
    Selectbox,
    Group,
    Textarea,
    UX,
    FieldError,
} 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';

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

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

    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);
        setStateResponse({ state: '', answer: '' });
        setOpenModal(true);
        AppContext.pagedetails.getPageContext().clearValidations();
    };

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

    const handleSaveRfiResponse = async () => {
        try {

            if (AppContext.pagedetails.getPageContext().validate({ model: 'stateResponse' }).isError) {
                return;
            }
            const responseRequest = {
                quesnId: currentQuestion.id,
                id: '',
                answer: stateResponse.answer,
                state: stateResponse.state,
            };

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

            if (response.message.code === ConstantKeys.RESPONSE_CODES.sucess) {
                const updatedQuestions = responseData.map((question) => {
                    if (question.id === currentQuestion.id) {
                        let answers = question.answers
                            ? [...question.answers, response.data]
                            : [response.data];
                        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('stateResponse.answer', prevAns);
        }

        setEditMode((prevState) =>
            prevState.questionId === questionId && prevState.answerId === answerId
                ? { questionId: null, answerId: null }
                : { questionId, answerId },
        );
    };

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

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

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

            if (responseObj.message.code === ConstantKeys.RESPONSE_CODES.sucess) {
                const updatedQuestions = responseData.map((question) => {
                    if (question.id === quesnId) {
                        return {
                            ...question,
                            answers: question.answers.map((answer) =>
                                answer.id === id
                                    ? { ...answer, answer: stateResponse.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();
        }
    };

    const validateStateValue = (e) => {
        const selectedState = e.target.value;
        const existingAnswer = currentQuestion?.answers.find(
            (answer) => answer.state === selectedState,
        );

        if (existingAnswer) {
            setExistingStatesResp(true);
        } else {
            setExistingStatesResp(false);
        }
    };

    const isStateAuthorized = (stateCode) => {
        console.log('filteredStates-----------', filteredStates);
        if (filteredStates) {
            const authorizedState = filteredStates.find((state) => state.CODE === stateCode);
            if (authorizedState) {
                return 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={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="stateResponse.answer"
                                        placeholderText="Placeholder text"
                                        validationRules="alphaNumericCheck"
                                        errormessages={{
                                            alphaNumericCheck: 'only_alphabets_allowed',
                                        }}
                                        rows="5"
                                        wrap="hard"
                                        onChange={(e) =>
                                            setStateResponse({
                                                ...stateResponse,
                                                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)
                                        }
                                        disabled={isStateAuthorized(answer.state)}
                                        ></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={() =>
                                            handleUpdateRfiResponse(
                                                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}>
                <FieldError
                    showIf={existingStatesResp}
                    labelKey="OnStateMatchError"
                    className="pb-2 pt-2"></FieldError>

                <Group width="3,4">
                    <Label className="mandatory_field" labelKey="respond_as" />

                    <Selectbox
                        id="respond_as"
                        model="stateResponse.state"
                        defaultOptionLabelKey="select_state"
                        list="filteredStates"
                        optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                        optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                        defaultOption="true"
                        change={validateStateValue}
                        required></Selectbox>
                </Group>
                <Label className="mandatory_field" labelKey="response"/>
                <Textarea
                    id="response"
                    maxLength="100"
                    model="stateResponse.answer"
                    placeholderText="Placeholder text"
                    validationRules="alphaNumericCheck"
                    errormessages={{ alphaNumericCheck: 'only_alphabets_allowed' }}
                    rows="5"
                    wrap="hard"
                    required
                    disabled={existingStatesResp}></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={handleSaveRfiResponse}
                        labelKey="submit_ans_btn"
                        disabled={existingStatesResp}></Button>
                </Group>
            </Modal>
        </div>
    );
};

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

export default Questions;