bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor

Browse source
This commit is contained in:
Justin 2022-08-18 12:52:04 -04:00
parent a2e2d60fc7
commit e7bd56f959
9 changed files with 240 additions and 328 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
app/soapbox/features/chats/components/chat-list.tsx
View file

@ -1,44 +1,15 @@
import { Map as ImmutableMap } from 'immutable';
import React, { useCallback } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import React from 'react';
import { useDispatch } from 'react-redux';
import { Virtuoso } from 'react-virtuoso';
import { createSelector } from 'reselect';
import { fetchChats, expandChats } from 'soapbox/actions/chats';
import { fetchChats } from 'soapbox/actions/chats';
import PullToRefresh from 'soapbox/components/pull-to-refresh';
import { Card, Text } from 'soapbox/components/ui';
import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder_chat';
import { useAppSelector } from 'soapbox/hooks';
import { Stack } from 'soapbox/components/ui';
import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat';
import { useChats } from 'soapbox/queries/chats';
import Chat from './chat';
const messages = defineMessages({
emptyMessage: { id: 'chat_panels.main_window.empty', defaultMessage: 'No chats found. To start a chat, visit a user\'s profile' },
});
const getSortedChatIds = (chats: ImmutableMap<string, any>) => (
chats
.toList()
.sort(chatDateComparator)
.map(chat => chat.id)
);
const chatDateComparator = (chatA: { updated_at: string }, chatB: { updated_at: string }) => {
// Sort most recently updated chats at the top
const a = new Date(chatA.updated_at);
const b = new Date(chatB.updated_at);
if (a === b) return 0;
if (a > b) return -1;
if (a < b) return 1;
return 0;
};
const sortedChatIdsSelector = createSelector(
[getSortedChatIds],
chats => chats,
);
import Blankslate from './chat-pane/blankslate';
interface IChatList {
onClickChat: (chat: any) => void,
@ -47,44 +18,51 @@ interface IChatList {
const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false }) => {
const dispatch = useDispatch();
const intl = useIntl();
const chatIds = useAppSelector(state => sortedChatIdsSelector(state.chats.items));
const hasMore = useAppSelector(state => !!state.chats.next);
const isLoading = useAppSelector(state => state.chats.isLoading);
const { chatsQuery: { data: chats, isFetching } } = useChats();
const isEmpty = chatIds.size === 0;
const isEmpty = chats?.length === 0;
// const handleLoadMore = useCallback(() => {
// if (hasMore && !isLoading) {
// dispatch(expandChats());
// }
// }, [dispatch, hasMore, isLoading]);
const handleLoadMore = () => console.log('load more');
const handleLoadMore = useCallback(() => {
if (hasMore && !isLoading) {
dispatch(expandChats());
}
}, [dispatch, hasMore, isLoading]);
const handleRefresh = () => {
return dispatch(fetchChats()) as any;
};
const renderEmpty = () => isLoading ? <PlaceholderChat /> : (
<Card className='mt-2' variant='rounded' size='lg'>
<Text>{intl.formatMessage(messages.emptyMessage)}</Text>
</Card>
);
const renderEmpty = () => {
if (isFetching) {
return (
<Stack space={2}>
<PlaceholderChat />
<PlaceholderChat />
<PlaceholderChat />
</Stack>
);
} else {
return <Blankslate />;
}
};
return (
<PullToRefresh onRefresh={handleRefresh}>
{isEmpty ? renderEmpty() : (
<Virtuoso
className='chat-list'
useWindowScroll={useWindowScroll}
data={chatIds.toArray()}
data={chats}
endReached={handleLoadMore}
itemContent={(_index, chatId) => (
<Chat chatId={chatId} onClick={onClickChat} />
itemContent={(_index, chat) => (
<Chat chat={chat} onClick={onClickChat} />
)}
components={{
ScrollSeekPlaceholder: () => <PlaceholderChat />,
Footer: () => hasMore ? <PlaceholderChat /> : null,
// Footer: () => hasMore ? <PlaceholderChat /> : null,
EmptyPlaceholder: renderEmpty,
}}
/>

12
app/soapbox/features/chats/components/chat-message-list.tsx
View file

@ -18,7 +18,7 @@ import { Avatar, Button, HStack, IconButton, Spinner, Stack, Text } from 'soapbo
import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
import { useChatContext } from 'soapbox/contexts/chat-context';
import emojify from 'soapbox/features/emoji/emoji';
import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder_chat';
import PlaceholderChatMessage from 'soapbox/features/placeholder/components/placeholder-chat-message';
import Bundle from 'soapbox/features/ui/components/bundle';
import { MediaGallery } from 'soapbox/features/ui/util/async-components';
import { useAppSelector, useAppDispatch, useRefEventHandler, useOwnAccount } from 'soapbox/hooks';
@ -412,11 +412,11 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
<div className='flex-grow flex flex-col justify-end space-y-4'>
{isLoading ? (
<>
<PlaceholderChat isMyMessage />
<PlaceholderChat />
<PlaceholderChat isMyMessage />
<PlaceholderChat isMyMessage />
<PlaceholderChat />
<PlaceholderChatMessage isMyMessage />
<PlaceholderChatMessage />
<PlaceholderChatMessage isMyMessage />
<PlaceholderChatMessage isMyMessage />
<PlaceholderChatMessage />
</>
) : (
formattedChatMessages.reduce((acc: any, curr: any, idx: number) => {

206
app/soapbox/features/chats/components/chat-pane.tsx
View file

@ -1,206 +0,0 @@
import { useMutation } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
import sumBy from 'lodash/sumBy';
import React, { useEffect, useState } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
import { createSelector } from 'reselect';
import { openChat, launchChat, toggleMainWindow } from 'soapbox/actions/chats';
import { getSettings } from 'soapbox/actions/settings';
import snackbar from 'soapbox/actions/snackbar';
import AccountSearch from 'soapbox/components/account_search';
import { Avatar, Button, Counter, HStack, Icon, IconButton, Input, Spinner, Stack, Text } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification_badge';
import { ChatProvider, useChatContext } from 'soapbox/contexts/chat-context';
import AudioToggle from 'soapbox/features/chats/components/audio-toggle';
import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder_account';
import { useAppDispatch, useAppSelector, useDebounce, useSettings } from 'soapbox/hooks';
import { IChat, useChats } from 'soapbox/queries/chats';
import useAccountSearch from 'soapbox/queries/search';
import { RootState } from 'soapbox/store';
import { Chat } from 'soapbox/types/entities';
import ChatList from './chat-list';
import ChatPaneHeader from './chat-pane-header';
import ChatWindow from './chat-window';
import { Pane } from './ui';
const messages = defineMessages({
searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Type a name' },
});
const getChatsUnreadCount = (state: RootState) => {
const chats = state.chats.items;
return chats.reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0);
};
// Filter out invalid chats
const normalizePanes = (chats: ImmutableMap<string, Chat>, panes = ImmutableList<ImmutableMap<string, any>>()) => (
panes.filter(pane => chats.get(pane.get('chat_id')))
);
const makeNormalizeChatPanes = () => createSelector([
(state: RootState) => state.chats.items,
(state: RootState) => getSettings(state).getIn(['chats', 'panes']) as any,
], normalizePanes);
const normalizeChatPanes = makeNormalizeChatPanes();
const ChatPane = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const debounce = useDebounce;
const { chat, setChat, isOpen, toggleChatPane } = useChatContext();
const [value, setValue] = useState<string>();
const debouncedValue = debounce(value as string, 300);
const { chatsQuery: { data: chats, isFetching }, getOrCreateChatByAccountId } = useChats();
const { data: accounts } = useAccountSearch(debouncedValue);
const panes = useAppSelector((state) => normalizeChatPanes(state));
const unreadCount = sumBy(chats, (chat) => chat.unread);
const isSearching = accounts && accounts.length > 0;
const hasSearchValue = value && value.length > 0;
const handleClickOnSearchResult = useMutation((accountId: string) => {
return getOrCreateChatByAccountId(accountId);
}, {
onError: (error: AxiosError) => {
const data = error.response?.data as any;
dispatch(snackbar.error(data?.error));
},
onSuccess: (response) => {
setChat(response.data);
},
});
const clearValue = () => {
if (hasSearchValue) {
setValue('');
}
};
const renderBody = () => {
if (isFetching) {
return (
<div className='flex flex-grow h-full items-center justify-center'>
<Spinner withText={false} />
</div>
);
} else if (isSearching) {
return (
<Stack className='overflow-y-scroll flex-grow h-full' space={2}>
{accounts.map((account: any) => (
<button key={account.id} type='button' className='px-4 py-2 w-full flex flex-col hover:bg-gray-100' onClick={() => handleClickOnSearchResult.mutate(account.id)}>
<HStack alignItems='center' space={2}>
<Avatar src={account.avatar} size={40} />
<Stack alignItems='start'>
<div className='flex items-center space-x-1 flex-grow'>
<Text weight='semibold' truncate>{account.display_name}</Text>
{account.verified && <VerificationBadge />}
</div>
<Text theme='muted' truncate>@{account.acct}</Text>
</Stack>
</HStack>
</button>
))}
</Stack>
);
} else if (chats && chats.length > 0) {
return (
<Stack className='overflow-y-scroll flex-grow h-full' space={2}>
{chats.map((chat) => (
<button
key={chat.id}
type='button'
onClick={() => setChat(chat)}
className='px-4 py-2 w-full flex flex-col hover:bg-gray-100'
>
<HStack alignItems='center' space={2}>
<Avatar src={chat.account?.avatar} size={40} />
<Stack alignItems='start'>
<div className='flex items-center space-x-1 flex-grow'>
<Text weight='bold' size='sm' truncate>{chat.account?.display_name}</Text>
{chat.account?.verified && <VerificationBadge />}
</div>
<Text size='sm' weight='medium' theme='muted' truncate>@{chat.account?.acct}</Text>
</Stack>
</HStack>
</button>
))}
</Stack>
);
} else {
return (
<Stack justifyContent='center' alignItems='center' space={4} className='px-4 flex-grow'>
<Stack space={2}>
<Text weight='semibold' size='xl' align='center'>No messages yet</Text>
<Text theme='muted' align='center'>You can start a conversation with anyone that follows you.</Text>
</Stack>
<Button theme='primary'>Message someone</Button>
</Stack>
);
}
};
return (
<div>
<Pane isOpen={isOpen} index={0} main>
{chat?.id ? (
<ChatWindow />
) : (
<>
<ChatPaneHeader title='Messages' unreadCount={unreadCount} isOpen={isOpen} onToggle={toggleChatPane} />
{isOpen ? (
<Stack space={4} className='flex-grow h-full'>
<div className='px-4'>
<Input
type='text'
autoFocus
placeholder={intl.formatMessage(messages.searchPlaceholder)}
className='rounded-full'
value={value || ''}
onChange={(event) => setValue(event.target.value)}
isSearch
append={
<button onClick={clearValue}>
<Icon
src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
className='h-4 w-4 text-gray-700 dark:text-gray-600'
aria-hidden='true'
/>
</button>
}
/>
</div>
{renderBody()}
</Stack>
) : null}
</>
)}
</Pane>
{/* {panes.map((pane, i) => (
<ChatWindow
idx={i + 1}
key={pane.get('chat_id')}
chatId={pane.get('chat_id')}
windowState={pane.get('state')}
/>
))} */}
</div>
);
};
export default ChatPane;

16
app/soapbox/features/chats/components/chat-pane/blankslate.tsx Normal file
View file

@ -0,0 +1,16 @@
import React from 'react';
import { Button, Stack, Text } from 'soapbox/components/ui';
const Blankslate = () => (
<Stack justifyContent='center' alignItems='center' space={4} className='px-4 h-full'>
<Stack space={2}>
<Text weight='semibold' size='xl' align='center'>No messages yet</Text>
<Text theme='muted' align='center'>You can start a conversation with anyone that follows you.</Text>
</Stack>
{/* <Button theme='primary'>Message someone</Button> */}
</Stack>
);
export default Blankslate;

138
app/soapbox/features/chats/components/chat-pane/chat-pane.tsx Normal file
View file

@ -0,0 +1,138 @@
import { useMutation } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import sumBy from 'lodash/sumBy';
import React, { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import snackbar from 'soapbox/actions/snackbar';
import { Avatar, HStack, Icon, Input, Stack, Text } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification_badge';
import { useChatContext } from 'soapbox/contexts/chat-context';
import { useAppDispatch, useDebounce } from 'soapbox/hooks';
import { useChats } from 'soapbox/queries/chats';
import useAccountSearch from 'soapbox/queries/search';
import ChatList from '../chat-list';
import ChatPaneHeader from '../chat-pane-header';
import ChatWindow from '../chat-window';
import { Pane } from '../ui';
const messages = defineMessages({
searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Type a name' },
});
const ChatPane = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const debounce = useDebounce;
const { chat, setChat, isOpen, toggleChatPane } = useChatContext();
const { chatsQuery: { data: chats }, getOrCreateChatByAccountId } = useChats();
const [value, setValue] = useState<string>();
const debouncedValue = debounce(value as string, 300);
const { data: accounts } = useAccountSearch(debouncedValue);
const unreadCount = sumBy(chats, (chat) => chat.unread);
const isSearching = accounts && accounts.length > 0;
const hasSearchValue = value && value.length > 0;
const handleClickOnSearchResult = useMutation((accountId: string) => {
return getOrCreateChatByAccountId(accountId);
}, {
onError: (error: AxiosError) => {
const data = error.response?.data as any;
dispatch(snackbar.error(data?.error));
},
onSuccess: (response) => {
setChat(response.data);
},
});
const clearValue = () => {
if (hasSearchValue) {
setValue('');
}
};
const renderBody = () => {
if (isSearching) {
return (
<Stack className='overflow-y-scroll flex-grow h-full' space={2}>
{accounts.map((account: any) => (
<button
key={account.id}
type='button'
className='px-4 py-2 w-full flex flex-col hover:bg-gray-100'
onClick={() => {
handleClickOnSearchResult.mutate(account.id);
clearValue();
}}
>
<HStack alignItems='center' space={2}>
<Avatar src={account.avatar} size={40} />
<Stack alignItems='start'>
<div className='flex items-center space-x-1 flex-grow'>
<Text weight='bold' size='sm' truncate>{account.display_name}</Text>
{account.verified && <VerificationBadge />}
</div>
<Text size='sm' weight='medium' theme='muted' truncate>@{account.acct}</Text>
</Stack>
</HStack>
</button>
))}
</Stack>
);
} else {
return <ChatList onClickChat={(chat) => setChat(chat)} useWindowScroll={false} />;
}
};
// Active chat
if (chat?.id) {
return (
<Pane isOpen={isOpen} index={0} main>
<ChatWindow />
</Pane>
);
}
return (
<Pane isOpen={isOpen} index={0} main>
<ChatPaneHeader title='Messages' unreadCount={unreadCount} isOpen={isOpen} onToggle={toggleChatPane} />
{isOpen ? (
<Stack space={4} className='flex-grow h-full'>
<div className='px-4'>
<Input
type='text'
autoFocus
placeholder={intl.formatMessage(messages.searchPlaceholder)}
className='rounded-full'
value={value || ''}
onChange={(event) => setValue(event.target.value)}
isSearch
append={
<button onClick={clearValue}>
<Icon
src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
className='h-4 w-4 text-gray-700 dark:text-gray-600'
aria-hidden='true'
/>
</button>
}
/>
</div>
{renderBody()}
</Stack>
) : null}
</Pane>
);
};
export default ChatPane;

2
app/soapbox/features/chats/components/chat-widget.tsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import { ChatProvider } from 'soapbox/contexts/chat-context';
import ChatPane from './chat-pane';
import ChatPane from './chat-pane/chat-pane';
const ChatWidget = () => {
return (

83
app/soapbox/features/chats/components/chat.tsx
View file

@ -1,72 +1,35 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display-name';
import Icon from 'soapbox/components/icon';
import { Counter } from 'soapbox/components/ui';
import emojify from 'soapbox/features/emoji/emoji';
import { useAppSelector } from 'soapbox/hooks';
import { makeGetChat } from 'soapbox/selectors';
import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification_badge';
import type { Account as AccountEntity, Chat as ChatEntity } from 'soapbox/types/entities';
import type { IChat } from 'soapbox/queries/chats';
const getChat = makeGetChat();
interface IChat {
chatId: string,
interface IChatInterface {
chat: IChat,
onClick: (chat: any) => void,
}
const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
const chat = useAppSelector((state) => {
const chat = state.chats.items.get(chatId);
return chat ? getChat(state, (chat as any).toJS()) : undefined;
}) as ChatEntity;
const account = chat.account as AccountEntity;
if (!chat || !account) return null;
const unreadCount = chat.unread;
const content = chat.getIn(['last_message', 'content']);
const attachment = chat.getIn(['last_message', 'attachment']);
const image = attachment && (attachment as any).getIn(['pleroma', 'mime_type'], '').startsWith('image/');
const parsedContent = content ? emojify(content) : '';
const Chat: React.FC<IChatInterface> = ({ chat, onClick }) => {
return (
<div className='account'>
<button className='floating-link' onClick={() => onClick(chat)} />
<div className='account__wrapper'>
<div key={account.id} className='account__display-name'>
<div className='account__avatar-wrapper'>
<Avatar account={account} size={36} />
<button
key={chat.id}
type='button'
onClick={() => onClick(chat)}
className='px-4 py-2 w-full flex flex-col hover:bg-gray-100'
>
<HStack alignItems='center' space={2}>
<Avatar src={chat.account?.avatar} size={40} />
<Stack alignItems='start'>
<div className='flex items-center space-x-1 flex-grow'>
<Text weight='bold' size='sm' truncate>{chat.account?.display_name}</Text>
{chat.account?.verified && <VerificationBadge />}
</div>
<DisplayName account={account} />
{attachment && (
<Icon
className='chat__attachment-icon'
src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')}
/>
)}
{content ? (
<span
className='chat__last-message'
dangerouslySetInnerHTML={{ __html: parsedContent }}
/>
) : attachment && (
<span
className='chat__last-message attachment'
>
{image ? <FormattedMessage id='chats.attachment_image' defaultMessage='Image' /> : <FormattedMessage id='chats.attachment' defaultMessage='Attachment' />}
</span>
)}
{unreadCount > 0 && (
<div className='absolute top-1 right-0'>
<Counter count={unreadCount} />
</div>
)}
</div>
</div>
</div>
<Text size='sm' weight='medium' theme='muted' truncate>@{chat.account?.acct}</Text>
</Stack>
</HStack>
</button>
);
};

0
app/soapbox/features/placeholder/components/placeholder_chat.tsx → app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
View file

23
app/soapbox/features/placeholder/components/placeholder-chat.tsx Normal file
View file

@ -0,0 +1,23 @@
import React from 'react';
import { HStack, Stack } from 'soapbox/components/ui';
import PlaceholderAvatar from './placeholder_avatar';
import PlaceholderDisplayName from './placeholder_display_name';
/** Fake chat to display while data is loading. */
const PlaceholderChat = () => {
return (
<div className='px-4 py-2 w-full flex flex-col animate-pulse'>
<HStack alignItems='center' space={2}>
<PlaceholderAvatar size={40} />
<Stack alignItems='start'>
<PlaceholderDisplayName minLength={3} maxLength={15} />
</Stack>
</HStack>
</div>
);
};
export default PlaceholderChat;