starting to implement create ui/ux flow

packages/common/models/user.ts

@@ -4,22 +4,25 @@ import {
   serverTimestamp,
   Timestamp,
 } from "firebase/firestore";
+import { v4 as uuidv4 } from "uuid";
+
 import IFirestoreSerializable from "./firestoreSerializable";
 
 export class User {
-  id: string;
+  id: string = uuidv4();
   emailAddress: string;
-  nickName: string;
+
   firstName: string;
   lastName: string;
+
   avatarUrl: string;
   userStatus: UserStatus;
 
-  /**designer? dev? */
-  teamRole: string;
+  /**designer? dev? in the future can put other things like 'best in the world' */
+  description?: string;
 
-  createdDate: Timestamp;
-  lastUpdatedDate: Timestamp;
+  createdDate: Timestamp = Timestamp.now();
+  lastUpdatedDate?: Timestamp;
 
   // serialize() {
   //     return {
@@ -31,6 +34,22 @@ export class User {
   // deserialize(firestoreData: {}) {
   //     this.lastUpdatedDate = firestoreData.lastUpdatedDate.toDate()
   // }
+
+  constructor(
+    _id: string = uuidv4(),
+    _emailAddress: string,
+    _firstName: string,
+    _lastName: string,
+    _avatarUrl: string,
+    _userStatus: UserStatus
+  ) {
+    this.id = _id;
+    this.emailAddress = _emailAddress;
+    this.firstName = _firstName;
+    this.lastName = _lastName;
+    this.avatarUrl = _avatarUrl;
+    this.userStatus = _userStatus;
+  }
 }
 
 export enum UserStatus {

packages/web/components/FullPageExperiences/CreateConversation.tsx.tsx

@@ -1,16 +1,22 @@
+import { User, UserStatus } from "@nirvana/common/models/user";
 import { Select, Tag } from "antd";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import SimpleUserDetailsRow from "../UserDetails/SimpleUserDetailsRow";
 
-const options = [
-  { value: "gold" },
-  { value: "lime" },
-  { value: "green" },
-  { value: "cyan" },
-];
-
 export default function CreateConversation() {
   const input = useRef<HTMLInputElement>();
+  const [selectedUsers, setSelectedUsers] = useState<User[]>([] as User[]);
+
+  // recommendations list: algolio results + cached "relevant users" from all cached conversations currently
+  // options for the select
+  // have a list of 10 max?
+  const [recommendedUsers, setRecommendedUsers] = useState<User[]>(
+    [] as User[]
+  );
+
+  const options = recommendedUsers.map((recUser) => {
+    value: recUser.firstName + " " + recUser.lastName;
+  });
 
   useEffect(() => {
     input.current?.focus();
@@ -38,13 +44,25 @@ export default function CreateConversation() {
         <span className="uppercase tracking-widest text-slate-400 font-semibold">
           Selected
         </span>
-        <button className="ml-auto text-slate-400">clear</button>
+
+        <button className="ml-auto text-slate-300 text-xs">clear</button>
       </span>
 
       {/* list of selected people who are nirvana users */}
 
       <span className="flex flex-col">
-        <SimpleUserDetailsRow />
+        <SimpleUserDetailsRow
+          user={
+            new User(
+              undefined,
+              "johnny.Smith@microsoft.com",
+              "Johnny",
+              "Smith",
+              "https://joeschmoe.io/api/v1/random",
+              UserStatus.online
+            )
+          }
+        />
       </span>
 
       <span className="flex flex-col mt-10">

packages/web/components/UserDetails/SimpleUserDetailsRow.tsx

@@ -1,61 +1,25 @@
 import { Avatar } from "antd";
 import { FaPaperPlane, FaRegTimesCircle } from "react-icons/fa";
-import User from "@nirvana/common/models/user";
+import { User } from "@nirvana/common/models/user";
+import UserAvatar from "./UserAvatar";
 
 export default function SelectedUserRow(props: { user: User }) {
-  console.log(props);
   return (
-    <>
-      <span className="flex flex-row items-center py-1 border-t">
-        <Avatar shape="square" size={"small"}>
-          A
-        </Avatar>
+    <span className="flex flex-row items-center py-1 border-t">
+      <UserAvatar
+        userFirstName={props.user.firstName}
+        avatarUrl={props.user.avatarUrl}
+        status={props.user.userStatus}
+      />
 
-        <span className="flex flex-col ml-2">
-          <span className="text-slate-400 text-xs">
-            {"ariel@microsoft.com"}
-          </span>
-          <span className="text-orange-500 text-xs">
-            Not a valid Nirvana user.
-          </span>
-        </span>
-
-        <button className="p-2 rounded-full hover:cursor-pointer text-sky-500 ml-auto">
-          <FaPaperPlane className="ml-auto text-lg" />
-        </button>
+      <span className="flex flex-col ml-2">
+        <span className="text-teal-500 font-bold">{"Joe Smoe"}</span>
+        <span className="text-slate-400 text-xs">{"joe@microsoft.com"}</span>
       </span>
-      <span className="flex flex-row items-center py-1 border-t">
-        <Avatar
-          src={"https://joeschmoe.io/api/v1/random"}
-          shape="square"
-          size={"small"}
-        />
 
-        <span className="flex flex-col ml-2">
-          <span className="text-teal-500 font-bold">{"Joe Smoe"}</span>
-          <span className="text-slate-400 text-xs">{"joe@microsoft.com"}</span>
-        </span>
-
-        <button className="p-2 rounded-full hover:cursor-pointer text-orange-500 ml-auto">
-          <FaRegTimesCircle className="ml-auto text-lg" />
-        </button>
-      </span>
-      <span className="flex flex-row items-center py-1 border-t">
-        <Avatar
-          src={"https://joeschmoe.io/api/v1/2"}
-          shape="square"
-          size={"small"}
-        />
-
-        <span className="flex flex-col ml-2">
-          <span className="text-teal-500 font-bold">{"Elon Musk"}</span>
-          <span className="text-slate-400 text-xs">{"musk@tesla.com"}</span>
-        </span>
-
-        <button className="p-2 rounded-full hover:cursor-pointer text-orange-500 ml-auto">
-          <FaRegTimesCircle className="ml-auto text-lg" />
-        </button>
-      </span>
-    </>
+      <button className="p-2 rounded-full hover:cursor-pointer text-orange-500 ml-auto">
+        <FaRegTimesCircle className="ml-auto text-lg" />
+      </button>
+    </span>
   );
 }

packages/web/components/UserDetails/UserAvatar.tsx

@@ -0,0 +1,35 @@
+import { UserStatus } from "@nirvana/common/models/user";
+import { Badge } from "antd";
+import Avatar from "antd/lib/avatar/avatar";
+
+export enum UserAvatarSizes {
+  small = "small",
+  large = "large",
+  default = "default",
+}
+export default function UserAvatar(props: {
+  userFirstName: string;
+  avatarUrl?: string;
+  size?: UserAvatarSizes;
+  status: UserStatus;
+}) {
+  if (props.avatarUrl) {
+    return (
+      <Badge dot>
+        <Avatar
+          shape="square"
+          src={props.avatarUrl}
+          size={props.size || UserAvatarSizes.default}
+        />
+      </Badge>
+    );
+  }
+
+  return (
+    <Badge dot>
+      <Avatar shape="square" size={props.size || UserAvatarSizes.default}>
+        {props.userFirstName}
+      </Avatar>
+    </Badge>
+  );
+}