Add source filter support in bot search feature

src/js/components/Header.js

@@ -93,23 +93,23 @@ class Header extends React.PureComponent {
 
   onFormSubmit =
     ({ handleSubmit, autoDetectGurmukhi, ...data }) =>
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      handleSubmit();
-      // Remove the last space in from the searched query.
-      const isNotAngSearch = SEARCH_TYPES[data.type] !== SEARCH_TYPES.ANG;
-      if (isNotAngSearch) {
-        data.query = data.query.trim();
-      }
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSubmit();
+        // Remove the last space in from the searched query.
+        const isNotAngSearch = SEARCH_TYPES[data.type] !== SEARCH_TYPES.ANG;
+        if (isNotAngSearch) {
+          data.query = data.query.trim();
+        }
 
-      const searchParams = { ...data, autoDetectGurmukhi };
-      if (data.type === SEARCH_TYPES.AUTO_DETECT && autoDetectGurmukhi) {
-        searchParams.isGurmukhi = true;
-      }
+        const searchParams = { ...data, autoDetectGurmukhi };
+        if (data.type === SEARCH_TYPES.AUTO_DETECT && autoDetectGurmukhi) {
+          searchParams.isGurmukhi = true;
+        }
 
-      this.handleFormSubmit(searchParams);
-    };
+        this.handleFormSubmit(searchParams);
+      };
 
   handleFormSubmit = (data) => {
     this.props.history.push(toSearchURL(data));
@@ -146,10 +146,10 @@ class Header extends React.PureComponent {
       type: defaultType = isAng ? SEARCH_TYPES.ANG.toString() : null,
       writer: defaultWriter = DEFAULT_SEARCH_WRITER,
       autoDetectGurmukhi:
-        defaultAutoDetectGurmukhi = getBooleanFromLocalStorage(
-          LOCAL_STORAGE_KEY_FOR_AUTO_DETECT_GURMUKHI,
-          false
-        ),
+      defaultAutoDetectGurmukhi = getBooleanFromLocalStorage(
+        LOCAL_STORAGE_KEY_FOR_AUTO_DETECT_GURMUKHI,
+        false
+      ),
     } = getQueryParams(location.search);
 
     const isAskGurbaniBotSearchType =
@@ -195,22 +195,21 @@ class Header extends React.PureComponent {
             }
             defaultSource={
               isAskGurbaniBotSearchType
-                ? localStorage.getItem(LOCAL_STORAGE_KEY_FOR_SEARCH_SOURCE) ||
-                  DEFAULT_SEARCH_SOURCE
+                ? DEFAULT_SEARCH_SOURCE
                 : defaultSource
             }
             defaultType={
               isAskGurbaniBotSearchType
                 ? getNumberFromLocalStorage(
-                    LOCAL_STORAGE_KEY_FOR_SEARCH_TYPE,
-                    DEFAULT_SEARCH_TYPE
-                  )
+                  LOCAL_STORAGE_KEY_FOR_SEARCH_TYPE,
+                  DEFAULT_SEARCH_TYPE
+                )
                 : Number(defaultType)
             }
             defaultWriter={
               isAskGurbaniBotSearchType
                 ? localStorage.getItem(LOCAL_STORAGE_KEY_FOR_SEARCH_WRITER) ||
-                  DEFAULT_SEARCH_WRITER
+                DEFAULT_SEARCH_WRITER
                 : Number(defaultWriter)
             }
             defaultAutoDetectGurmukhi={defaultAutoDetectGurmukhi}
@@ -457,7 +456,7 @@ class Header extends React.PureComponent {
                                         writer,
                                         isGurmukhi:
                                           parseInt(type) ===
-                                            SEARCH_TYPES.AUTO_DETECT &&
+                                          SEARCH_TYPES.AUTO_DETECT &&
                                           autoDetectGurmukhi,
                                       }}
                                       value={query}
