From 183dab3ddc73dc0c7899f621c94f227f6464542d Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sun, 27 Aug 2023 19:56:44 -0700 Subject: [PATCH 1/4] 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, }); } From aaaa44ee16f4ead73c6587787447a236e3348536 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sun, 27 Aug 2023 21:59:39 -0700 Subject: [PATCH 2/4] Removed breadcrumbs. --- .../pages/settings/teams/TeamSettings.js | 14 ++------------ .../pages/settings/users/UserSettings.js | 14 ++------------ .../pages/settings/websites/WebsiteSettings.js | 13 ++----------- 3 files changed, 6 insertions(+), 35 deletions(-) diff --git a/src/components/pages/settings/teams/TeamSettings.js b/src/components/pages/settings/teams/TeamSettings.js index 245e64b1..8c4fe8f4 100644 --- a/src/components/pages/settings/teams/TeamSettings.js +++ b/src/components/pages/settings/teams/TeamSettings.js @@ -1,6 +1,5 @@ import { useEffect, useState } from 'react'; -import { Breadcrumbs, Item, Tabs, useToasts } from 'react-basics'; -import Link from 'next/link'; +import { Item, Tabs, useToasts } from 'react-basics'; import Page from 'components/layout/Page'; import PageHeader from 'components/layout/PageHeader'; import { ROLES } from 'lib/constants'; @@ -44,16 +43,7 @@ export function TeamSettings({ teamId }) { return ( - - - {formatMessage(labels.teams)} - - {values?.name} - - } - /> + {formatMessage(labels.details)} {formatMessage(labels.members)} diff --git a/src/components/pages/settings/users/UserSettings.js b/src/components/pages/settings/users/UserSettings.js index 596e09f0..5fadf1a1 100644 --- a/src/components/pages/settings/users/UserSettings.js +++ b/src/components/pages/settings/users/UserSettings.js @@ -1,6 +1,5 @@ import { useEffect, useState } from 'react'; -import { Breadcrumbs, Item, Tabs, useToasts } from 'react-basics'; -import Link from 'next/link'; +import { Item, Tabs, useToasts } from 'react-basics'; import UserEditForm from 'components/pages/settings/users/UserEditForm'; import Page from 'components/layout/Page'; import PageHeader from 'components/layout/PageHeader'; @@ -44,16 +43,7 @@ export function UserSettings({ userId }) { return ( - - - {formatMessage(labels.users)} - - {values?.username} - - } - /> + {formatMessage(labels.details)} {formatMessage(labels.websites)} diff --git a/src/components/pages/settings/websites/WebsiteSettings.js b/src/components/pages/settings/websites/WebsiteSettings.js index ac8cd87c..f73e0a87 100644 --- a/src/components/pages/settings/websites/WebsiteSettings.js +++ b/src/components/pages/settings/websites/WebsiteSettings.js @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { Breadcrumbs, Item, Tabs, useToasts, Button, Text, Icon, Icons } from 'react-basics'; +import { Item, Tabs, useToasts, Button, Text, Icon, Icons } from 'react-basics'; import { useRouter } from 'next/router'; import Link from 'next/link'; import Page from 'components/layout/Page'; @@ -49,16 +49,7 @@ export function WebsiteSettings({ websiteId, openExternal = false }) { return ( - - - {formatMessage(labels.websites)} - - {values?.name} - - } - > +