react-datocms 3.0.14 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-datocms",
-  "version": "3.0.14",
+  "version": "3.1.1",
   "types": "dist/types/index.d.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -43,7 +43,7 @@
     "watch": "rimraf dist && tsc --watch",
     "prepare": "npm run test && npm run build",
     "test": "jest --coverage",
-    "toc": "doctoc README.md"
+    "toc": "doctoc --github docs"
   },
   "peerDependencies": {
     "react": ">= 16.12.0"
@@ -76,10 +76,11 @@
     ]
   },
   "dependencies": {
-    "datocms-listen": "^0.1.7",
+    "datocms-listen": "^0.1.9",
     "datocms-structured-text-generic-html-renderer": "^2.0.1",
     "datocms-structured-text-utils": "^2.0.1",
     "react-intersection-observer": "^8.33.1",
+    "react-string-replace": "^1.1.0",
     "universal-base64": "^2.1.0",
     "use-deep-compare-effect": "^1.6.1"
   }

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './Image/index';
 export * from './Seo/index';
 export * from './useQuerySubscription/index';
-export * from './StructuredText/index';
+export * from './StructuredText/index';
+export * from './useSiteSearch/index';

package/src/useQuerySubscription/index.ts

@@ -1,16 +1,16 @@
-import { useState } from "react";
+import { useState } from 'react';
 import {
   subscribeToQuery,
   UnsubscribeFn,
   ChannelErrorData,
   ConnectionStatus,
   Options,
-} from "datocms-listen";
-import { useDeepCompareEffectNoCheck as useDeepCompareEffect } from "use-deep-compare-effect";
+} from 'datocms-listen';
+import { useDeepCompareEffectNoCheck as useDeepCompareEffect } from 'use-deep-compare-effect';
 
 export type SubscribeToQueryOptions<QueryResult, QueryVariables> = Omit<
   Options<QueryResult, QueryVariables>,
