From 183dab3ddc73dc0c7899f621c94f227f6464542d Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sun, 27 Aug 2023 19:56:44 -0700 Subject: [PATCH] Refactored useConfig. --- next.config.js | 3 +++ src/components/common/HamburgerButton.js | 3 +-- src/components/hooks/useConfig.js | 5 +++-- src/components/input/ProfileButton.js | 3 +-- src/components/layout/AppLayout.js | 2 +- src/components/layout/SettingsLayout.js | 3 +-- .../pages/settings/profile/ProfileDetails.js | 3 +-- .../pages/settings/websites/TrackingCode.js | 12 ++++++++---- src/components/pages/websites/WebsitesPage.js | 3 +-- src/pages/_app.js | 15 +-------------- src/pages/api/config.ts | 14 ++++++-------- 11 files changed, 27 insertions(+), 39 deletions(-) diff --git a/next.config.js b/next.config.js index b7a93ace..cc3cde7c 100644 --- a/next.config.js +++ b/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', diff --git a/src/components/common/HamburgerButton.js b/src/components/common/HamburgerButton.js index 9feee67b..f97006ef 100644 --- a/src/components/common/HamburgerButton.js +++ b/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 = [ { diff --git a/src/components/hooks/useConfig.js b/src/components/hooks/useConfig.js index 6b37c87b..5a516abc 100644 --- a/src/components/hooks/useConfig.js +++ b/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(); } diff --git a/src/components/input/ProfileButton.js b/src/components/input/ProfileButton.js index cfb89cf8..015c0ad8 100644 --- a/src/components/input/ProfileButton.js +++ b/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') { diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 8fd637f3..41e2ec0d 100644 --- a/src/components/layout/AppLayout.js +++ b/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; } diff --git a/src/components/layout/SettingsLayout.js b/src/components/layout/SettingsLayout.js index 851c366a..0f4aa5d9 100644 --- a/src/components/layout/SettingsLayout.js +++ b/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' }, diff --git a/src/components/pages/settings/profile/ProfileDetails.js b/src/components/pages/settings/profile/ProfileDetails.js index f9dc652b..d4a3a7d5 100644 --- a/src/components/pages/settings/profile/ProfileDetails.js +++ b/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; diff --git a/src/components/pages/settings/websites/TrackingCode.js b/src/components/pages/settings/websites/TrackingCode.js index fb4eb9a9..d22f0d59 100644 --- a/src/components/pages/settings/websites/TrackingCode.js +++ b/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 = ``; diff --git a/src/components/pages/websites/WebsitesPage.js b/src/components/pages/websites/WebsitesPage.js index 2eb060d3..61c29448 100644 --- a/src/components/pages/websites/WebsitesPage.js +++ b/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); diff --git a/src/pages/_app.js b/src/pages/_app.js index e88b2d86..7022772c 100644 --- a/src/pages/_app.js +++ b/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 }) => {children}; - - if (config?.uiDisabled) { - return null; - } return ( - null} - > + null}> diff --git a/src/pages/api/config.ts b/src/pages/api/config.ts index bccfd048..adba894a 100644 --- a/src/pages/api/config.ts +++ b/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; - trackerScriptName: string; - updatesDisabled: boolean; telemetryDisabled: boolean; - cloudMode: boolean; + trackerScriptName: string; + uiDisabled: boolean; + updatesDisabled: boolean; } export default async (req: NextApiRequest, res: NextApiResponse) => { if (req.method === 'GET') { return ok(res, { - basePath: process.env.BASE_PATH || '', - trackerScriptName: process.env.TRACKER_SCRIPT_NAME, - updatesDisabled: !!process.env.DISABLE_UPDATES, telemetryDisabled: !!process.env.DISABLE_TELEMETRY, - cloudMode: !!process.env.CLOUD_MODE, + trackerScriptName: process.env.TRACKER_SCRIPT_NAME, + uiDisabled: !!process.env.DISABLE_UI, + updatesDisabled: !!process.env.DISABLE_UPDATES, }); }