Implement language switching

app/ducks/userPreferences/__tests__/__snapshots__/userPreferences.actions.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`userPreferences actions should export expected actions 1`] = `
 Object {
   "acceptTermsOfUse": [Function],
+  "changeLanguage": [Function],
   "toggleNotifications": [Function],
   "updateLocation": [Function],
 }

app/ducks/userPreferences/__tests__/userPreferences.reducer.test.ts

@@ -1,5 +1,7 @@
 import { ElectricityType } from "carbon-footprint";
+import { locale } from "expo-localization";
 
+import SupportedLanguages from "../../../screens/Languages/SupportedLanguages";
 import userPreferences from "../";
 
 describe("userPreferences reducer should", () => {
@@ -10,6 +12,9 @@ describe("userPreferences reducer should", () => {
       acceptedTermsOfUseVersion: 0,
       activatedNotifications: false,
       location: ElectricityType.world,
+      language: Object.keys(SupportedLanguages).includes(locale.substr(0, 2))
+        ? locale.substr(0, 2)
+        : "en",
     });
   });
 
@@ -25,6 +30,9 @@ describe("userPreferences reducer should", () => {
       acceptedTermsOfUseVersion: 2,
       activatedNotifications: false,
       location: ElectricityType.world,
+      language: Object.keys(SupportedLanguages).includes(locale.substr(0, 2))
+        ? locale.substr(0, 2)
+        : "en",
     });
   });
 
@@ -38,6 +46,9 @@ describe("userPreferences reducer should", () => {
       acceptedTermsOfUseVersion: 0,
       activatedNotifications: false,
       location: ElectricityType.belgium,
+      language: Object.keys(SupportedLanguages).includes(locale.substr(0, 2))
+        ? locale.substr(0, 2)
+        : "en",
     });
   });
 
@@ -51,6 +62,23 @@ describe("userPreferences reducer should", () => {
       acceptedTermsOfUseVersion: 0,
       activatedNotifications: true,
       location: ElectricityType.world,
+      language: Object.keys(SupportedLanguages).includes(locale.substr(0, 2))
+        ? locale.substr(0, 2)
+        : "en",
+    });
+  });
+
+  it("handle language change", () => {
+    const expectedAction = {
+      type: userPreferences.actions.changeLanguage.toString(),
+      payload: "fr",
+    };
+
+    expect(userPreferences.reducer(undefined, expectedAction)).toEqual({
+      acceptedTermsOfUseVersion: 0,
+      activatedNotifications: false,
+      location: ElectricityType.world,
+      language: "fr",
     });
   });
 });

app/ducks/userPreferences/userPreferences.selectors.ts

@@ -1,6 +1,8 @@
 import { pathOr } from "ramda";
 import { ElectricityType } from "carbon-footprint";
+import { locale } from "expo-localization";
 
+import SupportedLanguages from "../../screens/Languages/SupportedLanguages";
 import { namespace } from "./userPreferences.slice";
 
 const getAcceptedTermsOfUseVersion = (state) =>
@@ -11,8 +13,16 @@ const getLocation = (state) => pathOr(ElectricityType.world, [namespace, "locati
 const getActivateNotifications = (state) =>
   pathOr(false, [namespace, "activatedNotifications"], state);
 
+const getLanguage = (state) =>
+  pathOr(
+    Object.keys(SupportedLanguages).includes(locale.substr(0, 2)) ? locale.substr(0, 2) : "en",
+    [namespace, "language"],
+    state
+  );
+
 export default {
   getAcceptedTermsOfUseVersion,
   getActivateNotifications,
   getLocation,
+  getLanguage,
 };

app/ducks/userPreferences/userPreferences.slice.ts

@@ -1,10 +1,16 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { ElectricityType } from "carbon-footprint";
+import { locale } from "expo-localization";
+
+import SupportedLanguages from "../../screens/Languages/SupportedLanguages";
 
 const initialState = {
   acceptedTermsOfUseVersion: 0,
   activatedNotifications: false,
   location: ElectricityType.world,
+  language: Object.keys(SupportedLanguages).includes(locale.substr(0, 2))
+    ? locale.substr(0, 2)
+    : "en",
 };
 
 const userPreferences = createSlice({
@@ -20,15 +26,24 @@ const userPreferences = createSlice({
     updateLocation(state, action: PayloadAction<ElectricityType>) {
       state.location = action.payload;
     },
+    changeLanguage(state, action: PayloadAction<string>) {
+      state.language = action.payload;
+    },
   },
 });
 
-const { acceptTermsOfUse, updateLocation, toggleNotifications } = userPreferences.actions;
+const {
+  acceptTermsOfUse,
+  updateLocation,
+  toggleNotifications,
+  changeLanguage,
+} = userPreferences.actions;
 
 export const actions = {
   acceptTermsOfUse,
   updateLocation,
   toggleNotifications,
+  changeLanguage,
 };
 
 export const namespace = userPreferences.name;

app/navigation/Navigator/BottomTab/SettingsNavigator.tsx

@@ -8,6 +8,7 @@ import MyLocationScreen from "../../../screens/MyLocation";
 import NotificationsScreen from "../../../screens/Notifications";
 import MyData from "../../../screens/MyData";
 import StorybookScreen from "../../../../storybook";
+import LanguagesScreen from "../../../screens/Languages/LanguagesScreen";
 
 const Stack = createStackNavigator();
 
@@ -36,6 +37,11 @@ const SettingsNavigator = (): React.ReactElement => (
     />
     <Stack.Screen name="MyData" options={MyData.navigationOptions} component={MyData} />
     <Stack.Screen name="Storybook" component={StorybookScreen} />
+    <Stack.Screen
+      name="Languages"
+      options={LanguagesScreen.navigationOptions}
+      component={LanguagesScreen}
+    />
   </Stack.Navigator>
 );
 

app/navigation/navigate.ts

@@ -71,6 +71,10 @@ const openMonthlyEmissions = (navigation) => (props = {}) => {
   navigation.push("MonthlyEmissions", props);
 };
 
+const openLanguages = (navigation) => (props = {}) => {
+  navigation.push("Languages", props);
+};
+
 const navigate = (navigation) => ({
   goBack: navigation.goBack,
   openMonthlyEmissions: navigateOneTime(openMonthlyEmissions(navigation)),
@@ -89,6 +93,7 @@ const navigate = (navigation) => ({
   openNotifications: navigateOneTime(openNotifications(navigation)),
   openSupportUs: navigateOneTime(openSupportUs(navigation)),
   openStorybook: navigateOneTime(openStorybook(navigation)),
+  openLanguages: navigateOneTime(openLanguages(navigation)),
 });
 
 export default navigate;

app/screens/EmissionItem/__tests__/__snapshots__/EmissionItemScreen.test.tsx.snap

@@ -109,7 +109,7 @@ exports[`EmissionsScreen renders correctly 1`] = `
           ]
         }
       >
