From bf19ffc0a57372c3d4bcea7e23f7e51ac0dd18ec Mon Sep 17 00:00:00 2001 From: viktorstrate Date: Wed, 14 Apr 2021 12:36:16 +0200 Subject: [PATCH] Integrate french translation --- api/graphql/generated.go | 1 + api/graphql/models/generated.go | 4 +- api/graphql/schema.graphql | 1 + ui/__generated__/globalTypes.ts | 19 ++++--- ui/src/App.tsx | 52 +----------------- ui/src/Pages/SettingsPage/UserPreferences.tsx | 3 +- ui/src/index.tsx | 2 +- ui/src/localization.ts | 55 ++++++++++++++++++- 8 files changed, 75 insertions(+), 62 deletions(-) diff --git a/api/graphql/generated.go b/api/graphql/generated.go index cdad8e4c..61a5dc83 100644 --- a/api/graphql/generated.go +++ b/api/graphql/generated.go @@ -1843,6 +1843,7 @@ type User { enum LanguageTranslation { English, + French, Danish } diff --git a/api/graphql/models/generated.go b/api/graphql/models/generated.go index bea87e05..f6f6bb9b 100644 --- a/api/graphql/models/generated.go +++ b/api/graphql/models/generated.go @@ -72,17 +72,19 @@ type LanguageTranslation string const ( LanguageTranslationEnglish LanguageTranslation = "English" + LanguageTranslationFrench LanguageTranslation = "French" LanguageTranslationDanish LanguageTranslation = "Danish" ) var AllLanguageTranslation = []LanguageTranslation{ LanguageTranslationEnglish, + LanguageTranslationFrench, LanguageTranslationDanish, } func (e LanguageTranslation) IsValid() bool { switch e { - case LanguageTranslationEnglish, LanguageTranslationDanish: + case LanguageTranslationEnglish, LanguageTranslationFrench, LanguageTranslationDanish: return true } return false diff --git a/api/graphql/schema.graphql b/api/graphql/schema.graphql index ab085d7b..4973ffb4 100644 --- a/api/graphql/schema.graphql +++ b/api/graphql/schema.graphql @@ -223,6 +223,7 @@ type User { enum LanguageTranslation { English, + French, Danish } diff --git a/ui/__generated__/globalTypes.ts b/ui/__generated__/globalTypes.ts index 20454006..e7d8905f 100644 --- a/ui/__generated__/globalTypes.ts +++ b/ui/__generated__/globalTypes.ts @@ -8,24 +8,25 @@ //============================================================== export enum LanguageTranslation { - Danish = "Danish", - English = "English", + Danish = 'Danish', + English = 'English', + French = 'French', } export enum MediaType { - Photo = "Photo", - Video = "Video", + Photo = 'Photo', + Video = 'Video', } export enum NotificationType { - Close = "Close", - Message = "Message", - Progress = "Progress", + Close = 'Close', + Message = 'Message', + Progress = 'Progress', } export enum OrderDirection { - ASC = "ASC", - DESC = "DESC", + ASC = 'ASC', + DESC = 'DESC', } //============================================================== diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 25fdb5d5..7082f0b8 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -1,11 +1,10 @@ -import React, { useEffect } from 'react' +import React from 'react' import { createGlobalStyle } from 'styled-components' import { Helmet } from 'react-helmet' import Routes from './components/routes/Routes' import Messages from './components/messages/Messages' -import i18n from 'i18next' -import { gql, useLazyQuery } from '@apollo/client' -import { authToken } from './helpers/authentication' +import { useTranslation } from 'react-i18next' +import { loadTranslations } from './localization' const GlobalStyle = createGlobalStyle` * { @@ -30,51 +29,6 @@ const GlobalStyle = createGlobalStyle` ` import 'semantic-ui-css/semantic.min.css' -import { siteTranslation } from './__generated__/siteTranslation' -import { LanguageTranslation } from '../__generated__/globalTypes' -import { useTranslation } from 'react-i18next' - -const SITE_TRANSLATION = gql` - query siteTranslation { - myUserPreferences { - id - language - } - } -` - -const loadTranslations = () => { - console.log('load translation') - const [loadLang, { data }] = useLazyQuery(SITE_TRANSLATION) - - useEffect(() => { - if (authToken()) { - loadLang() - } - }, [authToken()]) - - useEffect(() => { - console.log('loading translations', data) - switch (data?.myUserPreferences.language) { - case LanguageTranslation.Danish: - import('../extractedTranslations/da/translation.json').then(danish => { - console.log('loading danish') - i18n.addResourceBundle('da', 'translation', danish) - i18n.changeLanguage('da') - }) - break - case LanguageTranslation.English: - import('../extractedTranslations/en/translation.json').then(english => { - console.log('loading english') - i18n.addResourceBundle('en', 'translation', english) - i18n.changeLanguage('en') - }) - break - default: - i18n.changeLanguage('en') - } - }, [data?.myUserPreferences.language]) -} const App = () => { const { t } = useTranslation() diff --git a/ui/src/Pages/SettingsPage/UserPreferences.tsx b/ui/src/Pages/SettingsPage/UserPreferences.tsx index c5bf833f..50f4f8d7 100644 --- a/ui/src/Pages/SettingsPage/UserPreferences.tsx +++ b/ui/src/Pages/SettingsPage/UserPreferences.tsx @@ -18,7 +18,8 @@ import { myUserPreferences } from './__generated__/myUserPreferences' const languagePreferences = [ { key: 1, text: 'English', flag: 'uk', value: LanguageTranslation.English }, - { key: 2, text: 'Dansk', flag: 'dk', value: LanguageTranslation.Danish }, + { key: 2, text: 'Français', flag: 'fr', value: LanguageTranslation.French }, + { key: 3, text: 'Dansk', flag: 'dk', value: LanguageTranslation.Danish }, ] const CHANGE_USER_PREFERENCES = gql` diff --git a/ui/src/index.tsx b/ui/src/index.tsx index a5e03dfc..664157da 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -7,7 +7,7 @@ import registerServiceWorker from './registerServiceWorker' import client from './apolloClient' import { ApolloProvider } from '@apollo/client' import { BrowserRouter as Router } from 'react-router-dom' -import setupLocalization from './localization' +import { setupLocalization } from './localization' setupLocalization() diff --git a/ui/src/localization.ts b/ui/src/localization.ts index f770aabe..2bbafcd1 100644 --- a/ui/src/localization.ts +++ b/ui/src/localization.ts @@ -1,9 +1,14 @@ +import { useEffect } from 'react' +import { siteTranslation } from './__generated__/siteTranslation' +import { gql, useLazyQuery } from '@apollo/client' import i18n from 'i18next' import { initReactI18next, TFunction } from 'react-i18next' +import { LanguageTranslation } from '../__generated__/globalTypes' +import { authToken } from './helpers/authentication' export type TranslationFn = TFunction<'translation'> -export default function setupLocalization(): void { +export function setupLocalization(): void { i18n.use(initReactI18next).init({ resources: { en: { @@ -25,3 +30,51 @@ export default function setupLocalization(): void { }, }) } + +const SITE_TRANSLATION = gql` + query siteTranslation { + myUserPreferences { + id + language + } + } +` + +export const loadTranslations = () => { + const [loadLang, { data }] = useLazyQuery(SITE_TRANSLATION) + + useEffect(() => { + if (authToken()) { + loadLang() + } + }, [authToken()]) + + useEffect(() => { + const language = data?.myUserPreferences.language + if (language == null) { + i18n.changeLanguage('en') + return + } + + switch (data?.myUserPreferences.language) { + case LanguageTranslation.Danish: + import('../extractedTranslations/da/translation.json').then(danish => { + i18n.addResourceBundle('da', 'translation', danish) + i18n.changeLanguage('da') + }) + break + case LanguageTranslation.English: + import('../extractedTranslations/en/translation.json').then(english => { + i18n.addResourceBundle('en', 'translation', english) + i18n.changeLanguage('en') + }) + break + case LanguageTranslation.French: + import('../extractedTranslations/fr/translation.json').then(english => { + i18n.addResourceBundle('fr', 'translation', english) + i18n.changeLanguage('fr') + }) + break + } + }, [data?.myUserPreferences.language]) +}