Untitled

Previously i was using showif logic for data table with appcontext, can you update the below code in handleSearchRFI so that inplace of using appcontext it makes use of state to display data table . i have created the "const [resultsFound, setResultsFound] = useAppState('resultsFound', false);" for this purpose.



import ConstantKeys from '@/Constants/ConstantKeys';
import webService from '@/Services/WebService';
import { AppContext, Lift, useAppState, Util } from '@d-lift/core';
import {
    Button,
    Checkbox,
    CheckboxGroup,
    DataTable,
    Group,
    Header,
    Label,
    NavLink,
    Textbox,
    UX,
} from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import React from 'react';
import '../search.scss';
 
const SearchRFIForm = ({ searchRFI, updateSearchRFI, filteredPrograms, filteredCategory }) => {
    const [RFIResultList, setRFIResultList] = useAppState('RFIResultList', []);
 
    const [showAdvanceSearchContent, setShowAdvanceSearchContent] = useAppState(
        'showAdvanceSearchContent',
        false,
    );
    const [resultsFound, setResultsFound] = useAppState('resultsFound', false);
    const expandAdvanceSearch = () => {
        setShowAdvanceSearchContent(!showAdvanceSearchContent);
    };
 
    const getTitleLink = (colData, rowData, index) => {
        let model = 'searchRFI[' + rowData.id + '].title';
        console.log(rowData);
        return (
            <UX type="section">
                <NavLink className="ux-rfi-link" to="/response">
                    {rowData.title}
                </NavLink>
            </UX>
        );
    };
 
    const getProgramDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE.PROGRAM, colData);
    };
 
    const getCategoryDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE.CATEGORY, colData);
    };
 
    const getOfferingDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE.OFFERING, colData);
    };
 
    const getStateDsc = (colData) => {
        return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE.STATE, colData);
    };
 
    const handleSearchRFI = async () => {
        if (AppContext.pagedetails.getPageContext().validate({ model: 'searchRFI' }).isError) {
            return;
        }
        try {
            Lift.spinner.show();
 
            const searchResults = await webService.searchRFIRequest({
                requestBody: searchRFI,
            });
 
            if (searchResults) {
                AppContext.model.setValue('showDatatable', true);//need to make use of state
                setRFIResultList(searchResults);
            } else {
                // Lift.Application.Notification.error('Failed to complete the search');
            }
 
            Lift.Application.Notification.success('Search completed successfully');
        } catch (error) {
            Lift.Application.Notification.error('Failed to complete the search');
        } finally {
            Lift.spinner.hide();
        }
    };
 
    const handleCategoryChange = (event) => {
        const selectedCategory = event.target.value;
        let updatedCategory = [...searchRFI.category];
 
        if (selectedCategory === ConstantKeys.CONTEXT_KEYS.All) {
            updatedCategory = [ConstantKeys.CONTEXT_KEYS.All];
        } else if (updatedCategory.includes(ConstantKeys.CONTEXT_KEYS.All)) {
            updatedCategory = updatedCategory.filter(
                (item) => item !== ConstantKeys.CONTEXT_KEYS.All,
            );
        }
 
        const newList = { ...searchRFI, category: updatedCategory };
        updateSearchRFI(newList);
    };
 
    const handleProgramChange = (event) => {
        const value = event.target.value;
        let selectedPrograms = [...searchRFI.programs];
 
        if (value === ConstantKeys.CONTEXT_KEYS.All) {
            selectedPrograms = [ConstantKeys.CONTEXT_KEYS.All];
        } else if (selectedPrograms.includes(ConstantKeys.CONTEXT_KEYS.All)) {
            selectedPrograms = selectedPrograms.filter(
                (program) => program !== ConstantKeys.CONTEXT_KEYS.All,
            );
        }
        const newList = { ...searchRFI, programs: selectedPrograms };
        updateSearchRFI(newList);
    };
 
    return (
        <>
            <div className="pb-5">
                <Header className="pt-3 ux-rfi-font-header" size="2" labelKey="search"></Header>
                <Group width="9,2">
                    <Textbox
                        name="question"
                        className="w-100 ux-rfi-search-bar"
                        model="searchRFI.search"
                        appendIcon="search"
                        placeholder="Search"></Textbox>
                    <Button
                        id="submit-btn"
                        className="ux-rfi-green-button mt-4"
                        click={handleSearchRFI}
                        labelKey="search_btn"></Button>
                </Group>
 
                <Button
                    header-size={6}
                    postIconClass="fa fa-angle-right"
                    className="col-12 text-center mt-1 ux-rfi-search-btn"
                    labelKey="advanced_search"
                    click={expandAdvanceSearch}></Button>
 
                {showAdvanceSearchContent && (
                    <div>
                        <div className="ux-rfi-grey-border w-100 mt-3">
                            <Label labelKey="category" className="mt-2 ux-rfi-label-normal"></Label>
                            <div className="ux-rfi-grey-border mt-2">
                                <CheckboxGroup
                                    model="searchRFI.category"
                                    className="ux-rfi-checkbox-d-flex mt-3">
                                    {filteredCategory.map((categoryItem, index) => (
                                        <Checkbox
                                            key={index}
                                            id={'category-item-' + index}
                                            text={
                                                categoryItem[
                                                    ConstantKeys.REF_TABLE_COLS.DESCRIPTION
                                                ]
                                            }
                                            value={categoryItem[ConstantKeys.REF_TABLE_COLS.CODE]}
                                            change={(event) =>
                                                handleCategoryChange(event)
                                            }></Checkbox>
                                    ))}
                                </CheckboxGroup>
                            </div>
                        </div>
 
                        <div className="ux-rfi-grey-border w-100 mt-4 pt-3 mb-4">
                            <Label className="ux-rfi-label-normal mt-2" labelKey="program"></Label>
                            <div className="ux-rfi-grey-border mt-2">
                                <CheckboxGroup
                                    model="searchRFI.programs"
                                    className="ux-rfi-checkbox-d-flex mt-3">
                                    {filteredPrograms.map((programItem, index) => (
                                        <Checkbox
                                            key={index}
                                            id={'program-item-' + index}
                                            text={
                                                programItem[ConstantKeys.REF_TABLE_COLS.DESCRIPTION]
                                            }
                                            value={programItem[ConstantKeys.REF_TABLE_COLS.CODE]}
                                            className="ux-rfi-checkbox-d-flex mt-3"
                                            change={(event) =>
                                                handleProgramChange(event)
                                            }></Checkbox>
                                    ))}
                                </CheckboxGroup>
                            </div>
                        </div>
                    </div>
                )}
                {setResultsFound && (
                    <div className="mt-2">
                        <DataTable
                            col-data-keys="title,programs,category,offering,state"
                            col-default-headers="Title,Program,Category,Offering,State"
                            datacollection="RFIResultList"
                            customContent={{
                                Title: getTitleLink,
                                Program: getProgramDsc,
                                Category: getCategoryDsc,
                                Offering: getOfferingDsc,
                                State: getStateDsc,
                            }}
                            emptymsg-key="Empty_message"
                            keyfield="id"
                            hover="false"
                            bordered="true"
                            striped="true"
                            emptymsg-key="no_records"
                            showIf={AppContext.model.getValue('showDatatable')}// this value should come from state
                        />
                    </div>
                )}
            </div>
        </>
    );
};
 
// Is this needed
SearchRFIForm.propTypes = {
    searchRFI: PropTypes.object.isRequired,
    updateSearchRFI: PropTypes.func.isRequired,
};
export default SearchRFIForm;