-        Friday 
+        Thursday 
       </Text.Primary>
       <Text.Primary
         darkGray={true}
@@ -121,7 +121,7 @@ exports[`EmissionsScreen renders correctly 1`] = `
           }
         }
       >
-        9th July 2021
+        29th July 2021
       </Text.Primary>
     </View>
     <Button.Primary

app/screens/Languages/LanguagesScreen.navigationOptions.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { Text } from "components";
+import { t } from "utils";
+import { Colors, ComponentsStyle } from "style";
+
+const navigationOptions = () => ({
+  ...ComponentsStyle.transitionBetweenScreenPresets,
+  headerStyle: {
+    ...ComponentsStyle.header,
+  },
+  headerBackTitleVisible: false,
+  headerTintColor: Colors.grey100,
+  headerTitle: () => <Text.H1>{t("LANGUAGES_SCREEN_TITLE")}</Text.H1>,
+});
+
+export default navigationOptions;

app/screens/Languages/LanguagesScreen.styles.tsx

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+
+import { Layout } from "style";
+
+const styles = StyleSheet.create({
+  container: {
+    ...Layout.containerWithPadding,
+  },
+});
+
+export default styles;

app/screens/Languages/LanguagesScreen.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback, useContext } from "react";
+import { View, ScrollView } from "react-native";
+import { useDispatch } from "react-redux";
+
+import { SelectableListItem } from "components";
+import { userPreferences } from "ducks";
+import { LocalizationContext } from "utils";
+
+import SupportedLanguages from "./SupportedLanguages";
+import navigationOptions from "./LanguagesScreen.navigationOptions";
+import styles from "./LanguagesScreen.styles";
+
+const Language: React.FC<{
+  selectedLanguage: string;
+  language: string;
+  onSelectLanguage: (language: string) => void;
+}> = ({ language, onSelectLanguage, selectedLanguage }) => {
+  const onClickLanguage = useCallback(() => {
+    onSelectLanguage?.(language);
+  }, [language, onSelectLanguage]);
+
+  return (
+    <SelectableListItem
+      key={language}
+      selected={selectedLanguage === language}
+      title={SupportedLanguages[language]}
+      onPress={onClickLanguage}
+    />
+  );
+};
+
+const LanguagesScreen = () => {
+  const dispatch = useDispatch();
+  const { language, setLanguage } = useContext(LocalizationContext);
+  const onPress = useCallback(
+    (lang: string) => {
+      dispatch(userPreferences.actions.changeLanguage(lang));
+      setLanguage(lang);
+    },
+    [dispatch, setLanguage]
+  );
+
+  return (
+    <View style={styles.container}>
+      <ScrollView>
+        {Object.keys(SupportedLanguages).map((lang: string) => (
+          <Language
+            key={lang}
+            selectedLanguage={language}
+            language={lang}
+            onSelectLanguage={onPress}
+          />
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+LanguagesScreen.navigationOptions = navigationOptions;
+
+export default LanguagesScreen;

app/screens/Languages/SupportedLanguages.tsx

@@ -0,0 +1,13 @@
+const SupportedLanguages = {
+  // Key-value pairs
+  // State the name of the language in its own language :)
+  en: "English",
+  fr: "Français",
+  de: "Deutsche",
+  sv: "Slovenščina",
+  ru: "Pусский",
+  pt: "Português",
+  pl: "Polskie",
+};
+
+export default SupportedLanguages;

app/screens/Languages/__tests__/LanguagesScreen.tests.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+import LanguagesScreen from "../LanguagesScreen";
+
+// jest.unmock("../");
+
+it("LanguageScreen renders correctly", () => {
+  const tree = create(<LanguagesScreen />).toJSON();
+  expect(tree).toMatchSnapshot();
+});