adding search and better transitions and feel overall

packages/common/helpers/routes.ts

@@ -1,10 +1,12 @@
-enum Routes {
-  convos = "/s#conversations",
-  later = "/s#later",
-  done = "/s#done",
-  drawer = "/s#drawer",
-  createConvo = "/s#createConversation",
-  search = "/s#search",
+export enum QueryRoutes {
+  convos = "conversations",
+  later = "later",
+  done = "done",
+  drawer = "drawer",
+  createConvo = "createConversation",
+  search = "search",
 }
 
-export default Routes;
+export enum Routes {
+  home = "/s",
+}

packages/common/models/usersConverations.ts

@@ -23,6 +23,7 @@ export default class UserConversation {
 }
 
 export enum UserConversationState {
+  inbox = "inbox",
   default = "default",
   priority = "priority",
   later = "later",

packages/web/components/v2/CreateConversation.tsx

@@ -109,8 +109,8 @@ export default function CreateConversation() {
         </span>
 
         <input
-          className="p-3 rounded mt-2 bg-slate-50 border"
-          placeholder="engineering, hangout, kitchen..."
+          className="p-3 rounded mt-2 bg-slate-50 border placeholder-slate-300"
+          placeholder="coding and chilling room, birthdays, sprint 7"
         />
       </span>
 

packages/web/components/v2/Header.tsx

@@ -1,5 +1,4 @@
-// import Routes from "@nirvana/common/helpers/routes";
-import Routes from "@nirvana/common/helpers/routes";
+import { QueryRoutes, Routes } from "@nirvana/common/helpers/routes";
 import { Menu, Dropdown, Avatar } from "antd";
 import { useRouter } from "next/router";
 import { useRef, useState } from "react";
@@ -50,6 +49,10 @@ export default function Header() {
 
   const selectSearch = () => {
     inputRef.current?.focus();
+    router.push({
+      pathname: Routes.home,
+      query: { page: QueryRoutes.search },
+    });
   };
 
   const updateInput = (e) => {
@@ -64,7 +67,7 @@ export default function Header() {
     }
 
     router.push({
-      query: { q: encodeURI(newSearchInput) },
+      query: { q: encodeURI(newSearchInput), page: QueryRoutes.search },
     });
   };
 

packages/web/components/v2/KeyboardShortcutHandler.tsx

@@ -1,4 +1,4 @@
-import Routes from "@nirvana/common/helpers/routes";
+import { QueryRoutes } from "@nirvana/common/helpers/routes";
 import { useRouter } from "next/router";
 import { GlobalHotKeys, KeyMap, configure } from "react-hotkeys";
 
@@ -11,7 +11,7 @@ export default function KeyboardShortcutHandler() {
 
   const handleEscape = () => {
     console.log("woah");
-    router.push(Routes.convos);
+    router.push({ query: { page: QueryRoutes.convos } });
   };
 
   const keyMap: KeyMap = {

packages/web/components/v2/Sidebar.tsx

@@ -1,3 +1,4 @@
+import { QueryRoutes, Routes } from "@nirvana/common/helpers/routes";
 import { Divider, Avatar, Tooltip, Badge } from "antd";
 import { useRouter } from "next/router";
 import {
@@ -14,24 +15,23 @@ import {
   FaCircle,
 } from "react-icons/fa";
 import { HiSpeakerphone } from "react-icons/hi";
-import Routes from "@nirvana/common/helpers/routes";
-import { useRecoilValue } from "recoil";
-import { currPagePath } from "../../recoil/main";
 
 function Sidebar() {
   const router = useRouter();
+  const currPage = router.query.page;
 
-  const currPage = useRecoilValue(currPagePath);
-
-  const handleRoute = (route: Routes) => {
-    router.push(route);
+  const handleRoute = (queryRoute: QueryRoutes) => {
+    router.push({
+      pathname: Routes.home,
+      query: { page: queryRoute },
+    });
   };
 
   return (
     <div className="flex flex-col justify-start items-baseline w-[20rem]">
       {/* new button */}
       <button
-        onClick={() => handleRoute(Routes.createConvo)}
+        onClick={() => handleRoute(QueryRoutes.createConvo)}
         className="rounded-full flex flex-row items-center px-5 py-2 ml-8 shadow-lg bg-white space-x-2"
       >
         <FaPlus className="text-teal-600 text-lg" />
@@ -41,17 +41,19 @@ function Sidebar() {
       {/* navigation items */}
       <div className="flex flex-col my-5 space-y-5 w-full">
         <span
-          onClick={() => handleRoute(Routes.convos)}
+          onClick={() => handleRoute(QueryRoutes.convos)}
           className="flex flex-row items-center hover:cursor-pointer transition-all group"
         >
           <span
             className={`w-5 h-5 -translate-x-4 rounded bg-teal-600 ${
-              currPage == Routes.convos ? "visible" : "invisible"
+              currPage == QueryRoutes.convos ? "visible" : "invisible"
             }`}
           ></span>
           <FaStream
             className={`ml-8 mr-2 text-lg ${
-              currPage == Routes.convos ? "text-teal-600" : "text-slate-400"
+              currPage == QueryRoutes.convos
+                ? "text-teal-600"
+                : "text-slate-400"
             } group-hover:text-slate-600`}
           />
 
@@ -74,17 +76,19 @@ function Sidebar() {
         </span>
 
         <span
-          onClick={() => handleRoute(Routes.later)}
+          onClick={() => handleRoute(QueryRoutes.later)}
           className="flex flex-row items-center hover:cursor-pointer transition-all group"
         >
           <span
             className={`w-5 h-5 -translate-x-4 rounded bg-purple-500 ${
-              currPage == Routes.later ? "visible" : "invisible"
+              currPage == QueryRoutes.later ? "visible" : "invisible"
             }`}
           ></span>
           <FaRegClock
             className={`ml-8 mr-2 text-lg ${
-              currPage == Routes.later ? "text-purple-500" : "text-slate-400"
+              currPage == QueryRoutes.later
+                ? "text-purple-500"
+                : "text-slate-400"
             } group-hover:text-slate-600`}
           />
 
@@ -96,17 +100,19 @@ function Sidebar() {
         </span>
 
         <span
-          onClick={() => handleRoute(Routes.done)}
+          onClick={() => handleRoute(QueryRoutes.done)}
           className="flex flex-row items-center hover:cursor-pointer transition-all group"
         >
           <span
             className={`w-5 h-5 -translate-x-4 rounded bg-emerald-500 ${
-              currPage == Routes.done ? "visible" : "invisible"
+              currPage == QueryRoutes.done ? "visible" : "invisible"
             }`}
           ></span>
           <FaCheck
             className={`ml-8 mr-2 text-lg ${
-              currPage == Routes.done ? "text-emerald-500" : "text-slate-400"
+              currPage == QueryRoutes.done
+                ? "text-emerald-500"
+                : "text-slate-400"
             } group-hover:text-slate-600`}
           />
 
@@ -118,17 +124,19 @@ function Sidebar() {
         <Divider />
 
         <span
-          onClick={() => handleRoute(Routes.drawer)}
+          onClick={() => handleRoute(QueryRoutes.drawer)}
           className="flex flex-row items-center hover:cursor-pointer transition-all group"
         >
           <span
             className={`w-5 h-5 -translate-x-4 rounded bg-yellow-500 ${
-              currPage == Routes.drawer ? "visible" : "invisible"
+              currPage == QueryRoutes.drawer ? "visible" : "invisible"
             }`}
           ></span>
           <FaImages
             className={`ml-8 mr-2 text-lg ${
-              currPage == Routes.drawer ? "text-yellow-500" : "text-slate-400"
+              currPage == QueryRoutes.drawer
+                ? "text-yellow-500"
+                : "text-slate-400"
             } group-hover:text-slate-600`}
           />
 

packages/web/pages/s/index.tsx

@@ -1,51 +1,34 @@
-import Routes from "@nirvana/common/helpers/routes";
 import { useRouter } from "next/router";
-import React, { ReactElement, useEffect } from "react";
-import { useRecoilState } from "recoil";
+import React, { ReactElement } from "react";
 import Conversations from "../../components/v2/Conversations";
 import Done from "../../components/v2/Done";
 import Drawer from "../../components/v2/Drawer";
 import Header from "../../components/v2/Header";
 import Later from "../../components/v2/Later";
 import Sidebar from "../../components/v2/Sidebar";
-import { currPagePath } from "../../recoil/main";
-import {
-  CSSTransition,
-  TransitionGroup,
-  SwitchTransition,
-} from "react-transition-group";
+import { CSSTransition, SwitchTransition } from "react-transition-group";
 import CreateConversation from "../../components/v2/CreateConversation";
 import { FaArrowLeft } from "react-icons/fa";
 import KeyboardShortcutHandler from "../../components/v2/KeyboardShortcutHandler";
 import SearchResults from "../../components/v2/SearchResults";
+import { QueryRoutes, Routes } from "@nirvana/common/helpers/routes";
 
 export default function Me() {
   // figure out what content to render from here
   const router = useRouter();
-  const [currRoute, setCurrRoute] = useRecoilState(currPagePath);
+  const currPage = router.query.page;
 
-  useEffect(() => {
-    const onHashChangeStart = (url) => {
-      console.log(`Path changing to ${url}`);
-      setCurrRoute(url);
-    };
-
-    router.events.on("hashChangeStart", onHashChangeStart);
-
-    return () => {
-      router.events.off("hashChangeStart", onHashChangeStart);
-    };
-  }, [router.events]);
+  console.log(currPage);
 
   function getCurrentContent() {
-    switch (currRoute) {
-      case Routes.convos:
+    switch (currPage) {
+      case QueryRoutes.convos:
         return <Conversations />;
-      case Routes.later:
+      case QueryRoutes.later:
         return <Later />;
-      case Routes.done:
+      case QueryRoutes.done:
         return <Done />;
-      case Routes.drawer:
+      case QueryRoutes.drawer:
         return <Drawer />;
       default:
         return <></>;
@@ -60,10 +43,10 @@ export default function Me() {
    */
 
   var fullCleanPageContent: ReactElement = undefined;
-  if (currRoute === Routes.createConvo) {
-    fullCleanPageContent = <CreateConversation />;
-  } else if (router.query.q) {
+  if (currPage === QueryRoutes.search) {
     fullCleanPageContent = <SearchResults />;
+  } else if (currPage === QueryRoutes.createConvo) {
+    fullCleanPageContent = <CreateConversation />;
   }
 
   if (fullCleanPageContent) {
@@ -72,7 +55,12 @@ export default function Me() {
         <div className="flex flex-row">
           <span className="flex flex-col items-center">
             <button
-              onClick={() => router.push(Routes.convos)}
+              onClick={() =>
+                router.push({
+                  pathname: Routes.home,
+                  query: { page: QueryRoutes.convos },
+                })
+              }
               className="rounded-lg p-2 border flex flex-row items-center space-x-2
             text-slate-400 text-xs hover:bg-slate-50"
             >
@@ -86,7 +74,16 @@ export default function Me() {
           </span>
         </div>
 
-        {fullCleanPageContent}
+        <SwitchTransition>
+          <CSSTransition
+            appear={true}
+            key={Math.random()}
+            timeout={400}
+            classNames="slide"
+          >
+            {fullCleanPageContent}
+          </CSSTransition>
+        </SwitchTransition>
       </div>
     );
   }

packages/web/recoil/main.tsx

@@ -1,10 +1,10 @@
 import { atom } from "recoil";
 
-export enum RecoilActions {
-  CURR_PAGE_PATH = "CURR_PAGE_PATH",
-}
+// export enum RecoilActions {
+//   CURR_PAGE_PATH = "CURR_PAGE_PATH",
+// }
 
-export const currPagePath = atom({
-  key: RecoilActions.CURR_PAGE_PATH, // unique ID (with respect to other atoms/selectors)
-  default: "/s", // default value (aka initial value)
-});
+// export const currPagePath = atom({
+//   key: RecoilActions.CURR_PAGE_PATH, // unique ID (with respect to other atoms/selectors)
+//   default: "/s", // default value (aka initial value)
+// });

packages/web/styles/globals.css

@@ -210,3 +210,7 @@ li.slick-active button {
 .slide-exit-done {
   opacity: 0;
 }
+
+.ant-select-selector {
+  @apply bg-slate-50 rounded placeholder-slate-300 !important;
+}