feat(app): clean-up language setup

Author: yarl

src/components/main/dashboard/dashboard.js

@@ -3,18 +3,18 @@ import template from './dashboard.html';
 
 const DashboardComponent = { controller, template };
 
-function controller($state, $window, WikiService, localStorageService) {
+function controller($mdToast, $state, $window, WikiService, langService) {
   const vm = this;
-  vm.languages = localStorageService.get('languages') || ['en', 'de'];
+  vm.languages = langService.getUserLanguages();
   vm.loading = false;
   vm.saveLanguages = saveLanguages;
 
   function saveLanguages() {
-    if (vm.languages.includes('en')) {
-      vm.languages.push('en');
-    }
-    localStorageService.set('languages', vm.languages.filter(lang => lang));
-    $state.reload();
+    langService.setUserLanguages(vm.languages.filter(lang => lang))
+      .then(() => {
+        $mdToast.show($mdToast.simple().textContent('Languages saved!').hideDelay(3000));
+        $state.reload();
+      });
   }
 }
 

src/components/main/list/list.js

@@ -4,13 +4,15 @@ import '../../../images/marker.png';
 
 const ListComponent = { controller, template };
 
-function controller($state, $stateParams, $timeout, leafletData, localStorageService, mapService, WikiService, wikidata) {
+function controller($state, $stateParams, $timeout, langService, leafletData, localStorageService, mapService, WikiService, wikidata) {
   const vm = this;
   const icon = mapService.getMapIcon();
   const id = $stateParams.id.includes('Q') ? $stateParams.id : `Q${$stateParams.id}`;
+  const langs = langService.getUserLanguages();
 
   vm.filters = {};
   vm.image = [];
+  vm.lang = langs[0];
   vm.map = mapService.getMapInstance({ center: { lat: 49.4967, lng: 12.4805, zoom: 4 } });
   vm.listParams = {};
 
@@ -19,11 +21,6 @@ function controller($state, $stateParams, $timeout, leafletData, localStorageSer
     return;
   }
 
-  let langs = $stateParams.lang ? [$stateParams.lang] : [];
-  langs = langs.concat(localStorageService.get('languages') || ['en', 'de']);
-  vm.lang = langs[0];
-  wikidata.setLanguages(langs);
-
   init();
 
   function getImage(image) {

src/components/main/main.js

@@ -4,18 +4,8 @@ import pack from '../../../package.json';
 
 const MainComponent = { controller, template };
 
-function controller(wikidata, $state, $stateParams, localStorageService) {
+function controller() {
   const vm = this;
-
-  let langs = $stateParams.lang ? [$stateParams.lang] : [];
-  langs = langs.concat(localStorageService.get('languages') || ['en', 'de']);
-
-  vm.lang = langs[0];
-  wikidata.setLanguages(langs);
-
-  vm.goToItem = item => $state.go('main.object', { id: item.title.substring(1) });
-  vm.querySearch = text => wikidata.getSearch(text);
-  vm.search = {};
 }
 
 export default () => {

src/components/main/map/map.js

@@ -3,9 +3,10 @@ import template from './map.html';
 
 const MapComponent = { controller, template };
 
-function controller($location, $scope, $state, $stateParams, $timeout, leafletData, localStorageService, mapService, wikidata) {
+function controller($location, $scope, $state, $stateParams, $timeout, langService, leafletData, localStorageService, mapService, wikidata) {
   const vm = this;
   const icon = mapService.getMapIcon();
+  const langs = langService.getUserLanguages();
 
   // bindings
 
@@ -17,10 +18,6 @@ function controller($location, $scope, $state, $stateParams, $timeout, leafletDa
 
   // activate
 
-  let langs = $stateParams.lang ? [$stateParams.lang] : [];
-  langs = langs.concat(localStorageService.get('languages') || ['en', 'de']);
-  wikidata.setLanguages(langs);
-
   $scope.$on('centerUrlHash', (event, centerHash) => {
     $location.search({ c: centerHash });
   });

src/components/main/monument/monument.js

@@ -10,16 +10,13 @@ function controller($http, $q, $sce, $stateParams, $timeout, $window, localStora
   const vm = this;
   const icon = mapService.getMapIcon();
   const id = $stateParams.id.includes('Q') ? $stateParams.id : `Q${$stateParams.id}`;
+  const langs = langService.getUserLanguages();
 
   vm.getCommonsLink = getCommonsLink;
   vm.image = [];
+  vm.lang = langs[0];
   vm.map = {};
 
-  let langs = $stateParams.lang ? [$stateParams.lang] : [];
-  langs = langs.concat(localStorageService.get('languages') || ['en', 'de']);
-
-  vm.lang = langs[0];
-  wikidata.setLanguages(langs);
   getWikidata();
 
   // functions

src/index.js

@@ -79,7 +79,7 @@ function stateConfig($stateProvider, $urlRouterProvider) {
       resolve: {},
     })
     .state('main.object', {
-      url: '/object/:id?lang',
+      url: '/object/:id',
       template: '<mo-monument></mo-monument>',
       resolve: {},
     })

src/services/lang.service.js

@@ -1,6 +1,8 @@
-const LangService = function () {
+const LangService = function ($q, localStorageService) {
   const service = {
     getNativeLanguages,
+    getUserLanguages,
+    setUserLanguages,
   };
 
   const languagesList = {
@@ -19,7 +21,7 @@ const LangService = function () {
     Q902: ['bn'],
     Q244: ['en'],
     Q184: ['ru', 'be'],
-    Q31: ['fr', 'de', 'nl'],
+    Q31: ['nl', 'fr', 'de'],
     Q242: ['en'],
     Q962: ['fr'],
     Q917: ['dz'],
@@ -194,6 +196,7 @@ const LangService = function () {
     Q953: ['en'],
     Q954: ['en'],
   };
+  let userLanguages = [];
 
   return service;
 
@@ -202,6 +205,23 @@ const LangService = function () {
   function getNativeLanguages(code) {
     return languagesList[code];
   }
+
+  function getUserLanguages() {
+    if (userLanguages.length) { return userLanguages; }
+
+    const ls = localStorageService.get('languages');
+    const def = navigator.language || navigator.userLanguage;
+
+    userLanguages = ls || [def];
+    if (!userLanguages.includes('en')) { userLanguages.push('en'); }
+    return userLanguages;
+  }
+
+  function setUserLanguages(langs) {
+    localStorageService.set('languages', langs);
+    userLanguages = langs;
+    return $q.when(true);
+  }
 };
 
 export default () => {

src/services/wikidata.service.js

@@ -1,19 +1,18 @@
-const wdService = function ($http) {
+const wdService = function ($http, $q, langService) {
   const service = {
     get,
     getById,
     getLabels,
     getRecursive,
     getSearch,
     getSPARQL,
-    setLanguages,
   };
 
   const defaultParams = {
     action: 'wbgetentities',
     format: 'json',
     props: ['info', 'labels', 'aliases', 'descriptions', 'claims', 'datatype', 'sitelinks'],
-    languages: ['en'],
+    languages: langService.getUserLanguages(),
     callback: 'JSON_CALLBACK',
   };
 
@@ -103,10 +102,6 @@ const wdService = function ($http) {
     return result;
   }
 
-  function setLanguages(languages) {
-    defaultParams.languages = languages;
-  }
-
   function simplifyAliases(aliases) {
     return mapValues(aliases, lang => lang.map(alias => alias.value));
   }