Improve back to home behavior

eea · Mar 1, 2023 · 92a09b9 · 92a09b9
1 parent 1cefb6f
commit 92a09b9
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 34 deletions.
diff --git a/searchlib/components/LandingPage/TilesLandingPage.jsx b/searchlib/components/LandingPage/TilesLandingPage.jsx
@@ -36,7 +36,7 @@ const sortedTiles = (tiles, sectionConfig, appConfig) => {
 };
 
 const LandingPage = (props) => {
-  const { appConfig, children, setFilter, setSort } = props;
+  const { appConfig, setFilter, setSort } = props;
   const { appName } = appConfig;
   // const facetsConfig = appConfig.facets;
 

diff --git a/searchlib/components/SearchView/BackToHome.jsx b/searchlib/components/SearchView/BackToHome.jsx
@@ -0,0 +1,54 @@
+import { Link } from 'react-router-dom';
+import { Icon } from 'semantic-ui-react';
+
+export default function BackToHome({
+  appConfig,
+  wasInteracted,
+  searchContext,
+  resetInteracted,
+}) {
+  const { landingPageURL } = appConfig;
+  let backToHome = landingPageURL;
+  const domain = typeof window !== 'undefined' ? window.location.host : null;
+
+  if (landingPageURL && landingPageURL.startsWith('http')) {
+    const url = new URL(landingPageURL);
+    if (url.host === domain) {
+      backToHome = url.pathname;
+    }
+  }
+
+  const resetSearch = (e) => {
+    e.preventDefault();
+    resetInteracted();
+    searchContext.resetSearch({});
+  };
+
+  if (!wasInteracted) return null;
+
+  return backToHome ? (
+    backToHome.startsWith('/') ? (
+      <Link to={backToHome} className="back-link">
+        <Icon className="arrow left" />
+        Back to search home
+      </Link>
+    ) : (
+      <a href={backToHome} className="back-link">
+        <Icon className="arrow left" />
+        Back to search home
+      </a>
+    )
+  ) : (
+    <a
+      className="back-link"
+      as="a"
+      onClick={resetSearch}
+      onKeyDown={resetSearch}
+      role="button"
+      href="./"
+    >
+      <Icon className="arrow left" />
+      Back to search home
+    </a>
+  );
+}
diff --git a/searchlib/components/SearchView/SearchView.jsx b/searchlib/components/SearchView/SearchView.jsx
@@ -4,9 +4,7 @@
 
 import React from 'react';
 
-import { Link } from 'react-router-dom';
 import { withAppConfig } from '@eeacms/search/lib/hocs';
-import { Icon } from 'semantic-ui-react';
 import {
   SearchBox,
   AppInfo,
@@ -18,6 +16,7 @@ import { SearchContext as SUISearchContext } from '@elastic/react-search-ui';
 
 import { checkInteracted } from '@eeacms/search/lib/search/helpers';
 import { BodyContent } from './BodyContent';
+import BackToHome from './BackToHome';
 import { useSearchContext } from '@eeacms/search/lib/hocs';
 import { SEARCH_STATE_IDS } from '@eeacms/search/constants';
 import { useAtom } from 'jotai';
@@ -40,7 +39,14 @@ const useWasInteracted = ({ searchedTerm, searchContext, appConfig }) => {
     if (wasInteracted && !cached) setCached(true);
   }, [wasInteracted, cached]);
 
-  return cached || wasInteracted;
+  const resetInteracted = React.useCallback(() => {
+    setCached(false);
+  }, []);
+
+  return {
+    wasInteracted: cached || wasInteracted,
+    resetInteracted,
+  };
 };
 
 export const SearchView = (props) => {
@@ -56,7 +62,7 @@ export const SearchView = (props) => {
     ? driver.URLManager.getStateFromURL().searchTerm
     : null;
 
-  const wasInteracted = useWasInteracted({
+  const { wasInteracted, resetInteracted } = useWasInteracted({
     searchedTerm,
     searchContext,
     appConfig,
@@ -81,39 +87,19 @@ export const SearchView = (props) => {
 
   // React.useEffect(() => () => console.log('unmount SearchView'), []);
 
-  const domain = typeof window !== 'undefined' ? window.location.host : null;
-  const { landingPageURL } = appConfig;
-  let backToHome = landingPageURL;
-
-  if (landingPageURL && landingPageURL.startsWith('http')) {
-    const url = new URL(landingPageURL);
-    if (url.host === domain) {
-      backToHome = url.pathname;
-    }
-  }
-
-  // TODO: here
-
   return (
     <div className={`searchapp searchapp-${appName} ${customClassName}`}>
       {props.children}
       <Layout
         appConfig={appConfig}
         header={
           <>
-            {wasInteracted &&
-              backToHome &&
-              (backToHome.startsWith('/') ? (
-                <Link to={backToHome} className="back-link">
-                  <Icon className="arrow left" />
-                  Back to search home
-                </Link>
-              ) : (
-                <a href={backToHome} className="back-link">
-                  <Icon className="arrow left" />
-                  Back to search home
-                </a>
-              ))}
+            <BackToHome
+              wasInteracted={wasInteracted}
+              appConfig={appConfig}
+              searchContext={searchContext}
+              resetInteracted={resetInteracted}
+            />
             <RenderSlot
               {...props}
               searchState={searchState}

diff --git a/src/SearchBlock/templates/schema.js b/src/SearchBlock/templates/schema.js
@@ -133,9 +133,9 @@ export const searchResultsSchemaEnhancer = ({ schema, formData }) => {
       label,
     ]);
 
-    if (appConfig.landingPageURL) {
-      schema.properties.landingPageURL.default = appConfig.landingPageURL;
-    }
+    // if (appConfig.landingPageURL) {
+    //   schema.properties.landingPageURL.default = appConfig.landingPageURL;
+    // }
 
     schema.properties.availableFacets.choices = availableFacets;
     schema.properties.defaultFacets.choices = availableFacets;