From fb4605b8927a40566e95ce97201ea4e3281e0cbe Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Mon, 31 Jan 2022 23:29:30 -0800
Subject: [PATCH] search clean page setup ready for just the results needed

---
 packages/common/helpers/routes.ts             |  1 +
 .../web/components/v2/CreateConversation.tsx  |  2 ++
 packages/web/components/v2/Header.tsx         | 26 +++++++++++++++++--
 packages/web/components/v2/SearchResults.tsx  | 13 ++++++++++
 packages/web/pages/s/index.tsx                |  4 +++
 5 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 packages/web/components/v2/SearchResults.tsx

diff --git a/packages/common/helpers/routes.ts b/packages/common/helpers/routes.ts
index c46b0c7..e544678 100644
--- a/packages/common/helpers/routes.ts
+++ b/packages/common/helpers/routes.ts
@@ -4,6 +4,7 @@ enum Routes {
   done = "/s#done",
   drawer = "/s#drawer",
   createConvo = "/s#createConversation",
+  search = "/s#search",
 }
 
 export default Routes;
diff --git a/packages/web/components/v2/CreateConversation.tsx b/packages/web/components/v2/CreateConversation.tsx
index 7272f16..79c8bbf 100644
--- a/packages/web/components/v2/CreateConversation.tsx
+++ b/packages/web/components/v2/CreateConversation.tsx
@@ -120,6 +120,8 @@ export default function CreateConversation() {
       >
         <span>Create</span>
       </button>
+
+      {/* if it's a one on one, and i already have a conversation with them, then block creating a new one? */}
     </div>
   );
 }
diff --git a/packages/web/components/v2/Header.tsx b/packages/web/components/v2/Header.tsx
index 4fbbc9a..5931c3e 100644
--- a/packages/web/components/v2/Header.tsx
+++ b/packages/web/components/v2/Header.tsx
@@ -1,7 +1,8 @@
 // import Routes from "@nirvana/common/helpers/routes";
+import Routes from "@nirvana/common/helpers/routes";
 import { Menu, Dropdown, Avatar } from "antd";
 import { useRouter } from "next/router";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { KeyMap, GlobalHotKeys } from "react-hotkeys";
 import {
   FaUser,
@@ -44,10 +45,29 @@ export default function Header() {
   );
 
   const inputRef = useRef<HTMLInputElement | undefined>();
+
+  const [searchInput, setSearchInput] = useState<string>("");
+
   const selectSearch = () => {
     inputRef.current?.focus();
   };
 
+  const updateInput = (e) => {
+    const newSearchInput = e.target.value;
+    setSearchInput(newSearchInput);
+
+    if (!newSearchInput) {
+      router.query.q = undefined;
+    } else {
+      // update url => initiates the search
+      router.query.q = encodeURI(newSearchInput);
+    }
+
+    router.push({
+      query: { q: encodeURI(newSearchInput) },
+    });
+  };
+
   const keyMap: KeyMap = {
     SELECT_SEARCH: {
       name: "select search to start searching",
@@ -88,8 +108,10 @@ export default function Header() {
         <FaSearch className="text-lg text-slate-300" />
         <input
           placeholder="Type / to search"
-          className="bg-transparent placeholder-slate-300"
+          className="bg-transparent placeholder-slate-300 p-2 w-96"
           ref={inputRef}
+          onChange={updateInput}
+          value={searchInput}
         />
       </div>
 
diff --git a/packages/web/components/v2/SearchResults.tsx b/packages/web/components/v2/SearchResults.tsx
new file mode 100644
index 0000000..65a2c78
--- /dev/null
+++ b/packages/web/components/v2/SearchResults.tsx
@@ -0,0 +1,13 @@
+import { useRouter } from "next/router";
+
+export default function SearchResults() {
+  const router = useRouter();
+
+  const q = router.query.q;
+
+  return (
+    <div className="mx-auto my-auto flex flex-col">
+      <span className="text-xs text-slate-400">0 results for {`"${q}"`}</span>
+    </div>
+  );
+}
diff --git a/packages/web/pages/s/index.tsx b/packages/web/pages/s/index.tsx
index ebb8aac..33365a0 100644
--- a/packages/web/pages/s/index.tsx
+++ b/packages/web/pages/s/index.tsx
@@ -17,6 +17,7 @@ import {
 import CreateConversation from "../../components/v2/CreateConversation";
 import { FaArrowLeft } from "react-icons/fa";
 import KeyboardShortcutHandler from "../../components/v2/KeyboardShortcutHandler";
+import SearchResults from "../../components/v2/SearchResults";
 
 export default function Me() {
   // figure out what content to render from here
@@ -61,6 +62,8 @@ export default function Me() {
   var fullCleanPageContent: ReactElement = undefined;
   if (currRoute === Routes.createConvo) {
     fullCleanPageContent = <CreateConversation />;
+  } else if (router.query.q) {
+    fullCleanPageContent = <SearchResults />;
   }
 
   if (fullCleanPageContent) {
@@ -82,6 +85,7 @@ export default function Me() {
             </span>
           </span>
         </div>
+
         {fullCleanPageContent}
       </div>
     );