Refactored useConfig.

next.config.js

@@ -76,6 +76,9 @@ if (process.env.CLOUD_MODE && process.env.CLOUD_URL && process.env.DISABLE_LOGIN
 
 const config = {
   env: {
+    cloudMode: process.env.CLOUD_MODE,
+    cloudUrl: process.env.CLOUD_URL,
+    configUrl: '/config',
     currentVersion: pkg.version,
     defaultLocale: process.env.DEFAULT_LOCALE,
     isProduction: process.env.NODE_ENV === 'production',

src/components/common/HamburgerButton.js

@@ -3,12 +3,11 @@ import { useState } from 'react';
 import MobileMenu from './MobileMenu';
 import Icons from 'components/icons';
 import useMessages from 'components/hooks/useMessages';
-import useConfig from 'components/hooks/useConfig';
 
 export function HamburgerButton() {
   const { formatMessage, labels } = useMessages();
   const [active, setActive] = useState(false);
-  const { cloudMode } = useConfig();
+  const cloudMode = Boolean(process.env.cloudMode);
 
   const menuItems = [
     {

src/components/hooks/useConfig.js

@@ -7,15 +7,16 @@ let loading = false;
 export function useConfig() {
   const { config } = useStore();
   const { get } = useApi();
+  const configUrl = process.env.configUrl;
 
   async function loadConfig() {
-    const data = await get('/config');
+    const data = await get(configUrl);
     loading = false;
     setConfig(data);
   }
 
   useEffect(() => {
-    if (!config && !loading) {
+    if (!config && !loading && configUrl) {
       loading = true;
       loadConfig();
     }

src/components/input/ProfileButton.js

@@ -3,16 +3,15 @@ import { useRouter } from 'next/router';
 import Icons from 'components/icons';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
-import useConfig from 'components/hooks/useConfig';
 import styles from './ProfileButton.module.css';
 import useLocale from 'components/hooks/useLocale';
 
 export function ProfileButton() {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
-  const { cloudMode } = useConfig();
   const router = useRouter();
   const { dir } = useLocale();
+  const cloudMode = Boolean(process.env.cloudMode);
 
   const handleSelect = key => {
     if (key === 'profile') {

src/components/layout/AppLayout.js

@@ -9,7 +9,7 @@ export function AppLayout({ title, children }) {
   const { user } = useRequireLogin();
   const config = useConfig();
 
-  if (!user || !config) {
+  if (!user || !config || config?.uiDisabled) {
     return null;
   }
 

src/components/layout/SettingsLayout.js

@@ -3,14 +3,13 @@ import { useRouter } from 'next/router';
 import SideNav from './SideNav';
 import useUser from 'components/hooks/useUser';
 import useMessages from 'components/hooks/useMessages';
-import useConfig from 'components/hooks/useConfig';
 import styles from './SettingsLayout.module.css';
 
 export function SettingsLayout({ children }) {
   const { user } = useUser();
   const { pathname } = useRouter();
   const { formatMessage, labels } = useMessages();
-  const { cloudMode } = useConfig();
+  const cloudMode = Boolean(process.env.cloudMode);
 
   const items = [
     { key: 'websites', label: formatMessage(labels.websites), url: '/settings/websites' },

src/components/pages/settings/profile/ProfileDetails.js

@@ -6,13 +6,12 @@ import ThemeSetting from 'components/pages/settings/profile/ThemeSetting';
 import PasswordChangeButton from './PasswordChangeButton';
 import useUser from 'components/hooks/useUser';
 import useMessages from 'components/hooks/useMessages';
-import useConfig from 'components/hooks/useConfig';
 import { ROLES } from 'lib/constants';
 
 export function ProfileDetails() {
   const { user } = useUser();
   const { formatMessage, labels } = useMessages();
-  const { cloudMode } = useConfig();
+  const cloudMode = Boolean(process.env.cloudMode);
 
   if (!user) {
     return null;

src/components/pages/settings/websites/TrackingCode.js

@@ -1,15 +1,19 @@
 import { TextArea } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useConfig from 'components/hooks/useConfig';
+import { useRouter } from 'next/router';
 
 export function TrackingCode({ websiteId }) {
   const { formatMessage, messages } = useMessages();
-  const { basePath, trackerScriptName, trackerScriptOrigin } = useConfig();
+  const { basePath } = useRouter();
+  const config = useConfig();
+
+  const trackerScriptName =
+    config?.trackerScriptName?.split(',')?.map(n => n.trim())?.[0] || 'script.js';
+
   const url = trackerScriptName?.startsWith('http')
     ? trackerScriptName
-    : `${trackerScriptOrigin || location.origin}${basePath}/${
-        trackerScriptName?.split(',')?.map(n => n.trim())?.[0] || 'script.js'
-      }`;
+    : `${process.env.analyticsUrl || location.origin}${basePath}/${trackerScriptName}`;
 
   const code = `<script async src="${url}" data-website-id="${websiteId}"></script>`;
 

src/components/pages/websites/WebsitesPage.js

@@ -4,7 +4,6 @@ import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
 import WebsiteList from 'components/pages/settings/websites/WebsitesList';
 import { useMessages } from 'components/hooks';
 import useUser from 'components/hooks/useUser';
-import useConfig from 'components/hooks/useConfig';
 import { ROLES } from 'lib/constants';
 import { useState } from 'react';
 import {
@@ -24,8 +23,8 @@ export function WebsitesPage() {
   const [tab, setTab] = useState('my-websites');
   const [fetch, setFetch] = useState(1);
   const { user } = useUser();
-  const { cloudMode } = useConfig();
   const { showToast } = useToasts();
+  const cloudMode = Boolean(process.env.cloudMode);
 
   const handleSave = async () => {
     setFetch(fetch + 1);

src/pages/_app.js

@@ -6,7 +6,6 @@ import Script from 'next/script';
 import { useRouter } from 'next/router';
 import ErrorBoundary from 'components/common/ErrorBoundary';
 import useLocale from 'components/hooks/useLocale';
-import useConfig from 'components/hooks/useConfig';
 import '@fontsource/inter/400.css';
 import '@fontsource/inter/700.css';
 import 'react-basics/dist/styles.css';
@@ -27,22 +26,10 @@ const client = new QueryClient({
 export default function App({ Component, pageProps }) {
   const { locale, messages } = useLocale();
   const { basePath, pathname } = useRouter();
-  const config = useConfig();
-
-  const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
-
-  if (config?.uiDisabled) {
-    return null;
-  }
 
   return (
     <QueryClientProvider client={client}>
-      <IntlProvider
-        locale={locale}
-        messages={messages[locale]}
-        textComponent={Wrapper}
-        onError={() => null}
-      >
+      <IntlProvider locale={locale} messages={messages[locale]} onError={() => null}>
         <ReactBasicsProvider>
           <ErrorBoundary>
             <Head>

src/pages/api/config.ts

@@ -2,21 +2,19 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import { ok, methodNotAllowed } from 'next-basics';
 
 export interface ConfigResponse {
-  basePath: string;
+  telemetryDisabled: boolean;
   trackerScriptName: string;
+  uiDisabled: boolean;
   updatesDisabled: boolean;
-  telemetryDisabled: boolean;
-  cloudMode: boolean;
 }
 
 export default async (req: NextApiRequest, res: NextApiResponse<ConfigResponse>) => {
   if (req.method === 'GET') {
     return ok(res, {
-      basePath: process.env.BASE_PATH || '',
+      telemetryDisabled: !!process.env.DISABLE_TELEMETRY,
       trackerScriptName: process.env.TRACKER_SCRIPT_NAME,
+      uiDisabled: !!process.env.DISABLE_UI,
       updatesDisabled: !!process.env.DISABLE_UPDATES,
-      telemetryDisabled: !!process.env.DISABLE_TELEMETRY,
-      cloudMode: !!process.env.CLOUD_MODE,
     });
   }