Added endpoint for fetching server-side variables.

components/common/UpdateNotice.js

@@ -6,10 +6,15 @@ import { setItem } from 'lib/web';
 import { REPO_URL, VERSION_CHECK } from 'lib/constants';
 import Button from './Button';
 import styles from './UpdateNotice.module.css';
+import useUser from 'hooks/useUser';
+import useConfig from 'hooks/useConfig';
 
 export default function UpdateNotice() {
+  const { user } = useUser();
+  const { updatesDisabled } = useConfig();
   const { latest, checked, hasUpdate, releaseUrl } = useStore();
   const [dismissed, setDismissed] = useState(false);
+  const allowCheck = user?.is_admin && !updatesDisabled;
 
   const updateCheck = useCallback(() => {
     setItem(VERSION_CHECK, { version: latest, time: Date.now() });
@@ -27,12 +32,12 @@ export default function UpdateNotice() {
   }
 
   useEffect(() => {
-    if (!checked) {
+    if (!checked && allowCheck) {
       checkVersion();
     }
-  }, []);
+  }, [checked]);
 
-  if (!hasUpdate || dismissed) {
+  if (!hasUpdate || dismissed || !allowCheck) {
     return null;
   }
 

components/layout/Footer.js

@@ -5,9 +5,11 @@ import Link from 'components/common/Link';
 import styles from './Footer.module.css';
 import useStore from 'store/version';
 import { HOMEPAGE_URL, REPO_URL } from 'lib/constants';
+import useConfig from 'hooks/useConfig';
 
 export default function Footer() {
   const { current } = useStore();
+  const { telemetryDisabled } = useConfig();
 
   return (
     <footer className={classNames(styles.footer, 'row')}>
@@ -28,9 +30,7 @@ export default function Footer() {
       <div className={classNames(styles.version, 'col-12 col-md-4')}>
         <Link href={REPO_URL}>{`v${current}`}</Link>
       </div>
-      {!process.env.telemetryDisabled && (
-        <img src={`https://i.umami.is/a.png?v=${current}`} alt="" />
-      )}
+      {telemetryDisabled && <img src={`https://i.umami.is/a.png?v=${current}`} alt="" />}
     </footer>
   );
 }

components/layout/Header.js

@@ -8,10 +8,10 @@ import ThemeButton from 'components/settings/ThemeButton';
 import HamburgerButton from 'components/common/HamburgerButton';
 import UpdateNotice from 'components/common/UpdateNotice';
 import UserButton from 'components/settings/UserButton';
-import Logo from 'assets/logo.svg';
-import styles from './Header.module.css';
 import useUser from 'hooks/useUser';
 import { HOMEPAGE_URL } from 'lib/constants';
+import Logo from 'assets/logo.svg';
+import styles from './Header.module.css';
 
 export default function Header() {
   const { user } = useUser();
@@ -19,7 +19,7 @@ export default function Header() {
 
   return (
     <>
-      {user?.is_admin && !process.env.updatesDisabled && <UpdateNotice />}
+      <UpdateNotice />
       <header className={classNames(styles.header, 'row')}>
         <div className={styles.title}>
           <Icon icon={<Logo />} size="large" className={styles.logo} />

hooks/useApi.js

@@ -6,7 +6,7 @@ import useStore from 'store/app';
 
 const selector = state => state.shareToken;
 
-function parseHeaders(headers = {}, { authToken, shareToken }) {
+function parseHeaders(headers, { authToken, shareToken }) {
   if (authToken) {
     headers.authorization = `Bearer ${authToken}`;
   }
@@ -25,7 +25,7 @@ export default function useApi() {
 
   return {
     get: useCallback(
-      async (url, params, headers) => {
+      async (url, params = {}, headers = {}) => {
         return get(
           `${basePath}/api${url}`,
           params,
@@ -36,7 +36,7 @@ export default function useApi() {
     ),
 
     post: useCallback(
-      async (url, params, headers) => {
+      async (url, params = {}, headers = {}) => {
         return post(
           `${basePath}/api${url}`,
           params,
@@ -47,7 +47,7 @@ export default function useApi() {
     ),
 
     put: useCallback(
-      async (url, params, headers) => {
+      async (url, params = {}, headers = {}) => {
         return put(
           `${basePath}/api${url}`,
           params,
@@ -58,7 +58,7 @@ export default function useApi() {
     ),
 
     del: useCallback(
-      async (url, params, headers) => {
+      async (url, params = {}, headers = {}) => {
         return del(
           `${basePath}/api${url}`,
           params,

hooks/useConfig.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import useStore, { setConfig } from 'store/app';
+import useApi from 'hooks/useApi';
+
+let fetched = false;
+
+export default function useConfig() {
+  const { config } = useStore();
+  const { get } = useApi();
+
+  async function loadConfig() {
+    const { data } = await get('/config');
+    setConfig(data);
+  }
+
+  useEffect(() => {
+    if (!config && !fetched) {
+      fetched = true;
+      loadConfig();
+    }
+  }, []);
+
+  return config || {};
+}

pages/_app.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { IntlProvider } from 'react-intl';

pages/api/config.js

@@ -0,0 +1,14 @@
+import { ok, methodNotAllowed } from 'lib/response';
+
+export default async (req, res) => {
+  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,
+    });
+  }
+
+  return methodNotAllowed(res);
+};

store/app.js

@@ -20,6 +20,7 @@ const initialState = {
   dashboard: getItem(DASHBOARD_CONFIG) || defaultDashboardConfig,
   shareToken: null,
   user: null,
+  config: null,
 };
 
 const store = create(() => ({ ...initialState }));
@@ -45,4 +46,8 @@ export function setDashboard(dashboard) {
   setItem(DASHBOARD_CONFIG, dashboard);
 }
 
+export function setConfig(config) {
+  store.setState({ config });
+}
+
 export default store;