chore: migrate plurals to lingui react macro

apps/web/src/components/Composer/Actions/PollSettings/PollEditor.tsx

@@ -1,6 +1,6 @@
 import { ClockIcon, PlusIcon, XIcon } from '@heroicons/react/outline';
 import { MenuAlt2Icon, XCircleIcon } from '@heroicons/react/solid';
-import { plural, t, Trans } from '@lingui/macro';
+import { Plural, t, Trans } from '@lingui/macro';
 import type { FC } from 'react';
 import { useState } from 'react';
 import { usePublicationStore } from 'src/store/publication';
@@ -31,11 +31,12 @@ const PollEditor: FC = () => {
             outline
           >
             {pollConfig.length}{' '}
-            {plural(pollConfig.length, {
-              zero: 'day',
-              one: 'day',
-              other: 'days'
-            })}
+            <Plural
+              value={pollConfig.length}
+              zero="day"
+              one="day"
+              other="days"
+            />
           </Button>
           <Modal
             title={t`Poll length`}

apps/web/src/components/Home/Trending.tsx

@@ -1,7 +1,7 @@
 import TrendingTagShimmer from '@components/Shared/Shimmer/TrendingTagShimmer';
 import { TrendingUpIcon } from '@heroicons/react/solid';
 import { Mixpanel } from '@lib/mixpanel';
-import { plural, t, Trans } from '@lingui/macro';
+import { Plural, t, Trans } from '@lingui/macro';
 import type { TagResult } from 'lens';
 import { TagSortCriteria, useTrendingQuery } from 'lens';
 import nFormatter from 'lib/nFormatter';
@@ -61,11 +61,12 @@ const Trending: FC = () => {
                 <div className="font-bold">{tag?.tag}</div>
                 <div className="lt-text-gray-500 text-[12px]">
                   {nFormatter(tag?.total)}{' '}
-                  {plural(tag?.total, {
-                    zero: 'Publication',
-                    one: 'Publication',
-                    other: 'Publications'
-                  })}
+                  <Plural
+                    value={tag?.total}
+                    zero="Publication"
+                    one="Publication"
+                    other="Publications"
+                  />
                 </div>
               </Link>
             </div>

apps/web/src/components/Profile/Followerings.tsx

@@ -1,5 +1,5 @@
 import { UsersIcon } from '@heroicons/react/outline';
-import { plural, t } from '@lingui/macro';
+import { Plural, t } from '@lingui/macro';
 import type { Profile } from 'lens';
 import humanize from 'lib/humanize';
 import type { FC } from 'react';
@@ -29,11 +29,12 @@ const Followerings: FC<FolloweringsProps> = ({ profile }) => {
           {humanize(profile?.stats?.totalFollowing)}
         </div>
         <div className="lt-text-gray-500">
-          {plural(profile?.stats?.totalFollowers, {
-            zero: 'Following',
-            one: 'Following',
-            other: 'Following'
-          })}
+          <Plural
+            value={profile?.stats?.totalFollowing}
+            zero="Following"
+            one="Following"
+            other="Following"
+          />
         </div>
       </button>
       <button
@@ -46,11 +47,12 @@ const Followerings: FC<FolloweringsProps> = ({ profile }) => {
           {humanize(profile?.stats?.totalFollowers)}
         </div>
         <div className="lt-text-gray-500">
-          {plural(profile?.stats?.totalFollowers, {
-            zero: 'Follower',
-            one: 'Follower',
-            other: 'Followers'
-          })}
+          <Plural
+            value={profile?.stats?.totalFollowers}
+            zero="Follower"
+            one="Follower"
+            other="Followers"
+          />
         </div>
       </button>
       <Modal

apps/web/src/components/Publication/Actions/Collect/CollectModule.tsx

@@ -18,7 +18,7 @@ import errorToast from '@lib/errorToast';
 import { formatTime } from '@lib/formatTime';
 import getCoingeckoPrice from '@lib/getCoingeckoPrice';
 import { Mixpanel } from '@lib/mixpanel';
-import { plural, t, Trans } from '@lingui/macro';
+import { Plural, t, Trans } from '@lingui/macro';
 import { useQuery } from '@tanstack/react-query';
 import { LensHub } from 'abis';
 import { LENSHUB_PROXY, POLYGONSCAN_URL } from 'data/constants';
@@ -380,11 +380,12 @@ const CollectModule: FC<CollectModuleProps> = ({
                 onClick={() => setShowCollectorsModal(!showCollectorsModal)}
               >
                 {humanize(count)}{' '}
-                {plural(count, {
-                  zero: 'collector',
-                  one: 'collector',
-                  other: 'collectors'
-                })}
+                <Plural
+                  value={count}
+                  zero="collector"
+                  one="collector"
+                  other="collectors"
+                />
               </button>
               <Modal
                 title={t`Collected by`}

apps/web/src/components/Publication/PublicationStats.tsx

@@ -6,7 +6,7 @@ import {
   HeartIcon,
   SwitchHorizontalIcon
 } from '@heroicons/react/outline';
-import { plural, t } from '@lingui/macro';
+import { Plural, t } from '@lingui/macro';
 import type { Publication } from 'lens';
 import nFormatter from 'lib/nFormatter';
 import type { FC } from 'react';
@@ -47,11 +47,12 @@ const PublicationStats: FC<PublicationStatsProps> = ({ publication }) => {
             <b className="text-black dark:text-white">
               {nFormatter(commentsCount)}
             </b>{' '}
-            {plural(commentsCount, {
-              zero: 'Comment',
-              one: 'Comment',
-              other: 'Comments'
-            })}
+            <Plural
+              value={commentsCount}
+              zero="Comment"
+              one="Comment"
+              other="Comments"
+            />
           </span>
           <button
             type="button"
@@ -61,11 +62,12 @@ const PublicationStats: FC<PublicationStatsProps> = ({ publication }) => {
             <b className="text-black dark:text-white">
               {nFormatter(mirrorCount)}
             </b>{' '}
-            {plural(mirrorCount, {
-              zero: 'Mirror',
-              one: 'Mirror',
-              other: 'Mirrors'
-            })}
+            <Plural
+              value={mirrorCount}
+              zero="Mirror"
+              one="Mirror"
+              other="Mirrors"
+            />
           </button>
           <Modal
             title={t`Mirrored by`}
@@ -87,11 +89,12 @@ const PublicationStats: FC<PublicationStatsProps> = ({ publication }) => {
             <b className="text-black dark:text-white">
               {nFormatter(reactionCount)}
             </b>{' '}
-            {plural(reactionCount, {
-              zero: 'Like',
-              one: 'Like',
-              other: 'Likes'
-            })}
+            <Plural
+              value={reactionCount}
+              zero="Like"
+              one="Like"
+              other="Likes"
+            />
           </button>
           <Modal
             title={t`Liked by`}
@@ -113,11 +116,12 @@ const PublicationStats: FC<PublicationStatsProps> = ({ publication }) => {
             <b className="text-black dark:text-white">
               {nFormatter(collectCount)}
             </b>{' '}
-            {plural(collectCount, {
-              zero: 'Collect',
-              one: 'Collect',
-              other: 'Collects'
-            })}
+            <Plural
+              value={collectCount}
+              zero="Collect"
+              one="Collect"
+              other="Collects"
+            />
           </button>
           <Modal
             title={t`Collected by`}

apps/web/src/components/Shared/Snapshot/Choices.tsx

@@ -2,7 +2,7 @@ import { CheckCircleIcon as CheckCircleIconOutline } from '@heroicons/react/outl
 import { CheckCircleIcon, MenuAlt2Icon } from '@heroicons/react/solid';
 import { getTimetoNow } from '@lib/formatTime';
 import { Mixpanel } from '@lib/mixpanel';
-import { plural, t, Trans } from '@lingui/macro';
+import { Plural, t, Trans } from '@lingui/macro';
 import type { Proposal, Vote } from '@workers/snapshot-relay';
 import axios from 'axios';
 import clsx from 'clsx';
@@ -189,11 +189,12 @@ const Choices: FC<ChoicesProps> = ({
               <span>·</span>
               <span>
                 {humanize(scores_total ?? 0)}{' '}
-                {plural(scores_total ?? 0, {
-                  zero: 'Vote',
-                  one: 'Vote',
-                  other: 'Votes'
-                })}
+                <Plural
+                  value={scores_total ?? 0}
+                  zero="Vote"
+                  one="Vote"
+                  other="Votes"
+                />
               </span>
               {state === 'active' && (
                 <>

apps/web/src/components/Shared/UserPreview.tsx

@@ -1,5 +1,5 @@
 import { BadgeCheckIcon } from '@heroicons/react/solid';
-import { plural } from '@lingui/macro';
+import { Plural } from '@lingui/macro';
 import Tippy from '@tippyjs/react';
 import clsx from 'clsx';
 import type { Profile } from 'lens';
@@ -123,23 +123,25 @@ const UserPreview: FC<UserPreviewProps> = ({
               {nFormatter(lazyProfile?.stats?.totalFollowing)}
             </div>
             <div className="lt-text-gray-500 text-sm">
-              {plural(lazyProfile?.stats?.totalFollowers, {
-                zero: 'Following',
-                one: 'Following',
-                other: 'Following'
-              })}
+              <Plural
+                value={lazyProfile?.stats?.totalFollowing}
+                zero="Following"
+                one="Following"
+                other="Following"
+              />
             </div>
           </div>
           <div className="text-md flex items-center space-x-1">
             <div className="text-base">
               {nFormatter(lazyProfile?.stats?.totalFollowers)}
             </div>
             <div className="lt-text-gray-500 text-sm">
-              {plural(lazyProfile?.stats?.totalFollowers, {
-                zero: 'Follower',
-                one: 'Follower',
-                other: 'Followers'
-              })}
+              <Plural
+                value={lazyProfile?.stats?.totalFollowers}
+                zero="Follower"
+                one="Follower"
+                other="Followers"
+              />
             </div>
           </div>
         </div>

apps/web/src/locales/fr/messages.po

@@ -2879,4 +2879,3 @@ msgstr ""
 #: src/pages/500.tsx
 msgid "We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, try refreshing."
 msgstr ""
-

apps/web/src/locales/ru/messages.po

@@ -2879,4 +2879,3 @@ msgstr "Похоже, что-то пошло не так!"
 #: src/pages/500.tsx
 msgid "We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, try refreshing."
 msgstr "Мы автоматически отслеживаем эти ошибки, но если проблема не устранена, не стесняйтесь обращаться к нам. А пока попробуйте обновить страницу."
-

apps/web/src/locales/ta/messages.po

@@ -2879,4 +2879,3 @@ msgstr "ஏதோ தவறாகிவிட்டது போல் தெர
 #: src/pages/500.tsx
 msgid "We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, try refreshing."
 msgstr "இந்தப் பிழைகளைத் தானாகக் கண்காணிக்கிறோம், ஆனால் சிக்கல் தொடர்ந்தால், எங்களைத் தொடர்பு கொள்ளலாம். இதற்கிடையில், புதுப்பித்து முயற்சிக்கவும்."
-

apps/web/src/locales/zh/messages.po

@@ -2879,4 +2879,3 @@ msgstr "系统似乎出现了故障！"
 #: src/pages/500.tsx
 msgid "We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, try refreshing."
 msgstr "我们会自动追踪这些错误，但如果问题仍然存在，请随时与我们联系。 与此同时，您可以尝试刷新页面。"
-