Use next-basics package.

.eslintrc.json

@@ -4,15 +4,40 @@
     "es2020": true,
     "node": true
   },
-  "extends": ["eslint:recommended", "plugin:prettier/recommended", "next"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "next"
+  ],
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
     "ecmaVersion": 11,
     "sourceType": "module"
   },
+  "settings": {
+    "import/resolver": {
+      "alias": {
+        "map": [
+          ["assets", "./assets"],
+          ["components", "./components"],
+          ["db", "./db"],
+          ["hooks", "./hooks"],
+          ["lang", "./lang"],
+          ["lib", "./lib"],
+          ["public", "./public"],
+          ["queries", "./queries"],
+          ["store", "./store"],
+          ["styles", "./styles"]
+        ],
+        "extensions": [".ts", ".js", ".jsx", ".json"]
+      }
+    }
+  },
   "rules": {
+    "no-console": "error",
     "react/display-name": "off",
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",

components/common/FilterLink.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import Link from 'next/link';
 import classNames from 'classnames';
+import Link from 'next/link';
+import { safeDecodeURI } from 'next-basics';
 import usePageQuery from 'hooks/usePageQuery';
-import { safeDecodeURI } from 'lib/url';
-import Icon from './Icon';
 import External from 'assets/arrow-up-right-from-square.svg';
+import Icon from './Icon';
 import styles from './FilterLink.module.css';
 
 export default function FilterLink({ id, value, label, externalUrl }) {
@@ -25,7 +25,7 @@ export default function FilterLink({ id, value, label, externalUrl }) {
         </a>
       </Link>
       {externalUrl && (
-        <a href={externalUrl} target="_blank" rel="noreferrer noopener" className={styles.link}>
+        <a className={styles.link} href={externalUrl} target="_blank" rel="noreferrer noopener">
           <Icon icon={<External />} className={styles.icon} />
         </a>
       )}

components/common/UpdateNotice.js

@@ -1,8 +1,8 @@
 import { useState, useEffect, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { setItem } from 'next-basics';
 import ButtonLayout from 'components/layout/ButtonLayout';
 import useStore, { checkVersion } from 'store/version';
-import { setItem } from 'lib/web';
 import { REPO_URL, VERSION_CHECK } from 'lib/constants';
 import Button from './Button';
 import styles from './UpdateNotice.module.css';

components/forms/LoginForm.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Formik, Form, Field } from 'formik';
+import { setItem } from 'next-basics';
 import { useRouter } from 'next/router';
 import Button from 'components/common/Button';
 import FormLayout, {
@@ -11,7 +12,6 @@ import FormLayout, {
 } from 'components/layout/FormLayout';
 import Icon from 'components/common/Icon';
 import useApi from 'hooks/useApi';
-import { setItem } from 'lib/web';
 import { AUTH_TOKEN } from 'lib/constants';
 import { setUser } from 'store/app';
 import Logo from 'assets/logo.svg';

components/layout/Header.js

@@ -9,7 +9,7 @@ import HamburgerButton from 'components/common/HamburgerButton';
 import UpdateNotice from 'components/common/UpdateNotice';
 import UserButton from 'components/settings/UserButton';
 import { HOMEPAGE_URL } from 'lib/constants';
-import useConfig from '/hooks/useConfig';
+import useConfig from 'hooks/useConfig';
 import useUser from 'hooks/useUser';
 import Logo from 'assets/logo.svg';
 import styles from './Header.module.css';

components/metrics/FilterTags.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
+import { safeDecodeURI } from 'next-basics';
 import Button from 'components/common/Button';
 import Times from 'assets/times.svg';
-import { safeDecodeURI } from 'lib/url';
 import styles from './FilterTags.module.css';
 
 export default function FilterTags({ params, onClick }) {

components/metrics/QueryParametersTable.js

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
-import MetricsTable from './MetricsTable';
+import { safeDecodeURI } from 'next-basics';
 import Tag from 'components/common/Tag';
+import FilterButtons from 'components/common/FilterButtons';
 import { paramFilter } from 'lib/filters';
-import { safeDecodeURI } from 'lib/url';
-import FilterButtons from '../common/FilterButtons';
+import MetricsTable from './MetricsTable';
 
 const FILTER_COMBINED = 0;
 const FILTER_RAW = 1;

components/pages/DashboardEdit.js

@@ -23,8 +23,6 @@ export default function DashboardEdit({ websites }) {
 
   const ordered = useMemo(() => sortArrayByMap(websites, order, 'website_id'), [websites, order]);
 
-  console.log({ order, ordered });
-
   function handleWebsiteDrag({ destination, source }) {
     if (!destination || destination.index === source.index) return;
 

components/pages/TestConsole.js

@@ -28,8 +28,6 @@ export default function TestConsole() {
   const website = data.find(({ website_id }) => website_id === +websiteId);
   const selectedValue = options.find(({ value }) => value === website?.website_id)?.value;
 
-  console.log({ websiteId, data, options, website });
-
   function handleSelect(value) {
     router.push(`/console/${value}`);
   }

components/pages/WebsiteList.js

@@ -24,8 +24,6 @@ export default function WebsiteList({ websites, showCharts, limit }) {
   const { websiteOrder } = useDashboard();
   const { formatMessage } = useIntl();
 
-  console.log({ websiteOrder });
-
   const ordered = useMemo(
     () => sortArrayByMap(websites, websiteOrder, 'website_id'),
     [websites, websiteOrder],

components/settings/UserButton.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useRouter } from 'next/router';
+import { removeItem } from 'next-basics';
 import MenuButton from 'components/common/MenuButton';
 import Icon from 'components/common/Icon';
 import User from 'assets/user.svg';
 import styles from './UserButton.module.css';
-import { removeItem } from 'lib/web';
 import { AUTH_TOKEN } from 'lib/constants';
 import useUser from 'hooks/useUser';
 

hooks/useApi.js

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useRouter } from 'next/router';
-import { get, post, put, del, getItem } from 'lib/web';
+import { get, post, put, del, getItem } from 'next-basics';
 import { AUTH_TOKEN, SHARE_TOKEN_HEADER } from 'lib/constants';
 import useStore from 'store/app';
 

hooks/useCountryNames.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
-import { get } from 'lib/web';
+import { get } from 'next-basics';
 import enUS from 'public/intl/country/en-US.json';
 
 const countryNames = {

hooks/useDateRange.js

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import { parseISO } from 'date-fns';
 import { getDateRange } from 'lib/date';
-import { getItem, setItem } from 'lib/web';
+import { getItem, setItem } from 'next-basics';
 import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
 import useForceUpdate from './useForceUpdate';
 import useLocale from './useLocale';

hooks/useFetch.js

@@ -8,7 +8,7 @@ export default function useFetch(url, options = {}, update = []) {
   const [loading, setLoading] = useState(false);
   const [count, setCount] = useState(0);
   const { get } = useApi();
-  const { params = {}, headers = {}, disabled, delay = 0, interval, onDataLoad } = options;
+  const { params = {}, headers = {}, disabled = false, delay = 0, interval, onDataLoad } = options;
 
   async function loadData(params) {
     try {
@@ -29,7 +29,9 @@ export default function useFetch(url, options = {}, update = []) {
 
       onDataLoad?.(data);
     } catch (e) {
+      // eslint-disable-next-line no-console
       console.error(e);
+
       setError(e);
     } finally {
       setLoading(false);
@@ -44,7 +46,7 @@ export default function useFetch(url, options = {}, update = []) {
         clearTimeout(id);
       };
     }
-  }, [url, !!disabled, count, ...update]);
+  }, [url, disabled, count, ...update]);
 
   useEffect(() => {
     if (interval && !disabled) {
@@ -54,7 +56,7 @@ export default function useFetch(url, options = {}, update = []) {
         clearInterval(id);
       };
     }
-  }, [interval, !!disabled]);
+  }, [interval, disabled]);
 
   return { ...response, error, loading };
 }

hooks/useLanguageNames.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
-import { get } from 'lib/web';
+import { get } from 'next-basics';
 import enUS from 'public/intl/language/en-US.json';
 
 const languageNames = {

hooks/useLocale.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import { get, setItem } from 'lib/web';
+import { get, setItem } from 'next-basics';
 import { LOCALE_CONFIG } from 'lib/constants';
 import { getDateLocale, getTextDirection } from 'lib/lang';
 import useStore, { setLocale } from 'store/app';

hooks/usePageQuery.js

@@ -1,6 +1,9 @@
 import { useMemo } from 'react';
 import { useRouter } from 'next/router';
-import { getQueryString } from 'lib/url';
+
+function getQueryString(params) {
+  return new URLSearchParams({ ...params }).toString();
+}
 
 export default function usePageQuery() {
   const router = useRouter();

hooks/useTheme.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import useStore, { setTheme } from 'store/app';
-import { getItem, setItem } from 'lib/web';
+import { getItem, setItem } from 'next-basics';
 import { THEME_CONFIG } from 'lib/constants';
 
 const selector = state => state.theme;

hooks/useTimezone.js

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 import { getTimezone } from 'lib/date';
-import { getItem, setItem } from 'lib/web';
+import { getItem, setItem } from 'next-basics';
 import { TIMEZONE_CONFIG } from 'lib/constants';
 
 export default function useTimezone() {

lib/auth.js

@@ -1,20 +1,21 @@
-import { parseSecureToken, parseToken } from './crypto';
+import { parseSecureToken, parseToken } from 'next-basics';
 import { SHARE_TOKEN_HEADER } from './constants';
 import { getWebsiteById } from 'queries';
+import { secret } from './crypto';
 
 export async function getAuthToken(req) {
   try {
     const token = req.headers.authorization;
 
-    return parseSecureToken(token.split(' ')[1]);
+    return parseSecureToken(token.split(' ')[1], secret());
   } catch {
     return null;
   }
 }
 
 export async function isValidToken(token, validation) {
   try {
-    const result = await parseToken(token);
+    const result = parseToken(token, secret());
 
     if (typeof validation === 'object') {
       return !Object.keys(validation).find(key => result[key] !== validation[key]);

lib/clickhouse.js

@@ -12,13 +12,9 @@ export const CLICKHOUSE_DATE_FORMATS = {
   year: '%Y-01-01',
 };
 
-const log = debug('clickhouse');
+const log = debug('umami:clickhouse');
 
 function getClient() {
-  if (!process.env.CLICKHOUSE_URL) {
-    return null;
-  }
-
   const {
     hostname,
     port,
@@ -149,13 +145,13 @@ function parseFilters(table, column, filters = {}, params = [], sessionKey = 'se
   };
 }
 
-function replaceQuery(string, params = []) {
-  let formattedString = string;
+function formatQuery(str, params = []) {
+  let formattedString = str;
 
-  params.forEach((a, i) => {
-    let replace = a;
+  params.forEach((param, i) => {
+    let replace = param;
 
-    if (typeof a === 'string' || a instanceof String) {
+    if (typeof param === 'string' || param instanceof String) {
       replace = `'${replace}'`;
     }
 
@@ -165,11 +161,11 @@ function replaceQuery(string, params = []) {
   return formattedString;
 }
 
-async function rawQuery(query, params = [], debug = false) {
-  let formattedQuery = replaceQuery(query, params);
+async function rawQuery(query, params = []) {
+  let formattedQuery = formatQuery(query, params);
 
-  if (debug || process.env.LOG_QUERY) {
-    console.log(formattedQuery);
+  if (process.env.LOG_QUERY) {
+    log(formattedQuery);
   }
 
   return clickhouse.query(formattedQuery).toPromise();
@@ -188,7 +184,7 @@ async function findFirst(data) {
 }
 
 // Initialization
-const clickhouse = global[CLICKHOUSE] || getClient();
+const clickhouse = process.env.CLICKHOUSE_URL && (global[CLICKHOUSE] || getClient());
 
 export default {
   client: clickhouse,
@@ -199,8 +195,7 @@ export default {
   getBetweenDates,
   getFilterQuery,
   parseFilters,
-  replaceQuery,
-  rawQuery,
   findUnique,
   findFirst,
+  rawQuery,
 };