talksik/nirvana-v4
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

nice flow and quick working without creating a new conversation

Browse Source
This commit is contained in:
talksik
2022-05-30 08:08:36 -05:00
parent 1e3d26f664
commit cf5e16eeb9
4 changed files with 208 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/models/conversation.model.ts
+6 -3
View File
@@ -1,4 +1,5 @@
import { FieldValue, serverTimestamp, Timestamp } from 'firebase/firestore';
import { User } from './user.model';
export default class Conversation {
id: string;
@@ -9,6 +10,8 @@ export default class Conversation {
public members: MemberMap,
public userCache: User[],
public name: string | null = null,
public lastUpdatedDate = Timestamp.now(),
@@ -20,8 +23,8 @@ export default class Conversation {
}
export type MemberMap = {
[memberId: string]: ConversationMember
}
[memberId: string]: ConversationMember;
};
export class ConversationMember {
constructor(
@@ -44,4 +47,4 @@ export enum MemberState {
priority = 'priority',
inbox = 'inbox',
// deleted = "deleted"
}
}
packages/desktop/src/components/NewConversationDialog.tsx
+103 -54
View File
@@ -1,4 +1,4 @@
import React, { HTMLAttributes, useCallback, useState } from 'react';
import React, { HTMLAttributes, useCallback, useState, useEffect } from 'react';
import {
Autocomplete,
AutocompleteChangeReason,
@@ -20,18 +20,21 @@ import {
import { FiX } from 'react-icons/fi';
import { blueGrey } from '@mui/material/colors';
import { useSnackbar } from 'notistack';
import { useDebounce } from 'react-use';
import { useDebounce, useKeyPressEvent, useToggle } from 'react-use';
import { searchUsers } from '../firebase/firestore';
import { User } from '@nirvana/core/src/models/user.model';
import useAuth from '../providers/AuthProvider';
import UserDetailRow from '../subcomponents/UserDetailRow';
import CircularProgress from '@mui/material/CircularProgress';
export default function NewConversationDialog({
open,
handleClose,
handleSubmit,
}: {
open: boolean;
handleClose: () => void;
handleSubmit: (selectedUsers: User[], conversationName?: string) => void;
}) {
const { enqueueSnackbar } = useSnackbar();
const { user } = useAuth();
@@ -75,16 +78,6 @@ export default function NewConversationDialog({
[setSearching, setSearchVal],
);
const handleSubmit = useCallback(() => {
try {
//
} catch (error) {
//
}
handleClose();
}, [handleClose]);
const renderOption = useCallback(
(props: HTMLAttributes<HTMLLIElement>, option: User, state: AutocompleteRenderOptionState) => (
<ListItem {...props}>
@@ -94,6 +87,48 @@ export default function NewConversationDialog({
[],
);
const [conversationName, setConversationName] = useState<string>('');
useEffect(() => {
if (selectedUsers.length < 2) {
setConversationName('');
}
}, [selectedUsers, setConversationName]);
const handleChangeName = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
setConversationName(e.target.value);
},
[setConversationName],
);
const [isSubmitting, toggleIsSubmitting] = useToggle(false);
const handleSubmitLocal = useCallback(async () => {
if (selectedUsers.length === 0) {
enqueueSnackbar('Must a person!', { variant: 'error' });
return;
}
toggleIsSubmitting();
handleSubmit(selectedUsers, conversationName);
// clear form for next time
setSelectedUsers([]);
setConversationName('');
toggleIsSubmitting();
}, [
selectedUsers,
setConversationName,
conversationName,
enqueueSnackbar,
handleSubmit,
setSelectedUsers,
toggleIsSubmitting,
]);
return (
<Dialog fullScreen open={open} onClose={handleClose}>
<Container
@@ -113,53 +148,67 @@ export default function NewConversationDialog({
<FiX />
</IconButton>
<Container
maxWidth="sm"
sx={{
display: 'flex',
flexDirection: 'column',
gap: 2,
}}
>
<Autocomplete
multiple
loading={searching}
includeInputInList
id="tags-outlined"
autoHighlight
onInputChange={handleChangeSearchInput}
options={searchUsersResults}
renderOption={renderOption}
getOptionLabel={(option) => (typeof option === 'string' ? option : option.displayName)}
value={selectedUsers}
onChange={handleChangeSelections}
filterSelectedOptions
isOptionEqualToValue={(optionUser, valueUser) => optionUser.id === valueUser.id}
filterOptions={(options) => options}
inputValue={searchVal}
renderInput={(params) => (
{isSubmitting ? (
<CircularProgress />
) : (
<Container
maxWidth="sm"
sx={{
display: 'flex',
flexDirection: 'column',
gap: 5,
}}
>
<Typography variant="h4">Start a Conversation</Typography>
<Autocomplete
multiple
loading={searching}
includeInputInList
id="tags-outlined"
autoHighlight
onInputChange={handleChangeSearchInput}
options={searchUsersResults}
renderOption={renderOption}
getOptionLabel={(option) =>
typeof option === 'string' ? option : option.displayName
}
value={selectedUsers}
onChange={handleChangeSelections}
filterSelectedOptions
isOptionEqualToValue={(optionUser, valueUser) => optionUser.id === valueUser.id}
filterOptions={(options) => options}
inputValue={searchVal}
renderInput={(params) => (
<TextField
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
fullWidth
label="People"
{...params}
placeholder="Search by name or email"
/>
)}
/>
{selectedUsers.length > 1 && (
<TextField
value={conversationName}
onChange={handleChangeName}
fullWidth
label="People"
{...params}
placeholder="Search by name or email"
label="Name (optional)"
placeholder="Channel, subject line, whatever..."
/>
)}
/>
<TextField
fullWidth
label="Name (optional)"
placeholder="Channel, subject line, whatever..."
/>
<Stack justifyContent={'flex-end'} direction={'row'} spacing={2}>
<Button variant={'text'}>Cancel</Button>
<Button variant={'contained'} color="primary">
Connect
</Button>
</Stack>
</Container>
<Stack justifyContent={'flex-end'} direction={'row'} spacing={2}>
<Button variant={'text'}>Cancel</Button>
<Button disabled={selectedUsers.length === 0} variant={'contained'} color="primary">
Connect
</Button>
</Stack>
</Container>
)}
</Container>
</Dialog>
);
packages/desktop/src/components/Terminal.tsx
+48 -13
View File
@@ -50,6 +50,7 @@ import Navbar from './Navbar';
import MainPanel from './MainPanel';
import { ConversationList } from './ConversationList';
import NewConversationDialog from './NewConversationDialog';
import { createGroupConversation } from '../firebase/firestore';
type ConversationMap = {
[conversationId: string]: Conversation;
};
@@ -69,7 +70,7 @@ interface ITerminalContext {
selectedConversation?: Conversation;
selectConversation?: (conversationId: string) => void;
handleQuickDial?: (otherUserId: string) => void;
handleQuickDial?: (otherUser: User) => void;
getUser?: (userId: string) => Promise<User | undefined>;
@@ -159,7 +160,7 @@ const handleOnStartRecording = (e: BlobEvent) => {
// todo: extract each use effect to custom hook and will be clean
export function TerminalProvider({ children }: { children?: React.ReactNode }) {
const { enqueueSnackbar } = useSnackbar();
const { user, logout } = useAuth();
const { user, logout, nirvanaUser } = useAuth();
const [selectedConversationId, setSelectedConversationId] = useState<string>(undefined);
@@ -282,7 +283,7 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
// handle create or open existing conversation
// not 100% consistent to the second, but still works...don't need atomicity
const handleQuickDial = useCallback(
async (otherUserId: string) => {
async (otherUser: User) => {
setSearchVal('');
try {
@@ -292,8 +293,8 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
const findExistingConversation = Object.values(conversationMap).find((convo) => {
if (
convo.memberIdsList?.length === 2 &&
convo.memberIdsList.includes(user.uid) &&
convo.memberIdsList.includes(otherUserId)
convo.memberIdsList.includes(nirvanaUser.id) &&
convo.memberIdsList.includes(otherUser.id)
) {
return true;
}
@@ -307,14 +308,14 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
}
// create conversation in this case
const newConversationId = await createOneOnOneConversation(otherUserId, user.uid);
const newConversationId = await createOneOnOneConversation(otherUser, nirvanaUser);
enqueueSnackbar('started conversation!', { variant: 'success' });
setSelectedConversationId(newConversationId);
} catch (error) {
enqueueSnackbar('Something went wrong, please try again', { variant: 'error' });
}
},
[conversationMap, enqueueSnackbar, user],
[conversationMap, enqueueSnackbar, nirvanaUser],
);
const getUser = useCallback(
@@ -496,12 +497,42 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
setAnchorEl(null);
};
// const handleCreateConversation = useCallback(() => {
// }, [])
const [createConversationMode, setCreateConversationMode] = useState<boolean>(true);
const handleStartConversation = useCallback(
async (selectedUsers: User[], conversationName?: string) => {
if (selectedUsers.length === 0) {
enqueueSnackbar('Must select more than one person');
return;
}
try {
// one on one, handle quick dial to prevent another conversation
if (selectedUsers.length === 1) {
await handleQuickDial(selectedUsers[0]);
setCreateConversationMode(false);
return;
}
// create group chat
// create conversation in this case
const newConversationId = await createGroupConversation(
selectedUsers,
nirvanaUser,
conversationName ?? null,
);
enqueueSnackbar('started group conversation!', { variant: 'success' });
setSelectedConversationId(newConversationId);
setCreateConversationMode(false);
} catch (error) {
enqueueSnackbar('Something went wrong, please try again', { variant: 'error' });
}
},
[nirvanaUser, handleQuickDial, enqueueSnackbar, setCreateConversationMode],
);
const handleShowCreateConvoForm = useCallback(() => {
setSelectedConversationId(undefined);
setCreateConversationMode(true);
@@ -693,7 +724,11 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
{children}
{/* create chat dialog */}
<NewConversationDialog open={createConversationMode} handleClose={handleEscape} />
<NewConversationDialog
open={createConversationMode}
handleSubmit={handleStartConversation}
handleClose={handleEscape}
/>
</TerminalContext.Provider>
);
}
@@ -739,7 +774,7 @@ function ListPeople({ people }: { people: User[] }) {
{people.map((person) => (
<Tooltip key={`${person.uid}-searchUsers`} title={'quick dial'}>
<ListItem>
<ListItemButton onClick={() => handleQuickDial(person.uid)}>
<ListItemButton onClick={() => handleQuickDial(person)}>
<ListItemAvatar>
<Avatar alt={person.displayName} src={person.photoUrl} />
</ListItemAvatar>
packages/desktop/src/firebase/firestore.ts
+51 -33
View File
@@ -160,19 +160,23 @@ export const getConversationContentQueryLIVE = (conversationId: string) =>
* @returns id of new conversation
*/
export const createOneOnOneConversation = async (
otherUserId: string,
myUserId: string,
): Promise<string | undefined> => {
const myMember = new ConversationMember(myUserId, MemberRole.admin, MemberState.inbox);
const otherMember = new ConversationMember(otherUserId, MemberRole.regular, MemberState.inbox);
const newMemberMap: MemberMap = {
[myUserId]: { ...myMember },
[otherUserId]: { ...otherMember },
};
const newConversation = new Conversation(myUserId, [myUserId, otherUserId], newMemberMap);
otherUser: User,
currentUser: User,
): Promise<string> => {
try {
const myMember = new ConversationMember(currentUser.id, MemberRole.admin, MemberState.inbox);
const otherMember = new ConversationMember(otherUser.id, MemberRole.regular, MemberState.inbox);
const newMemberMap: MemberMap = {
[currentUser.id]: { ...myMember },
[otherUser.id]: { ...otherMember },
};
const userCache: User[] = [{ ...currentUser }, { ...otherUser }];
const membersList = [currentUser.id, otherUser.id];
const newConversation = new Conversation(currentUser.id, membersList, newMemberMap, userCache);
const newDoc = await addDoc(db.conversations, newConversation);
return newDoc.id;
} catch (e) {
@@ -183,28 +187,42 @@ export const createOneOnOneConversation = async (
};
export const createGroupConversation = async (
otherUserIds: string[],
myUserId: string,
): Promise<void> => {
const myMember = new ConversationMember(myUserId, MemberRole.admin, MemberState.inbox);
const newMemberMap: MemberMap = {
[myUserId]: { ...myMember },
};
otherUserIds.forEach((otherMemberId) => {
const otherMember = new ConversationMember(
otherMemberId,
MemberRole.regular,
MemberState.inbox,
);
newMemberMap[otherMemberId] = { ...otherMember };
});
const newConversation = new Conversation(myUserId, [myUserId, ...otherUserIds], newMemberMap);
otherUsers: User[],
adminUser: User,
conversationName: string | null,
): Promise<string> => {
try {
await addDoc(db.conversations, newConversation);
const userCache = [{ ...adminUser }];
const myMember = new ConversationMember(adminUser.id, MemberRole.admin, MemberState.inbox);
const newMemberMap: MemberMap = {
[adminUser.id]: { ...myMember },
};
otherUsers.forEach((otherUser) => {
const otherMember = new ConversationMember(
otherUser.id,
MemberRole.regular,
MemberState.inbox,
);
newMemberMap[otherUser.id] = { ...otherMember };
userCache.push({ ...otherUser });
});
const membersList = [adminUser.id, ...otherUsers.map((otherUser) => otherUser.id)];
const newConversation = new Conversation(
adminUser.id,
membersList,
newMemberMap,
userCache,
conversationName,
);
const newConversationDoc = await addDoc(db.conversations, newConversation);
return newConversationDoc.id;
} catch (e) {
console.error('Error : ', e);