Fixes Seneca-CDOT#1983: Improve SearchHelp logic

rjayroso · Apr 17, 2021 · 708e8d3 · 708e8d3
1 parent cc88fe7
commit 708e8d3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/src/web/src/components/SearchPage.tsx b/src/web/src/components/SearchPage.tsx
@@ -21,14 +21,13 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const SearchPage = () => {
   const classes = useStyles();
-
   const { showHelp } = useSearchValue();
 
   return (
     <div className={classes.searchPage}>
       <SearchBar />
-      <SearchResults />
       {showHelp && <SearchHelp />}
+      <SearchResults />
     </div>
   );
 };

diff --git a/src/web/src/components/SearchProvider.tsx b/src/web/src/components/SearchProvider.tsx
@@ -10,6 +10,7 @@ export interface SearchContextInterface {
   textParam: string;
   filter: FilterProp['filter'];
   showHelp: boolean;
+  toggleHelp: (value: boolean) => void;
   onTextChange: (value: string) => void;
   onFilterChange: (value: FilterProp['filter']) => void;
   onSubmitHandler: (value: FormEvent) => void;
@@ -20,6 +21,9 @@ const SearchContext = createContext<SearchContextInterface>({
   textParam: '',
   filter: 'post',
   showHelp: true,
+  toggleHelp() {
+    throw new Error('This context must be wrapped inside SearchProvider');
+  },
   onTextChange() {
     throw new Error('This context must be wrapped inside SearchProvider');
   },
@@ -54,9 +58,10 @@ const SearchProvider = ({ children }: Props) => {
   const onSubmitHandler = (event: FormEvent) => {
     event.preventDefault();
     router.push(`/search?text=${text}&filter=${filter}`);
+  };
 
-    // On form submit, hide help list
-    setShowHelp(false);
+  const toggleHelp = (value: boolean) => {
+    setShowHelp(value);
   };
 
   const onTextChange = (value: string) => {
@@ -74,7 +79,16 @@ const SearchProvider = ({ children }: Props) => {
 
   return (
     <SearchContext.Provider
-      value={{ text, textParam, showHelp, filter, onTextChange, onFilterChange, onSubmitHandler }}
+      value={{
+        text,
+        textParam,
+        showHelp,
+        filter,
+        onTextChange,
+        onFilterChange,
+        onSubmitHandler,
+        toggleHelp,
+      }}
     >
       {children}
     </SearchContext.Provider>

diff --git a/src/web/src/components/SearchResults.tsx b/src/web/src/components/SearchResults.tsx
@@ -51,7 +51,7 @@ const useStyles = makeStyles(() => ({
 
 const SearchResults = () => {
   const classes = useStyles();
-  const { textParam, filter } = useSearchValue();
+  const { textParam, filter, toggleHelp } = useSearchValue();
 
   const prepareUrl = (index: number) =>
     `${searchServiceUrl}?text=${encodeURIComponent(textParam)}&filter=${filter}&page=${index}`;
@@ -75,6 +75,13 @@ const SearchResults = () => {
   const loadingMoreData =
     !isReachingEnd && data && size > 0 && typeof data[size - 1] === 'undefined';
 
+  // If there is no posts or if the search bar is empty, then show the search help, otherwise hide it
+  if (!error && (isEmpty || textParam.length == 0)) {
+    toggleHelp(true);
+  } else {
+    toggleHelp(false);
+  }
+
   if (error) {
     return (
       <Container className={classes.searchResults}>