From 98a0a83ccf928d31ce9c49303a91177e93861b4f Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Sun, 12 May 2024 23:15:49 -0700
Subject: [PATCH] Updated handling of env vars.

---
 next.config.js                                | 26 +++++++++----------
 src/app/(main)/App.tsx                        |  2 +-
 src/app/(main)/console/TestConsole.tsx        |  2 +-
 .../realtime/RealtimeCountries.tsx            |  2 +-
 src/components/hooks/useCountryNames.ts       |  2 +-
 src/components/hooks/useLanguageNames.ts      |  2 +-
 src/components/hooks/useLocale.ts             |  4 ++-
 src/components/metrics/BrowsersTable.tsx      |  2 +-
 src/components/metrics/CitiesTable.tsx        |  2 +-
 src/components/metrics/CountriesTable.tsx     |  2 +-
 src/components/metrics/DevicesTable.tsx       |  4 ++-
 src/components/metrics/RegionsTable.tsx       |  2 +-
 src/components/metrics/WorldMap.tsx           |  2 +-
 13 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/next.config.js b/next.config.js
index 8a0c6569..92b66943 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,19 +3,19 @@ require('dotenv').config();
 const path = require('path');
 const pkg = require('./package.json');
 
-const basePath = process.env.BASE_PATH || '';
-const collectApiEndpoint = process.env.COLLECT_API_ENDPOINT || '';
-const cloudMode = process.env.CLOUD_MODE || '';
-const cloudUrl = process.env.CLOUD_URL || '';
-const defaultLocale = process.env.DEFAULT_LOCALE || '';
-const disableLogin = process.env.DISABLE_LOGIN || '';
-const disableUI = process.env.DISABLE_UI || '';
-const forceSSL = process.env.FORCE_SSL || '';
-const frameAncestors = process.env.ALLOWED_FRAME_URLS || '';
-const privateMode = process.env.PRIVATE_MODE || '';
-const shareUrlHost = process.env.SHARE_HOST_URL || '';
-const trackerScriptHost = process.env.TRACKER_SCRIPT_HOST || '';
-const trackerScriptName = process.env.TRACKER_SCRIPT_NAME || '';
+const basePath = process.env.BASE_PATH;
+const collectApiEndpoint = process.env.COLLECT_API_ENDPOINT;
+const cloudMode = process.env.CLOUD_MODE;
+const cloudUrl = process.env.CLOUD_URL;
+const defaultLocale = process.env.DEFAULT_LOCALE;
+const disableLogin = process.env.DISABLE_LOGIN;
+const disableUI = process.env.DISABLE_UI;
+const forceSSL = process.env.FORCE_SSL;
+const frameAncestors = process.env.ALLOWED_FRAME_URLS;
+const privateMode = process.env.PRIVATE_MODE;
+const shareUrlHost = process.env.SHARE_URL_HOST;
+const trackerScriptHost = process.env.TRACKER_SCRIPT_HOST;
+const trackerScriptName = process.env.TRACKER_SCRIPT_NAME;
 
 const contentSecurityPolicy = [
   `default-src 'self'`,
diff --git a/src/app/(main)/App.tsx b/src/app/(main)/App.tsx
index 406c2f16..efb38043 100644
--- a/src/app/(main)/App.tsx
+++ b/src/app/(main)/App.tsx
@@ -27,7 +27,7 @@ export function App({ children }) {
       {children}
       <UpdateNotice user={user} config={config} />
       {process.env.NODE_ENV === 'production' && !pathname.includes('/share/') && (
-        <Script src={`${process.env.basePath}/telemetry.js`} />
+        <Script src={`${process.env.basePath || ''}/telemetry.js`} />
       )}
     </>
   );
diff --git a/src/app/(main)/console/TestConsole.tsx b/src/app/(main)/console/TestConsole.tsx
index 86a4792e..37075cf9 100644
--- a/src/app/(main)/console/TestConsole.tsx
+++ b/src/app/(main)/console/TestConsole.tsx
@@ -80,7 +80,7 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
           <Script
             async
             data-website-id={websiteId}
-            src={`${process.env.basePath}/script.js`}
+            src={`${process.env.basePath || ''}/script.js`}
             data-cache="true"
           />
           <div className={styles.actions}>
diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeCountries.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeCountries.tsx
index 506d5733..2dd69146 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeCountries.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeCountries.tsx
@@ -13,7 +13,7 @@ export function RealtimeCountries({ data }) {
     ({ x: code }) => (
       <span className={classNames(locale, styles.row)}>
         <img
-          src={`${process.env.basePath}/images/flags/${code?.toLowerCase() || 'xx'}.png`}
+          src={`${process.env.basePath || ''}/images/flags/${code?.toLowerCase() || 'xx'}.png`}
           alt={code}
         />
         {countryNames[code]}
diff --git a/src/components/hooks/useCountryNames.ts b/src/components/hooks/useCountryNames.ts
index acfada44..17b594b6 100644
--- a/src/components/hooks/useCountryNames.ts
+++ b/src/components/hooks/useCountryNames.ts
@@ -10,7 +10,7 @@ export function useCountryNames(locale: string) {
   const [list, setList] = useState(countryNames[locale] || enUS);
 
   async function loadData(locale: string) {
-    const { data } = await httpGet(`${process.env.basePath}/intl/country/${locale}.json`);
+    const { data } = await httpGet(`${process.env.basePath || ''}/intl/country/${locale}.json`);
 
     if (data) {
       countryNames[locale] = data;
diff --git a/src/components/hooks/useLanguageNames.ts b/src/components/hooks/useLanguageNames.ts
index d4bfbf2f..276faa14 100644
--- a/src/components/hooks/useLanguageNames.ts
+++ b/src/components/hooks/useLanguageNames.ts
@@ -10,7 +10,7 @@ export function useLanguageNames(locale) {
   const [list, setList] = useState(languageNames[locale] || enUS);
 
   async function loadData(locale) {
-    const { data } = await httpGet(`${process.env.basePath}/intl/language/${locale}.json`);
+    const { data } = await httpGet(`${process.env.basePath || ''}/intl/language/${locale}.json`);
 
     if (data) {
       languageNames[locale] = data;
diff --git a/src/components/hooks/useLocale.ts b/src/components/hooks/useLocale.ts
index 5e4e1ce8..69e7cc41 100644
--- a/src/components/hooks/useLocale.ts
+++ b/src/components/hooks/useLocale.ts
@@ -19,7 +19,9 @@ export function useLocale() {
   const dateLocale = getDateLocale(locale);
 
   async function loadMessages(locale: string) {
-    const { ok, data } = await httpGet(`${process.env.basePath}/intl/messages/${locale}.json`);
+    const { ok, data } = await httpGet(
+      `${process.env.basePath || ''}/intl/messages/${locale}.json`,
+    );
 
     if (ok) {
       messages[locale] = data;
diff --git a/src/components/metrics/BrowsersTable.tsx b/src/components/metrics/BrowsersTable.tsx
index c0c741cf..004b5e43 100644
--- a/src/components/metrics/BrowsersTable.tsx
+++ b/src/components/metrics/BrowsersTable.tsx
@@ -11,7 +11,7 @@ export function BrowsersTable(props: MetricsTableProps) {
     return (
       <FilterLink id="browser" value={browser} label={formatBrowser(browser)}>
         <img
-          src={`${process.env.basePath}/images/browsers/${browser || 'unknown'}.png`}
+          src={`${process.env.basePath || ''}/images/browsers/${browser || 'unknown'}.png`}
           alt={browser}
           width={16}
           height={16}
diff --git a/src/components/metrics/CitiesTable.tsx b/src/components/metrics/CitiesTable.tsx
index d275e650..ee2d1005 100644
--- a/src/components/metrics/CitiesTable.tsx
+++ b/src/components/metrics/CitiesTable.tsx
@@ -20,7 +20,7 @@ export function CitiesTable(props: MetricsTableProps) {
       <FilterLink id="city" value={city} label={renderLabel(city, country)}>
         {country && (
           <img
-            src={`${process.env.basePath}/images/flags/${country?.toLowerCase() || 'xx'}.png`}
+            src={`${process.env.basePath || ''}/images/flags/${country?.toLowerCase() || 'xx'}.png`}
             alt={country}
           />
         )}
diff --git a/src/components/metrics/CountriesTable.tsx b/src/components/metrics/CountriesTable.tsx
index e38666bf..3e7c0af0 100644
--- a/src/components/metrics/CountriesTable.tsx
+++ b/src/components/metrics/CountriesTable.tsx
@@ -27,7 +27,7 @@ export function CountriesTable({
         label={formatCountry(code)}
       >
         <img
-          src={`${process.env.basePath}/images/flags/${code?.toLowerCase() || 'xx'}.png`}
+          src={`${process.env.basePath || ''}/images/flags/${code?.toLowerCase() || 'xx'}.png`}
           alt={code}
         />
       </FilterLink>
diff --git a/src/components/metrics/DevicesTable.tsx b/src/components/metrics/DevicesTable.tsx
index 4df331a4..e3db60ea 100644
--- a/src/components/metrics/DevicesTable.tsx
+++ b/src/components/metrics/DevicesTable.tsx
@@ -11,7 +11,9 @@ export function DevicesTable(props: MetricsTableProps) {
     return (
       <FilterLink id="device" value={labels[device] && device} label={formatDevice(device)}>
         <img
-          src={`${process.env.basePath}/images/device/${device?.toLowerCase() || 'unknown'}.png`}
+          src={`${process.env.basePath || ''}/images/device/${
+            device?.toLowerCase() || 'unknown'
+          }.png`}
           alt={device}
           width={16}
           height={16}
diff --git a/src/components/metrics/RegionsTable.tsx b/src/components/metrics/RegionsTable.tsx
index 65c91f21..6e6d7d96 100644
--- a/src/components/metrics/RegionsTable.tsx
+++ b/src/components/metrics/RegionsTable.tsx
@@ -20,7 +20,7 @@ export function RegionsTable(props: MetricsTableProps) {
     return (
       <FilterLink id="region" className={locale} value={code} label={renderLabel(code, country)}>
         <img
-          src={`${process.env.basePath}/images/flags/${country?.toLowerCase() || 'xx'}.png`}
+          src={`${process.env.basePath || ''}/images/flags/${country?.toLowerCase() || 'xx'}.png`}
           alt={code}
         />
       </FilterLink>
diff --git a/src/components/metrics/WorldMap.tsx b/src/components/metrics/WorldMap.tsx
index 31d55dd0..27d0f57c 100644
--- a/src/components/metrics/WorldMap.tsx
+++ b/src/components/metrics/WorldMap.tsx
@@ -54,7 +54,7 @@ export function WorldMap({ data = [], className }: { data?: any[]; className?: s
     >
       <ComposableMap projection="geoMercator">
         <ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
-          <Geographies geography={`${process.env.basePath}${MAP_FILE}`}>
+          <Geographies geography={`${process.env.basePath || ''}${MAP_FILE}`}>
             {({ geographies }) => {
               return geographies.map(geo => {
                 const code = ISO_COUNTRIES[geo.id];