Untitled

import ConstantKeys from '@/Constants/ConstantKeys';
import { Para, Header, DataTable } from '@d-lift/uxcomponents';
import React, { useEffect } from 'react';
import { Lift, useAppState, Util } from '@d-lift/core';
import webService from '@/Services/WebService';
import _ from 'lodash';

const QuestionResponse = () => {
    const [selectedStateDesc, setSelectedStateDesc] = useAppState('selectedStateDesc', '');
    const [collectionData, setCollectionData] = useAppState('collectionData', undefined);
    const [expandedCard, setExpandedCard] = useAppState('expandedCard', null);
    const [showAnswer, setShowAnswer] = useAppState('showAnswer', undefined);
    const [showTable, setShowTable] = useAppState('showTable', true);
    const [selectedState, setSelectedState] = useAppState('selectedState', undefined);

    useEffect(() => {
        getRfiCollection();
    }, []);

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

            //let response= await webService.fetchRfiCollection();

            let response = {
                catalogId: 551,
                title: 'dfsdf',
                description: 'gsdfgsdfgdsfg',
                rfiDetails: [
                    {
                        id: 23451,
                        questionsList: [
                            {
                                rfiId: 23451,
                                id: 36003,
                                question: 'Question 1 for AK RFI for testing attention needed',
                                description: '',
                                answers: [
                                    {
                                        id: 93755,
                                        quesnId: 36003,
                                        answer: 'IL RESPONDED ',
                                        respondDt: '2024-07-25T17:40:48.69381',
                                        state: 'IL',
                                    },
                                    {
                                        id: 93750,
                                        quesnId: 36003,
                                        answer: 'IL RESPONDED 2',
                                        respondDt: '2024-07-25T17:40:48.69381',
                                        state: 'AK',
                                    },
                                ],
                            },
                            {
                                rfiId: 23451,
                                id: 36004,
                                question: 'Question 2 AK RFI for testing attention needed',
                                description: '',
                                answers: [
                                    {
                                        id: 93753,
                                        quesnId: 36004,
                                        answer: 'Responded as Michigan',
                                        respondDt: '2024-07-25T15:50:54.130178',
                                        state: 'MI',
                                    },
                                ],
                            },
                            {
                                rfiId: 23451,
                                id: 36005,
                                question: 'Question 3 AK RFI for testing attention needed',
                                description: '',
                                answers: [
                                    {
                                        id: 93802,
                                        quesnId: 36005,
                                        answer: 'gdfgdsfg',
                                        respondDt: '2024-07-26T11:42:54.20372',
                                        state: 'NH',
                                    },
                                ],
                            },
                            {
                                rfiId: 23451,
                                id: 36006,
                                question: 'Question 4 AK RFI for testing attention needed',
                                description: '',
                                answers: [
                                    {
                                        id: 93803,
                                        quesnId: 36006,
                                        answer: 'gsdfgsdfgsdfg',
                                        respondDt: '2024-07-26T11:43:03.513999',
                                        state: 'NV',
                                    },
                                ],
                            },
                        ],
                        title: 'AK RFI for testing attention needed',
                        description: 'Description for AK RFI for testing attention needed',
                        reqDT: '2024-07-25T15:46:59.142912',
                        state: 'AR',
                        programs: 'ALL',
                        category: 'ALL',
                        status: 'OP',
                        dueDT: '07-26-2024',
                        offering: 'EE',
                    },
                    {
                        id: 23501,
                        questionsList: [
                            {
                                rfiId: 23501,
                                id: 36007,
                                question: 'Question MI',
                                description: '',
                                answers: [
                                    {
                                        id: 93754,
                                        quesnId: 36007,
                                        answer: 'IL RESPONDED ',
                                        respondDt: '2024-07-25T17:39:23.427467',
                                        state: 'IL',
                                    },
                                ],
                            },
                        ],
                        title: 'MI RFI Created Title',
                        description: '',
                        reqDT: '2024-07-25T17:05:21.534463',
                        state: 'MI',
                        programs: 'ALL',
                        category: 'ALL',
                        status: 'OP',
                        dueDT: '07-26-2024',
                        offering: 'EE',
                    },
                    {
                        id: 23551,
                        questionsList: [
                            {
                                rfiId: 23551,
                                id: 36008,
                                question: 'QUES1',
                                description: '',
                            },
                        ],
                        title: 'IL RFI',
                        description: '',
                        reqDT: '2024-07-25T17:38:19.4079',
                        state: 'IL',
                        programs: 'ALL',
                        category: 'ALL',
                        status: 'OP',
                        dueDT: '07-26-2024',
                        offering: 'EE',
                    },
                ],
            };

            processCollectionData(response);
        } catch (error) {
            Lift.Application.Notification.error(
                ConstantKeys.NOTIFICATION.MSG.ERR.FETCH_RFI_COLLECTIONS_ERR,
            );
        } finally {
            Lift.spinner.hide();
        }
    };

    const processCollectionData = (responseData) => {
        const formattedCollectionData = [];
        if (!_.isEmpty(responseData) && !_.isEmpty(responseData.rfiDetails)) {
            responseData.rfiDetails.forEach((data) => {
                let table = [];
                table = data.questionsList?.map((question) => ({
                    id: question.id,
                    question: question.question,
                    answers: question.answers,
                }));

                formattedCollectionData.push(table);
            });
        }

        setCollectionData({
            ...responseData,
            ...{ formattedCollectionData: formattedCollectionData },
        });

        console.log('collectionData', collectionData);
        console.log('formattedCollectionData', formattedCollectionData);
    };

    const renderResponse = (colData, rowData, index) => {
        const states = rowData.answers?.map((answer) => answer.state).join(', ');
        return showAnswer !== true ? (
            <a onClick={() => renderAnswers(states)}>{states}</a>
        ) : (
            rowData.answers
                ?.filter((answer) => answer.state === selectedState)
                .map((answer) => <div key={answer.id}>{answer.answer}</div>)
        );
    };

    const renderAnswers = (state) => {
        setSelectedState(state);
        setShowAnswer(true);
        setShowTable(false);
        setTimeout(() => {
            setShowTable(true);
        }, 100);
    };

    const toggleCard = (index) => {
        setExpandedCard(expandedCard === index ? null : index);
    };

    return (
        <>
            {collectionData ? (
                <>
                    <div className="ux-rfi-green-bg">
                        <Header
                            className="pt-1 ux-rfi-white-header"
                            size="1"
                            showIf={selectedStateDesc}>
                            {selectedStateDesc}
                        </Header>
                        <Header header-size="4" className="pt-1 ux-rfi-white-header">
                            {collectionData.title}
                        </Header>
                        <Para className="ux-rfi-white-font">{collectionData.description}</Para>
                    </div>

                    {collectionData.rfiDetails.map((rfiDetail, index) => (
                        <div key={index} className="ux-rfi-light-green-border mt-3">
                            <div>
                                <div className="main-component">
                                    <div onClick={() => toggleCard(index)} className="p-1">
                                        <Header
                                            header-size="4"
                                            preIconClass={`${
                                                expandedCard == index
                                                    ? 'fa fa-angle-up'
                                                    : 'fa fa-angle-down'
                                            }`}>
                                            {rfiDetail.title}
                                        </Header>
                                    </div>

                                    {expandedCard === index ? (
                                        <div className="col-9 pb-3">
                                            <Para
                                                className="pt-1 ux-rfi-font"
                                                showIf={rfiDetail.description}>
                                                {rfiDetail.description}
                                            </Para>
                                            <Para
                                                labelKey="program"
                                                className="ux-rfi-label-normal font-weight-bold"></Para>
                                            {' ' +
                                                rfiDetail.programs
                                                    .split(',')
                                                    .map((program) =>
                                                        Util.getRefTableDescriptionByCode(
                                                            ConstantKeys.REF_TABLE_NAMES.PROGRAM,
                                                            program,
                                                        ),
                                                    )
                                                    .join(', ')}
                                            <br />
                                            <Para
                                                labelKey="category"
                                                className="ux-rfi-label-normal font-weight-bold"></Para>
                                            {' ' +
                                                rfiDetail.category
                                                    .split(',')
                                                    .map((category) =>
                                                        Util.getRefTableDescriptionByCode(
                                                            ConstantKeys.REF_TABLE_NAMES.CATEGORY,
                                                            category,
                                                        ),
                                                    )
                                                    .join(', ')}
                                            <br />
                                            {showTable && (
                                                <DataTable
                                                    value={collectionData.formattedCollectionData[index]}
                                                    showIf={collectionData.formattedCollectionData[index]}
                                                    rows={10}
                                                    responsiveLayout="scroll">
                                                    <DataTable.Column
                                                        field="question"
                                                        header="Questions"
                                                    />
                                                    <DataTable.Column
                                                        field="answers"
                                                        header="Response"
                                                        body={renderResponse}
                                                    />
                                                </DataTable>
                                            )}
                                        </div>
                                    ) : (
                                        <></>
                                    )}
                                </div>
                            </div>
                        </div>
                    ))}
                </>
            ) : (
                ''
            )}
        </>
    );
};

export default QuestionResponse;