diff --git a/app/soapbox/features/chats/components/chat-page/components/blankslate.tsx b/app/soapbox/features/chats/components/chat-page/components/blankslate-empty.tsx similarity index 93% rename from app/soapbox/features/chats/components/chat-page/components/blankslate.tsx rename to app/soapbox/features/chats/components/chat-page/components/blankslate-empty.tsx index 52fb96014..cc883f11f 100644 --- a/app/soapbox/features/chats/components/chat-page/components/blankslate.tsx +++ b/app/soapbox/features/chats/components/chat-page/components/blankslate-empty.tsx @@ -8,7 +8,7 @@ interface IBlankslate { } /** To display on the chats main page when no message is selected. */ -const Blankslate: React.FC = () => { +const BlankslateEmpty: React.FC = () => { const history = useHistory(); const handleNewChat = () => { @@ -43,4 +43,4 @@ const Blankslate: React.FC = () => { ); }; -export default Blankslate; \ No newline at end of file +export default BlankslateEmpty; \ No newline at end of file diff --git a/app/soapbox/features/chats/components/chat-page/components/blankslate-with-chats.tsx b/app/soapbox/features/chats/components/chat-page/components/blankslate-with-chats.tsx new file mode 100644 index 000000000..4285df0b9 --- /dev/null +++ b/app/soapbox/features/chats/components/chat-page/components/blankslate-with-chats.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import { useHistory } from 'react-router-dom'; + +import { Button, Stack, Text } from 'soapbox/components/ui'; + +/** To display on the chats main page when no message is selected, but chats are present. */ +const BlankslateWithChats = () => { + const history = useHistory(); + + const handleNewChat = () => { + history.push('/chats/new'); + }; + + return ( + + + + + + + + + + + + + + ); +}; + +export default BlankslateWithChats; \ No newline at end of file diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx index 114bafad8..49d1331d2 100644 --- a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx +++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx @@ -9,12 +9,13 @@ import { Avatar, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, import VerificationBadge from 'soapbox/components/verification_badge'; import { useChatContext } from 'soapbox/contexts/chat-context'; import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks'; -import { MessageExpirationValues, useChat, useChatActions } from 'soapbox/queries/chats'; +import { MessageExpirationValues, useChat, useChatActions, useChats } from 'soapbox/queries/chats'; import { secondsToDays } from 'soapbox/utils/numbers'; import Chat from '../../chat'; -import Blankslate from './blankslate'; +import BlankslateEmpty from './blankslate-empty'; +import BlankslateWithChats from './blankslate-with-chats'; const messages = defineMessages({ blockMessage: { id: 'chat_settings.block.message', defaultMessage: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.' }, @@ -50,6 +51,7 @@ const ChatPageMain = () => { const { data: chat } = useChat(chatId); const { currentChatId } = useChatContext(); + const { chatsQuery: { data: chats, isLoading } } = useChats(); const inputRef = useRef(null); @@ -95,8 +97,16 @@ const ChatPageMain = () => { })); }; + if (isLoading) { + return null; + } + + if (!currentChatId && chats && chats.length > 0) { + return ; + } + if (!currentChatId) { - return ; + return ; } if (!chat) {