adding separate page for create a conversation

packages/common/helpers/routes.ts

@@ -3,7 +3,7 @@ enum Routes {
   later = "/s#later",
   done = "/s#done",
   drawer = "/s#drawer",
-  rooms = "/s#rooms",
+  createConvo = "/s#createConversation",
 }
 
 export default Routes;

packages/common/models/clientModels/conversationData.ts

@@ -5,6 +5,7 @@ export default class ConversationData {
   //    if user wants more data, click button to fetch further back
   // see if this convo is a priority one
   // all users in the conversation: userId's perhaps, but the actual user we can get from the relevantUsersCache map
+  // want to create individual convo chunks...if I send three messages in a row, it should show my name and only one click to listen to all three in order
 }
 
 // one map: all relevant users, a map we build based on where the user visits

packages/common/models/conversation.ts

@@ -4,13 +4,24 @@ import { Timestamp } from "firebase/firestore";
 export default class Conversation {
   id: string = uuid();
 
+  type: ConversationType;
   name: string; // engineering, general, arjun and jacob...
 
   createdDate: Timestamp = Timestamp.now();
   createdByUserId: string;
 
-  constructor(_name: string, _createdByUserId: string) {
+  constructor(
+    _name: string,
+    _createdByUserId: string,
+    _type: ConversationType
+  ) {
     this.name = _name;
     this.createdByUserId = _createdByUserId;
+    this.type = _type;
   }
 }
+
+export enum ConversationType {
+  personal = "personal",
+  group = "group",
+}

packages/web/components/v2/CreateConversation.tsx

@@ -0,0 +1,7 @@
+export default function CreateConversation() {
+  return (
+    <div className="mx-auto my-auto">
+      <input className="p-2 rounded border" />
+    </div>
+  );
+}

packages/web/components/v2/Header.tsx

@@ -43,9 +43,9 @@ export default function Header() {
     </Menu>
   );
 
-  const inputRef = useRef<HTMLInputElement>();
+  const inputRef = useRef<HTMLInputElement | undefined>();
   const selectSearch = () => {
-    inputRef.current.focus();
+    inputRef.current?.focus();
   };
 
   const keyMap: KeyMap = {

packages/web/components/v2/Sidebar.tsx

@@ -30,7 +30,10 @@ function Sidebar() {
   return (
     <div className="flex flex-col justify-start items-baseline w-[20rem]">
       {/* new button */}
-      <button className="rounded-full flex flex-row items-center px-5 py-2 ml-8 shadow-lg bg-white space-x-2">
+      <button
+        onClick={() => handleRoute(Routes.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" />
         <span className="text-slate-500 font-semibold">New</span>
       </button>

packages/web/pages/s/index.tsx

@@ -1,6 +1,6 @@
 import Routes from "@nirvana/common/helpers/routes";
 import { useRouter } from "next/router";
-import React, { useEffect } from "react";
+import React, { ReactElement, useEffect } from "react";
 import { useRecoilState } from "recoil";
 import Conversations from "../../components/v2/Conversations";
 import Done from "../../components/v2/Done";
@@ -14,6 +14,8 @@ import {
   TransitionGroup,
   SwitchTransition,
 } from "react-transition-group";
+import CreateConversation from "../../components/v2/CreateConversation";
+import { FaArrowLeft } from "react-icons/fa";
 
 export default function Me() {
   // figure out what content to render from here
@@ -48,26 +50,59 @@ export default function Me() {
     }
   }
 
+  /** full page replacements: clean full page
+   *    1. search page:
+   *    2. view a conversation
+   *    3. create conversation
+   *    4. profile edit? nah not needed...just keep current separate page
+   */
+
+  var fullCleanPageContent: ReactElement = <></>;
+  if (currRoute === Routes.createConvo) {
+    fullCleanPageContent = <CreateConversation />;
+  }
+
   return (
     <div className="flex flex-col">
       <Header />
 
-      <div className="flex-1 flex flex-row items-stretch">
-        <Sidebar />
+      {fullCleanPageContent ? (
+        <div className="flex flex-col px-20">
+          <div className="flex flex-row">
+            <span className="flex flex-col items-center">
+              <button
+                className="rounded-lg p-2 border flex flex-row items-center space-x-2
+            text-slate-400 text-xs hover:bg-slate-50"
+              >
+                <FaArrowLeft />
+                <span>back</span>
+              </button>
 
-        <SwitchTransition>
-          <CSSTransition
-            appear={true}
-            key={Math.random()}
-            timeout={400}
-            classNames="slide"
-          >
-            <div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
-              {getCurrentContent()}
-            </div>
-          </CSSTransition>
-        </SwitchTransition>
-      </div>
+              <span className="flex flex-row items-center text-xs text-slate-300">
+                ESC
+              </span>
+            </span>
+          </div>
+          {fullCleanPageContent}
+        </div>
+      ) : (
+        <div className="flex-1 flex flex-row items-stretch">
+          <Sidebar />
+
+          <SwitchTransition>
+            <CSSTransition
+              appear={true}
+              key={"main_tabs_content"}
+              timeout={400}
+              classNames="slide"
+            >
+              <div className="flex-1 flex flex-col px-20 justify-start items-stretch container mx-auto">
+                {getCurrentContent()}
+              </div>
+            </CSSTransition>
+          </SwitchTransition>
+        </div>
+      )}
     </div>
   );
 }