💅 Label Screen cleanup & polishing

tsconfig.json

@@ -5,6 +5,7 @@
     "module": "es6",
     "target": "es5",
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     "jsx": "react",
     "allowJs": true,
     "moduleResolution": "node"

www/js/app.js

@@ -13,46 +13,15 @@ import 'angular-translate-loader-static-files';
 import 'moment';
 import 'moment-timezone';
 
-import i18next from 'i18next';
-import { initReactI18next } from 'react-i18next';
-
 import 'ionic-toast';
 import 'ionic-datepicker';
 import 'angular-simple-logger';
 
 import '../manual_lib/ionic/js/ionic.js';
 import '../manual_lib/ionic/js/ionic-angular.js';
 
-
-import en from '../i18n/en.json';
-import es from '../../locales/es/i18n/es.json';
-import fr from '../../locales/fr/i18n/fr.json';
-import it from '../../locales/it/i18n/it.json';
-const langs = { en, es, fr, it };
-
-let resources = {};
-for (const [lang, json] of Object.entries(langs)) {
-  resources[lang] = { translation: json }
-}
-
-const locales = !navigator?.length ? [navigator.language] : navigator.languages;
-let detectedLang;
-locales.forEach(locale => {
-  const lang = locale.trim().split(/-|_/)[0];
-  if (Object.keys(langs).includes(lang)) {
-    detectedLang = lang;
-  }
-});
-
-i18next.use(initReactI18next)
-  .init({
-  debug: true,
-  resources,
-  lng: detectedLang,
-  fallbackLng: 'en'
-});
-
-window.i18next = i18next;
+import initializedI18next from './i18nextInit';
+window.i18next = initializedI18next;
 import 'ng-i18next';
 
 angular.module('emission', ['ionic', 'jm.i18next',

www/js/config/dynamic_config.js

@@ -267,7 +267,7 @@ angular.module('emission.config.dynamic', ['emission.plugin.logger'])
                 $rootScope.$apply(() => dc.saveAndNotifyConfigReady(existingConfig));
             }
         }).catch((err) => {
-            Logger.displayError('Error loading config on app start', err)
+            Logger.displayError(i18next.t('config.loading-config-app-start', err))
         });
     };
     $ionicPlatform.ready().then(function() {

www/js/diary/LabelDetailsScreen.tsx

@@ -75,8 +75,8 @@ const LabelScreenDetails = ({ route, navigation }) => {
           </View>
           <View style={{justifyContent: 'center'}}>
             {trip.percentages?.map?.((pct, i) => (
-              <View style={{flexDirection: 'row', alignItems: 'center'}}>
-                <IconButton key={i} icon={pct.icon} size={16} style={{height: 24, width: 24, margin: 0}}
+              <View key={i} style={{flexDirection: 'row', alignItems: 'center'}}>
+                <IconButton icon={pct.icon} size={16} style={{height: 24, width: 24, margin: 0}}
                   iconColor={pct.color} />
                 <Text style={{fontSize: 13, fontWeight: 'bold'}}>
                   {pct.pct}%

www/js/diary/cards/TripCard.tsx

@@ -5,13 +5,12 @@
 */
 
 import React, { useEffect, useState } from "react";
-import { angularize, getAngularService } from "../../angular-react-helper";
+import { getAngularService } from "../../angular-react-helper";
 import { View, useWindowDimensions, StyleSheet } from 'react-native';
-import { Card, Divider, IconButton, PaperProvider, Text, useTheme } from 'react-native-paper';
+import { Divider, IconButton, Text } from 'react-native-paper';
 import { object } from "prop-types";
 import LeafletView from "../../components/LeafletView";
 import { useTranslation } from "react-i18next";
-import TimestampBadge from "./TimestampBadge";
 import MultilabelButtonGroup from "../../survey/multilabel/MultiLabelButtonGroup";
 import UserInputButton from "../../survey/enketo/UserInputButton";
 import useAppConfig from "../../useAppConfig";
@@ -24,7 +23,7 @@ import { useNavigation } from "@react-navigation/native";
 const TripCard = ({ trip }) => {
 
   const { t } = useTranslation();
-  const { height, width } = useWindowDimensions();
+  const { width: windowWidth } = useWindowDimensions();
   const { appConfig, loading } = useAppConfig();
   const navigation = useNavigation<any>();
 
@@ -66,7 +65,7 @@ const TripCard = ({ trip }) => {
           <LeafletView geojson={trip.geojson} opts={mapOpts}
                         /* the map should be at least as tall as it is wide
                           so it doesn't look squished */
-                        style={[{minHeight: width / 2}, mapStyle]} />
+                        style={[{minHeight: windowWidth / 2}, mapStyle]} />
           <View style={s.modePercents}>
             {trip.percentages?.map?.((pct, i) => (
               <View key={i} style={{flexDirection: 'row', marginHorizontal: 4, alignItems: 'center'}}>

www/js/diary/list/FilterSelect.tsx

@@ -12,14 +12,17 @@ import { array, number } from "prop-types";
 const FilterSelect = ({ filters, setFilters, numListDisplayed, numListTotal }) => {
 
   const { t } = useTranslation();
-  const [selectedFilter, setSelectedFilter] = useState('show-all');
+  const [selectedFilter, setSelectedFilter] = useState();
 
   useEffect(() => {
-    setSelectedFilter(filters?.find(f => f.state)?.key);
-  }, []);
+    if (!selectedFilter) {
+      setSelectedFilter(filters?.find(f => f.state)?.key);
+    }
+  }, [filters]);
 
   useEffect(() => {
-    if (selectedFilter === 'show-all') {
+    if (!selectedFilter) return;
+    if (selectedFilter == 'show-all') {
       setFilters(filters.map(f => ({ ...f, state: false })));
     } else {
       setFilters(filters.map(f => {

www/js/i18nextInit.ts

@@ -0,0 +1,36 @@
+/* Initializes i18next with en, es, fr, and it translations, and uses the language
+    detected by the browser with en as a fallback.
+  Exports the initialized instance of i18next. */
+
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import en from '../i18n/en.json';
+import es from '../../locales/es/i18n/es.json';
+import fr from '../../locales/fr/i18n/fr.json';
+import it from '../../locales/it/i18n/it.json';
+const langs = { en, es, fr, it };
+
+let resources = {};
+for (const [lang, json] of Object.entries(langs)) {
+  resources[lang] = { translation: json }
+}
+
+const locales = navigator?.languages?.length ? navigator.languages : [navigator.language];
+let detectedLang;
+locales.forEach(locale => {
+  const lang = locale.trim().split(/-|_/)[0];
+  if (Object.keys(langs).includes(lang)) {
+    detectedLang = lang;
+  }
+});
+
+i18next.use(initReactI18next)
+  .init({
+    debug: true,
+    resources,
+    lng: detectedLang,
+    fallbackLng: 'en'
+  });
+
+export default i18next;