@@ -536,13 +535,13 @@ class Header extends React.PureComponent {
                             ?.filter((e) =>
                               source === 'G' || source === 'A'
                                 ? !SOURCE_WRITER_FILTER[source].includes(
-                                    e.writerID
-                                  )
+                                  e.writerID
+                                )
                                 : source !== 'all'
-                                ? SOURCE_WRITER_FILTER[source].includes(
+                                  ? SOURCE_WRITER_FILTER[source].includes(
                                     e.writerID
                                   )
-                                : true
+                                  : true
                             )
                             .map((writer) => (
                               <option

src/js/components/Modals/AskGurbaniBotQuestionModal.tsx

@@ -8,7 +8,7 @@ import SearchIcon from '@/components/Icons/Search';
 import { toSearchURL } from '@/util';
 
 import Dialog from './Dialog';
-import { SEARCH_TYPES } from '@/constants';
+import { SEARCH_TYPES, SOURCES } from '@/constants';
 
 interface Props {
   isModalOpen: boolean;
@@ -22,24 +22,26 @@ const AskGurbaniBotQuestionModal = (props: Props) => {
     ({
       handleFormSubmit,
       query,
+      source,
     }: {
       handleFormSubmit: FormEventHandler;
       query: string;
+      source: string;
     }) =>
-    (e: FormEvent) => {
-      e.preventDefault();
-      typeof handleFormSubmit === 'function' && handleFormSubmit();
-      history.push(
-        toSearchURL({
-          query,
-          type: SEARCH_TYPES.ASK_A_QUESTION,
-          writer: 'all',
-          source: 'all',
-          offset: '',
-        })
-      );
-      dispatch(setModalOpen(''));
-    };
+      (e: FormEvent) => {
+        e.preventDefault();
+        typeof handleFormSubmit === 'function' && handleFormSubmit();
+        history.push(
+          toSearchURL({
+            query,
+            type: SEARCH_TYPES.ASK_A_QUESTION,
+            writer: 'all',
+            source,
+            offset: '',
+          })
+        );
+        dispatch(setModalOpen(''));
+      };
 
   return (
     <Dialog
@@ -51,8 +53,9 @@ const AskGurbaniBotQuestionModal = (props: Props) => {
           defaultType={SEARCH_TYPES.ASK_A_QUESTION}
           defaultSource="all"
           defaultWriter={0}
+          isolateFromLocalStorage // helps to keep the bot search form state isolated from the main/normal search form
         >
-          {({
+          {(({
             pattern,
             disabled,
             title,
@@ -65,13 +68,17 @@ const AskGurbaniBotQuestionModal = (props: Props) => {
             handleKeyDown,
             handleSearchChange,
             handleSubmit: handleFormSubmit,
+            source,
+            handleSearchSourceChange,
+            isSourceChanged,
           }) => (
             <form
               className="search-form"
               action={action}
               onSubmit={handleSubmit({
                 handleFormSubmit: handleFormSubmit,
                 query,
+                source,
               })}
             >
               <div className="search-container-wrapper">
@@ -102,8 +109,24 @@ const AskGurbaniBotQuestionModal = (props: Props) => {
                   </button>
                 </div>
               </div>
+              <div className="search-options">
+                <div className="search-option">
+                  <select
+                    name="source"
+                    value={source}
+                    className={[isSourceChanged ? 'selected' : null]}
+                    onChange={handleSearchSourceChange}
+                  >
+                    {Object.entries(SOURCES).map(([value, children]) => (
+                      <option key={value} value={value}>
+                        {children}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
             </form>
-          )}
+          ))}
         </SearchForm>
       </div>
     </Dialog>

src/js/components/SearchForm.js

@@ -79,6 +79,7 @@ export default class SearchForm extends React.PureComponent {
     submitOnChangeOf: PropTypes.arrayOf(
       PropTypes.oneOf(['type', 'source', 'query', 'writer'])
     ),
+    isolateFromLocalStorage: PropTypes.bool,
     onSubmit: (props) => {
       if (
         props.submitOnChangeOf.length !== 0 &&
@@ -97,17 +98,21 @@ export default class SearchForm extends React.PureComponent {
     shouldSubmit: false,
     type:
       this.props.defaultType ||
-      getNumberFromLocalStorage(
-        LOCAL_STORAGE_KEY_FOR_SEARCH_TYPE,
-        DEFAULT_SEARCH_TYPE
-      ),
+      (!this.props.isolateFromLocalStorage &&
+        getNumberFromLocalStorage(
+          LOCAL_STORAGE_KEY_FOR_SEARCH_TYPE,
+          DEFAULT_SEARCH_TYPE
+        )) ||
+      DEFAULT_SEARCH_TYPE,
     source:
       this.props.defaultSource ||
-      localStorage.getItem(LOCAL_STORAGE_KEY_FOR_SEARCH_SOURCE) ||
+      (!this.props.isolateFromLocalStorage &&
+        localStorage.getItem(LOCAL_STORAGE_KEY_FOR_SEARCH_SOURCE)) ||
       DEFAULT_SEARCH_SOURCE,
     writer:
       this.props.defaultWriter ||
-      localStorage.getItem(LOCAL_STORAGE_KEY_FOR_SEARCH_WRITER) ||
+      (!this.props.isolateFromLocalStorage &&
+        localStorage.getItem(LOCAL_STORAGE_KEY_FOR_SEARCH_WRITER)) ||
       DEFAULT_SEARCH_WRITER,
     writers: DEFAULT_SEARCH_WRITERS,
     isSourceChanged: false,
@@ -118,9 +123,9 @@ export default class SearchForm extends React.PureComponent {
       this.props.defaultAutoDetectGurmukhi !== undefined
         ? this.props.defaultAutoDetectGurmukhi
         : getBooleanFromLocalStorage(
-            LOCAL_STORAGE_KEY_FOR_AUTO_DETECT_GURMUKHI,
-            false
-          ),
+          LOCAL_STORAGE_KEY_FOR_AUTO_DETECT_GURMUKHI,
+          false
+        ),
   };
 
   animatePlaceholder = () => {
@@ -279,10 +284,10 @@ export default class SearchForm extends React.PureComponent {
       typeInt === SEARCH_TYPES.ROMANIZED
         ? ['Enter 4 words minimum.', '(\\w+\\W+){3,}\\w+\\W*']
         : typeInt === SEARCH_TYPES.ANG
-        ? ['Enter numbers only.', '\\d+']
-        : typeInt === SEARCH_TYPES.AUTO_DETECT
-        ? ['Enter 1 characters minimum.', '.{1,}']
-        : ['Enter 2 characters minimum.', '.{2,}'];
+          ? ['Enter numbers only.', '\\d+']
+          : typeInt === SEARCH_TYPES.AUTO_DETECT
+            ? ['Enter 1 characters minimum.', '.{1,}']
+            : ['Enter 2 characters minimum.', '.{2,}'];
 
     const [action, name, inputType] = SearchForm.getFormDetails(typeInt);
     const disabled = !new RegExp(pattern).test(query);
@@ -415,6 +420,19 @@ export default class SearchForm extends React.PureComponent {
     }
   };
 
+  // Centralized localStorage helpers — skips persistence when isolateFromLocalStorage is true 
+  saveToLocalStorage = (key, value) => {
+    if (!this.props.isolateFromLocalStorage) {
+      localStorage.setItem(key, value);
+    }
+  };
+
+  removeFromLocalStorage = (key) => {
+    if (!this.props.isolateFromLocalStorage) {
+      localStorage.removeItem(key);
+    }
+  };
+
   handleSearchSourceChange = ({ target }) => {
     const source = target.value;
     this.setState(
@@ -430,7 +448,7 @@ export default class SearchForm extends React.PureComponent {
           action: ACTIONS.SEARCH_SOURCE,
           label: this.state.source,
         });
-        localStorage.setItem(
+        this.saveToLocalStorage(
           LOCAL_STORAGE_KEY_FOR_SEARCH_SOURCE,
           this.state.source
         );
@@ -479,18 +497,18 @@ export default class SearchForm extends React.PureComponent {
           shouldSubmit: isSearchTypeToAngSearchType
             ? false
             : this.props.submitOnChangeOf.includes('type') &&
-              this.state.query !== '',
+            this.state.query !== '',
           displayGurmukhiKeyboard: isShowKeyboard,
         },
         () => {
           this.currentPlaceholderIndex = 0;
 
           clickEvent({ action: ACTIONS.SEARCH_TYPE, label: newSearchType });
-          localStorage.setItem(
+          this.saveToLocalStorage(
             LOCAL_STORAGE_KEY_FOR_SEARCH_TYPE,
             newSearchType
           );
-          localStorage.setItem(
+          this.saveToLocalStorage(
             LOCAL_STORAGE_KEY_FOR_SEARCH_SOURCE,
             newSourceType
           );
@@ -515,7 +533,7 @@ export default class SearchForm extends React.PureComponent {
           action: ACTIONS.SEARCH_WRITER,
           label: this.state.writer,
         });
-        localStorage.setItem(
+        this.saveToLocalStorage(
           LOCAL_STORAGE_KEY_FOR_SEARCH_WRITER,
           this.state.writer
         );
@@ -538,11 +556,11 @@ export default class SearchForm extends React.PureComponent {
           this.state.query !== '',
       },
       () => {
-        localStorage.setItem(
+        this.saveToLocalStorage(
           LOCAL_STORAGE_KEY_FOR_SEARCH_SOURCE,
           this.state.source
         );
-        localStorage.removeItem(LOCAL_STORAGE_KEY_FOR_SEARCH_WRITER);
+        this.removeFromLocalStorage(LOCAL_STORAGE_KEY_FOR_SEARCH_WRITER);
       }
     );
   };
@@ -566,7 +584,7 @@ export default class SearchForm extends React.PureComponent {
       () => {
         this.currentPlaceholderIndex = 0;
         // Save to localStorage
-        localStorage.setItem(
+        this.saveToLocalStorage(
           LOCAL_STORAGE_KEY_FOR_AUTO_DETECT_GURMUKHI,
           this.state.autoDetectGurmukhi.toString()
         );