feat: add locales

IQSS · Dec 11, 2024 · 452c68d · 452c68d
1 parent 0bc201e
commit 452c68d
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/public/locales/en/collection.json b/public/locales/en/collection.json
@@ -31,5 +31,7 @@
     "question": "Are you sure you want to publish your collection? Once you do so it must remain published.",
     "error": "There was an error publishing your collection."
   },
-  "publishedAlert": "Your collection is now public."
+  "publishedAlert": "Your collection is now public.",
+  "addFacetFilter": "Add {{labelName}} facet filter",
+  "removeSelectedFacet": "Remove {{labelName}} facet filter"
 }
diff --git a/public/locales/en/shared.json b/public/locales/en/shared.json
@@ -4,6 +4,8 @@
   "add": "Add",
   "cancel": "Cancel",
   "continue": "Continue",
+  "more": "More...",
+  "less": "Less...",
   "pageNumberNotFound": {
     "heading": "Page Number Not Found",
     "message": "The page number you requested does not exist. Please try a different page number."

diff --git a/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx b/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx
@@ -44,9 +44,6 @@ interface CollectionItemsPanelProps {
  * Every time a load of items is triggered, the pagination info is updated and the URL is updated with the new query params so it can be shared and the user can navigate back and forward in the browser.
  */
 
-// TODO:ME - margin top scroll
-// TODO:ME - Add locales
-
 export const CollectionItemsPanel = ({
   collectionId,
   collectionRepository,

diff --git a/...ctions/collection/collection-items-panel/filter-panel/facets-filters/FacetFilterGroup.tsx b/...ctions/collection/collection-items-panel/filter-panel/facets-filters/FacetFilterGroup.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Button, Col, Row } from '@iqss/dataverse-design-system'
 import { X as CloseIcon } from 'react-bootstrap-icons'
 import { CollectionItemsFacet } from '@/collection/domain/models/CollectionItemSubset'
@@ -25,6 +26,9 @@ export const FacetFilterGroup = ({
   onFacetChange,
   isLoadingCollectionItems
 }: FacetFilterGroupProps) => {
+  const { t } = useTranslation('collection')
+  const { t: tShared } = useTranslation('shared')
+
   const [visibleCount, setVisibleCount] = useState(FACETS_PER_VIEW)
 
   const handleShowMore = () => {
@@ -63,7 +67,9 @@ export const FacetFilterGroup = ({
                 role="option"
                 aria-selected={isFacetLabelSelected}
                 aria-label={
-                  isFacetLabelSelected ? `Remove ${label.name} filter` : `Add ${label.name} filter`
+                  isFacetLabelSelected
+                    ? t('removeSelectedFacet', { labelName: label.name })
+                    : t('addFacetFilter', { labelName: label.name })
                 }
                 disabled={isLoadingCollectionItems}
                 variant="link"
@@ -85,7 +91,7 @@ export const FacetFilterGroup = ({
                 size="sm"
                 onClick={handleShowLess}
                 disabled={isLoadingCollectionItems}>
-                Less...
+                {tShared('less')}
               </Button>
             )}
           </Col>
@@ -96,7 +102,7 @@ export const FacetFilterGroup = ({
                 size="sm"
                 onClick={handleShowMore}
                 disabled={isLoadingCollectionItems}>
-                More...
+                {tShared('more')}
               </Button>
             )}
           </Col>

diff --git a/src/sections/collection/collection-items-panel/selected-facets/SelectedFacets.tsx b/src/sections/collection/collection-items-panel/selected-facets/SelectedFacets.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next'
 import { Button } from '@iqss/dataverse-design-system'
 import { X as CloseIcon } from 'react-bootstrap-icons'
 import { FilterQuery } from '@/collection/domain/models/GetCollectionItemsQueryParams'
@@ -14,6 +15,8 @@ export const SelectedFacets = ({
   onRemoveFacet,
   isLoadingCollectionItems
 }: SelectedFacetsProps) => {
+  const { t } = useTranslation('collection')
+
   return (
     <div className={styles['selected-facets-container']}>
       {selectedFilterQueries.map((filterQuery) => {
@@ -25,7 +28,7 @@ export const SelectedFacets = ({
             className={styles['selected-facet-btn']}
             onClick={() => onRemoveFacet(filterQuery)}
             disabled={isLoadingCollectionItems}
-            aria-label={`Remove ${labelName} query filter`}
+            aria-label={t('removeSelectedFacet', { labelName })}
             key={filterQuery}>
             {labelName} <CloseIcon size={22} />
           </Button>