From 6240ea5a23268f6032bd9cab571e1705cb4c9677 Mon Sep 17 00:00:00 2001 From: Justin Date: Wed, 14 Sep 2022 10:35:32 -0400 Subject: [PATCH] Finish i18n for DMs --- .../chats/components/chat-list-item.tsx | 2 +- .../features/chats/components/chat-list.tsx | 29 +++++------- .../components/chat-message-list-intro.tsx | 38 +++++++++------- .../chats/components/chat-message-list.tsx | 14 ++++-- .../chats/components/chat-pane/blankslate.tsx | 44 +++++++++++++++---- .../chats/components/chat-pane/chat-pane.tsx | 42 ++++-------------- .../components/chat-search/blankslate.tsx | 28 ++++++++---- .../components/chat-search/chat-search.tsx | 10 ++++- .../chat-search/empty-results-blankslate.tsx | 29 ++++++++---- tailwind.config.js | 5 ++- 10 files changed, 140 insertions(+), 101 deletions(-) diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx index 537f555ad..93ef61c9f 100644 --- a/app/soapbox/features/chats/components/chat-list-item.tsx +++ b/app/soapbox/features/chats/components/chat-list-item.tsx @@ -17,7 +17,7 @@ const ChatListItem: React.FC = ({ chat, onClick }) => { key={chat.id} type='button' onClick={() => onClick(chat)} - className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800' + className='px-4 py-2 w-full flex flex-col hover:bg-gray-100 dark:hover:bg-gray-800 focus:shadow-inset-ring' data-testid='chat' > diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx index 58471efb6..b25e54bbd 100644 --- a/app/soapbox/features/chats/components/chat-list.tsx +++ b/app/soapbox/features/chats/components/chat-list.tsx @@ -1,16 +1,15 @@ import classNames from 'clsx'; import React, { useRef, useState } from 'react'; -import { useDispatch } from 'react-redux'; import { Virtuoso } from 'react-virtuoso'; import { fetchChats } from 'soapbox/actions/chats'; import PullToRefresh from 'soapbox/components/pull-to-refresh'; import { Stack } from 'soapbox/components/ui'; import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat'; +import { useAppDispatch } from 'soapbox/hooks'; import { useChats } from 'soapbox/queries/chats'; import ChatListItem from './chat-list-item'; -import Blankslate from './chat-pane/blankslate'; interface IChatList { onClickChat: (chat: any) => void, @@ -20,7 +19,7 @@ interface IChatList { } const ChatList: React.FC = ({ onClickChat, useWindowScroll = false, searchValue, fade }) => { - const dispatch = useDispatch(); + const dispatch = useAppDispatch(); const chatListRef = useRef(null); @@ -37,23 +36,15 @@ const ChatList: React.FC = ({ onClickChat, useWindowScroll = false, s } }; - const handleRefresh = () => { - return dispatch(fetchChats()) as any; - }; + const handleRefresh = () => dispatch(fetchChats()) as any; - const renderEmpty = () => { - if (isFetching) { - return ( - - - - - - ); - } else { - return ; - } - }; + const renderEmpty = () => ( + + + + + + ); return (
diff --git a/app/soapbox/features/chats/components/chat-message-list-intro.tsx b/app/soapbox/features/chats/components/chat-message-list-intro.tsx index 61d8ab7dd..088a3a78b 100644 --- a/app/soapbox/features/chats/components/chat-message-list-intro.tsx +++ b/app/soapbox/features/chats/components/chat-message-list-intro.tsx @@ -1,5 +1,6 @@ import classNames from 'clsx'; import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import { openModal } from 'soapbox/actions/modals'; import { initReport } from 'soapbox/actions/reports'; @@ -8,21 +9,31 @@ import { useChatContext } from 'soapbox/contexts/chat-context'; import { useAppDispatch } from 'soapbox/hooks'; import { useChat } from 'soapbox/queries/chats'; +const messages = defineMessages({ + leaveChatHeading: { id: 'chat_message_list_intro.leave_chat.heading', defaultMessage: 'Leave Chat' }, + leaveChatMessage: { id: 'chat_message_list_intro.leave_chat.message', defaultMessage: 'Are you sure you want to leave this chat? This conversation will be removed from your inbox.' }, + leaveChatConfirm: { id: 'chat_message_list_intro.leave_chat.confirm', defaultMessage: 'Leave Chat' }, + intro: { id: 'chat_message_list_intro.intro', defaultMessage: 'wants to start a chat with you' }, + accept: { id: 'chat_message_list_intro.actions.accept', defaultMessage: 'Accept' }, + leaveChat: { id: 'chat_message_list_intro.actions.leave_chat', defaultMessage: 'Leave chat' }, + report: { id: 'chat_message_list_intro.actions.report', defaultMessage: 'Report' }, + messageLifespan: { id: 'chat_message_list_intro.actions.message_lifespan', defaultMessage: 'Messages older than 15 days are deleted.' }, +}); + const ChatMessageListIntro = () => { const dispatch = useAppDispatch(); + const intl = useIntl(); const { chat, needsAcceptance } = useChatContext(); const { acceptChat, deleteChat } = useChat(chat?.id as string); const handleLeaveChat = () => { dispatch(openModal('CONFIRM', { - heading: 'Leave Chat', - message: 'Are you sure you want to leave this chat? This conversation will be removed from your inbox.', - confirm: 'Leave Chat', + heading: intl.formatMessage(messages.leaveChatHeading), + message: intl.formatMessage(messages.leaveChatMessage), + confirm: intl.formatMessage(messages.leaveChatConfirm), confirmationTheme: 'primary', - onConfirm: () => { - deleteChat.mutate(); - }, + onConfirm: () => deleteChat.mutate(), })); }; @@ -55,7 +66,7 @@ const ChatMessageListIntro = () => { <> @{chat.account.acct} {' '} - wants to start a chat with you + {intl.formatMessage(messages.intro)} ) : ( @{chat.account.acct} @@ -68,13 +79,10 @@ const ChatMessageListIntro = () => { @@ -83,7 +91,7 @@ const ChatMessageListIntro = () => { block onClick={handleLeaveChat} > - Leave chat + {intl.formatMessage(messages.leaveChat)} @@ -99,7 +107,7 @@ const ChatMessageListIntro = () => { - Messages older than 15 days are deleted. + {intl.formatMessage(messages.messageLifespan)} )} diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx index 26d44740a..a987f6b15 100644 --- a/app/soapbox/features/chats/components/chat-message-list.tsx +++ b/app/soapbox/features/chats/components/chat-message-list.tsx @@ -30,6 +30,10 @@ const messages = defineMessages({ more: { id: 'chats.actions.more', defaultMessage: 'More' }, delete: { id: 'chats.actions.delete', defaultMessage: 'Delete' }, copy: { id: 'chats.actions.copy', defaultMessage: 'Copy' }, + blockedBy: { id: 'chat_message_list.blockedBy', defaultMessage: 'You are blocked by' }, + networkFailureTitle: { id: 'chat_message_list.network_failure.title', defaultMessage: 'Whoops!' }, + networkFailureSubtitle: { id: 'chat_message_list.network_failure.subtitle', defaultMessage: 'We encountered a network failure.' }, + networkFailureAction: { id: 'chat_message_list.network_failure.action', defaultMessage: 'Try again' }, }); type TimeFormat = 'today' | 'date'; @@ -398,7 +402,7 @@ const ChatMessageList: React.FC = ({ chat, autosize }) => { <> - You are blocked by + {intl.formatMessage(messages.blockedBy)} {' '} @{chat.account.acct} @@ -413,15 +417,17 @@ const ChatMessageList: React.FC = ({ chat, autosize }) => { - Whoops! + + {intl.formatMessage(messages.networkFailureTitle)} + - We encountered a network failure. + {intl.formatMessage(messages.networkFailureSubtitle)}
diff --git a/app/soapbox/features/chats/components/chat-pane/blankslate.tsx b/app/soapbox/features/chats/components/chat-pane/blankslate.tsx index 17208c658..464fe0576 100644 --- a/app/soapbox/features/chats/components/chat-pane/blankslate.tsx +++ b/app/soapbox/features/chats/components/chat-pane/blankslate.tsx @@ -1,16 +1,42 @@ import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import { Button, Stack, Text } from 'soapbox/components/ui'; -const Blankslate = () => ( - - - No messages yet - You can start a conversation with anyone that follows you. - +const messages = defineMessages({ + title: { id: 'chat_search.empty_results_blankslate.title', defaultMessage: 'No messages yet' }, + body: { id: 'chat_search.empty_results_blankslate.body', defaultMessage: 'You can start a conversation with anyone that follows you.' }, + action: { id: 'chat_search.empty_results_blankslate.action', defaultMessage: 'Message someone' }, +}); - {/* */} - -); +interface IBlankslate { + onSearch(): void +} + +const Blankslate = ({ onSearch }: IBlankslate) => { + const intl = useIntl(); + + return ( + + + + + {intl.formatMessage(messages.title)} + + + + {intl.formatMessage(messages.body)} + + + +
+ +
+ + + ); +}; export default Blankslate; diff --git a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx index 420275227..6efb92f66 100644 --- a/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx +++ b/app/soapbox/features/chats/components/chat-pane/chat-pane.tsx @@ -1,31 +1,27 @@ -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, Button, HStack, Icon, Input, Stack, Text } from 'soapbox/components/ui'; -import VerificationBadge from 'soapbox/components/verification_badge'; +import { Icon, Input, Stack } from 'soapbox/components/ui'; import { useChatContext } from 'soapbox/contexts/chat-context'; -import { useAppDispatch, useDebounce } from 'soapbox/hooks'; +import { useDebounce } from 'soapbox/hooks'; import { IChat, useChats } from 'soapbox/queries/chats'; -import { queryClient } from 'soapbox/queries/client'; -import useAccountSearch from 'soapbox/queries/search'; import ChatList from '../chat-list'; import ChatPaneHeader from '../chat-pane-header'; import ChatSearch from '../chat-search/chat-search'; +import EmptyResultsBlankslate from '../chat-search/empty-results-blankslate'; import ChatWindow from '../chat-window'; import { Pane } from '../ui'; +import Blankslate from './blankslate'; + const messages = defineMessages({ searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Search inbox' }, }); const ChatPane = () => { const intl = useIntl(); - const dispatch = useAppDispatch(); const debounce = useDebounce; const [value, setValue] = useState(); @@ -33,17 +29,10 @@ const ChatPane = () => { const { chat, setChat, isOpen, isSearching, setSearching, toggleChatPane } = useChatContext(); const { chatsQuery: { data: chats } } = useChats(debouncedValue); - // const chats: IChat[] = []; - - // Screens - // 1. Search + Chats - // 2. Search + empty - // 3. User search - const unreadCount = sumBy(chats, (chat) => chat.unread); - const hasSearchValue = Number(value?.length) > 0; + const hasSearchValue = Number(debouncedValue?.length) > 0; const handleClickChat = (chat: IChat) => { setChat(chat); @@ -88,28 +77,13 @@ const ChatPane = () => { fade /> ) : ( - no results + )} ); } else if (chats?.length === 0) { return ( - - - - No messages yet - - You can start a conversation with anyone that follows you. - - - -
- -
- - + setSearching(true)} /> ); } }; diff --git a/app/soapbox/features/chats/components/chat-search/blankslate.tsx b/app/soapbox/features/chats/components/chat-search/blankslate.tsx index 54ba3a4b8..21353dd2a 100644 --- a/app/soapbox/features/chats/components/chat-search/blankslate.tsx +++ b/app/soapbox/features/chats/components/chat-search/blankslate.tsx @@ -1,14 +1,26 @@ import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import { Stack, Text } from 'soapbox/components/ui'; -const Blankslate = () => ( - - Search followers - - You can start a conversation with anyone that follows you. - - -); +const messages = defineMessages({ + title: { id: 'chat_search.blankslate.title', defaultMessage: 'Search followers' }, + body: { id: 'chat_search.blankslate.body', defaultMessage: 'You can start a conversation with anyone that follows you.' }, +}); + +const Blankslate = () => { + const intl = useIntl(); + + return ( + + + {intl.formatMessage(messages.title)} + + + {intl.formatMessage(messages.body)} + + + ); +}; export default Blankslate; \ No newline at end of file diff --git a/app/soapbox/features/chats/components/chat-search/chat-search.tsx b/app/soapbox/features/chats/components/chat-search/chat-search.tsx index c84bf2d88..45efb1c3d 100644 --- a/app/soapbox/features/chats/components/chat-search/chat-search.tsx +++ b/app/soapbox/features/chats/components/chat-search/chat-search.tsx @@ -1,6 +1,7 @@ import { useMutation } from '@tanstack/react-query'; import { AxiosError } from 'axios'; import React, { useState } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import snackbar from 'soapbox/actions/snackbar'; import { HStack, Icon, Input, Stack, Text } from 'soapbox/components/ui'; @@ -17,9 +18,14 @@ import Blankslate from './blankslate'; import EmptyResultsBlankslate from './empty-results-blankslate'; import Results from './results'; +const messages = defineMessages({ + title: { id: 'chat_search.title', defaultMessage: 'Messages' }, +}); + const ChatSearch = () => { const debounce = useDebounce; const dispatch = useAppDispatch(); + const intl = useIntl(); const { isOpen, setChat, setSearching, toggleChatPane } = useChatContext(); const { getOrCreateChatByAccountId } = useChats(); @@ -82,7 +88,9 @@ const ChatSearch = () => { /> - Messages + + {intl.formatMessage(messages.title)} + } isOpen={isOpen} diff --git a/app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx b/app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx index 15daf9319..15daef888 100644 --- a/app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx +++ b/app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx @@ -1,14 +1,27 @@ import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import { Stack, Text } from 'soapbox/components/ui'; -const EmptyResultsBlankslate = () => ( - - No matches found - - Try searching for another name. - - -); +const messages = defineMessages({ + title: { id: 'chat_search.empty_results_blankslate.title', defaultMessage: 'No matches found' }, + body: { id: 'chat_search.empty_results_blankslate.body', defaultMessage: 'Try searching for another name.' }, +}); + +const EmptyResultsBlankslate = () => { + const intl = useIntl(); + + return ( + + + {intl.formatMessage(messages.title)} + + + + {intl.formatMessage(messages.body)} + + + ); +}; export default EmptyResultsBlankslate; \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index ff34b2da3..4d0c64930 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,9 +11,10 @@ module.exports = { xl: '1280px', }, extend: { - boxShadow: { + boxShadow: ({ theme }) => ({ '3xl': '0 25px 75px -15px rgba(0, 0, 0, 0.25)', - }, + 'inset-ring': `inset 0 0 0 2px ${theme('colors.accent-blue')}`, + }), fontSize: { base: '0.9375rem', },