Refs #283012 - wip trasnlations

searchlib/components/Facets/Connected/SectionTabs.jsx

@@ -5,6 +5,8 @@
 import React from 'react';
 import { Menu, Ref } from 'semantic-ui-react'; // Dropdown
 import { Icon } from '@eeacms/search/components';
+import { defineMessages } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 import {
   // useWindowDimensions,
@@ -14,6 +16,13 @@ import {
 
 const cmp = (a, b) => (a > b ? 1 : a === b ? 0 : a < b ? -1 : 0);
 
+const messages = defineMessages({
+  all: {
+    id: 'All',
+    defaultMessage: 'All',
+  },
+});
+
 const SectionTabs = (props) => {
   // const { width } = useWindowDimensions();
   const searchContext = useSearchContext();
@@ -62,6 +71,7 @@ const SectionTabs = (props) => {
   sections.sort((s1, s2) =>
     cmp(sectionOrder.indexOf(s1.value), sectionOrder.indexOf(s2.value)),
   );
+  const intl = useIntl();
 
   return (
     <div>
@@ -86,7 +96,7 @@ const SectionTabs = (props) => {
               }
             }}
           >
-            {`All (${allCount})`}
+            {`${intl.formatMessage(messages.all)} (${allCount})`}
           </Menu.Item>
           {sections.map(({ value, count }) => (
             <Menu.Item

searchlib/components/Facets/SidebarFacetsList.jsx

@@ -6,6 +6,19 @@ import {
   useWindowDimensions,
 } from '@eeacms/search/lib/hocs';
 import FacetResolver from './FacetResolver';
+import { defineMessages } from 'react-intl';
+import { useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  clearAll: {
+    id: 'clear all',
+    defaultMessage: 'clear all',
+  },
+  filters: {
+    id: 'Filters',
+    defaultMessage: 'Filters',
+  },
+});
 
 export default function SidebarFacetsList(props) {
   const {
@@ -23,7 +36,7 @@ export default function SidebarFacetsList(props) {
 
   useOutsideClick(nodeRef, onClose);
   const searchContext = useSearchContext();
-
+  const intl = useIntl();
   return (
     <div ref={nodeRef}>
       <Sidebar
@@ -36,11 +49,11 @@ export default function SidebarFacetsList(props) {
         <div className="sidebar-wrapper">
           <div className="sidebar-content">
             <div className="sidebar-header">
-              <h3>Filters</h3>
+              <h3>{intl.formatMessage(messages.filters)}</h3>
               <Button
                 basic
                 className="clear-btn"
-                content="clear all"
+                content={intl.formatMessage(messages.clearAll)}
                 onClick={() => {
                   searchContext.resetFilters();
                 }}

searchlib/components/Facets/Unconnected/MultiTermFacet.jsx

@@ -6,6 +6,19 @@ import { markSelectedFacetValuesFromFilters } from '@eeacms/search/lib/search/he
 import { useSort } from '@eeacms/search/lib/hocs';
 import { useAppConfig } from '@eeacms/search/lib/hocs';
 // import MultiTypeFacetWrapper from './MultiTypeFacetWrapper';
+import { defineMessages } from 'react-intl';
+import { useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  matchAny: {
+    id: 'Match any',
+    defaultMessage: 'Match any',
+  },
+  matchAll: {
+    id: 'Match all',
+    defaultMessage: 'Match all',
+  },
+});
 
 function getFilterValueDisplay(filterValue) {
   if (filterValue === undefined || filterValue === null) return '';
@@ -95,9 +108,18 @@ const MultiTermFacetViewComponent = (props) => {
   } = props;
   const prevFilterType = React.useRef(filterType);
 
+  const intl = useIntl();
   const filterTypes = [
-    { key: 2, text: 'Match any', value: 'any' },
-    { key: 1, text: 'Match all', value: 'all' },
+    {
+      key: 2,
+      text: intl.formatMessage(messages.matchAny),
+      value: 'any',
+    },
+    {
+      key: 1,
+      text: intl.formatMessage(messages.matchAll),
+      value: 'all',
+    },
   ];
 
   // const sortedOptions = sorted(options, sortOn, sortOrder);
@@ -113,11 +135,7 @@ const MultiTermFacetViewComponent = (props) => {
   };
 
   defaultSortOrder[configSortOn] = configSortOrder;
-  const {
-    sortedValues: sortedOptions,
-    toggleSort,
-    sorting,
-  } = useSort(
+  const { sortedValues: sortedOptions, toggleSort, sorting } = useSort(
     options,
     ['value', 'count'],
     {

searchlib/components/Facets/lib/withMultiTypeFilter.jsx

@@ -1,18 +1,32 @@
 import React from 'react';
 import { useAppConfig } from '@eeacms/search/lib/hocs';
+import { defineMessages } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 /**
  * A hoc that grants multi-type faceting (all/any)
  *
  * TODO: is this actually used?
  */
 
+const messages = defineMessages({
+  matchAny: {
+    id: 'Match any',
+    defaultMessage: 'Match any',
+  },
+  matchAll: {
+    id: 'Match all',
+    defaultMessage: 'Match all',
+  },
+});
+
 const withMultiTypeFilter = (options = {}) => {
   const { defaultType = 'any' } = options;
+  const intl = useIntl();
 
   const filterTypes = [
-    { key: 2, text: 'Match any', value: 'any' },
-    { key: 1, text: 'Match all', value: 'all' },
+    { key: 2, text: intl.formatMessage(messages.matchAny), value: 'any' },
+    { key: 1, text: intl.formatMessage(messages.matchAll), value: 'all' },
   ];
 
   const decorator = (WrappedComponent) => {

searchlib/components/SearchView/FilterAsideContentView.jsx

@@ -32,7 +32,7 @@ const messages = defineMessages({
     id: 'Title z-a',
     defaultMessage: 'Title z-a',
   },
-  Newest1: {
+  Newest: {
     id: 'Newest',
     defaultMessage: 'Newest',
   },

src/SearchBlock/templates/schema.js

@@ -139,10 +139,11 @@ export const searchResultsSchemaEnhancer = ({ schema, formData }) => {
 
   if (appConfig) {
     const { resultViews } = appConfig;
+    // debugger;
 
     const availableFacets = appConfig.facets?.map(({ field, label }) => [
       field,
-      label?.trim() ? label : field,
+      typeof label === 'object' ? label.id : label?.trim() ? label : field,
     ]);
 
     schema.properties.availableFacets.choices = availableFacets;