Untitled

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

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

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

    const getRfiCollection = async () => {
        try {
            Lift.spinner.show();
            const response = await webService.fetchRfiCollection();
            setCollectionData(response?.data);
        } catch (error) {
            Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.CONTACTS_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"
                            labelKey="state_summary_header"
                        ></Header>
                        <Para className="ux-rfi-white-font">
                            This is the description text for this RFI Collection. Do not display if
                            empty, null, or blank.
                        </Para>
                    </div>

                    <div className="ux-rfi-light-green-border mt-3">
                        <Accordian id="outer-accordian-2">
                            <AccordianElement
                                labelKey="requirements_subHeader"
                                className="font-weight-bold"
                            >
                                <Row className="col-9 pl-4">
                                    <Para
                                        labelKey="offering"
                                        className="ux-rfi-label-normal font-weight-bold "
                                    ></Para>
                                    <br />
                                    <Para
                                        labelKey="program"
                                        className="ux-rfi-label-normal font-weight-bold"
                                    ></Para>
                                    <br />
                                    <Para
                                        labelKey="category"
                                        className="ux-rfi-label-normal font-weight-bold"
                                    ></Para>
                                </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>
                </>
            ) : (
                <Row className="d-flex justify-content-center text-center m-5 rfi-unauth-container">
                    <Para
                        labelKey="unauthorized_msg"
                        className="ux-rfi-font font-weight-bold m-auto p-3"
                    ></Para>
                </Row>
            )}
        </>
    );
};

export default QuestionResponse;