From 5528a39439aa83c3d376e4aa14f959dd8ded28cb Mon Sep 17 00:00:00 2001 From: talksik Date: Sat, 28 May 2022 17:09:08 -0500 Subject: [PATCH] getting and showing user nice --- packages/desktop/src/components/Terminal.tsx | 495 +++++++++++-------- packages/desktop/src/firebase/firestore.ts | 7 +- 2 files changed, 293 insertions(+), 209 deletions(-) diff --git a/packages/desktop/src/components/Terminal.tsx b/packages/desktop/src/components/Terminal.tsx index 25d2d44..eb10056 100644 --- a/packages/desktop/src/components/Terminal.tsx +++ b/packages/desktop/src/components/Terminal.tsx @@ -22,27 +22,40 @@ import { ListItemText, ListSubheader, Typography, + AvatarGroup, } from '@mui/material'; import { blueGrey } from '@mui/material/colors'; -import { FiMoreVertical, FiPlay, FiSun } from 'react-icons/fi'; +import { + FiMoreVertical, + FiPlay, + FiSun, + FiActivity, + FiInbox, + FiSearch, + FiUsers, + FiCoffee, + FiCircle, +} from 'react-icons/fi'; import { useSnackbar } from 'notistack'; import Navbar from './Navbar'; import Conversation from '@nirvana/core/src/models/conversation.model'; import useAuth from '../providers/AuthProvider'; -import { createOneOnOneConversation, useGetConversationsQueryLIVE } from '../firebase/firestore'; +import { + createOneOnOneConversation, + getConversationsQueryLIVE, + getUserById, + searchUsers, +} from '../firebase/firestore'; import { Link, AudioClip, Image } from '@nirvana/core/src/models/content.model'; import { useImmer } from 'use-immer'; import { User } from '@nirvana/core/src/models/user.model'; import { onSnapshot } from 'firebase/firestore'; -import { FiActivity, FiInbox, FiSearch, FiUsers, FiCoffee } from 'react-icons/fi'; import NirvanaAvatar from './NirvanaAvatar'; import { useDebounce, useKey } from 'react-use'; import KeyboardShortcutLabel from './KeyboardShortcutLabel'; -import { searchUsers } from '../firebase/firestore'; - type ConversationMap = { [conversationId: string]: Conversation; }; @@ -57,18 +70,16 @@ type ConversationContentMap = { interface ITerminalContext { conversationMap: ConversationMap; - userMap: UserMap; - contentMap: ConversationContentMap; selectedConversation?: Conversation; handleQuickDial?: (otherUserId: string) => void; + + getUser?: (userId: string) => Promise; } const TerminalContext = React.createContext({ conversationMap: {}, - userMap: {}, - contentMap: {}, }); // TODOS @@ -89,6 +100,7 @@ const TerminalContext = React.createContext({ // sort based on the different data sources: conversations, audio clips, etc. +// todo: extract each use effect to custom hook and will be clean export function TerminalProvider({ children }: { children?: React.ReactNode }) { const { enqueueSnackbar } = useSnackbar(); const { user } = useAuth(); @@ -99,18 +111,22 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) { const [userMap, updateUserMap] = useImmer({}); const [contentMap, updatecontentMap] = useImmer({}); - const queryLiveConversations = useGetConversationsQueryLIVE(); - + // fetch conversations useEffect(() => { - const unsub = onSnapshot(queryLiveConversations, (querySnapshot) => { - const convos = querySnapshot.docs.map((doc) => doc.data()); + const unsub = onSnapshot(getConversationsQueryLIVE(user.uid), (querySnapshot) => { + const conversations = querySnapshot.docs.map((doc) => doc.data()); + + updateConversationMap((draft) => { + conversations.forEach((convo) => { + draft[convo.id] = convo; + }); + }); enqueueSnackbar('got conversations...logging', { variant: 'success' }); - console.log(convos); }); return () => unsub(); - }, [queryLiveConversations]); + }, [user, enqueueSnackbar, updateConversationMap]); // cache of selected conversation const selectedConversation: Conversation | undefined = useMemo(() => { @@ -170,6 +186,21 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) { [conversationMap, enqueueSnackbar, user], ); + const getUser = useCallback( + async (userId: string) => { + if (userMap[userId]) return userMap[userId]; + + const fetchedUser = await getUserById(userId); + + updateUserMap((draft) => { + draft[userId] = fetchedUser; + }); + + return fetchedUser; + }, + [userMap, updateUserMap], + ); + const searchRef = useRef(null); const [searchVal, setSearchVal] = useState(''); @@ -210,7 +241,7 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) { return ( - <> + - - + - + - {searching && } + {searching && } - - - - - - - - + - {searchVal ? : } - - - - - - - - - - - {'Viet Phan'} - + + + + + - - - - - + {searchVal ? : } - - - - - yesterday - - - - - - - - {'Viet Phan'} - - - - - - - - - - - - today - - - - - - - - {'Viet Phan'} - - - - - - - - - - - - right now - - - - - - - - {'Arjun Patel'} - - - - - - - - - - - - - - - - - + + {/* selected conversation details */} + {selectedConversation && ( + + + + + + + {'Viet Phan'} + + + + + + + + + + + + + + yesterday + + + + + + + + {'Viet Phan'} + + + + + + + + + + + + today + + + + + + + + {'Viet Phan'} + + + + + + + + + + + + right now + + + + + + + + {'Arjun Patel'} + + + + + + + + + + + + + + + + + + + )} {children} @@ -508,6 +535,13 @@ function ListConversations() { } > + {Object.values(conversationMap).map((currentConversation) => ( + + ))} + @@ -536,7 +570,9 @@ function ListConversations() { + + ); } + +function ConversationRow({ conversation }: { conversation: Conversation }) { + const { user } = useAuth(); + const { getUser } = useTerminal(); + + const [conversationUsers, setConversationUsers] = useImmer([]); + + useEffect(() => { + (async () => { + const userPromises = conversation.membersList + .filter((memberId) => memberId !== user.uid) + .map(async (memberId) => await getUser(memberId)); + + const userSettled = await Promise.all(userPromises); + + setConversationUsers(userSettled); + })(); + + return; + }, [conversation.membersList, getUser, user, setConversationUsers]); + + return ( + + + + + + + conversationUser.displayName) + .join(', ')} + /> + + + + {conversationUsers.map((conversationUser, index) => ( + + ))} + + + + {/* 20 sec */} + + + ); +} diff --git a/packages/desktop/src/firebase/firestore.ts b/packages/desktop/src/firebase/firestore.ts index 1ba7cf2..0c4db7f 100644 --- a/packages/desktop/src/firebase/firestore.ts +++ b/packages/desktop/src/firebase/firestore.ts @@ -128,11 +128,8 @@ export const getUserById = async (userId: string): Promise => }; // get the conversations for particular user -export const useGetConversationsQueryLIVE = () => { - const { user } = useAuth(); - - return query(db.conversations, where('membersList', 'array-contains', user.uid)); -}; +export const getConversationsQueryLIVE = (userId: string) => + query(db.conversations, where('membersList', 'array-contains', userId)); /** *