breaking apart conversations

packages/desktop/src/components/Conversations.tsx

@@ -23,6 +23,7 @@ import { useSnackbar } from 'notistack';
 import KeyboardShortcutLabel from './KeyboardShortcutLabel';
 import { searchUsers } from '../firebase/firestore';
 import { User } from '@nirvana/core/src/models/user.model';
+import useTerminal from './Terminal';
 
 const Conversations = () => {
   const { enqueueSnackbar } = useSnackbar();
@@ -49,9 +50,9 @@ const Conversations = () => {
         setSearchUsersResults(results);
 
         console.warn(results);
-
-        setSearching(false);
       }
+
+      setSearching(false);
     },
     500,
     [searchVal, enqueueSnackbar, setSearchUsersResults],
@@ -95,7 +96,7 @@ const Conversations = () => {
         <KeyboardShortcutLabel label="Shift" />
       </Stack>
 
-      {searchVal ? <ListPeople people={searchUsersResults} /> : <></>}
+      {searchVal ? <ListPeople people={searchUsersResults} /> : <ListConversations />}
     </>
   );
 };
@@ -135,7 +136,13 @@ function ListPeople({ people }: { people: User[] }) {
   );
 }
 
-function StaticListConversations() {
+function ListConversations() {
+  const { conversations } = useTerminal();
+
+  if (conversations.length === 0) {
+    return <Typography variant="caption">Find someone by email or name to get started!</Typography>;
+  }
+
   return (
     <>
       <List
@@ -228,4 +235,5 @@ function StaticListConversations() {
     </>
   );
 }
+
 export default Conversations;

packages/desktop/src/components/Terminal.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 
 import { Container } from '@mui/system';
 import { Avatar, Box, Fab, Grid, IconButton, Paper, Stack, Typography } from '@mui/material';
@@ -8,12 +8,16 @@ import { useSnackbar } from 'notistack';
 
 import Conversations from './Conversations';
 import Navbar from './Navbar';
+import Conversation from '@nirvana/core/src/models/conversation.model';
 
 interface ITerminalContext {
+  conversations: Conversation[];
   selectedConversation?: string;
 }
 
-const TerminalContext = React.createContext<ITerminalContext>({});
+const TerminalContext = React.createContext<ITerminalContext>({
+  conversations: [],
+});
 
 // TODOS
 // fetch all conversations that I am part of
@@ -34,8 +38,10 @@ const TerminalContext = React.createContext<ITerminalContext>({});
 export function TerminalProvider({ children }: { children?: React.ReactNode }) {
   const { enqueueSnackbar } = useSnackbar();
 
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+
   return (
-    <TerminalContext.Provider value={{ selectedConversation: undefined }}>
+    <TerminalContext.Provider value={{ selectedConversation: undefined, conversations }}>
       <Grid container spacing={0}>
         <Grid
           item