Untitled

import ConstantKeys from '@/Constants/ConstantKeys';
import webService from '@/Services/WebService';
import { Lift, useAppState, Util } from '@d-lift/core';
import { Button, DataTable, Header, NavLink, Textbox, UX } from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import React, { useEffect } from 'react';

const SearchResults = ({ hhsSearchRFI, updateHHSSearchRFI }) => {
    const [RFIResultList, setRFIResultList] = useAppState('RFIResultList', []);
    const [hhsSearchCompleted, setHhsSearchCompleted] = useAppState('hhsSearchCompleted', false);

    const getTitleLink = (colData, rowData, index) => {
        let rfiData = {
            model: {
                rfi: {
                    id: rowData.id,
                    title: rowData.title,
                    description: rowData.description,
                    state: rowData.state,
                    dueDT: rowData.dueDT,
                    programs: rowData.programs,
                    category: rowData.category,
                    offering: rowData.offering,
                },
            },
        };
        return (
            <UX type="section">
                <NavLink className="ux-rfi-link" to="/response" stateObj={rfiData}>
                    {rowData.title}
                </NavLink>
            </UX>
        );
    };

    const getProgramDsc = (colData) => {
        if (typeof colData === 'string') {
            const programCodes = colData.split(',');
            return programCodes
                .map((code) =>
                    Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.PROGRAM, code),
                )
                .join(', ');
        } else {
            return Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.PROGRAM, colData);
        }
    };

    const getCategoryDsc = (colData) => {
        if (typeof colData === 'string') {
            const categoryCodes = colData.split(',');
            return categoryCodes
                .map((code) =>
                    Util.getRefTableDescriptionByCode(ConstantKeys.REF_TABLE_NAMES.CATEGORY, code),
                )
                .join(', ');
        } else {
            return Util.getRefTableDescriptionByCode(
                ConstantKeys.REF_TABLE_NAMES.CATEGORY,
                colData,
            );
        }
    };

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

    const handleSearchRFI = async (searchValue) => {
        try {
            Lift.spinner.show();
            updateHHSSearchRFI({ ...hhsSearchRFI, search: searchValue });

            const searchResults = await webService.knowledgeBaseSearch({
                requestBody: { ...hhsSearchRFI, search: searchValue },
            });

            if (searchResults.message.code === ConstantKeys.RESPONSE_CODES.success) {
                setHhsSearchCompleted(true);
            }
            searchResults.data && searchResults.data.length > 0
                ? setRFIResultList(searchResults.data)
                : setRFIResultList([]);

            document.getElementById('HHS-search-table').scrollIntoView();
        } catch (error) {
            Lift.Application.Notification.error(ConstantKeys.NOTIFICATION.MSG.ERR.SEARCH_ERR_MSG);
        } finally {
            Lift.spinner.hide();
        }
    };

    useEffect(() => {
        handleSearchRFI('');
    }, []);

    return (
        <div className="pb-5">
            <Header
                className="pt-3 ux-rfi-font-header"
                size="2"
                labelKey="HHS_Knowledgebase"></Header>

            <div className="row align-items-center">
                <div className="col-lg-9 col-md-9 col-sm-12 mb-sm-0">
                    <Textbox
                        name="question"
                        className="w-100 ux-rfi-search-bar"
                        model="hhsSearchRFI.search"
                        appendIcon="search"
                        placeholder="Search"></Textbox>
                </div>

                <div className="col-lg-2 col-md-2 col-sm-12">
                    <Button
                        id="submit-btn"
                        className="ux-rfi-green-button mt-sm-0 w-100"
                        click={() => handleSearchRFI(hhsSearchRFI.search)}
                        labelKey="search_btn"></Button>
                </div>
            </div>

            <Button
                header-size={6}
                postIconClass="fa fa-angle-right"
                className="col-12 text-center mt-1 ux-rfi-reset-btn"
                labelKey="reset_search"
                click={() => handleSearchRFI('')}></Button>

            <div className="mt-2">
                <DataTable
                    col-data-keys="title,offering,programs,category"
                    col-default-headers="Title,Offering,Program,Category"
                    datacollection="RFIResultList"
                    customContent={{
                        Title: getTitleLink,
                        Offering: getOfferingDsc,
                        Program: getProgramDsc,
                        Category: getCategoryDsc,
                    }}
                    keyfield="id"
                    id="HHS-search-table"
                    hover="false"
                    bordered="true"
                    striped="true"
                    emptymsg-key="no_records"
                    responsive={true}
                    pagination="default"
                    pagination-show-total="true"
                    pagination-size-per-page="5"
                    showIf={hhsSearchCompleted}
                />
            </div>
        </div>
    );
};

SearchResults.propTypes = {
    hhsSearchRFI: PropTypes.object.isRequired,
    updateHHSSearchRFI: PropTypes.func.isRequired,
};

export default SearchResults;