Merge pull request #2234 from umami-software/dev

v2.6.0

.eslintrc.json

@@ -19,22 +19,21 @@
     "plugin:@typescript-eslint/recommended",
     "next"
   ],
-
   "plugins": ["@typescript-eslint", "prettier"],
   "settings": {
     "import/resolver": {
       "alias": {
         "map": [
-          ["assets", "./assets"],
+          ["assets", "./src/assets"],
-          ["components", "./components"],
+          ["components", "./src/components"],
           ["db", "./db"],
-          ["hooks", "./hooks"],
+          ["hooks", "./src/components/hooks"],
-          ["lang", "./lang"],
+          ["lang", "./src/lang"],
-          ["lib", "./lib"],
+          ["lib", "./src/lib"],
           ["public", "./public"],
-          ["queries", "./queries"],
+          ["queries", "./src/queries"],
-          ["store", "./store"],
+          ["store", "./src/store"],
-          ["styles", "./styles"]
+          ["styles", "./src/styles"]
         ],
         "extensions": [".ts", ".tsx", ".js", ".jsx", ".json"]
       }
@@ -51,7 +50,8 @@
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-var-requires": "off",
-    "@typescript-eslint/no-empty-interface": "off"
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }]
   },
   "globals": {
     "React": "writable"

components/input/WebsiteDateFilter.js

@@ -1,23 +0,0 @@
-import useDateRange from 'hooks/useDateRange';
-import DateFilter from './DateFilter';
-import styles from './WebsiteDateFilter.module.css';
-
-export default function WebsiteDateFilter({ websiteId }) {
-  const [dateRange, setDateRange] = useDateRange(websiteId);
-  const { value, startDate, endDate } = dateRange;
-
-  const handleChange = async value => {
-    setDateRange(value);
-  };
-
-  return (
-    <DateFilter
-      className={styles.dropdown}
-      value={value}
-      startDate={startDate}
-      endDate={endDate}
-      onChange={handleChange}
-      showAllTime={true}
-    />
-  );
-}

components/input/WebsiteDateFilter.module.css

@@ -1,3 +0,0 @@
-.dropdown {
-  min-width: 200px;
-}

components/metrics/CitiesTable.js

@@ -1,32 +0,0 @@
-import MetricsTable from './MetricsTable';
-import { emptyFilter } from 'lib/filters';
-import FilterLink from 'components/common/FilterLink';
-import useLocale from 'hooks/useLocale';
-import useMessages from 'hooks/useMessages';
-
-export function CitiesTable({ websiteId, ...props }) {
-  const { locale } = useLocale();
-  const { formatMessage, labels } = useMessages();
-
-  function renderLink({ x }) {
-    return (
-      <div className={locale}>
-        <FilterLink id="city" value={x} />
-      </div>
-    );
-  }
-
-  return (
-    <MetricsTable
-      {...props}
-      title={formatMessage(labels.cities)}
-      type="city"
-      metric={formatMessage(labels.visitors)}
-      websiteId={websiteId}
-      dataFilter={emptyFilter}
-      renderLabel={renderLink}
-    />
-  );
-}
-
-export default CitiesTable;

components/pages/settings/users/UserWebsites.js

@@ -1,26 +0,0 @@
-import { Loading } from 'react-basics';
-import useApi from 'hooks/useApi';
-import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
-import useMessages from 'hooks/useMessages';
-
-export function UserWebsites({ userId }) {
-  const { formatMessage, messages } = useMessages();
-  const { get, useQuery } = useApi();
-  const { data, isLoading } = useQuery(['user:websites', userId], () =>
-    get(`/users/${userId}/websites`),
-  );
-  const hasData = data && data.length !== 0;
-
-  if (isLoading) {
-    return <Loading icon="dots" style={{ minHeight: 300 }} />;
-  }
-
-  return (
-    <div>
-      {hasData && <WebsitesTable data={data} />}
-      {!hasData && formatMessage(messages.noDataAvailable)}
-    </div>
-  );
-}
-
-export default UserWebsites;

jsconfig.json

@@ -1,5 +1,5 @@
 {
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": "./src"
   }
-}
+}

