From e707d803bae378b16cf458ce301ffeda84eb0b07 Mon Sep 17 00:00:00 2001
From: Fabien Motte <fabien.motte@algolia.com>
Date: Wed, 18 May 2022 16:50:32 +0200
Subject: [PATCH] docs(two-column-layout-example): remove useless item template
 override (#973)

---
 .../src/plugins/querySuggestionsPlugin.tsx    | 61 ------------------
 .../src/plugins/recentSearchesPlugin.tsx      | 64 -------------------
 2 files changed, 125 deletions(-)

diff --git a/examples/two-column-layout/src/plugins/querySuggestionsPlugin.tsx b/examples/two-column-layout/src/plugins/querySuggestionsPlugin.tsx
index 733b05926..6901deb8c 100644
--- a/examples/two-column-layout/src/plugins/querySuggestionsPlugin.tsx
+++ b/examples/two-column-layout/src/plugins/querySuggestionsPlugin.tsx
@@ -1,6 +1,4 @@
-/** @jsx h */
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
-import { h } from 'preact';
 
 import { ALGOLIA_PRODUCTS_QUERY_SUGGESTIONS_INDEX_NAME } from '../constants';
 import { searchClient } from '../searchClient';
@@ -13,63 +11,4 @@ export const querySuggestionsPlugin = createQuerySuggestionsPlugin({
       hitsPerPage: !state.query ? 0 : 10,
     };
   },
-  transformSource({ source, onTapAhead }) {
-    return {
-      ...source,
-      templates: {
-        ...source.templates,
-        item({ item, components }) {
-          if (item.__autocomplete_qsCategory) {
-            return (
-              <div className="aa-ItemWrapper">
-                <div className="aa-ItemContent aa-ItemContent--indented">
-                  <div className="aa-ItemContentSubtitle aa-ItemContentSubtitle--standalone">
-                    <span className="aa-ItemContentSubtitleIcon" />
-                    <span>
-                      in{' '}
-                      <span className="aa-ItemContentSubtitleCategory">
-                        {item.__autocomplete_qsCategory}
-                      </span>
-                    </span>
-                  </div>
-                </div>
-              </div>
-            );
-          }
-
-          return (
-            <div className="aa-ItemWrapper">
-              <div className="aa-ItemContent">
-                <div className="aa-ItemIcon aa-ItemIcon--noBorder">
-                  <svg viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z" />
-                  </svg>
-                </div>
-                <div className="aa-ItemContentBody">
-                  <div className="aa-ItemContentTitle">
-                    <components.ReverseHighlight hit={item} attribute="query" />
-                  </div>
-                </div>
-              </div>
-              <div className="aa-ItemActions">
-                <button
-                  className="aa-ItemActionButton"
-                  title={`Fill query with "${item.query}"`}
-                  onClick={(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    onTapAhead(item);
-                  }}
-                >
-                  <svg viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          );
-        },
-      },
-    };
-  },
 });
diff --git a/examples/two-column-layout/src/plugins/recentSearchesPlugin.tsx b/examples/two-column-layout/src/plugins/recentSearchesPlugin.tsx
index eb248e6e5..0f49950ca 100644
--- a/examples/two-column-layout/src/plugins/recentSearchesPlugin.tsx
+++ b/examples/two-column-layout/src/plugins/recentSearchesPlugin.tsx
@@ -1,75 +1,11 @@
-/** @jsx h */
 import {
   createLocalStorageRecentSearchesPlugin,
   search,
 } from '@algolia/autocomplete-plugin-recent-searches';
-import { h } from 'preact';
 
 export const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
   key: 'autocomplete-two-column-layout-example',
   search(params) {
     return search({ ...params, limit: params.query ? 1 : 4 });
   },
-  transformSource({ source, onRemove, onTapAhead }) {
-    return {
-      ...source,
-      templates: {
-        ...source.templates,
-        item({ item, components }) {
-          return (
-            <div className="aa-ItemWrapper">
-              <div className="aa-ItemContent">
-                <div className="aa-ItemIcon aa-ItemIcon--noBorder">
-                  <svg viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M12.516 6.984v5.25l4.5 2.672-0.75 1.266-5.25-3.188v-6h1.5zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z" />
-                  </svg>
-                </div>
-                <div className="aa-ItemContentBody">
-                  <div className="aa-ItemContentTitle">
-                    <components.ReverseHighlight hit={item} attribute="label" />
-                    {item.category && (
-                      <span className="aa-ItemContentSubtitle aa-ItemContentSubtitle--inline">
-                        <span className="aa-ItemContentSubtitleIcon" /> in{' '}
-                        <span className="aa-ItemContentSubtitleCategory">
-                          {item.category}
-                        </span>
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </div>
-              <div className="aa-ItemActions">
-                <button
-                  className="aa-ItemActionButton"
-                  title="Remove this search"
-                  onClick={(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    onRemove(item.id);
-                  }}
-                >
-                  <svg viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1z" />
-                  </svg>
-                </button>
-                <button
-                  className="aa-ItemActionButton"
-                  title={`Fill query with "${item.label}"`}
-                  onClick={(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    onTapAhead(item);
-                  }}
-                >
-                  <svg viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          );
-        },
-      },
-    };
-  },
 });