[dataquery] Translate dataquery module

Makefile

@@ -97,6 +97,8 @@ locales:
 	npx i18next-conv -l hi -s modules/datadict/locale/hi/LC_MESSAGES/datadict.po -t modules/datadict/locale/hi/LC_MESSAGES/datadict.json
 	npx i18next-conv -l ja -s modules/datadict/locale/ja/LC_MESSAGES/datadict.po -t modules/datadict/locale/ja/LC_MESSAGES/datadict.json
 	msgfmt -o modules/dataquery/locale/ja/LC_MESSAGES/dataquery.mo modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
+	msgfmt -o modules/dataquery/locale/hi/LC_MESSAGES/dataquery.mo modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
+	npx i18next-conv -l hi -s modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po -t modules/dataquery/locale/hi/LC_MESSAGES/dataquery.json
 	msgfmt -o modules/data_release/locale/ja/LC_MESSAGES/data_release.mo modules/data_release/locale/ja/LC_MESSAGES/data_release.po
 	npx i18next-conv -l ja -s modules/data_release/locale/ja/LC_MESSAGES/data_release.po -t modules/data_release/locale/ja/LC_MESSAGES/data_release.json
 	msgfmt -o modules/data_release/locale/hi/LC_MESSAGES/data_release.mo modules/data_release/locale/hi/LC_MESSAGES/data_release.po
@@ -153,8 +155,9 @@ data_release: modules/data_release/locale/hi/LC_MESSAGES/data_release.mo modules
 instrument_manager: modules/instrument_manager/locale/ja/LC_MESSAGES/instrument_manager.mo
 	target=instrument_manager npm run compile
 
-dataquery: modules/dataquery/locale/ja/LC_MESSAGES/dataquery.mo
-	msgfmt -o modules/dataquery/locale/ja/LC_MESSAGES/dataquery.mo modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
+dataquery:
+	msgfmt -o modules/dataquery/locale/hi/LC_MESSAGES/dataquery.mo modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
+	npx i18next-conv -l hi -s modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po -t modules/dataquery/locale/hi/LC_MESSAGES/dataquery.json
 	target=dataquery npm run compile
 
 login: modules/login/locale/ja/LC_MESSAGES/login.mo

jsx/I18nSetup.d.ts

@@ -0,0 +1,4 @@
+declare module 'I18nSetup' {
+  import i18n from 'i18next';
+  export default i18n;
+}

modules/dataquery/jsx/components/filterableselectgroup.tsx

@@ -1,4 +1,5 @@
 import Select, {SingleValue} from 'react-select';
