Updated 0 board to 0 boards (singular vs plural) (#1210)

* Updated 0 board to 0 boards (singular vs plural * Made text translatable * Used better i18n for singular-plural * Updated tests * Minor fixes * done * Lint fix * Updated tests
mattermost-community · Sep 22, 2021 · 4ca8c69 · 4ca8c69
1 parent c27a270
commit 4ca8c69
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 23 deletions.
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
@@ -51,6 +51,7 @@
   "GalleryCard.delete": "Delete",
   "GalleryCard.duplicate": "Duplicate",
   "GroupBy.ungroup": "Ungroup",
+  "General.BoardCount": "{count, plural, one {# Board} other {# Boards}}",
   "KanbanCard.delete": "Delete",
   "KanbanCard.duplicate": "Duplicate",
   "KanbanCard.untitled": "Untitled",

diff --git a/webapp/src/components/workspaceSwitcher/__snapshots__/workspaceOptions.test.tsx.snap b/webapp/src/components/workspaceSwitcher/__snapshots__/workspaceOptions.test.tsx.snap
@@ -94,9 +94,7 @@ exports[`components/workspaceSwitcher/WorkspaceOptions 2 more workspaces availab
           <div
             class="boardCount"
           >
-            2
-             
-            Boards
+            2 Boards
           </div>
         </div>
         <div
@@ -112,9 +110,7 @@ exports[`components/workspaceSwitcher/WorkspaceOptions 2 more workspaces availab
           <div
             class="boardCount"
           >
-            3
-             
-            Boards
+            3 Boards
           </div>
         </div>
       </div>

diff --git a/webapp/src/components/workspaceSwitcher/__snapshots__/workspaceSwitcher.test.tsx.snap b/webapp/src/components/workspaceSwitcher/__snapshots__/workspaceSwitcher.test.tsx.snap
@@ -94,9 +94,7 @@ exports[`components/workspaceSwitcher/WorkspaceSwitcher 2 more workspaces availa
           <div
             class="boardCount"
           >
-            2
-             
-            Boards
+            2 Boards
           </div>
         </div>
         <div
@@ -112,9 +110,7 @@ exports[`components/workspaceSwitcher/WorkspaceSwitcher 2 more workspaces availa
           <div
             class="boardCount"
           >
-            3
-             
-            Boards
+            3 Boards
           </div>
         </div>
       </div>

diff --git a/webapp/src/components/workspaceSwitcher/workspaceOptions.tsx b/webapp/src/components/workspaceSwitcher/workspaceOptions.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 
 import Select from 'react-select'
-import {useIntl} from 'react-intl'
+import {FormattedMessage, useIntl} from 'react-intl'
 
 import {UserWorkspace} from '../../user'
 import {useAppSelector} from '../../store/hooks'
@@ -102,7 +102,11 @@ const Option = (props: any): JSX.Element => {
             {
                 props.data.value !== DashboardOption.value &&
                 <div className='boardCount'>
-                    {props.data.boardCount} {props.data.boardCount > 1 ? 'Boards' : 'Board'}
+                    <FormattedMessage
+                        values={{count: props.data.boardCount}}
+                        id='General.BoardCount'
+                        defaultMessage='{count, plural, one {# Board} other {# Boards}}'
+                    />
                 </div>
             }
 

diff --git a/webapp/src/pages/dashboard/__snapshots__/centerContent.test.tsx.snap b/webapp/src/pages/dashboard/__snapshots__/centerContent.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`pages/dashboard/CenterContent base case 1`] = `
           <div
             class="small"
           >
-            1 board
+            1 Board
           </div>
         </div>
         <div
@@ -61,7 +61,7 @@ exports[`pages/dashboard/CenterContent base case 1`] = `
           <div
             class="small"
           >
-            2 boards
+            2 Boards
           </div>
         </div>
         <div
@@ -75,7 +75,7 @@ exports[`pages/dashboard/CenterContent base case 1`] = `
           <div
             class="small"
           >
-            0 board
+            0 Boards
           </div>
         </div>
       </div>
@@ -211,7 +211,7 @@ exports[`pages/dashboard/CenterContent search filter 1`] = `
           <div
             class="small"
           >
-            1 board
+            1 Board
           </div>
         </div>
       </div>

diff --git a/webapp/src/pages/dashboard/__snapshots__/dashboardPage.test.tsx.snap b/webapp/src/pages/dashboard/__snapshots__/dashboardPage.test.tsx.snap
@@ -361,7 +361,7 @@ exports[`pages/dashboard/DashboardPage base case 1`] = `
             <div
               class="small"
             >
-              1 board
+              1 Board
             </div>
           </div>
           <div
@@ -375,7 +375,7 @@ exports[`pages/dashboard/DashboardPage base case 1`] = `
             <div
               class="small"
             >
-              2 boards
+              2 Boards
             </div>
           </div>
           <div
@@ -389,7 +389,7 @@ exports[`pages/dashboard/DashboardPage base case 1`] = `
             <div
               class="small"
             >
-              0 board
+              0 Boards
             </div>
           </div>
         </div>

diff --git a/webapp/src/pages/dashboard/centerContent.tsx b/webapp/src/pages/dashboard/centerContent.tsx
@@ -4,7 +4,7 @@ import React, {useEffect, useState} from 'react'
 
 import {useHistory} from 'react-router-dom'
 
-import {useIntl} from 'react-intl'
+import {FormattedMessage, useIntl} from 'react-intl'
 
 import SearchIllustration from '../../svg/search-illustration'
 
@@ -87,7 +87,11 @@ const DashboardCenterContent = (): JSX.Element => {
                                     {workspace.title}
                                 </div>
                                 <div className='small'>
-                                    {`${workspace.boardCount} board${workspace.boardCount > 1 ? 's' : ''}`}
+                                    <FormattedMessage
+                                        values={{count: workspace.boardCount}}
+                                        id='General.BoardCount'
+                                        defaultMessage='{count, plural, one {# Board} other {# Boards}}'
+                                    />
                                 </div>
                             </div>
                         ))