refactor: pluralize

.changeset/serious-grapes-grab.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/units': minor
+---
+
+Add pluralization helper pluralize.

apps/hostd/components/Config/ConfigActions.tsx

@@ -4,14 +4,15 @@ import { AnnounceButton } from './AnnounceButton'
 import { useConfig } from '../../contexts/config'
 import { ConfigContextMenu } from './ConfigContextMenu'
 import { ConfigViewDropdownMenu } from './ConfigViewDropdownMenu'
+import { pluralize } from '@siafoundation/units'
 
 export function ConfigActions() {
   const { changeCount, revalidateAndResetForm, form, onSubmit } = useConfig()
   return (
     <div className="flex items-center gap-2">
       {!!changeCount && (
         <Text size="12" color="subtle">
-          {changeCount === 1 ? '1 change' : `${changeCount} changes`}
+          {pluralize(changeCount, 'change', 'changes')}
         </Text>
       )}
       <Button

apps/renterd/components/Config/ConfigActions.tsx

@@ -11,6 +11,7 @@ import { Reset16, Save16, Settings16 } from '@siafoundation/react-icons'
 import { useConfig } from '../../contexts/config'
 import { ConfigContextMenu } from './ConfigContextMenu'
 import { ConfigViewDropdownMenu } from './ConfigViewDropdownMenu'
+import { pluralize } from '@siafoundation/units'
 
 export function ConfigActions() {
   const {
@@ -26,7 +27,7 @@ export function ConfigActions() {
     <div className="flex items-center gap-2">
       {!!changeCount && (
         <Text size="12" color="subtle">
-          {changeCount === 1 ? '1 change' : `${changeCount} changes`}
+          {pluralize(changeCount, 'change', 'changes')}
         </Text>
       )}
       <Button

apps/renterd/components/Config/Recommendations.tsx

@@ -21,6 +21,7 @@ import { routes } from '../../config/routes'
 import useLocalStorageState from 'use-local-storage-state'
 import { useConfig } from '../../contexts/config'
 import { cx } from 'class-variance-authority'
+import { pluralize } from '@siafoundation/units'
 
 export function Recommendations() {
   const app = useApp()
@@ -177,11 +178,9 @@ export function Recommendations() {
             {usableHostsCurrent}/{hostTarget50}
           </Text>
           <Text size="16" weight="medium">
-            {recommendations.length === 0
-              ? 'No recommendations'
-              : recommendations.length === 1
-              ? '1 recommendation'
-              : `${recommendations.length} recommendations`}{' '}
+            {pluralize(recommendations.length, 'recommendation', {
+              zeroForm: 'No recommendations',
+            })}{' '}
             to match with more hosts
           </Text>
         </>

apps/walletd/components/WalletAddresses/AddressesFilterBar.tsx

@@ -1,15 +1,14 @@
 import { Text } from '@siafoundation/design-system'
 import { useAddresses } from '../../contexts/addresses'
+import { pluralize } from '@siafoundation/units'
 
 export function AddressesFiltersBar() {
   const { datasetCount } = useAddresses()
 
   return (
     <div className="flex gap-2 justify-end w-full">
       <Text size="12" font="mono">
-        {datasetCount === 1
-          ? '1 address'
-          : `${datasetCount.toLocaleString()} addresses`}
+        {pluralize(datasetCount, 'address', 'addresses')}
       </Text>
     </div>
   )

apps/walletd/components/WalletsList/WalletsFiltersBar.tsx

@@ -1,6 +1,7 @@
 import { Text } from '@siafoundation/design-system'
 import { Unlocked16 } from '@siafoundation/react-icons'
 import { useWallets } from '../../contexts/wallets'
+import { pluralize } from '@siafoundation/units'
 
 export function WalletsFiltersBar() {
   const { datasetCount, unlockedCount } = useWallets()
@@ -13,17 +14,13 @@ export function WalletsFiltersBar() {
             <Unlocked16 />
           </Text>
           <Text size="12" font="mono">
-            {unlockedCount === 1
-              ? '1 wallet unlocked'
-              : `${unlockedCount.toLocaleString()} wallets unlocked`}
+            {pluralize(unlockedCount, 'wallet')} unlocked
           </Text>
         </div>
       )}
       <div className="flex-1" />
       <Text size="12" font="mono">
-        {datasetCount === 1
-          ? '1 wallet'
-          : `${datasetCount.toLocaleString()} wallets`}
+        {pluralize(datasetCount, 'wallet')}
       </Text>
     </div>
   )

apps/walletd/dialogs/WalletAddressesAddDialog.tsx

@@ -14,7 +14,7 @@ import { useWalletAddressAdd } from '@siafoundation/walletd-react'
 import { useCallback } from 'react'
 import { useForm } from 'react-hook-form'
 import { useWallets } from '../contexts/wallets'
-import { isValidAddress } from '@siafoundation/units'
+import { isValidAddress, pluralize } from '@siafoundation/units'
 import { uniq } from '@technically/lodash'
 import {
   FieldRescan,
@@ -169,13 +169,9 @@ export function WalletAddressesAddDialog({
         }
         return
       }
-      if (result.total === 1) {
-        triggerSuccessToast({ title: 'Added 1 address' })
-      } else {
-        triggerSuccessToast({
-          title: `Added ${result.successful} addresses`,
-        })
-      }
+      triggerSuccessToast({
+        title: `Added ${pluralize(1, 'address', 'addresses')}`,
+      })
       triggerRescan(values)
       closeAndReset()
     },
@@ -203,11 +199,7 @@ export function WalletAddressesAddDialog({
             variant={shouldRescan ? 'red' : 'accent'}
             size="medium"
           >
-            {addressCount === 0
-              ? 'Add addresses'
-              : addressCount === 1
-              ? 'Add 1 address'
-              : `Add ${addressCount.toLocaleString()} addresses`}
+            Add {pluralize(addressCount, 'address', 'addresses')}
             {shouldRescan ? ' and rescan' : ''}
           </FormSubmitButton>
         </div>

apps/walletd/dialogs/WalletAddressesGenerateLedgerDialog/index.tsx

@@ -29,6 +29,7 @@ import {
   useTriggerRescan,
 } from '../FieldRescan'
 import { useSyncStatus } from '../../hooks/useSyncStatus'
+import { pluralize } from '@siafoundation/units'
 
 export type WalletAddressesGenerateLedgerDialogParams = {
   walletId: string
@@ -301,11 +302,9 @@ export function WalletAddressesGenerateLedgerDialog({
         return
       }
     }
-    if (count === 1) {
-      triggerSuccessToast({ title: 'Added 1 address' })
-    } else {
-      triggerSuccessToast({ title: `Added ${count} addresses` })
-    }
+    triggerSuccessToast({
+      title: `Added ${pluralize(count, 'address', 'addresses')}`,
+    })
     return
   }, [addressAdd, walletId, newGeneratedAddresses])
 
@@ -352,9 +351,11 @@ export function WalletAddressesGenerateLedgerDialog({
               variant={shouldRescan ? 'red' : 'accent'}
             >
               {newGeneratedAddresses.length > 0
-                ? `Save ${newGeneratedAddresses.length} ${
-                    newGeneratedAddresses.length === 1 ? 'address' : 'addresses'
-                  }${shouldRescan ? ' and rescan' : ''}`
+                ? `Save ${pluralize(
+                    newGeneratedAddresses.length,
+                    'address',
+                    'addresses'
+                  )}${shouldRescan ? ' and rescan' : ''}`
                 : 'Rescan'}
             </FormSubmitButton>
           )}
@@ -363,10 +364,9 @@ export function WalletAddressesGenerateLedgerDialog({
     >
       <div className="flex flex-col gap-4">
         <Text>
-          Wallet currently has {datasetCount}{' '}
-          {datasetCount === 1 ? 'address' : 'addresses'} with a highest index of{' '}
-          {lastIndex}. Select a start index and the number of sequential
-          addresses you would like to generate.
+          Wallet currently has {pluralize(datasetCount, 'address', 'addresses')}{' '}
+          with a highest index of {lastIndex}. Select a start index and the
+          number of sequential addresses you would like to generate.
         </Text>
         <div className="flex flex-col gap-1">
           <FieldLabel title="Device" name="ledgerConnected" />

apps/walletd/dialogs/WalletAddressesGenerateSeedDialog/index.tsx

@@ -24,6 +24,7 @@ import {
   useTriggerRescan,
 } from '../FieldRescan'
 import { useSyncStatus } from '../../hooks/useSyncStatus'
+import { pluralize } from '@siafoundation/units'
 
 export type WalletAddressesGenerateSeedDialogParams = {
   walletId: string
@@ -189,13 +190,9 @@ export function WalletAddressesGenerateSeedDialog({
           return
         }
       }
-      if (count === 1) {
-        triggerSuccessToast({ title: 'Generated 1 address' })
-      } else {
-        triggerSuccessToast({
-          title: `Generated ${count} addresses`,
-        })
-      }
+      triggerSuccessToast({
+        title: `Generated ${pluralize(count, 'address', 'addresses')}`,
+      })
 
       // if successfully generated an address, cache the seed
       cacheWalletMnemonic(walletId, mnemonic)

libs/units/src/index.ts

@@ -11,3 +11,4 @@ export * from './events'
 export * from './transactionValue'
 export * from './transactionTypes'
 export * from './entityTypes'
+export * from './pluralize'

libs/units/src/pluralize.ts

@@ -0,0 +1,27 @@
+type PluralizeOptions = {
+  plural?: string
+  zeroForm?: string
+}
+
+export function pluralize(
+  count: number,
+  word: string,
+  pluralFormOrOptions?: string | PluralizeOptions
+) {
+  const pluralForm =
+    typeof pluralFormOrOptions === 'string'
+      ? pluralFormOrOptions
+      : pluralFormOrOptions?.plural
+  const zeroForm =
+    typeof pluralFormOrOptions === 'string'
+      ? `0 ${pluralForm}`
+      : pluralFormOrOptions?.zeroForm
+
+  if (count === 0) {
+    return zeroForm
+  } else if (count === 1) {
+    return `1 ${word}`
+  } else {
+    return `${count.toLocaleString()} ${pluralForm}`
+  }
+}