From 6a4b353024830792ec3682eb050e0b1fd99b923c Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Mon, 31 Jan 2022 17:23:39 -0800
Subject: [PATCH] adding separate page for create a conversation

---
 packages/common/helpers/routes.ts             |  2 +-
 .../models/clientModels/conversationData.ts   |  1 +
 packages/common/models/conversation.ts        | 13 +++-
 .../web/components/v2/CreateConversation.tsx  |  7 ++
 packages/web/components/v2/Header.tsx         |  4 +-
 packages/web/components/v2/Sidebar.tsx        |  5 +-
 packages/web/pages/s/index.tsx                | 67 ++++++++++++++-----
 7 files changed, 78 insertions(+), 21 deletions(-)
 create mode 100644 packages/web/components/v2/CreateConversation.tsx

diff --git a/packages/common/helpers/routes.ts b/packages/common/helpers/routes.ts
index 15942e7..c46b0c7 100644
--- a/packages/common/helpers/routes.ts
+++ b/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;
diff --git a/packages/common/models/clientModels/conversationData.ts b/packages/common/models/clientModels/conversationData.ts
index f3f61e0..feb0fb6 100644
--- a/packages/common/models/clientModels/conversationData.ts
+++ b/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
diff --git a/packages/common/models/conversation.ts b/packages/common/models/conversation.ts
index b98f5cf..ec20d4c 100644
--- a/packages/common/models/conversation.ts
+++ b/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",
+}
diff --git a/packages/web/components/v2/CreateConversation.tsx b/packages/web/components/v2/CreateConversation.tsx
new file mode 100644
index 0000000..4d20f06
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/web/components/v2/Header.tsx b/packages/web/components/v2/Header.tsx
index 5496c9a..4fbbc9a 100644
--- a/packages/web/components/v2/Header.tsx
+++ b/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 = {
diff --git a/packages/web/components/v2/Sidebar.tsx b/packages/web/components/v2/Sidebar.tsx
index 29f998d..a97a43a 100644
--- a/packages/web/components/v2/Sidebar.tsx
+++ b/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>
diff --git a/packages/web/pages/s/index.tsx b/packages/web/pages/s/index.tsx
index b72395e..79cbc84 100644
--- a/packages/web/pages/s/index.tsx
+++ b/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>
   );
 }