797 Set the map language to UI language in new branch

.github/workflows/build.yml

@@ -9,14 +9,14 @@ on:
       - v*
 
 env:
-  DOCKER_USERNAME: viktorstrate
-  DOCKER_IMAGE: viktorstrate/photoview
+  DOCKER_USERNAME: kkoval
+  DOCKER_IMAGE: kkoval/photoview
   DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
 
 jobs:
   build:
     name: Build Docker Image
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
@@ -40,7 +40,7 @@ jobs:
         uses: docker/setup-buildx-action@v1
 
       - name: Docker Login
-        if: success() && github.event_name != 'pull_request' && github.repository == 'photoview/photoview'
+        if: success() && github.event_name != 'pull_request' && github.repository == 'kkovaletp/photoview'
         uses: docker/login-action@v2
         with:
           username: ${{ env.DOCKER_USERNAME }}

.github/workflows/codeql-analysis.yml

@@ -12,8 +12,8 @@ on:
 jobs:
   analyze:
     name: Analyze
-    if: github.repository == 'photoview/photoview'
-    runs-on: ubuntu-20.04
+    if: github.repository == 'kkovaletp/photoview'
+    runs-on: ubuntu-latest
 
     # strategy:
     #   fail-fast: false

.github/workflows/tests.yml

@@ -9,7 +9,7 @@ on:
 jobs:
   test-api:
     name: Test API
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
 
     strategy:
       fail-fast: false
@@ -18,7 +18,7 @@ jobs:
 
     services:
       mariadb:
-        image: mariadb:10.5
+        image: mariadb:lts
         env:
           MYSQL_DATABASE: photoview_test
           MYSQL_USER: photoview
@@ -33,7 +33,7 @@ jobs:
           - 3306:3306
 
       postgres:
-        image: postgres:13.2
+        image: postgres:16-alpine
         env:
           POSTGRES_USER: photoview
           POSTGRES_PASSWORD: photosecret

ui/package.json

@@ -25,6 +25,7 @@
     "@types/geojson": "^7946.0.8",
     "@types/jest": "^28.1.4",
     "@types/mapbox-gl": "^2.7.3",
+    "@mapbox/mapbox-gl-language": "^1.0.0",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "@types/react-helmet": "^6.1.5",

ui/src/Pages/PlacesPage/PlacesPage.tsx

@@ -44,9 +44,7 @@ const MapPage = () => {
   const { mapContainer, mapboxMap, mapboxToken } = useMapboxMap({
     configureMapbox: configureMapbox({ mapboxData, dispatchMarkerMedia }),
     mapboxOptions: {
-      projection: {
-        name: 'globe',
-      },
+        zoom: 1
     },
   })
 

ui/src/components/mapbox/MapboxMap.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import { mapboxToken } from './__generated__/mapboxToken'
 import { isDarkMode } from '../../theme'
+import { SetMapLanguages } from '../../localization'
 
 const MAPBOX_TOKEN_QUERY = gql`
   query mapboxToken {
@@ -66,6 +67,8 @@ const useMapboxMap = ({
       ...mapboxOptions,
     })
 
+    SetMapLanguages(map.current)
+
     configureMapbox(map.current, mapboxLibrary)
     map.current?.resize()
   }, [mapContainer, mapboxLibrary, mapboxData])

ui/src/localization.ts

@@ -6,6 +6,8 @@ import { initReactI18next, TFunction } from 'react-i18next'
 import { LanguageTranslation } from './__generated__/globalTypes'
 import { authToken } from './helpers/authentication'
 import { exhaustiveCheck, isNil } from './helpers/utils'
+import type mapboxgl from 'mapbox-gl'
+import MapboxLanguage from '@mapbox/mapbox-gl-language'
 
 export type TranslationFn = TFunction<'translation'>
 
@@ -37,6 +39,7 @@ const SITE_TRANSLATION = gql`
     }
   }
 `
+let map_language: LanguageTranslation | null
 
 export const loadTranslations = () => {
   const [loadLang, { data }] = useLazyQuery<siteTranslation>(SITE_TRANSLATION)
@@ -54,6 +57,8 @@ export const loadTranslations = () => {
       return
     }
 
+    map_language = language
+
     switch (language) {
       case LanguageTranslation.Danish:
         import('./extractedTranslations/da/translation.json').then(language => {
@@ -154,3 +159,55 @@ export const loadTranslations = () => {
     exhaustiveCheck(language)
   }, [data?.myUserPreferences.language])
 }
+
+export const SetMapLanguages = (map: mapboxgl.Map) => {
+  if (isNil(map_language)) {
+    map.addControl(new MapboxLanguage({ defaultLanguage: 'en' }))
+    return
+  }
+
+  switch (map_language) {
+    case LanguageTranslation.Danish:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'da' }))
+      return
+    case LanguageTranslation.English:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'en' }))
+      return
+    case LanguageTranslation.French:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'fr' }))
+      return
+    case LanguageTranslation.Swedish:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'sv' }))
+      return
+    case LanguageTranslation.Italian:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'it' }))
+      return
+    case LanguageTranslation.Spanish:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'es' }))
+      return
+    case LanguageTranslation.Polish:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'pl' }))
+      return
+    case LanguageTranslation.German:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'de' }))
+      return
+    case LanguageTranslation.Russian:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'ru' }))
+      return
+    case LanguageTranslation.TraditionalChinese:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hant' }))
+      return
+    case LanguageTranslation.SimplifiedChinese:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }))
+      return
+    case LanguageTranslation.Portuguese:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'pt' }))
+      return
+    case LanguageTranslation.Basque:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'en' }))
+      return
+    case LanguageTranslation.Turkish:
+      map.addControl(new MapboxLanguage({ defaultLanguage: 'tr' }))
+      return
+  }
+}