lang/ja-JP.json

@@ -1,211 +0,0 @@
-{
-  "label.access-code": "Access code",
-  "label.actions": "アクション",
-  "label.activity-log": "Activity log",
-  "label.add": "Add",
-  "label.add-description": "Add description",
-  "label.add-website": "Webサイトの追加",
-  "label.admin": "管理者",
-  "label.after": "After",
-  "label.all": "すべて表示",
-  "label.all-time": "All time",
-  "label.analytics": "Analytics",
-  "label.average": "Average",
-  "label.average-visit-time": "平均滞在時間",
-  "label.back": "戻る",
-  "label.before": "Before",
-  "label.bounce-rate": "直帰率",
-  "label.breakdown": "Breakdown",
-  "label.browser": "Browser",
-  "label.browsers": "ブラウザ",
-  "label.cancel": "キャンセル",
-  "label.change-password": "パスワード変更",
-  "label.cities": "Cities",
-  "label.city": "City",
-  "label.clear-all": "Clear all",
-  "label.confirm": "Confirm",
-  "label.confirm-password": "パスワード（確認）",
-  "label.contains": "Contains",
-  "label.continue": "Continue",
-  "label.countries": "国",
-  "label.country": "Country",
-  "label.create-report": "Create report",
-  "label.create-team": "Create team",
-  "label.create-user": "Create user",
-  "label.created": "Created",
-  "label.current-password": "現在のパスワード",
-  "label.custom-range": "期間を指定する",
-  "label.dashboard": "ダッシュボード",
-  "label.data": "Data",
-  "label.date": "Date",
-  "label.date-range": "範囲指定",
-  "label.day": "Day",
-  "label.default-date-range": "最初に表示する期間",
-  "label.delete": "削除",
-  "label.delete-team": "Delete team",
-  "label.delete-user": "Delete user",
-  "label.delete-website": "Webサイトの削除",
-  "label.description": "Description",
-  "label.desktop": "デスクトップ",
-  "label.details": "Details",
-  "label.device": "Device",
-  "label.devices": "デバイス",
-  "label.dismiss": "無視する",
-  "label.does-not-contain": "Does not contain",
-  "label.domain": "ドメイン",
-  "label.dropoff": "Dropoff",
-  "label.edit": "編集",
-  "label.edit-dashboard": "Edit dashboard",
-  "label.enable-share-url": "共有リンクを有効にする",
-  "label.event": "Event",
-  "label.event-data": "Event data",
-  "label.events": "イベント",
-  "label.false": "False",
-  "label.field": "Field",
-  "label.fields": "Fields",
-  "label.filter-combined": "パスまで",
-  "label.filter-raw": "すべて表示",
-  "label.filters": "Filters",
-  "label.funnel": "Funnel",
-  "label.greater-than": "Greater than",
-  "label.greater-than-equals": "Greater than or equals",
-  "label.insights": "Insights",
-  "label.is": "Is",
-  "label.is-not": "Is not",
-  "label.is-not-set": "Is not set",
-  "label.is-set": "Is set",
-  "label.join": "Join",
-  "label.join-team": "Join team",
-  "label.language": "Language",
-  "label.languages": "Languages",
-  "label.laptop": "ノートPC",
-  "label.last-days": "過去{x}日間",
-  "label.last-hours": "過去{x}時間",
-  "label.leave": "Leave",
-  "label.leave-team": "Leave team",
-  "label.less-than": "Less than",
-  "label.less-than-equals": "Less than or equals",
-  "label.login": "ログイン",
-  "label.logout": "ログアウト",
-  "label.max": "Max",
-  "label.members": "Members",
-  "label.min": "Min",
-  "label.mobile": "携帯電話",
-  "label.more": "さらに表示",
-  "label.my-websites": "My websites",
-  "label.name": "名前",
-  "label.new-password": "新しいパスワード",
-  "label.none": "None",
-  "label.os": "OS",
-  "label.overview": "Overview",
-  "label.owner": "Owner",
-  "label.page-of": "Page {current} of {total}",
-  "label.page-views": "閲覧数",
-  "label.pageTitle": "Page title",
-  "label.pages": "ページ",
-  "label.password": "パスワード",
-  "label.powered-by": "このシステムは {name} で実行されています。",
-  "label.profile": "プロファイル",
-  "label.queries": "Queries",
-  "label.query": "Query",
-  "label.query-parameters": "Query parameters",
-  "label.realtime": "リアルタイム",
-  "label.referrer": "Referrer",
-  "label.referrers": "リファラー",
-  "label.refresh": "更新",
-  "label.regenerate": "Regenerate",
-  "label.region": "Region",
-  "label.regions": "Regions",
-  "label.remove": "Remove",
-  "label.reports": "Reports",
-  "label.required": "必須",
-  "label.reset": "リセット",
-  "label.reset-website": "Reset statistics",
-  "label.retention": "Retention",
-  "label.role": "Role",
-  "label.run-query": "Run query",
-  "label.save": "保存",
-  "label.screens": "Screens",
-  "label.select-date": "Select date",
-  "label.select-website": "Select website",
-  "label.sessions": "Sessions",
-  "label.settings": "設定",
-  "label.share-url": "共有リンク",
-  "label.single-day": "一日のみ",
-  "label.sum": "Sum",
-  "label.tablet": "タブレット",
-  "label.team": "Team",
-  "label.team-guest": "Team guest",
-  "label.team-id": "Team ID",
-  "label.team-member": "Team member",
-  "label.team-name": "Team name",
-  "label.team-owner": "Team owner",
-  "label.team-websites": "Team websites",
-  "label.teams": "Teams",
-  "label.theme": "Theme",
-  "label.this-month": "今月",
-  "label.this-week": "今週",
-  "label.this-year": "今年",
-  "label.timezone": "タイムゾーン",
-  "label.title": "Title",
-  "label.today": "今日",
-  "label.toggle-charts": "Toggle charts",
-  "label.total": "Total",
-  "label.total-records": "Total records",
-  "label.tracking-code": "トラッキングコード",
-  "label.true": "True",
-  "label.type": "Type",
-  "label.unique": "Unique",
-  "label.unique-visitors": "ユニーク訪問者数",
-  "label.unknown": "不明",
-  "label.untitled": "Untitled",
-  "label.url": "URL",
-  "label.urls": "URLs",
-  "label.user": "User",
-  "label.username": "ユーザー名",
-  "label.users": "Users",
-  "label.value": "Value",
-  "label.view": "View",
-  "label.view-details": "詳細を見る",
-  "label.view-only": "View only",
-  "label.views": "閲覧数",
-  "label.visitors": "訪問者数",
-  "label.website": "Website",
-  "label.website-id": "Website ID",
-  "label.websites": "Webサイト",
-  "label.window": "Window",
-  "label.yesterday": "Yesterday",
-  "message.active-users": "{x}人が閲覧中です。",
-  "message.confirm-delete": "{target}を削除してもよろしいですか？",
-  "message.confirm-leave": "Are you sure you want to leave {target}?",
-  "message.confirm-reset": "Are your sure you want to reset {target}'s statistics?",
-  "message.delete-account": "To delete this account, type {confirmation} in the box below to confirm.",
-  "message.delete-website": "To delete this website, type {confirmation} in the box below to confirm.",
-  "message.delete-website-warning": "関連するすべてのデータも削除されます。",
-  "message.error": "問題が発生しました。",
-  "message.event-log": "{event} on {url}",
-  "message.go-to-settings": "設定する",
-  "message.incorrect-username-password": "ユーザー名/パスワードが正しくありません。",
-  "message.invalid-domain": "無効なドメイン",
-  "message.min-password-length": "Minimum length of {n} characters",
-  "message.new-version-available": "A new version of Umami {version} is available!",
-  "message.no-data-available": "データがありません。",
-  "message.no-event-data": "No event data is available.",
-  "message.no-match-password": "パスワードが一致しません",
-  "message.no-results-found": "No results were found.",
-  "message.no-team-websites": "This team does not have any websites.",
-  "message.no-teams": "You have not created any teams.",
-  "message.no-users": "There are no users.",
-  "message.no-websites-configured": "Webサイトが設定されていません。",
-  "message.page-not-found": "ページが見つかりません。",
-  "message.reset-website": "To reset this website, type {confirmation} in the box below to confirm.",
-  "message.reset-website-warning": "All statistics for this website will be deleted, but your tracking code will remain intact.",
-  "message.saved": "正常に保存されました。",
-  "message.share-url": "これは{target}の共有リンクです。",
-  "message.team-already-member": "You are already a member of the team.",
-  "message.team-not-found": "Team not found.",
-  "message.team-websites-info": "Websites can be viewed by anyone on the team.",
-  "message.tracking-code": "トラッキングコード",
-  "message.user-deleted": "User deleted.",
-  "message.visitor-log": "{os}（{device}）で{browser}を使用している{country}からの訪問者"
-}

