From 6e693c6c3783e55178904b91a6715d7ca39ec9f8 Mon Sep 17 00:00:00 2001 From: Emma Date: Sat, 22 Oct 2022 04:31:34 -0400 Subject: [PATCH] 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 | 4 +++- src/renderer/helpers/utils.js | 25 +++++++++++++++++++++++++ src/renderer/i18n/index.js | 14 ++------------ src/renderer/store/modules/settings.js | 2 +- src/renderer/store/modules/utils.js | 21 ++++++++++++--------- 5 files changed, 43 insertions(+), 23 deletions(-) diff --git a/_scripts/webpack.web.config.js b/_scripts/webpack.web.config.js index a1bb591b..94aa1617 100644 --- a/_scripts/webpack.web.config.js +++ b/_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: [ diff --git a/src/renderer/helpers/utils.js b/src/renderer/helpers/utils.js index 7f4686c5..713f50e5 100644 --- a/src/renderer/helpers/utils.js +++ b/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}` +} diff --git a/src/renderer/i18n/index.js b/src/renderer/i18n/index.js index 3ad3d603..c77c211e 100644 --- a/src/renderer/i18n/index.js +++ b/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() diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js index 2a4231d8..565035d6 100644 --- a/src/renderer/store/modules/settings.js +++ b/src/renderer/store/modules/settings.js @@ -323,7 +323,7 @@ const stateWithSideEffects = { } i18n.locale = targetLocale - dispatch('getRegionData', { + await dispatch('getRegionData', { locale: targetLocale }) } diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js index 61c62613..25b86561 100644 --- a/src/renderer/store/modules/utils.js +++ b/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 })