refact: i18n count constants

bento-platform · Nov 14, 2024 · e10976b · e10976b
1 parent de6269b
commit e10976b
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 17 deletions.
diff --git a/src/js/components/Beacon/BeaconCommon/BeaconQueryFormUi.tsx b/src/js/components/Beacon/BeaconCommon/BeaconQueryFormUi.tsx
@@ -26,6 +26,7 @@ import {
   BUTTON_STYLE,
   CARD_STYLES,
 } from '@/constants/beaconConstants';
+import { T_PLURAL_COUNT } from '@/constants/i18n';
 
 const STARTER_FILTER = { index: 1, active: true };
 const VARIANTS_FORM_ERROR_MESSAGE =
@@ -233,7 +234,7 @@ const BeaconQueryFormUi = ({
             {hasVariants && (
               <Col xs={24} lg={12}>
                 <Card
-                  title={t('entities.variant', { count: 100 })} // false count – just need the highest form of plural
+                  title={t('entities.variant', T_PLURAL_COUNT)}
                   style={CARD_STYLE}
                   styles={CARD_STYLES}
                   extra={

diff --git a/src/js/components/Overview/Counts.tsx b/src/js/components/Overview/Counts.tsx
@@ -4,6 +4,7 @@ import { InfoCircleOutlined, TeamOutlined } from '@ant-design/icons';
 import { BiDna } from 'react-icons/bi';
 
 import ExpSvg from '../Util/ExpSvg';
+import { T_PLURAL_COUNT } from '@/constants/i18n';
 import { BOX_SHADOW, COUNTS_FILL } from '@/constants/overviewConstants';
 import { useAppSelector, useTranslationFn } from '@/hooks';
 
@@ -49,9 +50,7 @@ const Counts = () => {
       <Typography.Title level={3}>{t('Counts')}</Typography.Title>
       <Space wrap>
         {data.map(({ entity, help, icon, count }, i) => {
-          // false count – just need the highest form of plural
-          //  - see https://www.i18next.com/translation-function/plurals
-          const title = t(`entities.${entity}`, { count: 100 });
+          const title = t(`entities.${entity}`, T_PLURAL_COUNT);
           return (
             <Card key={i} style={{ ...styles.countCard, height: isFetchingData ? 138 : 114 }}>
               <Statistic

diff --git a/src/js/components/Overview/LastIngestion.tsx b/src/js/components/Overview/LastIngestion.tsx
@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useAppSelector } from '@/hooks';
 
 import type { LastIngestionDataTypeResponse } from '@/types/lastIngestionDataTypeResponse';
+import { T_PLURAL_COUNT } from '@/constants/i18n';
 import { BOX_SHADOW } from '@/constants/overviewConstants';
 
 const LastIngestionInfo: React.FC = () => {
@@ -47,9 +48,7 @@ const LastIngestionInfo: React.FC = () => {
             <Card style={BOX_SHADOW} key={dataType.id}>
               <Space direction="vertical">
                 <Typography.Text style={{ color: 'rgba(0,0,0,0.45)' }}>
-                  {/* false count – just need the highest form of plural
-                       - see https://www.i18next.com/translation-function/plurals */}
-                  {t(`entities.${dataType.id}`, { count: 100 })}
+                  {t(`entities.${dataType.id}`, T_PLURAL_COUNT)}
                 </Typography.Text>
                 <Typography.Text>
                   <CalendarOutlined />{' '}

diff --git a/src/js/components/Search/SearchResultsCounts.tsx b/src/js/components/Search/SearchResultsCounts.tsx
@@ -3,6 +3,7 @@ import { Skeleton, Space, Statistic } from 'antd';
 import { TeamOutlined } from '@ant-design/icons';
 import { BiDna } from 'react-icons/bi';
 
+import { T_PLURAL_COUNT } from '@/constants/i18n';
 import { COUNTS_FILL } from '@/constants/overviewConstants';
 import { NO_RESULTS_DASHES } from '@/constants/searchConstants';
 import ExpSvg from '@/components/Util/ExpSvg';
@@ -58,7 +59,7 @@ const SearchResultsCounts = ({
             ].join(' ')}
           >
             <Statistic
-              title={t('entities.individual', { count: 100 })} // false count – just need the highest form of plural
+              title={t('entities.individual', T_PLURAL_COUNT)}
               value={
                 hasInsufficientData
                   ? t(message ?? '')
@@ -71,13 +72,13 @@ const SearchResultsCounts = ({
             />
           </div>
           <Statistic
-            title={t('entities.biosample', { count: 100 })} // false count – just need the highest form of plural
+            title={t('entities.biosample', T_PLURAL_COUNT)}
             value={hasInsufficientData || (isBeaconNetwork && !biosampleCount) ? NO_RESULTS_DASHES : biosampleCount}
             valueStyle={STAT_STYLE}
             prefix={<BiDna />}
           />
           <Statistic
-            title={t('entities.experiment', { count: 100 })} // false count – just need the highest form of plural
+            title={t('entities.experiment', T_PLURAL_COUNT)}
             value={hasInsufficientData || (isBeaconNetwork && !experimentCount) ? NO_RESULTS_DASHES : experimentCount}
             valueStyle={STAT_STYLE}
             prefix={<ExpSvg />}

diff --git a/src/js/components/Search/SearchResultsPane.tsx b/src/js/components/Search/SearchResultsPane.tsx
@@ -4,6 +4,7 @@ import { LeftOutlined } from '@ant-design/icons';
 import { PieChart } from 'bento-charts';
 
 import { PORTAL_URL } from '@/config';
+import { T_PLURAL_COUNT, T_SINGULAR_COUNT } from '@/constants/i18n';
 import { BOX_SHADOW, PIE_CHART_HEIGHT } from '@/constants/overviewConstants';
 import { useTranslationFn } from '@/hooks';
 import type { DiscoveryResults } from '@/types/data';
@@ -33,7 +34,7 @@ const SearchResultsPane = ({
     () => [
       {
         dataIndex: 'id',
-        title: t('entities.individual', { count: 1 }),
+        title: t('entities.individual', T_SINGULAR_COUNT),
         render: (id: string) => (
           <a href={`${PORTAL_URL}/data/explorer/individuals/${id}`} target="_blank" rel="noreferrer">
             {id}
@@ -85,9 +86,7 @@ const SearchResultsPane = ({
             <>
               <Col xs={24} lg={10}>
                 <Typography.Title level={5} style={{ marginTop: 0 }}>
-                  {/* false count – just need the highest form of plural
-                       - see https://www.i18next.com/translation-function/plurals */}
-                  {t('entities.biosample', { count: 100 })}
+                  {t('entities.biosample', T_PLURAL_COUNT)}
                 </Typography.Title>
                 {!hasInsufficientData && biosampleChartData.length ? (
                   <PieChart data={biosampleChartData} height={PIE_CHART_HEIGHT} sort={true} dataMap={translateMap} />
@@ -97,9 +96,7 @@ const SearchResultsPane = ({
               </Col>
               <Col xs={24} lg={10}>
                 <Typography.Title level={5} style={{ marginTop: 0 }}>
-                  {/* false count – just need the highest form of plural
-                       - see https://www.i18next.com/translation-function/plurals */}
-                  {t('entities.experiment', { count: 100 })}
+                  {t('entities.experiment', T_PLURAL_COUNT)}
                 </Typography.Title>
                 {!hasInsufficientData && experimentChartData.length ? (
                   <PieChart data={experimentChartData} height={PIE_CHART_HEIGHT} sort={true} dataMap={translateMap} />

diff --git a/src/js/constants/i18n.ts b/src/js/constants/i18n.ts
@@ -0,0 +1,4 @@
+// false count – just need the highest form of plural
+//  - see https://www.i18next.com/translation-function/plurals
+export const T_PLURAL_COUNT = { count: 100 };
+export const T_SINGULAR_COUNT = { count: 1 };