Untitled

UPDATE the below code to map the UI elements correctly to the collectionData values. such as multiple Accordian cards will get displayed for rfiDetails



import ConstantKeys from '@/Constants/ConstantKeys';
import {
    Para,
    Selectbox,
    Header,
    AccordianElement,
    Label,
    Accordian,
    DataTable,
    Row,
} from '@d-lift/uxcomponents';
import React, { useEffect } from 'react';
import { Lift, useAppState } from '@d-lift/core';
import webService from '@/Services/WebService';

const QuestionResponse = ({}) => {
    const [selectedStateDesc] = useAppState('selectedStateDesc', '');
    const [collectionData, setCollectionData] = useAppState('collectionData', undefined);
    const [originalCollectionData, setOriginalCollectionData] = useAppState(
        'originalCollectionData',
        undefined,
    );

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

    const getRfiCollection = async () => {
        try {
            Lift.spinner.show();
            //const response = await webService.fetchRfiCollection();
            let response = {
                catalogId: 1,
                title: 'State Summary RFI Collection Title',
                description:
                    'This is the description text for this RFI Collection. Do not display if    empty, null, or blank.',
                rfiDetails: [
                    {
                        id: 123,
                        title: 'State-overview screen RFI collection json',
                        description: 'description for State-overview screen RFI collection',
                        programs: 'ALL',
                        category: 'RP',
                        offering: 'EE',
                        questionsList: [
                            {
                                rfiId: 123,
                                id: 456,
                                question: 'Question 2 State-overview screen',
                                description: 'Description for Question 2 State-overview screen',
                                answers: [
                                    {
                                        quesnId: 456,
                                        id: 789,
                                        answer: 'YGKJ',
                                        state: 'CA',
                                        respondDt: '',
                                    },
                                    {
                                        quesnId: 456,
                                        id: 799,
                                        answer: 'HBbmnbbKLJHLKJN',
                                        state: 'LA',
                                        respondDt: '',
                                    },
                                ],
                            },
                            {
                                rfiId: 124,
                                id: 436,
                                question: 'Question 1 State-overview screen',
                                description: 'Description for Question 1 State-overview screen',
                                answers: [
                                    {
                                        quesnId: 436,
                                        id: 709,
                                        answer: 'nmbvm',
                                        state: 'AK',
                                        respondDt: '',
                                    },
                                ],
                            },
                        ],
                    },
                ],
            };
            setCollectionData(response);
            setOriginalCollectionData(response);
        } catch (error) {
            Lift.Application.Notification.error(
                ConstantKeys.NOTIFICATION.MSG.ERR.FETCH_RFI_COLLECTIONS_ERR,
            );
        } finally {
            Lift.spinner.hide();
        }
    };

    return (
        <>
            {collectionData ? (
                <>
                    <div className="ux-rfi-green-bg">
                        <Header className="pt-3 ux-rfi-white-header" size="1">
                            {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>

                    <div className="ux-rfi-light-green-border mt-3">
                        <Accordian id="outer-accordian-2">
                            <AccordianElement
                                headerText={collectionData.rfiDetails.title}
                                className="font-weight-bold">
                                <Row className="col-9 pl-4">
                                    <Para
                                        labelKey="offering"
                                        className="ux-rfi-label-normal font-weight-bold "></Para>
                                    {' ' +
                                        Util.getRefTableDescriptionByCode(
                                            ConstantKeys.REF_TABLE_NAMES.OFFERING,
                                            collectionData.rfiDetails.offering,
                                        )}
                                    <br />
                                    <Para
                                        labelKey="program"
                                        className="ux-rfi-label-normal font-weight-bold"></Para>
                                    {' ' +
                                        Util.getRefTableDescriptionByCode(
                                            ConstantKeys.REF_TABLE_NAMES.PROGRAM,
                                            collectionData.rfiDetails.program,
                                        )}
                                    <br />
                                    <Para
                                        labelKey="category"
                                        className="ux-rfi-label-normal font-weight-bold"></Para>
                                    {' ' +
                                        Util.getRefTableDescriptionByCode(
                                            ConstantKeys.REF_TABLE_NAMES.CATEGORY,
                                            collectionData.rfiDetails.category,
                                        )}
                                </Row>
                                <DataTable
                                    col-data-keys="question,response"
                                    col-default-headers="Question,Response"
                                    datacollection="contactList"
                                    keyField="question"
                                    hover="false"
                                    bordered="true"
                                    striped="false"
                                    emptymsg-key="no_records_found"
                                    className="va-contacts-table"
                                />
                            </AccordianElement>
                        </Accordian>
                    </div>
                </>
            ) : (
                <></>
            )}
        </>
    );
};

export default QuestionResponse;