797 Set the map language to UI language in new branch (#6)

This is a solution of photoview#789.
The language of the map in Place will be set to the same as the UI. If
the UI language is NOT supported by Mapbox, then the English map will be
provided.
This is a new pull request of setting the map language to UI language,
and I commit it to a new branch other than master. The old one will be
closed soon.
As per the comment in the old pull request
photoview#790, I deleted the settings
of zoom and center and deleted the setting of projection, which means
the map language cannot be changed.
I have looked at the commit setting the projection, it said "chore: add
mapbox globe view", so I guess the committer just wants to show the
mapbox with the whole world map initially. But I think maybe he or she
doesn't know what the projection really means, in fact, global
projection just makes a spherical map. So, I add zoom: 1 to show the
mapbox with the whole world map initially.

---------

Co-authored-by: WindLi001 <lichenggang1@hotmail.com>

.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
+  }
+}