Untitled

update the below code to send the target value to the filterProgramAndCategory() if it is called from onchange, but  i need to render the category and program list on page load for the default value provided "ConstantKeys.DEFAULT_OPTION.OFFERING" FOR which im calling this function inside useeffct to render the checkoxes values




import React, { useState, useEffect } from 'react';
import { withPage, useAppState, Util } from '@d-lift/core';
import ConstantKeys from '@/Constants/ConstantKeys';
import SearchRFIForm from './Component/SearchRFIForm';
import SearchRFIFilters from './Component/SearchRFIFilters';
import { Page } from '@d-lift/uxcomponents';
import RightSection from '@/Layout/RightSection';
import BodySection from '@/Layout/BodySection';
import './search.scss';
import RFIUtil from '@/Util/RFIUtil';

const Search = ({ UXPage, config }) => {
    const defaultSearchRFI = {
        search: '',
        category: [...ConstantKeys.DEFAULT_OPTION.CATEGORY],
        programs: [...ConstantKeys.DEFAULT_OPTION.PROGRAM],
        state: '',
        neededBy: '',
        offering: ConstantKeys.DEFAULT_OPTION.OFFERING,
    };

    const [searchRFI, setSearchRFI] = useAppState('searchRFI', defaultSearchRFI);

    const updateSearchRFI = (newState) => {
        setSearchRFI(newState);
    };

    const [categoryList, setCategoryList] = useState([]);
    const [programList, setProgramList] = useState([]);
    const [filteredCategory, setFilteredCategory] = useState([]);
    const [filteredPrograms, setFilteredPrograms] = useState([]);
    const [refDataLoaded, setRefDataLoaded] = useAppState('refDataLoaded', false);

    useEffect(() => {
        filterProgramAndCategory();
        RFIUtil.fetchRefTableValue(ConstantKeys.REF_TABLE.CREATE_RFI_REF_TABLES, setRefDataLoaded);
        const refTableContent = JSON.parse(
            Util.getSessionData(ConstantKeys.REF_TABLE.CREATE_RFI_REF_TABLES),
        );

        if (refTableContent) {
            const programs = refTableContent.PROGRAM;
            setProgramList(programs);

            const categories = refTableContent.CATEGORY;
            setCategoryList(categories);
        }
    }, []);

    const filterProgramAndCategory = (event) => {
        const selectedOffering = event.target.value
            ? event.target.value
            : ConstantKeys.DEFAULT_OPTION.OFFERING;

        const filteredProg = RFIUtil.getTableDataForOffering(
            ConstantKeys.CONTEXT_KEYS.Program,
            selectedOffering,
        );
        setFilteredPrograms(filteredProg);

        const filteredCategories = RFIUtil.getTableDataForOffering(
            ConstantKeys.CONTEXT_KEYS.Category,
            selectedOffering,
        );
        setFilteredCategory(filteredCategories);
    };

    return (
        <Page ref-table-list="PROGRAM, CATEGORY, OFFERING, STATE">
            {refDataLoaded ? (
                <div className="d-flex ">
                    <BodySection>
                        <SearchRFIForm
                            searchRFI={searchRFI}
                            updateSearchRFI={updateSearchRFI}
                            filteredCategory={filteredCategory}
                            filteredPrograms={filteredPrograms}></SearchRFIForm>
                    </BodySection>

                    <RightSection>
                        <SearchRFIFilters
                            filterProgramAndCategory={filterProgramAndCategory}></SearchRFIFilters>
                    </RightSection>
                </div>
            ) : (
                <></>
            )}
        </Page>
    );
};

export default withPage(
    {
        Description: 'Search RFI Page',
        ContentManager: true,
        LayoutStyle: 'rfi-dashboard',
    },
    Search,
);






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

const SearchRFIFilters = ({ filterProgramAndCategory }) => {
    const neededByList = [
        { DESCRIPTION: 'Past Due', CODE: 'PD' },
        { DESCRIPTION: 'Today', CODE: 'TD' },
        { DESCRIPTION: 'This week', CODE: 'TW' },
        { DESCRIPTION: '30 days', CODE: 'THIRTYDAYS' },
        { DESCRIPTION: '90 days', CODE: 'NINTYDAYS' },
    ];
    useAppState('neededByList', neededByList);

    return (
        <>
            <Selectbox
                id="neededBy"
                labelKey="needed_by"
                model="searchRFI.neededBy"
                className="w-100 pt-3"
                list="neededByList"
                optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                defaultOptionLabelKey="select_dueDt"
                defaultOption="true"></Selectbox>

            <Selectbox
                id="state"
                labelKey="posted_by"
                model="searchRFI.state"
                className="w-100 "
                defaultOptionLabelKey="select_state"
                ref-table="STATE"
                defaultOption="true"></Selectbox>

            <Selectbox
                id="offering"
                model="searchRFI.offering"
                labelKey="offering"
                change={(event) => filterProgramAndCategory(event)}
                ref-table="OFFERING"
                className="ux-w-100 pt-3"
                // defaultOption="true"
            ></Selectbox>

            {/* <div className="pt-3">
                <Label labelKey="note"></Label>
                <Label labelKey="advanced_appears"></Label>
            </div> */}
        </>
    );
};
export default SearchRFIFilters;