next.config.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 require('dotenv').config();
+const path = require('path');
 const pkg = require('./package.json');
 
 const contentSecurityPolicy = `
@@ -58,7 +59,9 @@ if (process.env.TRACKER_SCRIPT_NAME) {
 const redirects = [
   {
     source: '/settings',
-    destination: process.env.CLOUD_MODE ? '/settings/profile' : '/settings/websites',
+    destination: process.env.CLOUD_MODE
+      ? `${process.env.CLOUD_URL}/settings/websites`
+      : '/settings/websites',
     permanent: true,
   },
 ];
@@ -73,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',
@@ -92,6 +98,8 @@ const config = {
       use: ['@svgr/webpack'],
     });
 
+    config.resolve.alias['public'] = path.resolve('./public');
+
     return config;
   },
   async headers() {

package.components.json

@@ -0,0 +1,23 @@
+{
+  "name": "@umami/components",
+  "version": "0.11.0",
+  "description": "Umami React components.",
+  "author": "Mike Cao <mike@mikecao.com>",
+  "license": "MIT",
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "peerDependencies": {
+    "@tanstack/react-query": "^4.33.0",
+    "classnames": "^2.3.1",
+    "colord": "^2.9.2",
+    "immer": "^9.0.12",
+    "moment-timezone": "^0.5.35",
+    "next": "^13.4.0",
+    "next-basics": "^0.36.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intl": "^5.24.7",
+    "zustand": "^4.3.8"
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "A simple, fast, privacy-focused alternative to Google Analytics.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",
@@ -18,9 +18,10 @@
     "start-env": "node scripts/start-env.js",
     "start-server": "node server.js",
     "build-app": "next build",
-    "build-tracker": "rollup -c rollup.tracker.config.js",
+    "build-components": "rollup -c rollup.components.config.mjs",
+    "build-tracker": "rollup -c rollup.tracker.config.mjs",
     "build-db": "npm-run-all copy-db-files build-db-client",
-    "build-lang": "npm-run-all format-lang compile-lang download-country-names download-language-names",
+    "build-lang": "npm-run-all format-lang compile-lang clean-lang download-country-names download-language-names",
     "build-geo": "node scripts/build-geo.js",
     "build-db-schema": "prisma db pull",
     "build-db-client": "prisma generate",
@@ -34,6 +35,7 @@
     "generate-lang": "npm-run-all extract-messages merge-messages",
     "format-lang": "node scripts/format-lang.js",
     "compile-lang": "formatjs compile-folder --ast build/messages public/intl/messages",
+    "clean-lang": "prettier --write ./public/intl/messages/*.json",
     "check-lang": "node scripts/check-lang.js",
     "download-country-names": "node scripts/download-country-names.js",
     "download-language-names": "node scripts/download-language-names.js",
@@ -60,8 +62,8 @@
   ],
   "dependencies": {
     "@fontsource/inter": "^4.5.15",
-    "@prisma/client": "5.0.0",
+    "@prisma/client": "5.2.0",
-    "@tanstack/react-query": "^4.16.1",
+    "@tanstack/react-query": "^4.33.0",
     "@umami/prisma-client": "^0.2.0",
     "@umami/redis-client": "^0.5.0",
     "chalk": "^4.1.1",
@@ -89,7 +91,7 @@
     "kafkajs": "^2.1.0",
     "maxmind": "^4.3.6",
     "moment-timezone": "^0.5.35",
-    "next": "13.3.1",
+    "next": "13.4.19",
     "next-basics": "^0.36.0",
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
@@ -115,13 +117,16 @@
     "@formatjs/cli": "^4.2.29",
     "@netlify/plugin-nextjs": "^4.27.3",
     "@rollup/plugin-alias": "^5.0.0",
-    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-buble": "^1.0.2",
-    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-node-resolve": "^15.2.0",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-replace": "^5.0.2",
-    "@svgr/rollup": "^7.0.0",
+    "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^6.2.1",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
     "cross-env": "^7.0.3",
@@ -141,13 +146,14 @@
     "postcss-preset-env": "7.8.3",
     "postcss-rtlcss": "^4.0.1",
     "prettier": "^2.6.2",
-    "prisma": "5.0.0",
+    "prisma": "5.2.0",
     "prompts": "2.4.2",
-    "rollup": "^2.70.1",
+    "rollup": "^3.28.0",
+    "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-dts": "^5.3.1",
     "rollup-plugin-esbuild": "^5.0.0",
-    "rollup-plugin-node-externals": "^5.1.2",
+    "rollup-plugin-node-externals": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "stylelint": "^15.10.1",
@@ -156,6 +162,6 @@
     "stylelint-config-recommended": "^9.0.0",
     "tar": "^6.1.2",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1.6"
   }
 }

pages/api/reports/insights.ts

@@ -1,56 +0,0 @@
-import { canViewWebsite } from 'lib/auth';
-import { useCors, useAuth } from 'lib/middleware';
-import { NextApiRequestQueryBody } from 'lib/types';
-import { NextApiResponse } from 'next';
-import { ok, methodNotAllowed, unauthorized } from 'next-basics';
-import { getInsights } from 'queries';
-
-export interface InsightsRequestBody {
-  websiteId: string;
-  dateRange: {
-    startDate: string;
-    endDate: string;
-  };
-  fields: { name: string; type: string; value: string }[];
-  filters: string[];
-  groups: { name: string; type: string }[];
-}
-
-function convertFilters(filters) {
-  return filters.reduce((obj, { name, ...value }) => {
-    obj[name] = value;
-
-    return obj;
-  }, {});
-}
-
-export default async (
-  req: NextApiRequestQueryBody<any, InsightsRequestBody>,
-  res: NextApiResponse,
-) => {
-  await useCors(req, res);
-  await useAuth(req, res);
-
-  if (req.method === 'POST') {
-    const {
-      websiteId,
-      dateRange: { startDate, endDate },
-      fields,
-      filters,
-    } = req.body;
-
-    if (!(await canViewWebsite(req.auth, websiteId))) {
-      return unauthorized(res);
-    }
-
-    const data = await getInsights(websiteId, fields, {
-      ...convertFilters(filters),
-      startDate: new Date(startDate),
-      endDate: new Date(endDate),
-    });
-
-    return ok(res, data);
-  }
-
-  return methodNotAllowed(res);
-};

rollup.components.config.mjs

@@ -0,0 +1,84 @@
+import path from 'path';
+import crypto from 'crypto';
+import resolve from '@rollup/plugin-node-resolve';
+import alias from '@rollup/plugin-alias';
+import json from '@rollup/plugin-json';
+import postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
+import del from 'rollup-plugin-delete';
+import nodeExternals from 'rollup-plugin-node-externals';
+import esbuild from 'rollup-plugin-esbuild';
+import dts from 'rollup-plugin-dts';
+import svgr from '@svgr/rollup';
+
+const md5 = str => crypto.createHash('md5').update(str).digest('hex');
+
+const customResolver = resolve({
+  extensions: ['.js', '.jsx', '.ts', '.tsx'],
+});
+
+const aliasConfig = {
+  entries: [
+    { find: /^components/, replacement: path.resolve('./src/components') },
+    { find: /^hooks/, replacement: path.resolve('./src/hooks') },
+    { find: /^lib/, replacement: path.resolve('./src/lib') },
+    { find: /^store/, replacement: path.resolve('./src/store') },
+    { find: /^public/, replacement: path.resolve('./public') },
+    { find: /^assets/, replacement: path.resolve('./src/assets') },
+  ],
+  customResolver,
+};
+
+const jsBundle = {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'es',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    del({ targets: 'dist/*', runOnce: true }),
+    copy({ targets: [{ src: './package.components.json', dest: 'dist', rename: 'package.json' }] }),
+    postcss({
+      config: false,
+      extract: 'styles.css',
+      sourceMap: true,
+      minimize: true,
+      modules: {
+        generateScopedName: function (name, filename, css) {
+          const file = path.basename(filename, '.css').replace('.module', '');
+          const hash = Buffer.from(md5(`${name}:${filename}:${css}`))
+            .toString('base64')
+            .substring(0, 5);
+
+          return `${file}-${name}--${hash}`;
+        },
+      },
+    }),
+    svgr({ icon: true }),
+    nodeExternals(),
+    json(),
+    alias(aliasConfig),
+    esbuild({
+      target: 'es6',
+      jsx: 'automatic',
+      loaders: {
+        '.js': 'jsx',
+      },
+    }),
+  ],
+};
+
+const dtsBundle = {
+  input: 'src/index.ts',
+  output: {
+    file: 'dist/index.d.ts',
+    format: 'es',
+  },
+  plugins: [alias(aliasConfig), nodeExternals(), json(), dts()],
+  external: [/\.css/],
+};
+
+export default [jsBundle, dtsBundle];

rollup.tracker.config.mjs

@@ -4,7 +4,7 @@ import replace from '@rollup/plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 
 export default {
-  input: 'tracker/index.js',
+  input: 'src/tracker/index.js',
   output: {
     file: 'public/script.js',
     format: 'iife',

scripts/check-lang.js

@@ -2,7 +2,7 @@
 const fs = require('fs');
 const path = require('path');
 const chalk = require('chalk');
-const messages = require('../lang/en-US.json');
+const messages = require('../src/lang/en-US.json');
 const ignore = require('../lang-ignore.json');
 
 const dir = path.resolve(__dirname, '../lang');

scripts/download-country-names.js

@@ -4,7 +4,7 @@ const path = require('path');
 const https = require('https');
 const chalk = require('chalk');
 
-const src = path.resolve(__dirname, '../lang');
+const src = path.resolve(__dirname, '../src/lang');
 const dest = path.resolve(__dirname, '../public/intl/country');
 const files = fs.readdirSync(src);
 

scripts/download-language-names.js

@@ -4,7 +4,7 @@ const path = require('path');
 const https = require('https');
 const chalk = require('chalk');
 
-const src = path.resolve(__dirname, '../lang');
+const src = path.resolve(__dirname, '../src/lang');
 const dest = path.resolve(__dirname, '../public/intl/language');
 const files = fs.readdirSync(src);
 

scripts/format-lang.js

@@ -3,7 +3,7 @@ const path = require('path');
 const del = require('del');
 const prettier = require('prettier');
 
-const src = path.resolve(__dirname, '../lang');
+const src = path.resolve(__dirname, '../src/lang');
 const dest = path.resolve(__dirname, '../build/messages');
 const files = fs.readdirSync(src);
 
@@ -17,7 +17,7 @@ async function run() {
   await fs.ensureDir(dest);
 
   files.forEach(file => {
-    const lang = require(`../lang/${file}`);
+    const lang = require(`../src/lang/${file}`);
     const keys = Object.keys(lang).sort();
 
     const formatted = keys.reduce((obj, key) => {

src/components/common/ConfirmDeleteForm.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function ConfirmDeleteForm({ name, onConfirm, onClose }) {
   const [loading, setLoading] = useState(false);
@@ -17,7 +17,7 @@ export function ConfirmDeleteForm({ name, onConfirm, onClose }) {
         <FormattedMessage {...messages.confirmDelete} values={{ target: <b>{name}</b> }} />
       </p>
       <FormButtons flex>
-        <LoadingButton loading={loading} onClick={handleConfirm} variant="danger">
+        <LoadingButton isLoading={loading} onClick={handleConfirm} variant="danger">
           {formatMessage(labels.delete)}
         </LoadingButton>
         <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>

src/components/common/Empty.js

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import styles from './Empty.module.css';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function Empty({ message, className }) {
   const { formatMessage, messages } = useMessages();

src/components/common/ErrorBoundary.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { ErrorBoundary as Boundary } from 'react-error-boundary';
 import { Button } from 'react-basics';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 import styles from './ErrorBoundry.module.css';
 
 const logError = (error, info) => {

src/components/common/ErrorMessage.js

@@ -1,6 +1,6 @@
 import { Icon, Icons, Text } from 'react-basics';
 import styles from './ErrorMessage.module.css';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function ErrorMessage() {
   const { formatMessage, messages } = useMessages();

src/components/common/FilterLink.js

@@ -2,8 +2,8 @@ import { Icon, Icons } from 'react-basics';
 import classNames from 'classnames';
 import Link from 'next/link';
 import { safeDecodeURI } from 'next-basics';
-import usePageQuery from 'hooks/usePageQuery';
+import usePageQuery from 'components/hooks/usePageQuery';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 import styles from './FilterLink.module.css';
 
 export function FilterLink({ id, value, label, externalUrl, children, className }) {

src/components/common/HamburgerButton.js

@@ -2,13 +2,12 @@ import { Button, Icon } from 'react-basics';
 import { useState } from 'react';
 import MobileMenu from './MobileMenu';
 import Icons from 'components/icons';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
-import useConfig from '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/common/LinkButton.js

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { Icon, Icons, Text } from 'react-basics';
 import styles from './LinkButton.module.css';
 
-export default function LinkButton({ href, icon, children }) {
+export function LinkButton({ href, icon, children }) {
   return (
     <Link className={styles.button} href={href}>
       <Icon>{icon || <Icons.ArrowRight />}</Icon>
@@ -10,3 +10,5 @@ export default function LinkButton({ href, icon, children }) {
     </Link>
   );
 }
+
+export default LinkButton;

src/components/common/MobileMenu.js

@@ -1,3 +1,4 @@
+import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
@@ -28,10 +29,11 @@ export function MobileMenu({ items = [], onClose }) {
     </div>
   );
 
-  return (
+  return createPortal(
     <div className={classNames(styles.menu)}>
       <Items items={items} />
-    </div>
+    </div>,
+    document.body,
   );
 }
 

src/components/common/Pager.js

@@ -1,6 +1,6 @@
 import styles from './Pager.module.css';
 import { Button, Flexbox, Icon, Icons } from 'react-basics';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 
 export function Pager({ page, pageSize, count, onPageChange }) {
   const { formatMessage, labels } = useMessages();

src/components/common/SettingsTable.js

@@ -1,5 +1,5 @@
-import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import Empty from 'components/common/Empty';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 import { useState } from 'react';
 import {
   SearchField,
@@ -36,7 +36,7 @@ export function SettingsTable({
 
   return (
     <>
-      {showSearch && (
+      {showSearch && !!value.length && (
         <SearchField
           onChange={handleFilterChange}
           delay={1000}
@@ -47,7 +47,7 @@ export function SettingsTable({
         />
       )}
       {value.length === 0 && filterValue && (
-        <EmptyPlaceholder message={formatMessage(messages.noResultsFound)}></EmptyPlaceholder>
+        <Empty message={formatMessage(messages.noResultsFound)} />
       )}
       {value.length > 0 && (
         <Table columns={columns} rows={value}>

src/components/common/UpdateNotice.js

@@ -4,7 +4,7 @@ import { setItem } from 'next-basics';
 import useStore, { checkVersion } from 'store/version';
 import { REPO_URL, VERSION_CHECK } from 'lib/constants';
 import styles from './UpdateNotice.module.css';
-import useMessages from 'hooks/useMessages';
+import useMessages from 'components/hooks/useMessages';
 import { useRouter } from 'next/router';
 
 export function UpdateNotice({ user, config }) {

src/components/common/WorldMap.js

@@ -5,9 +5,9 @@ import classNames from 'classnames';
 import { colord } from 'colord';
 import HoverTooltip from 'components/common/HoverTooltip';
 import { ISO_COUNTRIES, MAP_FILE } from 'lib/constants';
-import useTheme from 'hooks/useTheme';
+import useTheme from 'components/hooks/useTheme';
-import useCountryNames from 'hooks/useCountryNames';
+import useCountryNames from 'components/hooks/useCountryNames';
-import useLocale from 'hooks/useLocale';
+import useLocale from 'components/hooks/useLocale';
 import { formatLongNumber } from 'lib/format';
 import { percentFilter } from 'lib/filters';
 import styles from './WorldMap.module.css';

src/components/hooks/useConfig.js

@@ -1,21 +1,22 @@
 import { useEffect } from 'react';
 import useStore, { setConfig } from 'store/app';
-import useApi from 'hooks/useApi';
+import useApi from 'components/hooks/useApi';
 
 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/hooks/useFilters.js

@@ -1,4 +1,4 @@
-import { useMessages } from 'hooks';
+import { useMessages } from './useMessages';
 import { OPERATORS } from 'lib/constants';
 
 export function useFilters() {

src/components/hooks/useLocale.js

@@ -4,8 +4,8 @@ import { httpGet, setItem } from 'next-basics';
 import { LOCALE_CONFIG } from 'lib/constants';
 import { getDateLocale, getTextDirection } from 'lib/lang';
 import useStore, { setLocale } from 'store/app';
-import useForceUpdate from 'hooks/useForceUpdate';
+import useForceUpdate from 'components/hooks/useForceUpdate';
-import enUS from 'public/intl/messages/en-US.json';
+import enUS from 'public/intl/country/en-US.json';
 
 const messages = {
   'en-US': enUS,

src/components/hooks/useReports.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import useApi from './useApi';
-import useApiFilter from 'hooks/useApiFilter';
+import useApiFilter from 'components/hooks/useApiFilter';
 
 export function useReports() {
   const [modified, setModified] = useState(Date.now());

src/components/hooks/useRequireLogin.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import useApi from 'hooks/useApi';
+import useApi from 'components/hooks/useApi';
-import useUser from 'hooks/useUser';
+import useUser from 'components/hooks/useUser';
 
-export function useRequireLogin() {
+export function useRequireLogin(handler: (data?: object) => void) {
   const router = useRouter();
   const { get } = useApi();
   const { user, setUser } = useUser();
@@ -11,9 +11,9 @@ export function useRequireLogin() {
   useEffect(() => {
     async function loadUser() {
       try {
-        const { user } = await get('/auth/verify');
+        const data = await get('/auth/verify');
 
-        setUser(user);
+        setUser(typeof handler === 'function' ? handler(data) : (data as any)?.user);
       } catch {
         await router.push('/login');
       }