fix: correct org id in react samples folded results list page (#2962)

* fix org id https://coveord.atlassian.net/browse/KIT-2525 * fix results image https://coveord.atlassian.net/browse/KIT-2525 * run atomic build to prevent webpack errors https://coveord.atlassian.net/browse/KIT-2525 * Revert "fix org id" This reverts commit a0634e1. * add aq to point to a different source for folded result list https://coveord.atlassian.net/browse/KIT-2525 * revert changes to folded result img https://coveord.atlassian.net/browse/KIT-2525 * use atomic result image with fallback https://coveord.atlassian.net/browse/KIT-2525 * replace expression prop with a boolean param https://coveord.atlassian.net/browse/KIT-2525 * add nx config to add dep for dev on parent builds https://coveord.atlassian.net/browse/KIT-2525 * move search config to inside use memo https://coveord.atlassian.net/browse/KIT-2525 * refactor to add search config and aq as options https://coveord.atlassian.net/browse/KIT-2525 * post master merge refactor/fix https://coveord.atlassian.net/browse/KIT-2525 * add help msg for instant results page https://coveord.atlassian.net/browse/KIT-2525
coveo · Aug 29, 2023 · d25ba44 · d25ba44
1 parent 3e74e77
commit d25ba44
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/nx.json b/nx.json
@@ -28,6 +28,9 @@
       "inputs": ["^production", "production"],
       "dependsOn": ["^build"]
     },
+    "dev": {
+      "dependsOn": ["^build"]
+    },
     "prod": {
       "dependsOn": ["build"]
     },

diff --git a/packages/samples/atomic-react/src/components/AtomicPageWrapper.tsx b/packages/samples/atomic-react/src/components/AtomicPageWrapper.tsx
@@ -38,6 +38,7 @@ import {
   getOrganizationEndpoints,
   SearchEngineConfiguration,
   getSampleSearchEngineConfiguration,
+  loadAdvancedSearchQueryActions,
 } from '@coveo/atomic-react';
 import React, {FunctionComponent, useMemo} from 'react';
 
@@ -46,11 +47,13 @@ type Sample = 'service' | 'electronics';
 type Options = {
   instantResults?: boolean;
   recentQueries?: boolean;
+  advancedQuery?: string;
 };
+
 type Props = {
   sample: Sample;
-  children: React.ReactNode;
   options?: Options;
+  children: React.ReactNode;
 };
 
 function getElectronicsConfiguration(): SearchEngineConfiguration {
@@ -77,8 +80,8 @@ function getConfigurationForSample(sample: Sample) {
 
 export const AtomicPageWrapper: FunctionComponent<Props> = ({
   sample,
-  children,
   options = {},
+  children,
 }) => {
   const engine = useMemo(
     () =>
@@ -88,6 +91,15 @@ export const AtomicPageWrapper: FunctionComponent<Props> = ({
     [sample]
   );
 
+  if (options.advancedQuery) {
+    const action = loadAdvancedSearchQueryActions(
+      engine
+    ).updateAdvancedSearchQueries({
+      aq: options.advancedQuery,
+    });
+    engine.dispatch(action);
+  }
+
   return (
     <AtomicSearchInterface
       engine={engine}

diff --git a/packages/samples/atomic-react/src/pages/FoldedResultListPage.tsx b/packages/samples/atomic-react/src/pages/FoldedResultListPage.tsx
@@ -15,13 +15,17 @@ import {
   FoldedResult,
   AtomicResultSectionChildren,
   AtomicFoldedResultList,
+  AtomicResultImage,
 } from '@coveo/atomic-react';
 import React, {FunctionComponent} from 'react';
 import {AtomicPageWrapper} from '../components/AtomicPageWrapper';
 
 export const FoldedResultListPage: FunctionComponent = () => {
   return (
-    <AtomicPageWrapper sample="service">
+    <AtomicPageWrapper
+      sample="service"
+      options={{advancedQuery: '@source=iNaturalistTaxons'}}
+    >
       <AtomicFoldedResultList imageSize="large" template={MyTemplate} />
     </AtomicPageWrapper>
   );
@@ -55,7 +59,10 @@ function MyTemplate(result: FoldedResult) {
         )}
       </AtomicResultSectionBadges>
       <AtomicResultSectionVisual>
-        <img loading="lazy" src="https://picsum.photos/350" />
+        <AtomicResultImage
+          field="ec_images"
+          fallback="https://picsum.photos/350"
+        />
       </AtomicResultSectionVisual>
       <AtomicResultSectionTitle>
         <AtomicResultLink />

diff --git a/packages/samples/atomic-react/src/pages/InstantResultsPage.tsx b/packages/samples/atomic-react/src/pages/InstantResultsPage.tsx
@@ -7,7 +7,7 @@ export const InstantResultsPage: FunctionComponent = () => {
       sample="electronics"
       options={{recentQueries: true, instantResults: true}}
     >
-      <p>No result list</p>
+      <i>👆 Focus on search box to see instant results</i>
     </AtomicPageWrapper>
   );
 };