Iterated search experience

components/search/no-result.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { ClearRefinements, useInstantSearch } from 'react-instantsearch';
+
+import { useTranslations } from 'next-intl';
+
+interface NoResultsProps {
+  children: ReactNode;
+  fallback: ReactNode;
+}
+
+export function NoResultsBoundary({ children, fallback }: NoResultsProps) {
+  const { results } = useInstantSearch();
+
+  // The `__isArtificial` flag makes sure not to display the No Results message
+  // when no hits have been returned.
+  if (!results.__isArtificial && results.nbHits === 0) {
+    return (
+      <>
+        {fallback}
+        <div hidden>{children}</div>
+      </>
+    );
+  }
+
+  return children;
+}
+
+export function NoResults() {
+  const t = useTranslations('search');
+  const { indexUiState } = useInstantSearch();
+
+  return (
+    <div>
+      <p className="mt-4">
+        {t('noResults')} <q>{indexUiState.query}</q>.
+        <ClearRefinements
+          translations={{
+            resetButtonText: t('resetTitle')
+          }}
+          classNames={{
+            button: 'border border-ui-border px-6 py-3 mt-4 inline-flex mx-auto w-auto'
+          }}
+          excludedAttributes={[]}
+        />
+      </p>
+    </div>
+  );
+}

components/search/search-result.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import Text from '@/components/ui/text/text';
+import { cn } from '@/lib/utils';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { Configure, Highlight, InfiniteHits } from 'react-instantsearch';
+
+export default function SearchResult() {
+  const t = useTranslations('search');
+
+  const Hit = (props: any) => {
+    const { hit } = props;
+    const { handle, price } = props.hit;
+
+    return (
+      <Link href={`/product/${handle}`} className="flex w-full flex-col gap-4 outline-offset-2">
+        <div className="relative aspect-square h-full w-full bg-neutral-300" />
+        <div>
+          <Text className="!text-sm text-low-contrast" variant="label">
+            Brand
+          </Text>
+          <h3 className="flex text-sm font-normal text-high-contrast">
+            <Highlight attribute="title" hit={hit} />
+          </h3>
+          <p className="text-sm font-bold ">{price} SEK</p>
+        </div>
+      </Link>
+    );
+  };
+
+  return (
+    <>
+      <Configure hitsPerPage={4} />
+      <InfiniteHits
+        translations={{
+          showMoreButtonText: t('showMore')
+        }}
+        showPrevious={false}
+        classNames={{
+          root: cn('flex flex-col flex-1'),
+          list: cn(
+            'grid grid-cols-2 mt-4 gap-4 md:grid-cols-3 md:gap-8 lg:grid-cols-4 lg:gap-12 lg:mt-12'
+          ),
+          loadMore:
+            'border border-ui-border mt-4 px-6 py-3 inline-flex mx-auto w-auto disabled:opacity-50 disabled:cursor-not-allowed md:mt-8 lg:mt-12'
+        }}
+        hitComponent={Hit}
+      />
+    </>
+  );
+}

components/search/search-root.tsx

@@ -0,0 +1,21 @@
+import algoliasearch from 'algoliasearch/lite';
+import { InstantSearch } from 'react-instantsearch';
+
+const searchClient = algoliasearch(
+  `${process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID}`,
+  `${process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_API_KEY}`
+);
+
+interface SearchRootProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+export default function SearchRoot({ children }: SearchRootProps) {
+  return (
+    <>
+      <InstantSearch searchClient={searchClient} indexName="shopify_products">
+        {children}
+      </InstantSearch>
+    </>
+  );
+}

components/search/search.tsx

@@ -1,43 +1,48 @@
-import algoliasearch from 'algoliasearch/lite';
-// import { useLocale } from 'next-intl';
+'use client';
+
 import Text from '@/components/ui/text';
-import { Highlight, Hits, InstantSearch, SearchBox } from 'react-instantsearch';
 
-const searchClient = algoliasearch(
-  `${process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID}`,
-  `${process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_API_KEY}`
-);
+import { cn } from 'lib/utils';
+import { useTranslations } from 'next-intl';
+import SearchRoot from './search-root';
+
+import { SearchBox } from 'react-instantsearch';
+
+import { ReactNode } from 'react';
+import { NoResults, NoResultsBoundary } from './no-result';
+
+interface SearchProps {
+  title?: string;
+  placeholder?: string;
+  className?: string;
+  children: ReactNode;
+  isCategory?: boolean;
+}
+
+export default function Search({ title, placeholder, children, isCategory = false }: SearchProps) {
+  const t = useTranslations('search');
+
+  console.log(isCategory);
 
-export default function Search() {
-  // const locale = useLocale();
-  // Hit.
-  function Hit(props: any) {
-    return (
-      <li>
-        <a href={`/product/${props.hit.handle}`} className="flex gap-4">
-          <div className="relative aspect-square h-16 w-16 bg-neutral-300" />
-          <div>
-            <Text className="!text-sm text-low-contrast" variant="label">
-              Brand
-            </Text>
-            <h3 className="flex text-sm font-bold text-high-contrast">
-              <Highlight attribute="title" hit={props.hit} />
-            </h3>
-            <p className="text-sm font-bold ">{props.hit.price} SEK</p>
-          </div>
-        </a>
-      </li>
-    );
-  }
   return (
-    <div className="flex flex-col">
-      <InstantSearch searchClient={searchClient} indexName="shopify_products">
-        {/* Widgets */}
+    <SearchRoot>
+      {/* Search top */}
+      <div className="">
+        {title && (
+          <Text className="mb-8 lg:mb-12" variant="pageHeading">
+            {title}
+          </Text>
+        )}
+
         <SearchBox
-          placeholder="Vad letar du efter?"
+          placeholder={
+            placeholder
+              ? `${isCategory ? `${t('searchCategory')} ${placeholder}` : placeholder}`
+              : `${t('globalPlaceholder')}`
+          }
           classNames={{
-            root: 'mt-4',
-            form: 'relative',
+            root: cn('flex max-w-lg'),
+            form: 'relative w-full',
             input:
               'block w-full outline-offset-0 appearance-none rounded-none h-11 px-11 pr-3 py-2 bg-white border border-ui-border',
             submit: 'absolute flex items-center justify-center top-0 left-0 bottom-0 w-11 h-11',
@@ -46,17 +51,9 @@ export default function Search() {
             resetIcon: 'w-3 h-3 mx-auto bg-app'
           }}
         />
+      </div>
 
-        {/* <Configure filters={`locale:${locale}`} /> */}
-
-        <Hits
-          classNames={{
-            root: 'flex flex-col mt-4 overflow-auto max-h-full',
-            list: 'grid grid-cols-1 gap-12 overflow-auto'
-          }}
-          hitComponent={Hit}
-        />
-      </InstantSearch>
-    </div>
+      <NoResultsBoundary fallback={<NoResults />}>{children}</NoResultsBoundary>
+    </SearchRoot>
   );
 }