+import {useTranslation} from 'react-i18next';
 
 type SelectOption = {
     label: string,
@@ -27,8 +28,9 @@ function FilterableSelectGroup(props: {
     groups: object,
     mapGroupName?: (module: string) => string,
 }) {
+  const {t} = useTranslation('dataquery');
   const groups: SelectGroup[] = [];
-  const placeholder = props.placeholder || 'Select a category';
+  const placeholder = props.placeholder || t('Select a category');
   for (const [module, subcategories]
     of Object.entries(props.groups)) {
     const options: SelectOption[] = [];

modules/dataquery/jsx/definefields.tsx

@@ -6,7 +6,7 @@ import {CheckboxElement} from 'jsx/Form';
 import {FullDictionary, FieldDictionary, DictionaryCategory} from './types';
 import {CategoriesAPIReturn} from './hooks/usedatadictionary';
 import {APIQueryField, VisitOption} from './types';
-
+import {useTranslation} from 'react-i18next';
 
 /**
  * Displays a single field to be selected for querying
@@ -46,6 +46,7 @@ function QueryField(props: {
     ) => void,
     defaultVisits: string[],
 }) {
+  const {t} = useTranslation('dataquery');
   const item=props.item;
   const className = props.selected ?
     'list-group-item active' :
@@ -93,14 +94,14 @@ function QueryField(props: {
 
     if (props.selected) {
       visits = <div onClick={(e) => e.stopPropagation()}>
-        <h4>Visits</h4>
+        <h4>{t('Visits')}</h4>
         <Select options={selectOptions.map((visit: string): VisitOption => {
           return {value: visit, label: visit};
         })
         }
         isMulti
         onChange={selected}
-        placeholder='Select Visits'
+        placeholder={t('Select Visits', {ns: 'dataquery'})}
         value={selectedVisits.map( (visit: string): VisitOption => {
           return {value: visit, label: visit};
         })
@@ -198,6 +199,7 @@ function DefineFields(props: {
         visits: string[]
     ) => void,
 }) {
+  const {t} = useTranslation('dataquery');
   const [activeFilter, setActiveFilter] = useState('');
   const [syncVisits, setSyncVisits] = useState<boolean>(false);
   const [zoomTo, setZoomTo] = useState<string|null>(null);
@@ -338,11 +340,12 @@ function DefineFields(props: {
         return {value: el, label: el};
       });
       defaultVisits = <div style={{paddingBottom: '1em', display: 'flex'}}>
-        <h4 style={{paddingRight: '1ex'}}>Default Visits</h4>
+        <h4 style={{paddingRight: '1ex'}}>{t('Default Visits',
+          {ns: 'dataquery'})}</h4>
         <Select options={allVisits}
           isMulti
           onChange={props.onChangeDefaultVisits}
-          placeholder='Select Visits'
+          placeholder={t('Select Visits', {ns: 'dataquery'})}
           menuPortalTarget={document.body}
           styles={
             {menuPortal:
@@ -359,20 +362,21 @@ function DefineFields(props: {
           closeMenuOnSelect={false}
         />
         <div>
-          <CheckboxElement label='Sync with selected fields'
-            name="syncVisits"
-            value={syncVisits}
-            onUserInput={
-              (name: string, value: boolean) => setSyncVisits(value)
-            } />
+          <CheckboxElement label={t('Sync with selected fields',
+            {ns: 'dataquery'})}
+          name="syncVisits"
+          value={syncVisits}
+          onUserInput={
+            (name: string, value: boolean) => setSyncVisits(value)
+          } />
         </div>
       </div>;
     }
 
     fieldList = (<div>
       <div style={{display: 'flex', flexWrap: 'wrap',
         justifyContent: 'space-between'}}>
-        <h2>{cname} fields</h2>
+        <h2>{cname} {t('fields')}</h2>
         <div style={{marginTop: '1em',
           display: 'flex',
           flexWrap: 'nowrap',
@@ -383,7 +387,7 @@ function DefineFields(props: {
             <input onChange={setFilter}
               className='form-control'
               type="text"
-              placeholder="Filter within category"
+              placeholder={t('Filter within category', {ns: 'dataquery'})}
               aria-describedby="input-filter-addon"
               value={activeFilter} />
             <span className="input-group-addon">
@@ -398,11 +402,11 @@ function DefineFields(props: {
           }}>
             <button type="button" className="btn btn-primary"
               onClick={addAll}>
-                            Add all
+              {t('Add all', {ns: 'dataquery'})}
             </button>
             <button type="button" className="btn btn-primary"
               onClick={removeAll}>
-                            Remove all
+              {t('Remove all', {ns: 'dataquery'})}
             </button>
           </div>
         </div>
@@ -415,7 +419,7 @@ function DefineFields(props: {
     <div>
       <div style={{display: 'flex', flexWrap: 'nowrap'}}>
         <div style={{width: '80vw', padding: '1em'}}>
-          <h1>Available Fields</h1>
+          <h1>{t('Available Fields', {ns: 'dataquery'})}</h1>
           <FilterableSelectGroup groups={props.allCategories.categories}
             mapGroupName={(key) => props.allCategories.modules[key]}
             onChange={props.onCategoryChange}
@@ -437,11 +441,11 @@ function DefineFields(props: {
               alignItems: 'flex-end',
               marginBottom: '1em',
             }}>
-              <h2>Selected Fields</h2>
+              <h2>{t('Selected Fields', {ns: 'dataquery'})}</h2>
               <div>
                 <button type="button" className="btn btn-primary"
                   style={{marginBottom: 7}}
-                  onClick={props.onClearAll}>Clear</button>
+                  onClick={props.onClearAll}>{t('Clear')}</button>
               </div>
             </div>
             <SelectedFieldList