Split search sort into component

Sitecore · Mar 24, 2023 · 4d7bd6d · 4d7bd6d
1 parent 8eb1bd2
commit 4d7bd6d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/apps/devportal/src/components/integrations/sitecore-search/SearchResults.tsx b/apps/devportal/src/components/integrations/sitecore-search/SearchResults.tsx
@@ -1,11 +1,11 @@
 import { useSearchResults, widget, WidgetDataType } from '@sitecore-discover/react';
 import { WidgetComponentProps } from '@sitecore-discover/react/types';
-import { SortSelect } from '@sitecore-discover/ui';
 import Image from 'next/image';
 import { ComponentType } from 'react';
 import Loader from './Loader';
 import QuerySummary from './QuerySummary';
 import SearchPagination from './SearchPagination';
+import SearchSort from './SearchSort';
 
 export interface SearchResultsType extends WidgetComponentProps {
   initialKeyphrase?: string;
@@ -29,8 +29,6 @@ export const SearchResults = (props: SearchResultsType) => {
     };
   });
 
-  const selectedSortIndex = sortChoices.findIndex((s) => s.name === sortType);
-
   return (
     <>
       {isLoading && <Loader />}
@@ -42,21 +40,7 @@ export const SearchResults = (props: SearchResultsType) => {
                 <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>
+                <SearchSort onSortChange={onSortChange} sortChoices={sortChoices} sortType={sortType} />
               </div>
             </div>
             {articles.length && <QuerySummary currentPage={page} resultsPerPage={itemsPerPage} totalResults={totalItems} title={initialKeyphrase} />}

diff --git a/apps/devportal/src/components/integrations/sitecore-search/SearchSort.tsx b/apps/devportal/src/components/integrations/sitecore-search/SearchSort.tsx
@@ -0,0 +1,33 @@
+import { SearchResponseSortChoice } from '@sitecore-discover/react';
+import { SortSelect } from '@sitecore-discover/ui';
+
+export interface SearchSortType {
+  onSortChange: (sortType: any) => void;
+  sortChoices: SearchResponseSortChoice[];
+  sortType: string;
+}
+
+export const SearchSort = (props: SearchSortType) => {
+  const { onSortChange, sortChoices, sortType } = props;
+  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>
+  );
+};
+
+export default SearchSort;