Merge pull request #9 from vectara/chore/remove_react_router_dom

chore: Remove react-router-dom dependency
vectara · Jan 16, 2024 · 2f26465 · 2f26465
2 parents fc66e24 + 961a6d9
commit 2f26465
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 141 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,13 +33,11 @@
     "live-server": "^1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.0",
     "rimraf": "^5.0.5",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.0"
+    "react-dom": "^18.2.0"
   }
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -7,6 +7,7 @@ import {
   useRef,
   useEffect,
   useMemo,
+  ReactNode,
 } from "react";
 import { BiSearch } from "react-icons/bi";
 import getUuid from "uuid-by-string";
@@ -23,7 +24,6 @@ import { SearchResult } from "./SearchResult";
 import { SearchModal } from "./SearchModal";
 import { useSearchHistory } from "./useSearchHistory";
 import "./_index.scss";
-import { BrowserRouter } from "react-router-dom";
 import { SearchInput } from "SearchInput";
 
 const getQueryParam = (urlParams: URLSearchParams, key: string) => {
@@ -246,73 +246,70 @@ export const ReactSearch: FC<Props> = ({
 
   return (
     <>
-      <BrowserRouter>
-        <div className="styleWrapper">
-          <div ref={buttonRef}>
-            <button className="searchButton" onClick={() => setIsOpen(true)}>
-              <VuiFlexContainer
-                alignItems="center"
-                spacing="none"
-                justifyContent="spaceBetween"
-                className="searchButton__inner"
-              >
-                <VuiFlexItem>
-                  <VuiFlexContainer alignItems="center" spacing="xs">
-                    <VuiFlexItem>
-                      <VuiIcon>
-                        <BiSearch />
-                      </VuiIcon>
-                    </VuiFlexItem>
-
-                    <VuiFlexItem>
-                      <VuiText>
-                        <div>Search</div>
-                      </VuiText>
-                    </VuiFlexItem>
-                  </VuiFlexContainer>
-                </VuiFlexItem>
-
-                <div className="searchButtonShortcut">Ctrl + K</div>
-              </VuiFlexContainer>
-            </button>
-          </div>
-
-          <SearchModal isOpen={isOpen} onClose={closeModalAndResetResults}>
-            <form>
-              <div className="searchForm">
-                <SearchInput
-                  isLoading={isLoading}
-                  value={searchValue}
-                  onChange={onChange}
-                  onKeyDown={onKeyDown}
-                  placeholder={placeholder}
-                />
-                {isLoading ? (
-                  <div className="submitButtonWrapper">
-                    <VuiSpinner size="xs" />
-                  </div>
-                ) : (
-                  <div className="submitButtonWrapper">
-                    <button
-                      className="submitButton"
-                      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                        e.preventDefault();
-                        sendSearchQuery(searchValue);
-                      }}
-                    >
-                      <BiSearch size="20px" />
-                    </button>
-                  </div>
-                )}
-              </div>
-            </form>
-
-            {resultsList && (
-              <div className="searchModalResults">{resultsList}</div>
-            )}
-          </SearchModal>
+      <div className="styleWrapper">
+        <div ref={buttonRef}>
+          <button className="searchButton" onClick={() => setIsOpen(true)}>
+            <VuiFlexContainer
+              alignItems="center"
+              spacing="none"
+              justifyContent="spaceBetween"
+              className="searchButton__inner"
+            >
+              <VuiFlexItem>
+                <VuiFlexContainer alignItems="center" spacing="xs">
+                  <VuiFlexItem>
+                    <VuiIcon>
+                      <BiSearch />
+                    </VuiIcon>
+                  </VuiFlexItem>
+
+                  <VuiFlexItem>
+                    <VuiText>
+                      <div>Search</div>
+                    </VuiText>
+                  </VuiFlexItem>
+                </VuiFlexContainer>
+              </VuiFlexItem>
+
+              <div className="searchButtonShortcut">Ctrl + K</div>
+            </VuiFlexContainer>
+          </button>
         </div>
-      </BrowserRouter>
+        <SearchModal isOpen={isOpen} onClose={closeModalAndResetResults}>
+          <form>
+            <div className="searchForm">
+              <SearchInput
+                isLoading={isLoading}
+                value={searchValue}
+                onChange={onChange}
+                onKeyDown={onKeyDown}
+                placeholder={placeholder}
+              />
+              {isLoading ? (
+                <div className="submitButtonWrapper">
+                  <VuiSpinner size="xs" />
+                </div>
+              ) : (
+                <div className="submitButtonWrapper">
+                  <button
+                    className="submitButton"
+                    onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                      e.preventDefault();
+                      sendSearchQuery(searchValue);
+                    }}
+                  >
+                    <BiSearch size="20px" />
+                  </button>
+                </div>
+              )}
+            </div>
+          </form>
+
+          {resultsList && (
+            <div className="searchModalResults">{resultsList}</div>
+          )}
+        </SearchModal>
+      </div>
     </>
   );
 };