feat: date helper in template (#835)

sajari · Jul 11, 2022 · c5a4214 · c5a4214
1 parent 4a984a3
commit c5a4214
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 1 deletion.
diff --git a/.changeset/purple-windows-yell.md b/.changeset/purple-windows-yell.md
@@ -0,0 +1,6 @@
+---
+'sajari-sdk-docs': minor
+'@sajari/react-search-ui': minor
+---
+
+Add `date` helper to templating
diff --git a/docs/pages/search-ui/results.mdx b/docs/pages/search-ui/results.mdx
@@ -237,6 +237,60 @@ function Example() {
 }
 ```
 
+### Helpers
+
+When using custom templating, a number of helpers are available to help you in writing the template, they are:
+
+- `join` - join an list of strings
+- `date` - format the ISO date string into human-readable string (UTC only)
+
+```jsx
+function Example() {
+  const pipeline = new Pipeline(
+    {
+      account: '1594153711901724220',
+      collection: 'bestbuy',
+    },
+    'query',
+    new ClickTracking(),
+  );
+
+  const template = {
+    html: `
+<p>{{#join items=["this", "is", "convenient"]}}</p>
+<p>{{#join items=["1st", "2nd", "3rd"] joiner=", "}}</p>
+
+<p>{{#date value="2022-07-06T18:08Z"}}</p>
+<p>{{#date value="2022-07-06T18:08Z" format="DD/MM/YYYY"}}</p>
+`,
+    css: ``,
+  };
+
+  return (
+    <SearchProvider
+      viewType="grid"
+      search={{
+        pipeline,
+        fields: new FieldDictionary({
+          title: 'name',
+          subtitle: (data) => data.level4 || data.level3 || data.level2 || data.level1 || data.brand,
+        }),
+        variables: new Variables({
+          resultsPerPage: 1,
+          q: '',
+        }),
+      }}
+      searchOnLoad
+    >
+      <div className="flex flex-col items-center space-y-4">
+        <ViewType />
+        <Results resultTemplate={template} />
+      </div>
+    </SearchProvider>
+  );
+}
+```
+
 ## Props
 
 | Name                             | Type                                         | Default    | Description                                                                                                                     |

diff --git a/packages/search-ui/src/Results/resultTemplateHelpers.test.ts b/packages/search-ui/src/Results/resultTemplateHelpers.test.ts
@@ -1,4 +1,4 @@
-import { join } from './resultTemplateHelpers';
+import { date, join } from './resultTemplateHelpers';
 
 describe('resultTemplateHelpers - join', () => {
   test.each([
@@ -10,3 +10,12 @@ describe('resultTemplateHelpers - join', () => {
     expect(join({ items, joiner })).toBe(result);
   });
 });
+
+describe('resultTemplateHelpers - date', () => {
+  test.each([
+    ['2022-07-06T18:08Z', undefined, '06 July 2022 18:08 (UTC)'],
+    ['2020-12-15T23:00Z', 'HH:mm - DD/MM/YYYY', '23:00 - 15/12/2020'],
+  ])('date(%p, %s) == "%s"', (value, format, result) => {
+    expect(date({ value, format })).toBe(result);
+  });
+});
diff --git a/packages/search-ui/src/Results/resultTemplateHelpers.ts b/packages/search-ui/src/Results/resultTemplateHelpers.ts
@@ -1,5 +1,9 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import { Args, Blocks, Compiler } from 'tempura';
 
+dayjs.extend(utc);
+
 export const join: Compiler = (args: Args) => {
   const { items, joiner: joinerParam } = args;
   const joiner = joinerParam ?? '';
@@ -14,8 +18,16 @@ export const join: Compiler = (args: Args) => {
   return '';
 };
 
+export const date: Compiler = (args: Args) => {
+  const { value, format = 'DD MMMM YYYY HH:mm (UTC)' } = args;
+  const dateObj = dayjs(value);
+
+  return dateObj.utc().format(format);
+};
+
 const blocks: Blocks = {
   join,
+  date,
 };
 
 export default blocks;