adding models and stale state for convos

packages/core/models/audioClip.model.ts

@@ -0,0 +1,12 @@
+import { ObjectId } from "mongodb";
+
+export default class AudioClip {
+  constructor(
+    public _id: ObjectId,
+
+    public url: string,
+
+    public createdDate: Date = new Date(),
+    public duration?: number
+  ) {}
+}

packages/core/models/conversation.model.ts

@@ -0,0 +1,30 @@
+import { ObjectId } from "mongodb";
+
+export class Conversation {
+  _id: ObjectId;
+  name?: string;
+
+  createdDate: Date;
+  lastUpdatedDate: Date;
+
+  constructor() {}
+}
+
+export class ConversationMember {
+  _id: ObjectId;
+
+  // unique constraint
+  conversationId: ObjectId;
+  userId: ObjectId;
+
+  state: ConversationMemberState;
+
+  createdDate: Date;
+}
+
+export enum ConversationMemberState {
+  INVITED = "INVITED", // user gets this in their request inbox
+  INBOX = "INBOX", // user decided to join this conversation after being invited
+  TUNED = "TUNED", // user upgraded priority of this and now is tuned in live to convo
+  ARCHIVED = "ARCHIVED", // user no longer wants anything to do with convo
+}

packages/core/models/masterConversation.model.ts

@@ -0,0 +1,17 @@
+import AudioClip from "./audioClip.model";
+import { ConversationMember } from "./conversation.model";
+import { ObjectId } from "mongodb";
+
+export default class MasterConversation {
+  // attributes of conversation
+  id: ObjectId; // id of the conversation
+  name?: string;
+  createdDate: Date;
+  lastUpdatedDate: Date;
+
+  // compiled data for easy client read
+  currentUserMember: ConversationMember;
+  otherMembers: ConversationMember[];
+
+  audioClips: AudioClip[];
+}

packages/desktop/src/pages/Home/conversations/index.tsx

@@ -4,11 +4,16 @@ import {
 } from "../../../controller/recoil";
 import { Add, LinkRounded, RecordVoiceOverTwoTone } from "@mui/icons-material";
 import { Avatar, Tooltip } from "antd";
-import { Button, Tab, Tabs } from "@mui/material";
+import { Button, Fab, Tab, Tabs } from "@mui/material";
+import {
+  Conversation,
+  ConversationMemberState,
+} from "../../../../../core/models/conversation.model";
 import { useRecoilState, useSetRecoilState } from "recoil";
 
 import { ContactDetails } from "@nirvana/core/responses/getContacts.response";
 import { FaVolumeUp } from "react-icons/fa";
+import MasterConversation from "../../../../../core/models/masterConversation.model";
 import SkeletonLoader from "../../../components/loading/skeleton";
 import UserAvatarWithStatus from "../../../components/User/userAvatarWithStatus";
 import UserStatusText from "../../../components/User/userStatusText";
@@ -52,6 +57,58 @@ export default function Conversations() {
     setSelectedConvo(googleUserId);
   };
 
+  // fake data of conversations
+  const allMasterConvos = [] as MasterConversation[];
+
+  // render right content based on selected tab
+  const renderConversationContent = () => {
+    // if no content for a tab, then show stale text
+
+    const invitedConvos = allMasterConvos.filter(
+      (masterConvo) =>
+        masterConvo.currentUserMember.state === ConversationMemberState.INVITED
+    );
+    const inboxConvos = allMasterConvos.filter(
+      (masterConvo) =>
+        masterConvo.currentUserMember.state === ConversationMemberState.INBOX
+    );
+    const tunedConvos = allMasterConvos.filter(
+      (masterConvo) =>
+        masterConvo.currentUserMember.state === ConversationMemberState.TUNED
+    );
+
+    const liveConversations = [];
+
+    switch (selectedTab) {
+      case ConvoTab.LIVE:
+        return (
+          <span>
+            None of your channels are live. Join and chill in a room and it will
+            show up here!
+          </span>
+        );
+      case ConvoTab.TUNED:
+        if (tunedConvos?.length) {
+          return <span>displaying all tuned in convos</span>;
+        }
+        return <span>Pin a channel to turn it into a walkie talkie.</span>;
+      case ConvoTab.INBOX:
+        if (inboxConvos?.length) {
+          return <span>displaying all inbox convos</span>;
+        }
+        return <span>Connect with someone and start talking!</span>;
+      case ConvoTab.REQUESTS:
+        if (invitedConvos?.length) {
+          return <span>displaying all request convos</span>;
+        }
+        return (
+          <span>
+            No new conversations, connect with someone to get started.
+          </span>
+        );
+    }
+  };
+
   return (
     <>
       <div className="flex flex-row justify-between p-2">
@@ -81,16 +138,21 @@ export default function Conversations() {
           />
         </Tabs>
 
-        <Button
-          variant="contained"
-          color="primary"
-          startIcon={<RecordVoiceOverTwoTone />}
+        <Fab
+          variant="extended"
           size="small"
-          style={{ textTransform: "none" }}
+          color="primary"
+          aria-label="add"
           onClick={handleNewConvo}
+          style={{ textTransform: "none" }}
         >
-          New
-        </Button>
+          <RecordVoiceOverTwoTone fontSize="small" sx={{ mr: 1 }} />
+          new
+        </Fab>
+      </div>
+
+      <div className="flex flex-col items-center">
+        {renderConversationContent()}
       </div>
 
       {/* {isLoading ? (

packages/desktop/src/pages/Home/newConvo/index.tsx

@@ -115,7 +115,11 @@ export default function NewConvo() {
   return (
     <div className="flex flex-col">
       <div className="flex flex-row">
-        <Button onClick={handleGoBack} size="small">
+        <Button
+          onClick={handleGoBack}
+          size="small"
+          style={{ textTransform: "none" }}
+        >
           back
         </Button>
 
@@ -149,6 +153,12 @@ export default function NewConvo() {
           </div>
         ))}
       </div>
+
+      <div className="ml-auto">
+        <Button variant="contained" onClick={createConvo}>
+          Connect
+        </Button>
+      </div>
     </div>
   );
 }