-  "onStatusChange" | "onUpdate" | "onChannelError"
+  'onStatusChange' | 'onUpdate' | 'onChannelError'
 >;
 
 export type EnabledQueryListenerOptions<QueryResult, QueryVariables> = {
@@ -33,14 +33,14 @@ export type QueryListenerOptions<QueryResult, QueryVariables> =
 
 export function useQuerySubscription<
   QueryResult = any,
-  QueryVariables = Record<string, any>
+  QueryVariables = Record<string, any>,
 >(options: QueryListenerOptions<QueryResult, QueryVariables>) {
   const { enabled, initialData, ...other } = options;
 
   const [error, setError] = useState<ChannelErrorData | null>(null);
   const [data, setData] = useState<QueryResult | null>(null);
   const [status, setStatus] = useState<ConnectionStatus>(
-    enabled ? "connecting" : "closed"
+    enabled ? 'connecting' : 'closed',
   );
 
   const subscribeToQueryOptions = other as EnabledQueryListenerOptions<
@@ -50,7 +50,7 @@ export function useQuerySubscription<
 
   useDeepCompareEffect(() => {
     if (enabled === false) {
-      setStatus("closed");
+      setStatus('closed');
 
       return () => {
         // we don't have to perform any uninstall

package/src/useSiteSearch/index.tsx

@@ -0,0 +1,272 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import reactStringReplace from 'react-string-replace';
+
+type SearchResultInstancesHrefSchema = {
+  page?: {
+    offset?: number;
+    limit?: number;
+    [k: string]: unknown;
+  };
+  filter: {
+    fuzzy?: string;
+    query: string;
+    build_trigger_id?: string;
+    locale?: string;
+    [k: string]: unknown;
+  };
+  [k: string]: unknown;
+};
+
+type SearchResultInstancesTargetSchema = {
+  data: RawSearchResult[];
+  meta: {
+    total_count: number;
+  };
+};
+
+export type RawSearchResult = {
+  type: 'search_result';
+  id: string;
+  attributes: {
+    title: string;
+    body_excerpt: string;
+    url: string;
+    score: number;
+    highlight: {
+      title?: string[] | null;
+      body?: string[] | null;
+    };
+  };
+};
+
+declare class GenericClient {
+  config: {
+    apiToken: string | null;
+  };
+  searchResults: {
+    rawList(
+      queryParams: SearchResultInstancesHrefSchema,
+    ): Promise<SearchResultInstancesTargetSchema>;
+  };
+}
+
+type Highlighter = (
+  match: string,
+  key: string,
+  context: 'title' | 'bodyExcerpt',
+) => React.ReactNode;
+
+export type UseSiteSearchConfig<Client extends GenericClient> = {
+  client: Client;
+  buildTriggerId: string;
+  fuzzySearch?: boolean;
+  resultsPerPage?: number;
+  highlightMatch?: Highlighter;
+  initialState?: {
+    locale?: string;
+    page?: number;
+    query?: string;
+  };
+};
+
+type SearchResult = {
+  id: string;
+  title: React.ReactNode;
+  bodyExcerpt: React.ReactNode;
+  url: string;
+  raw: RawSearchResult;
+};
+
+export type UseSiteSearchData = {
+  pageResults: SearchResult[];
+  totalResults: number;
+  totalPages: number;
+};
+
+export type UseSiteSearchResult = {
+  state: {
+    query: string;
+    setQuery: (newQuery: string) => void;
+    locale: string | undefined;
+    setLocale: (newLocale: string) => void;
+    page: number;
+    setPage: (newPage: number) => void;
+  };
+  data?: UseSiteSearchData;
+  error?: string;
+};
+
+const defaultHighlighter: Highlighter = (text, key) => (
+  <mark key={key}>{text}</mark>
+);
+
+function MatchHighlighter({
+  children,
+  highlighter,
+  context,
+}: {
+  children: string;
+  highlighter: Highlighter;
+  context: 'title' | 'bodyExcerpt';
+}) {
+  return (
+    <>
+      {reactStringReplace(children, /\[h\](.+?)\[\/h\]/g, (match, index) =>
+        highlighter(match, index.toString(), context),
+      )}
+    </>
+  );
+}
+
+export function useSiteSearch<Client extends GenericClient>(
+  config: UseSiteSearchConfig<Client>,
+): UseSiteSearchResult {
+  const [state, setState] = useState<{
+    query: string;
+    page: number;
+    locale: string | undefined;
+  }>({
+    query: config.initialState?.query || '',
+    page: config.initialState?.page || 0,
+    locale: config.initialState?.locale,
+  });
+
+  const [error, setError] = useState<string | undefined>();
+  const [response, setResponse] = useState<
+    SearchResultInstancesTargetSchema | undefined
+  >();
+
+  const resultsPerPage = config.resultsPerPage || 8;
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    const run = async () => {
+      try {
+        setError(undefined);
+
+        if (!state.query) {
+          setResponse({ data: [], meta: { total_count: 0 } });
+          return;
+        }
+
+        setResponse(undefined);
+
+        const request: SearchResultInstancesHrefSchema = {
+          filter: {
+            query: state.query,
+            locale: state.locale,
+            build_trigger_id: config.buildTriggerId,
+          },
+          page: {
+            limit: resultsPerPage,
+            offset: resultsPerPage * state.page,
+          },
+        };
+
+        if (config.fuzzySearch) {
+          request.fuzzy = 'true';
+        }
+
+        const response = await config.client.searchResults.rawList(request);
+
+        if (!isCancelled) {
+          setResponse(response);
+        }
+      } catch (e) {
+        if (isCancelled) {
+          return;
+        }
+
+        if (e instanceof Error) {
+          setError(e.message);
+        } else {
+          setError('Unknown error!');
+        }
+      }
+    };
+
+    run();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [
+    resultsPerPage,
+    state,
+    config.buildTriggerId,
+    config.fuzzySearch,
+    config.client.config.apiToken,
+  ]);
+
+  const publicSetQuery = useCallback(
+    (newQuery: string) => {
+      setState((oldState) => ({ ...oldState, query: newQuery, page: 0 }));
+    },
+    [setState],
+  );
+
+  const publicSetPage = useCallback(
+    (newPage: number) => {
+      setState((oldState) => ({ ...oldState, page: newPage }));
+    },
+    [setState],
+  );
+
+  const publicSetLocale = useCallback(
+    (newLocale: string | undefined) => {
+      setState((oldState) => ({ ...oldState, locale: newLocale, page: 0 }));
+    },
+    [setState],
+  );
+
+  const highlighter = config.highlightMatch || defaultHighlighter;
+
+  return {
+    state: {
+      query: state.query,
+      setQuery: publicSetQuery,
+      page: state.page,
+      setPage: publicSetPage,
+      locale: state.locale,
+      setLocale: publicSetLocale,
+    },
+
+    error,
+    data:
+      state.query === ''
+        ? {
+            pageResults: [],
+            totalResults: 0,
+            totalPages: 0,
+          }
+        : response
+        ? {
+            pageResults: response.data.map((rawSearchResult) => ({
+              id: rawSearchResult.id,
+              url: rawSearchResult.attributes.url,
+              title: rawSearchResult.attributes.highlight.title ? (
+                <MatchHighlighter highlighter={highlighter} context="title">
+                  {rawSearchResult.attributes.highlight.title[0]}
+                </MatchHighlighter>
+              ) : (
+                rawSearchResult.attributes.title
+              ),
+              bodyExcerpt: rawSearchResult.attributes.highlight.body ? (
+                <MatchHighlighter
+                  highlighter={highlighter}
+                  context="bodyExcerpt"
+                >
+                  {rawSearchResult.attributes.highlight.body[0]}
+                </MatchHighlighter>
+              ) : (
+                rawSearchResult.attributes.body_excerpt
+              ),
+              raw: rawSearchResult,
+            })),
+            totalResults: response.meta.total_count,
+            totalPages: Math.ceil(response.meta.total_count / resultsPerPage),
+          }
+        : undefined,
+  };
+}