Untitled

Update the below code so that only after we have selected a state and click on filter the selected state in RespondingState, then only the state will get displayed on the header of QuestionResponse. Also use the below code to get the description of state code and display that desc as header.

const getStateDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.STATE, colData);
    };



import React, { useEffect } from 'react';
import { Selectbox, Label, DataTable, Button, Card } from '@d-lift/uxcomponents';
import { Lift, useAppState } from '@d-lift/core';
import ConstantKeys from '@/Constants/ConstantKeys';
import RFIUtil from '@/Util/RFIUtil';
import _ from 'lodash';
import webService from '@/Services/AdminService';

const RespondingState = ({}) => {
    const [originalContacts, setOriginalContacts] = useAppState('originalContacts', undefined);
    const [stateResp, setStateResp] = useAppState('stateResp', { state: undefined });
    const [contacts, setContacts] = useAppState('contacts', []);
    const [showContacts, setShowContacts] = useAppState('showContacts', false);
    const [filteredStates, setFilteredStates] = useAppState('filteredStates', []);

    const refTableContent = RFIUtil.getRefTableDataByCacheName(
        ConstantKeys.REF_TABLE.REF_TABLES_CACHE,
    );

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

    const onPageLoadHandler = async () => {
        try {
            Lift.spinner.show();
            const response = await webService.fetchContacts();
            if (response?.data && !_.isEmpty(response?.data)) {
                fetchStateList(response?.data);

                let contactList = response.data.map((item) => {
                    return {
                        email: item.pocId,
                        name: item.firstName + ' ' + item.lastName,
                    };
                });
                contactList = contactList.sort((a, b) => a.email.localeCompare(b.email));
                setOriginalContacts(contactList);
                setContacts(contactList);
            }
            setShowContacts(true);
        } catch (error) {
            Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.CONTACTS_ERR);
        } finally {
            Lift.spinner.hide();
        }
    };

    const fetchStateList = (contactList) => {
        const distinctStatesValues = [...new Set(contactList.flatMap((item) => item.states))];

        if (refTableContent) {
            const distinctStatesList = refTableContent.STATE?.filter((state) =>
                distinctStatesValues?.includes(state.CODE),
            );

            if (distinctStatesValues?.includes(ConstantKeys.REF_VALUE.ALL)) {
                distinctStatesList.push({
                    CODE: ConstantKeys.REF_VALUE.ALL,
                    DESCRIPTION: ConstantKeys.CONTEXT_KEYS.ALL_LOWERCASE,
                });
            }

            setFilteredStates(
                distinctStatesList.sort((a, b) => a.DESCRIPTION.localeCompare(b.DESCRIPTION)),
            );
        }
    };

    const filterHandler = () => {
        setShowContacts(false);
        if (
            !_.isEmpty(originalContacts) &&
            stateResp.state !== ConstantKeys.DEFAULT_OPTION.LIFT_default
        ) {
            let filteredList = [];
            originalContacts.forEach((item) => {
                let state = item.state?.split(',');
                if (
                    state?.includes(stateResp.state) ||
                    !stateResp.state ||
                    stateResp.state === ConstantKeys.DEFAULT_OPTION.LIFT_default ||
                    stateResp.state === ConstantKeys.REF_VALUE.ALL
                ) {
                    filteredList.push(item);
                }
            });
            setContacts(filteredList);
        } else {
            setContacts(originalContacts);
        }
        setTimeout(() => {
            setShowContacts(true);
        }, 100);
    };

    return (
        <Card className="mt-3 w-100 ux-rfi-grey-bg">
            <Selectbox
                id="state"
                labelKey="state"
                list="filteredStates"
                optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                model="stateResp.state"
                className="w-100"
                defaultOptionLabelKey="select_state"
                defaultOption="true"></Selectbox>
            <Label labelKey="contacts"></Label>
            <DataTable
                col-data-keys="email,name"
                col-default-headers="Email,Name"
                datacollection="contacts"
                keyField="email"
                hover="false"
                striped={false}
                //responsive={true}
                emptymsg-key="no_records_found"
                className="va-contacts-table w-25"
                pagination="default"
                pagination-size-per-page="5"
            />
            <Button
                size="small"
                className="ux-rfi-green-button float-right mr-2 mt-4"
                labelKey="filter"
                click={filterHandler}></Button>
        </Card>
    );
};
export default RespondingState;



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

const QuestionResponse = ({}) => {
    useEffect(() => {
        handleStateResponse();
    }, []);

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

            const searchRequest = {
                id: id,
                
            };

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

            
        } catch (error) {
            Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.SEARCH_ERR_MSG);
        } finally {
            Lift.spinner.hide();
        }
    };

    return (
        <>
            <div className="ux-rfi-green-bg">
                <Header className="pt-3 ux-rfi-white-header" size="1">
                    Virginia
                </Header>
                {/* {state} */}
                <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>
                {/* {description} */}
            </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>
                            {/* {' ' +
                                Util.getRefTableDescriptionByCode(
                                    ConstantKeys.REF_TABLE_NAMES.OFFERING,
                                    rfi.offering,
                                )} */}
                            <br />
                            <Para
                                labelKey="program"
                                className="ux-rfi-label-normal font-weight-bold"></Para>
                            {/* {' ' +
                                renderProgramCategoryValues(
                                    rfi.programs,
                                    ConstantKeys.REF_TABLE_NAMES.PROGRAM,
                                )} */}
                            <br />
                            <Para
                                labelKey="category"
                                className="ux-rfi-label-normal font-weight-bold"></Para>
                            {/* {' ' +
                                renderProgramCategoryValues(
                                    rfi.category,
                                    ConstantKeys.REF_TABLE_NAMES.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"
                            // paginationSizePerPage="10"
                            // pagination="default"
                            // pagination-show-total="true"
                        />
                    </AccordianElement>
                </Accordian>
            </div>
        </>
    );
};
export default QuestionResponse;