Integrate italian translation

- Add before save checks on user language, to make sure the value is
  valid

ui/__generated__/globalTypes.ts

@@ -11,6 +11,7 @@ export enum LanguageTranslation {
   Danish = 'Danish',
   English = 'English',
   French = 'French',
+  Italian = 'Italian',
   Swedish = 'Swedish',
 }
 

ui/extractedTranslations/fr/translation.json

@@ -189,8 +189,8 @@
       "title": "Télécharger"
     },
     "media": {
-    "exif": {      
-      "exposure_program": {
+      "exif": {
+        "exposure_program": {
           "action_program": "Action program",
           "aperture_priority": "Priorité d'ouverture",
           "bulb": "Bulb",

ui/src/Pages/SettingsPage/UserPreferences.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from '@apollo/client'
 import gql from 'graphql-tag'
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Dropdown } from 'semantic-ui-react'
 import styled from 'styled-components'
@@ -21,6 +21,7 @@ const languagePreferences = [
   { key: 2, text: 'Français', flag: 'fr', value: LanguageTranslation.French },
   { key: 3, text: 'Svenska', flag: 'se', value: LanguageTranslation.Swedish },
   { key: 4, text: 'Dansk', flag: 'dk', value: LanguageTranslation.Danish },
+  { key: 5, text: 'Italiano', flag: 'it', value: LanguageTranslation.Italian },
 ]
 
 const CHANGE_USER_PREFERENCES = gql`
@@ -55,6 +56,11 @@ const UserPreferences = () => {
     changeUserPreferencesVariables
   >(CHANGE_USER_PREFERENCES)
 
+  const sortedLanguagePrefs = useMemo(
+    () => languagePreferences.sort((a, b) => a.text.localeCompare(b.text)),
+    []
+  )
+
   if (error) {
     return <div>{error.message}</div>
   }
@@ -85,7 +91,7 @@ const UserPreferences = () => {
           'Select language'
         )}
         clearable
-        options={languagePreferences}
+        options={sortedLanguagePrefs}
         onChange={(event, { value: language }) => {
           changePrefs({
             variables: {

ui/src/localization.ts

@@ -5,7 +5,7 @@ import i18n from 'i18next'
 import { initReactI18next, TFunction } from 'react-i18next'
 import { LanguageTranslation } from '../__generated__/globalTypes'
 import { authToken } from './helpers/authentication'
-import { exhaustiveCheck } from './helpers/utils'
+import { exhaustiveCheck, isNil } from './helpers/utils'
 
 export type TranslationFn = TFunction<'translation'>
 
@@ -52,7 +52,7 @@ export const loadTranslations = () => {
 
   useEffect(() => {
     const language = data?.myUserPreferences.language
-    if (language == null) {
+    if (isNil(language)) {
       i18n.changeLanguage('en')
       return
     }
@@ -82,6 +82,12 @@ export const loadTranslations = () => {
           i18n.changeLanguage('sv')
         })
         return
+      case LanguageTranslation.Italian:
+        import('../extractedTranslations/it/translation.json').then(swedish => {
+          i18n.addResourceBundle('it', 'translation', swedish)
+          i18n.changeLanguage('it')
+        })
+        return
     }
 
     exhaustiveCheck(language)