docs(example): set up GitHub filters example with Algolia (algolia#814)

Co-authored-by: Haroen Viaene <hello@haroen.me>
suryatmodulus · Nov 15, 2021 · f22696b · f22696b
1 parent 1288b2b
commit f22696b
Show file tree

Hide file tree

Showing 11 changed files with 282 additions and 153 deletions.
diff --git a/examples/github-notification-filters/app.tsx b/examples/github-notification-filters/app.tsx
@@ -1,7 +1,7 @@
 /** @jsx h */
-import { h, render } from 'preact';
-import { autocomplete } from '@algolia/autocomplete-js';
+import { autocomplete, AutocompleteSource } from '@algolia/autocomplete-js';
 import { createTagsPlugin, Tag } from '@algolia/autocomplete-plugin-tags';
+import { h, render } from 'preact';
 import qs from 'qs';
 
 import {
@@ -25,6 +25,7 @@ const initialTags = Object.entries(queryParameters).flatMap(([token, values]) =>
     token,
     value,
     label: `${token}:${value}`,
+    attribute: items.find((item) => item.token === token).attribute,
   }))
 );
 
@@ -39,6 +40,7 @@ const tagsPlugin = createTagsPlugin<AutocompleteItem, NotificationFilter>({
             label: `${item.token}:${item.label}`,
             token: item.token,
             value: item.label,
+            attribute: item.attribute,
           };
         },
       },
@@ -62,8 +64,10 @@ autocomplete<AutocompleteItem>({
   getSources({ query, state }) {
     const [prefix, postfix] = splitQuery(query);
     const prefixes = items.filter(({ token }) => token.startsWith(prefix));
+    const tags = state.context.tagsPlugin.tags || [];
+    const tagsByToken = groupBy(tags, (tag) => tag.token);
 
-    const allTags = getAlltags(state.context.tagsPlugin.tags || [], query);
+    const allTags = getAlltags(tags, query);
     const showQuerySource = allTags.length > 0 && prefixes.length > 0;
     const showPrefixesSource = typeof postfix !== 'string';
     const showPostfixesSource = typeof postfix === 'string';
@@ -130,16 +134,18 @@ autocomplete<AutocompleteItem>({
           return [];
         }
 
-        return tag.postfixes
-          .map(({ label }) => ({ token: tag.token, label }))
-          .filter(({ label }) => label.startsWith(postfix));
+        return tag.search({
+          query: postfix,
+          facet: tag.token === 'org' ? 'org' : undefined,
+          tags: tagsByToken[tag.token],
+        });
       },
       templates: {
         header() {
           return <FilterHeader />;
         },
-        item({ item }) {
-          return <PostfixItem item={item} />;
+        item({ item, components }) {
+          return <PostfixItem item={item} components={components} />;
         },
       },
     };
@@ -148,7 +154,7 @@ autocomplete<AutocompleteItem>({
       showQuerySource && querySource,
       showPrefixesSource && prefixesSource,
       showPostfixesSource && postfixesSource,
-    ].filter(Boolean);
+    ].filter(Boolean) as Array<AutocompleteSource<AutocompleteItem>>;
   },
   render({ sections, state }, root) {
     const [prefix] = splitQuery(state.query);

diff --git a/examples/github-notification-filters/components/PostfixItem.tsx b/examples/github-notification-filters/components/PostfixItem.tsx
@@ -1,20 +1,22 @@
 /** @jsx h */
+import { AutocompleteComponents } from '@algolia/autocomplete-js';
 import { h } from 'preact';
 
 import { AutocompleteItem } from '../types';
 
 type PostfixItemProps = {
   item: AutocompleteItem;
+  components: AutocompleteComponents;
 };
 
-export function PostfixItem({ item }: PostfixItemProps) {
+export function PostfixItem({ item, components }: PostfixItemProps) {
   return (
     <div className="aa-ItemWrapper">
       <div className="aa-ItemContent">
         <div className="aa-ItemContentBody">
           <div className="aa-ItemContentTitle">
             <strong>
-              {item.token}:{item.label}
+              {item.token}:<components.Highlight hit={item} attribute="label" />
             </strong>
           </div>
         </div>