nicolium: cleanup

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/features/chats/components/chat-message-list.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { useIntl, defineMessages } from 'react-intl';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { type Components, Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
 
 import Avatar from '@/components/ui/avatar';
@@ -22,16 +22,6 @@ import type { Chat } from 'pl-api';
 
 const messages = defineMessages({
   today: { id: 'chats.dividers.today', defaultMessage: 'Today' },
-  blockedBy: { id: 'chat_message_list.blocked_by', 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';
@@ -219,7 +209,12 @@ const ChatMessageList: React.FC<IChatMessageList> = React.memo(({ chat }) => {
           />
           <Text align='center'>
             <>
-              <Text tag='span'>{intl.formatMessage(messages.blockedBy)}</Text>{' '}
+              <Text tag='span'>
+                <FormattedMessage
+                  id='chat_message_list.blocked_by'
+                  defaultMessage='You are blocked by'
+                />
+              </Text>{' '}
               <Text tag='span' theme='primary'>
                 @{chat.account.acct}
               </Text>
@@ -236,16 +231,25 @@ const ChatMessageList: React.FC<IChatMessageList> = React.memo(({ chat }) => {
         <Stack space={4}>
           <Stack space={1}>
             <Text size='lg' weight='bold' align='center'>
-              {intl.formatMessage(messages.networkFailureTitle)}
+              <FormattedMessage
+                id='chat_message_list.network_failure.title'
+                defaultMessage='Whoops!'
+              />
             </Text>
             <Text theme='muted' align='center'>
-              {intl.formatMessage(messages.networkFailureSubtitle)}
+              <FormattedMessage
+                id='chat_message_list.network_failure.subtitle'
+                defaultMessage='We encountered a network failure.'
+              />
             </Text>
           </Stack>
 
           <div className='mx-auto'>
             <Button theme='primary' onClick={() => refetch()}>
-              {intl.formatMessage(messages.networkFailureAction)}
+              <FormattedMessage
+                id='chat_message_list.network_failure.action'
+                defaultMessage='Try again'
+              />
             </Button>
           </div>
         </Stack>

packages/nicolium/src/features/chats/components/chat-search/blankslate.tsx

@@ -1,27 +1,21 @@
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 
-const messages = defineMessages({
-  title: { id: 'chat_search.blankslate.title', defaultMessage: 'Start a chat' },
-  body: { id: 'chat_search.blankslate.body', defaultMessage: 'Search for someone to chat with.' },
-});
-
-const Blankslate = () => {
-  const intl = useIntl();
-
-  return (
-    <Stack justifyContent='center' alignItems='center' space={2} className='mx-auto h-full w-2/3'>
-      <Text weight='bold' size='lg' align='center'>
-        {intl.formatMessage(messages.title)}
-      </Text>
-      <Text theme='muted' align='center'>
-        {intl.formatMessage(messages.body)}
-      </Text>
-    </Stack>
-  );
-};
+const Blankslate = () => (
+  <Stack justifyContent='center' alignItems='center' space={2} className='mx-auto h-full w-2/3'>
+    <Text weight='bold' size='lg' align='center'>
+      <FormattedMessage id='chat_search.blankslate.title' defaultMessage='Start a chat' />
+    </Text>
+    <Text theme='muted' align='center'>
+      <FormattedMessage
+        id='chat_search.blankslate.body'
+        defaultMessage='Search for someone to chat with.'
+      />
+    </Text>
+  </Stack>
+);
 
 export { Blankslate as default };

packages/nicolium/src/features/chats/components/chat-search/empty-results-blankslate.tsx

@@ -1,31 +1,25 @@
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 
-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 = () => (
+  <Stack justifyContent='center' alignItems='center' space={2} className='mx-auto h-full w-2/3'>
+    <Text weight='bold' size='lg' align='center' data-testid='no-results'>
+      <FormattedMessage
+        id='chat_search.empty_results_blankslate.title'
+        defaultMessage='No matches found'
+      />
+    </Text>
 
-const EmptyResultsBlankslate = () => {
-  const intl = useIntl();
-
-  return (
-    <Stack justifyContent='center' alignItems='center' space={2} className='mx-auto h-full w-2/3'>
-      <Text weight='bold' size='lg' align='center' data-testid='no-results'>
-        {intl.formatMessage(messages.title)}
-      </Text>
-
-      <Text theme='muted' align='center'>
-        {intl.formatMessage(messages.body)}
-      </Text>
-    </Stack>
-  );
-};
+    <Text theme='muted' align='center'>
+      <FormattedMessage
+        id='chat_search.empty_results_blankslate.body'
+        defaultMessage='Try searching for another name.'
+      />
+    </Text>
+  </Stack>
+);
 
 export { EmptyResultsBlankslate as default };

packages/nicolium/src/features/compose/components/polls/duration-selector.tsx

@@ -1,21 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import Select from '@/components/ui/select';
 
 const messages = defineMessages({
-  days: {
-    id: 'intervals.full.days',
-    defaultMessage: '{number, plural, one {# day} other {# days}}',
-  },
-  hours: {
-    id: 'intervals.full.hours',
-    defaultMessage: '{number, plural, one {# hour} other {# hours}}',
-  },
-  minutes: {
-    id: 'intervals.full.minutes',
-    defaultMessage: '{number, plural, one {# minute} other {# minutes}}',
-  },
   daysTitle: { id: 'compose_form.poll.duration.days', defaultMessage: 'Days' },
   hoursTitle: { id: 'compose_form.poll.duration.hours', defaultMessage: 'Hours' },
   minutesTitle: { id: 'compose_form.poll.duration.minutes', defaultMessage: 'Minutes' },
@@ -59,7 +47,11 @@ const DurationSelector = ({ onDurationChange, value }: IDurationSelector) => {
         >
           {[...Array(8).fill(undefined)].map((_, number) => (
             <option value={number} key={number}>
-              {intl.formatMessage(messages.days, { number })}
+              <FormattedMessage
+                id='intervals.full.days'
+                defaultMessage='{number, plural, one {# day} other {# days}}'
+                values={{ number }}
+              />
             </option>
           ))}
         </Select>
@@ -77,7 +69,11 @@ const DurationSelector = ({ onDurationChange, value }: IDurationSelector) => {
         >
           {[...Array(24).fill(undefined)].map((_, number) => (
             <option value={number} key={number}>
-              {intl.formatMessage(messages.hours, { number })}
+              <FormattedMessage
+                id='intervals.full.hours'
+                defaultMessage='{number, plural, one {# hour} other {# hours}}'
+                values={{ number }}
+              />
             </option>
           ))}
         </Select>
@@ -95,7 +91,11 @@ const DurationSelector = ({ onDurationChange, value }: IDurationSelector) => {
         >
           {[0, 15, 30, 45].map((number) => (
             <option value={number} key={number}>
-              {intl.formatMessage(messages.minutes, { number })}
+              <FormattedMessage
+                id='intervals.full.minutes'
+                defaultMessage='{number, plural, one {# minute} other {# minutes}}'
+                values={{ number }}
+              />
             </option>
           ))}
         </Select>

packages/nicolium/src/features/compose/components/polls/poll-form.tsx

@@ -21,21 +21,6 @@ const messages = defineMessages({
     id: 'compose_form.poll.option_placeholder',
     defaultMessage: 'Answer #{number}',
   },
-  pollDuration: { id: 'compose_form.poll.duration', defaultMessage: 'Poll duration' },
-  removePoll: { id: 'compose_form.poll.remove', defaultMessage: 'Remove poll' },
-  switchToMultiple: {
-    id: 'compose_form.poll.switch_to_multiple',
-    defaultMessage: 'Change poll to allow multiple answers',
-  },
-  switchToSingle: {
-    id: 'compose_form.poll.switch_to_single',
-    defaultMessage: 'Change poll to allow for a single answer',
-  },
-  multiSelect: { id: 'compose_form.poll.multiselect', defaultMessage: 'Multi-select' },
-  multiSelectDetail: {
-    id: 'compose_form.poll.multiselect_detail',
-    defaultMessage: 'Allow users to select multiple answers',
-  },
 });
 
 interface IOption {
@@ -137,7 +122,6 @@ interface IPollForm {
 
 const PollForm: React.FC<IPollForm> = ({ composeId }) => {
   const { updateCompose } = useComposeActions();
-  const intl = useIntl();
   const { configuration } = useInstance();
 
   const { poll, language, modifiedLanguage } = useCompose(composeId);
@@ -224,10 +208,15 @@ const PollForm: React.FC<IPollForm> = ({ composeId }) => {
       <label className='text-start'>
         <HStack alignItems='center' justifyContent='between'>
           <Stack>
-            <Text weight='medium'>{intl.formatMessage(messages.multiSelect)}</Text>
+            <Text weight='medium'>
+              <FormattedMessage id='compose_form.poll.multiselect' defaultMessage='Multi-select' />
+            </Text>
 
             <Text theme='muted' size='sm'>
-              {intl.formatMessage(messages.multiSelectDetail)}
+              <FormattedMessage
+                id='compose_form.poll.multiselect_detail'
+                defaultMessage='Allow users to select multiple answers'
+              />
             </Text>
           </Stack>
 
@@ -239,7 +228,9 @@ const PollForm: React.FC<IPollForm> = ({ composeId }) => {
 
       {/* Duration */}
       <Stack space={2}>
-        <Text weight='medium'>{intl.formatMessage(messages.pollDuration)}</Text>
+        <Text weight='medium'>
+          <FormattedMessage id='compose_form.poll.duration' defaultMessage='Poll duration' />
+        </Text>
 
         <DurationSelector
           onDurationChange={handleSelectDuration}
@@ -250,7 +241,7 @@ const PollForm: React.FC<IPollForm> = ({ composeId }) => {
       {/* Remove Poll */}
       <div className='text-center'>
         <button type='button' className='text-danger-500' onClick={onRemovePoll}>
-          {intl.formatMessage(messages.removePoll)}
+          <FormattedMessage id='compose_form.poll.remove' defaultMessage='Remove poll' />
         </button>
       </div>
     </div>