@progress/sitefinity-nextjs-sdk
Version:
Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.
63 lines (62 loc) • 5.72 kB
JavaScript
'use client';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Suspense, useEffect, useState } from 'react';
import { LoadingIndicator } from './loading-indicator';
import { OrderByDropDown } from './orderby-dropdown';
import { LanguagesList } from './languages-list';
import { SanitizerService } from '../../services/sanitizer-service';
import { ListDisplayMode } from '../../editor/widget-framework/list-display-mode';
import { Pager } from '../pager/pager';
import { PagerMode } from '../common/page-mode';
import { performSearch } from './search-results-common';
import { useRouter, useSearchParams } from 'next/navigation';
import { getPageNumber } from '../pager/pager-view-model';
import { getUniqueId } from '../../editor/utils/getUniqueId';
import { getQueryParams } from '../common/query-params';
export function SearchResultsClient(props) {
const searchParamsNext = useSearchParams();
const router = useRouter();
const searchParams = getQueryParams(searchParamsNext);
const sortingSelectId = getUniqueId('sf-sort-', props.widgetContext.model.Id);
const context = props.widgetContext.requestContext;
const entity = props.widgetContext.model.Properties;
const sorting = searchParams.orderBy ? searchParams.orderBy : (props.sorting || '');
const defaultResultsValue = context.isEdit ? { totalCount: 0, searchResults: [] } : undefined;
const [searchResults, setSearchResults] = useState(defaultResultsValue);
if (!Object.keys(context.searchParams).length) {
context.searchParams = searchParams;
}
const currentPage = getPageNumber(PagerMode.QueryParameter, context);
let initialHeader = '';
if (entity.SearchResultsHeader) {
initialHeader = entity.SearchResultsHeader.replace('\"{0}\"', '');
}
if (entity.NoResultsHeader) {
initialHeader = entity.NoResultsHeader.replace('{0}', searchParams.searchQuery || '');
}
const [resultsHeader, setResultsHeader] = useState(initialHeader);
const loadResults = async (newSearchParams) => {
const searchResponse = await performSearch(entity, newSearchParams);
setSearchResults(searchResponse);
if (searchResponse && searchResponse.totalCount === 0 && entity.NoResultsHeader) {
setResultsHeader(entity.NoResultsHeader.replace('{0}', searchParams.searchQuery));
}
else if (searchResponse && searchResponse.totalCount > 0 && entity.SearchResultsHeader) {
setResultsHeader(entity.SearchResultsHeader.replace('{0}', searchParams.searchQuery));
}
};
useEffect(() => {
!context.isEdit && loadResults(getQueryParams(searchParamsNext));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchParamsNext]);
return ((searchParams.searchQuery || context.isEdit) &&
_jsxs(_Fragment, { children: [searchResults === undefined && _jsx(LoadingIndicator, {}), searchResults !== undefined &&
_jsxs(_Fragment, { children: [_jsxs("div", { className: "d-flex align-items-center justify-content-between my-3", children: [_jsx("h1", { role: "alert", "aria-live": "assertive", children: resultsHeader }), _jsx("div", { className: "d-flex align-items-center gap-2", children: (props.allowUsersToSortResults && !!searchResults?.totalCount && searchResults?.totalCount > 0) &&
_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: sortingSelectId, className: "form-label text-nowrap mb-0", children: props.sortByLabel }), _jsx(OrderByDropDown, { queryParams: searchParams, sortingSelectId: sortingSelectId, searchParams: searchParams, sorting: sorting })] }) })] }), _jsxs("div", { children: [_jsxs("h4", { children: [searchResults?.totalCount, " ", props.resultsNumberLabel] }), _jsx(Suspense, { fallback: _jsx(LoadingIndicator, {}), children: _jsxs("p", { children: [props.languagesLabel + ' ', _jsx(LanguagesList, { queryParams: searchParams, languages: props.languages, searchParams: searchParams })] }) })] }), _jsx(Suspense, { fallback: _jsx(LoadingIndicator, {}), children: _jsx("div", { className: "mt-4", children: searchResults?.searchResults.map((item, idx) => {
const hasLink = !!item.Link;
return (_jsxs("div", { className: "mb-3 d-flex", children: [item.ThumbnailUrl &&
_jsx("div", { className: "flex-shrink-0 me-3", children: _jsx("a", { href: item.Link, children: _jsx("img", { src: item.ThumbnailUrl, alt: item.Title, width: "120" }) }) }), _jsxs("div", { className: "flex-grow-1", children: [_jsx("h3", { className: "mb-1", children: hasLink ?
_jsx("a", { className: "text-decoration-none", href: item.Link, children: item.Title }) : (item.Title) }), _jsx("p", { className: "mb-1", dangerouslySetInnerHTML: { __html: SanitizerService.getInstance().sanitizeHtml(item.HighLighterResult) } }), hasLink && _jsx("a", { className: "text-decoration-none", href: item.Link, children: item.Link })] })] }, idx));
}) }) }), searchResults?.searchResults && entity.ListSettings?.DisplayMode === ListDisplayMode.Paging &&
_jsx(Suspense, { fallback: _jsx(LoadingIndicator, {}), children: _jsx("div", { className: "mt-4", id: "sf-search-result-pager", children: _jsx(Pager, { currentPage: currentPage, itemsTotalCount: searchResults?.totalCount, pagerMode: PagerMode.QueryParameter, itemsPerPage: entity.ListSettings?.ItemsPerPage, navigateFunc: router.push, context: context }) }) })] })] }));
}