Skip to content

Commit

Permalink
Restructured search components
Browse files Browse the repository at this point in the history
  • Loading branch information
@robearlam
robearlam committed Mar 27, 2023
1 parent a64f157 commit 9e4f9fb
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 55 deletions.
49 changes: 49 additions & 0 deletions apps/devportal/src/components/integrations/sitecore-search/SearchFacets.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { SearchResponseFacet } from '@sitecore-discover/react';
import { AccordionFacets } from '@sitecore-discover/ui';

export interface SearchFacetsType {
onFacetClick: (facet: any) => void;
facets: SearchResponseFacet[];
}

export const SearchFacets = (props: SearchFacetsType) => {
const { onFacetClick, facets } = props;

return (
<AccordionFacets.Root defaultFacetTypesExpandedList={[]} onFacetValueClick={onFacetClick}>
{facets.map((facet, index) => (
<AccordionFacets.Facet key={index} facetId={facet.name}>
<AccordionFacets.Header className="mt-4 rounded-md border p-2">
<AccordionFacets.Trigger className="w-full text-left">{facet.label}</AccordionFacets.Trigger>
</AccordionFacets.Header>
<AccordionFacets.Content>
<AccordionFacets.ValueList>
{facet.value.map((v, index) => (
<AccordionFacets.Item
className="pl-2 pr-2"
key={v.id}
{...{
index,
facetValueId: v.id,
facetLabel: v.text,
}}
>
<AccordionFacets.ItemCheckbox>
<AccordionFacets.ItemCheckboxIndicator className="h-14 w-14">
<input type="checkbox" checked />
</AccordionFacets.ItemCheckboxIndicator>
</AccordionFacets.ItemCheckbox>
<AccordionFacets.ItemLabel className="ml-2 text-sm">
{v.text} {v.count && `(${v.count})`}
</AccordionFacets.ItemLabel>
</AccordionFacets.Item>
))}
</AccordionFacets.ValueList>
</AccordionFacets.Content>
</AccordionFacets.Facet>
))}
</AccordionFacets.Root>
);
};

export default SearchFacets;
43 changes: 3 additions & 40 deletions apps/devportal/src/components/integrations/sitecore-search/SearchResults.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useSearchResults, widget, WidgetDataType } from '@sitecore-discover/react';
import { WidgetComponentProps } from '@sitecore-discover/react/types';
import { AccordionFacets } from '@sitecore-discover/ui';
import Image from 'next/image';
import { ComponentType } from 'react';
import Loader from './Loader';
import QuerySummary from './QuerySummary';
import SearchFacets from './SearchFacets';
import SearchPagination from './SearchPagination';
import SearchSort from './SearchSort';

Expand Down Expand Up @@ -37,51 +37,14 @@ export const SearchResults = (props: SearchResultsType) => {
<div className="mt-12">
<div className="m-auto w-full items-center">
<div className="relative float-right inline-flex">
<div>
<label>Sorting by: </label>
</div>
<div>
<SearchSort onSortChange={onSortChange} sortChoices={sortChoices} sortType={sortType} />
</div>
<SearchSort onSortChange={onSortChange} sortChoices={sortChoices} sortType={sortType} />
</div>
{articles.length && <QuerySummary currentPage={page} resultsPerPage={itemsPerPage} totalResults={totalItems} title={initialKeyphrase} />}
</div>

<div className="flex flex-row">
<div className="mt-4 shrink-0 basis-1/4">
<AccordionFacets.Root defaultFacetTypesExpandedList={[]} onFacetValueClick={onFacetClick}>
{facets.map((facet, index) => (
<AccordionFacets.Facet key={index} facetId={facet.name}>
<AccordionFacets.Header className="mt-4 rounded-md border p-2">
<AccordionFacets.Trigger className="w-full text-left">{facet.label}</AccordionFacets.Trigger>
</AccordionFacets.Header>
<AccordionFacets.Content>
<AccordionFacets.ValueList>
{facet.value.map((v, index) => (
<AccordionFacets.Item
className="pl-2 pr-2"
key={v.id}
{...{
index,
facetValueId: v.id,
facetLabel: v.text,
}}
>
<AccordionFacets.ItemCheckbox>
<AccordionFacets.ItemCheckboxIndicator className="h-14 w-14">
<input type="checkbox" checked />
</AccordionFacets.ItemCheckboxIndicator>
</AccordionFacets.ItemCheckbox>
<AccordionFacets.ItemLabel className="ml-2 text-sm">
{v.text} {v.count && `(${v.count})`}
</AccordionFacets.ItemLabel>
</AccordionFacets.Item>
))}
</AccordionFacets.ValueList>
</AccordionFacets.Content>
</AccordionFacets.Facet>
))}
</AccordionFacets.Root>
<SearchFacets onFacetClick={onFacetClick} facets={facets} />
</div>

<div className="basis-3/4">
Expand Down
37 changes: 22 additions & 15 deletions apps/devportal/src/components/integrations/sitecore-search/SearchSort.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,28 @@ export const SearchSort = (props: SearchSortType) => {
const selectedSortIndex = sortChoices.findIndex((s) => s.name === sortType);

return (
<SortSelect.Root defaultValue={sortChoices[selectedSortIndex]?.name} onValueChange={onSortChange}>
<SortSelect.Trigger>
<SortSelect.SelectValue>{selectedSortIndex > -1 ? sortChoices[selectedSortIndex].label : ''}</SortSelect.SelectValue>
<SortSelect.Icon />
</SortSelect.Trigger>
<SortSelect.Content>
<SortSelect.Viewport>
{sortChoices.map((option) => (
<SortSelect.Option value={option} key={option.name}>
<SortSelect.OptionText>{option.label}</SortSelect.OptionText>
</SortSelect.Option>
))}
</SortSelect.Viewport>
</SortSelect.Content>
</SortSelect.Root>
<>
<div>
<label>Sorting by: </label>
</div>
<div>
<SortSelect.Root defaultValue={sortChoices[selectedSortIndex]?.name} onValueChange={onSortChange}>
<SortSelect.Trigger>
<SortSelect.SelectValue>{selectedSortIndex > -1 ? sortChoices[selectedSortIndex].label : ''}</SortSelect.SelectValue>
<SortSelect.Icon />
</SortSelect.Trigger>
<SortSelect.Content>
<SortSelect.Viewport>
{sortChoices.map((option) => (
<SortSelect.Option value={option} key={option.name}>
<SortSelect.OptionText>{option.label}</SortSelect.OptionText>
</SortSelect.Option>
))}
</SortSelect.Viewport>
</SortSelect.Content>
</SortSelect.Root>
</div>
</>
);
};

Expand Down

0 comments on commit 9e4f9fb

Please sign in to comment.