Skip to content

Commit

Permalink
Merge pull request #998 from JGreenlee/label-screen-migration-cleanup
Browse files Browse the repository at this point in the history
💅 Label Screen cleanup & polishing
  • Loading branch information
shankari authored Jun 29, 2023
2 parents c724ac1 + 7534f86 commit d4079c3
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 45 deletions.
1 change: 1 addition & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"module": "es6",
"target": "es5",
"esModuleInterop": true,
"resolveJsonModule": true,
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
Expand Down
35 changes: 2 additions & 33 deletions www/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion www/js/config/dynamic_config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
4 changes: 2 additions & 2 deletions www/js/diary/LabelDetailsScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}%
Expand Down
9 changes: 4 additions & 5 deletions www/js/diary/cards/TripCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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>();

Expand Down Expand Up @@ -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'}}>
Expand Down
11 changes: 7 additions & 4 deletions www/js/diary/list/FilterSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
36 changes: 36 additions & 0 deletions www/js/i18nextInit.ts
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit d4079c3

Please sign in to comment.