Implement `getRegionData` in web (#2743)

* Implement `getRegionData` in web

- Adjust __dirname to be a more sensible value
- Add `process.env.GEOLOCATION_NAMES` for web builds to avoid having
to blindly try and fetch

* Reverting webpack changes

* Change `indexOf` to `includes`

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* Adding a new helper `createWebURL`

It takes a given path to a resource, and it returns an
 easily fetch-able absolute path

* Using `createWebUrl` inside of the locale fetch

* Using `createWebURL` inside of `getRegionData`

* Removing an unnecessary leftover import

* Wait, no I was mistaken

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

_scripts/webpack.web.config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const fs = require('fs')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
@@ -169,7 +170,8 @@ const processLocalesPlugin = new ProcessLocalesPlugin({
 config.plugins.push(
   processLocalesPlugin,
   new webpack.DefinePlugin({
-    'process.env.LOCALE_NAMES': JSON.stringify(processLocalesPlugin.localeNames)
+    'process.env.LOCALE_NAMES': JSON.stringify(processLocalesPlugin.localeNames),
+    'process.env.GEOLOCATION_NAMES': JSON.stringify(fs.readdirSync(path.join(__dirname, '..', 'static', 'geolocations')))
   }),
   new CopyWebpackPlugin({
       patterns: [

src/renderer/helpers/utils.js

@@ -245,3 +245,28 @@ export function openExternalLink(url) {
     window.open(url, '_blank')
   }
 }
+
+/**
+ * This creates an absolute web url from a given path.
+ * It will assume all given paths are relative to the current window location.
+ * @param {string} path relative path to resource
+ * @returns {string} absolute web path
+ */
+export function createWebURL(path) {
+  const url = new URL(window.location.href)
+  const { origin } = url
+  let windowPath = url.pathname
+  // Remove the html file name from the path
+  if (windowPath.endsWith('.html')) {
+    windowPath = windowPath.replace(/[^./]*\.html$/, '')
+  }
+  // Remove proceeding slash in given path if there is one
+  if (path.startsWith('/')) {
+    path = path.substring(1, path.length)
+  }
+  // Remove trailing slash if there is one
+  if (windowPath.endsWith('/')) {
+    windowPath = windowPath.substring(0, windowPath.length - 1)
+  }
+  return `${origin}${windowPath}/${path}`
+}

src/renderer/i18n/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import fs from 'fs'
-
+import { createWebURL } from '../helpers/utils'
 // List of locales approved for use
 import activeLocales from '../../../static/locales/activeLocales.json'
 
@@ -54,17 +54,7 @@ class CustomVueI18n extends VueI18n {
         console.error(locale, err)
       }
     } else {
-      const url = new URL(window.location.href)
-      url.hash = ''
-      if (url.pathname.endsWith('index.html')) {
-        url.pathname = url.pathname.replace(/index\.html$/, '')
-      }
-
-      if (url.pathname) {
-        url.pathname += `${!url.pathname.endsWith('/') ? '/' : ''}static/locales/${locale}.json`
-      } else {
-        url.pathname = `/static/locales/${locale}.json`
-      }
+      const url = createWebURL(`/static/locales/${locale}.json`)
 
       const response = await fetch(url)
       const data = await response.json()

src/renderer/store/modules/settings.js

@@ -323,7 +323,7 @@ const stateWithSideEffects = {
       }
 
       i18n.locale = targetLocale
-      dispatch('getRegionData', {
+      await dispatch('getRegionData', {
         locale: targetLocale
       })
     }

src/renderer/store/modules/utils.js

@@ -4,7 +4,7 @@ import path from 'path'
 import i18n from '../../i18n/index'
 
 import { IpcChannels } from '../../../constants'
-import { openExternalLink, showToast } from '../../helpers/utils'
+import { createWebURL, openExternalLink, showToast } from '../../helpers/utils'
 
 const state = {
   isSideNavOpen: false,
@@ -437,16 +437,19 @@ const actions = {
     commit('setShowProgressBar', value)
   },
 
-  getRegionData ({ commit }, payload) {
-    let fileData
-    /* eslint-disable-next-line */
-    const fileLocation = process.env.NODE_ENV === 'development' ? './static/geolocations/' : `${__dirname}/static/geolocations/`
-    if (fs.existsSync(`${fileLocation}${payload.locale}`)) {
-      fileData = fs.readFileSync(`${fileLocation}${payload.locale}/countries.json`)
+  async getRegionData ({ commit }, { locale }) {
+    let localePathExists
+    // Exclude __dirname from path if not in electron
+    const fileLocation = `${process.env.IS_ELECTRON ? process.env.NODE_ENV === 'development' ? '.' : __dirname : ''}/static/geolocations/`
+    if (process.env.IS_ELECTRON) {
+      localePathExists = fs.existsSync(`${fileLocation}${locale}`)
     } else {
-      fileData = fs.readFileSync(`${fileLocation}en-US/countries.json`)
+      localePathExists = process.env.GEOLOCATION_NAMES.includes(locale)
     }
-    const countries = JSON.parse(fileData).map((entry) => { return { id: entry.id, name: entry.name, code: entry.alpha2 } })
+    const pathName = `${fileLocation}${localePathExists ? locale : 'en-US'}/countries.json`
+    const fileData = process.env.IS_ELECTRON ? JSON.parse(fs.readFileSync(pathName)) : await (await fetch(createWebURL(pathName))).json()
+
+    const countries = fileData.map((entry) => { return { id: entry.id, name: entry.name, code: entry.alpha2 } })
     countries.sort((a, b) => { return a.id - b.id })
 
     const regionNames = countries.map((entry) => { return entry.name })