search clean page setup ready for just the results needed

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;

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>
   );
 }

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>
 

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>
+  );
+}

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>
     );