diff --git a/packages/web/.eslintrc.js b/packages/web/.eslintrc.js
index 1b79b16f..ab66f332 100644
--- a/packages/web/.eslintrc.js
+++ b/packages/web/.eslintrc.js
@@ -1,3 +1,7 @@
module.exports = {
- extends: ['react-app', 'prettier'],
+ extends: [
+ 'react-app',
+ 'plugin:@tanstack/eslint-plugin-query/recommended',
+ 'prettier',
+ ],
};
diff --git a/packages/web/package.json b/packages/web/package.json
index f0c7b782..486e7469 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -13,6 +13,7 @@
"@mui/icons-material": "^5.11.9",
"@mui/lab": "^5.0.0-alpha.120",
"@mui/material": "^5.11.10",
+ "@tanstack/react-query": "^5.24.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
@@ -81,6 +82,8 @@
"access": "public"
},
"devDependencies": {
+ "@tanstack/eslint-plugin-query": "^5.20.1",
+ "@tanstack/react-query-devtools": "^5.24.1",
"eslint-config-prettier": "^9.1.0",
"eslint-config-react-app": "^7.0.1",
"prettier": "^3.2.5"
diff --git a/packages/web/src/components/QueryClientProvider/index.jsx b/packages/web/src/components/QueryClientProvider/index.jsx
new file mode 100644
index 00000000..09c37642
--- /dev/null
+++ b/packages/web/src/components/QueryClientProvider/index.jsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import api from 'helpers/api.js';
+import useAuthentication from 'hooks/useAuthentication.js';
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ refetchOnWindowFocus: false,
+ // provides a convenient default while it should be overridden for other HTTP methods
+ queryFn: async ({ queryKey, signal }) => {
+ const { data } = await api.get(queryKey[0], {
+ signal,
+ });
+
+ return data;
+ },
+ retry: false,
+ },
+ },
+});
+
+export default function AutomatischQueryClientProvider({ children }) {
+ const { token, initialize } = useAuthentication();
+
+ React.useEffect(
+ function updateTokenInHttpClient() {
+ if (!initialize) return;
+
+ if (token) {
+ api.defaults.headers.Authorization = token;
+
+ initialize();
+ } else {
+ delete api.defaults.headers.Authorization;
+ }
+ },
+ [initialize, token],
+ );
+
+ return (
+
+ {children}
+
+
+
+ );
+}
+
+AutomatischQueryClientProvider.propTypes = {
+ children: PropTypes.node.isRequired,
+};
diff --git a/packages/web/src/config/app.js b/packages/web/src/config/app.js
index f3a7ed7c..1091d514 100644
--- a/packages/web/src/config/app.js
+++ b/packages/web/src/config/app.js
@@ -1,6 +1,7 @@
const config = {
baseUrl: process.env.REACT_APP_BASE_URL,
graphqlUrl: process.env.REACT_APP_GRAPHQL_URL,
+ restApiUrl: process.env.REACT_APP_REST_API_URL,
chatwootBaseUrl: 'https://app.chatwoot.com',
supportEmailAddress: 'support@automatisch.io',
};
diff --git a/packages/web/src/helpers/api.js b/packages/web/src/helpers/api.js
new file mode 100644
index 00000000..354babdd
--- /dev/null
+++ b/packages/web/src/helpers/api.js
@@ -0,0 +1,34 @@
+import axios from 'axios';
+
+import appConfig from 'config/app.js';
+import * as URLS from 'config/urls.js';
+import { getItem, removeItem } from 'helpers/storage.js';
+
+const api = axios.create({
+ ...axios.defaults,
+ baseURL: appConfig.restApiUrl,
+ headers: {
+ Authorization: getItem('token'),
+ },
+});
+
+api.interceptors.response.use(
+ (response) => response,
+ (error) => {
+ const status = error.response?.status;
+
+ if (status === 401) {
+ removeItem('token');
+
+ // hard reload to clear all state
+ if (window.location.pathname !== URLS.LOGIN) {
+ window.location.href = URLS.LOGIN;
+ }
+ }
+
+ // re-throw what's already intercepted here.
+ throw error;
+ },
+);
+
+export default api;
diff --git a/packages/web/src/helpers/storage.js b/packages/web/src/helpers/storage.js
index fb915b37..25908ef5 100644
--- a/packages/web/src/helpers/storage.js
+++ b/packages/web/src/helpers/storage.js
@@ -1,8 +1,14 @@
const NAMESPACE = 'automatisch';
const makeKey = (key) => `${NAMESPACE}.${key}`;
+
export const setItem = (key, value) => {
return localStorage.setItem(makeKey(key), value);
};
+
export const getItem = (key) => {
return localStorage.getItem(makeKey(key));
};
+
+export const removeItem = (key) => {
+ return localStorage.removeItem(makeKey(key));
+};
diff --git a/packages/web/src/index.jsx b/packages/web/src/index.jsx
index 2ec43077..33b53b9c 100644
--- a/packages/web/src/index.jsx
+++ b/packages/web/src/index.jsx
@@ -6,6 +6,7 @@ import SnackbarProvider from 'components/SnackbarProvider';
import MetadataProvider from 'components/MetadataProvider';
import { AuthenticationProvider } from 'contexts/Authentication';
import { AutomatischInfoProvider } from 'contexts/AutomatischInfo';
+import QueryClientProvider from 'components/QueryClientProvider';
import Router from 'components/Router';
import LiveChat from 'components/LiveChat/index.ee';
import routes from 'routes';
@@ -18,19 +19,21 @@ root.render(
-
-
-
-
-
- {routes}
+
+
+
+
+
+
+ {routes}
-
-
-
-
-
-
+
+
+
+
+
+
+
,
diff --git a/yarn.lock b/yarn.lock
index 20599047..2321a1a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1742,6 +1742,13 @@
resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.11.tgz#a5d300008960bb39677c46bf16f53ec70d8dee04"
integrity sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==
+"@eslint-community/eslint-utils@^4.4.0":
+ version "4.4.0"
+ resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+ integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+ dependencies:
+ eslint-visitor-keys "^3.3.0"
+
"@eslint/eslintrc@^1.0.5":
version "1.0.5"
resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz"
@@ -3613,6 +3620,37 @@
dependencies:
defer-to-connect "^1.0.1"
+"@tanstack/eslint-plugin-query@^5.20.1":
+ version "5.20.1"
+ resolved "https://registry.yarnpkg.com/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.20.1.tgz#861afedd7cde6b98c88cf86a5923bb659122e7af"
+ integrity sha512-oIp7Wh90KHOm1FKCvcv87fiD2H96xo/crFrlhbvqBzR2f0tMEGOK/ANKMGNFQprd6BT6lyZhQPlOEkFdezsjIg==
+ dependencies:
+ "@typescript-eslint/utils" "^6.20.0"
+
+"@tanstack/query-core@5.24.1":
+ version "5.24.1"
+ resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.24.1.tgz#d40928dec22b47df97fb2648e8c499772e8d7eb2"
+ integrity sha512-DZ6Nx9p7BhjkG50ayJ+MKPgff+lMeol7QYXkvuU5jr2ryW/4ok5eanaS9W5eooA4xN0A/GPHdLGOZGzArgf5Cg==
+
+"@tanstack/query-devtools@5.24.0":
+ version "5.24.0"
+ resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.24.0.tgz#b9b7828d42d5034415b1973ff4a154e880b17d59"
+ integrity sha512-pThim455t69zrZaQKa7IRkEIK8UBTS+gHVAdNfhO72Xh4rWpMc63ovRje5/n6iw63+d6QiJzVadsJVdPoodSeQ==
+
+"@tanstack/react-query-devtools@^5.24.1":
+ version "5.24.1"
+ resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.24.1.tgz#e3a8ea71115fb899119126e1507fc340ee9d9496"
+ integrity sha512-qa4SEugN+EF8JJXcpsM9Lu05HfUv5cvHvLuB0uw/81eJZyNHFdtHFBi5RLCgpBrOyVMDfH8UQ3VBMqXzFKV68A==
+ dependencies:
+ "@tanstack/query-devtools" "5.24.0"
+
+"@tanstack/react-query@^5.24.1":
+ version "5.24.1"
+ resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.24.1.tgz#bcb913febe0d813cec1fda7783298d07aa998b20"
+ integrity sha512-4+09JEdO4d6+Gc8Y/g2M/MuxDK5IY0QV8+2wL2304wPKJgJ54cBbULd3nciJ5uvh/as8rrxx6s0mtIwpRuGd1g==
+ dependencies:
+ "@tanstack/query-core" "5.24.1"
+
"@testing-library/dom@^7.28.1":
version "7.31.2"
resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz"
@@ -3894,6 +3932,11 @@
resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz"
integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
+"@types/json-schema@^7.0.12":
+ version "7.0.15"
+ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+ integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
"@types/json5@^0.0.29":
version "0.0.29"
resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
@@ -4041,6 +4084,11 @@
resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+"@types/semver@^7.5.0":
+ version "7.5.8"
+ resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
+ integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
+
"@types/send@*":
version "0.17.1"
resolved "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz"
@@ -4191,6 +4239,14 @@
"@typescript-eslint/types" "5.10.0"
"@typescript-eslint/visitor-keys" "5.10.0"
+"@typescript-eslint/scope-manager@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
+ integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
+ dependencies:
+ "@typescript-eslint/types" "6.21.0"
+ "@typescript-eslint/visitor-keys" "6.21.0"
+
"@typescript-eslint/type-utils@5.10.0":
version "5.10.0"
resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.10.0.tgz"
@@ -4205,6 +4261,11 @@
resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.0.tgz"
integrity sha512-wUljCgkqHsMZbw60IbOqT/puLfyqqD5PquGiBo1u1IS3PLxdi3RDGlyf032IJyh+eQoGhz9kzhtZa+VC4eWTlQ==
+"@typescript-eslint/types@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
+ integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
+
"@typescript-eslint/typescript-estree@5.10.0":
version "5.10.0"
resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.0.tgz"
@@ -4218,6 +4279,20 @@
semver "^7.3.5"
tsutils "^3.21.0"
+"@typescript-eslint/typescript-estree@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
+ integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
+ dependencies:
+ "@typescript-eslint/types" "6.21.0"
+ "@typescript-eslint/visitor-keys" "6.21.0"
+ debug "^4.3.4"
+ globby "^11.1.0"
+ is-glob "^4.0.3"
+ minimatch "9.0.3"
+ semver "^7.5.4"
+ ts-api-utils "^1.0.1"
+
"@typescript-eslint/utils@5.10.0":
version "5.10.0"
resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.0.tgz"
@@ -4230,6 +4305,19 @@
eslint-scope "^5.1.1"
eslint-utils "^3.0.0"
+"@typescript-eslint/utils@^6.20.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.21.0.tgz#4714e7a6b39e773c1c8e97ec587f520840cd8134"
+ integrity sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==
+ dependencies:
+ "@eslint-community/eslint-utils" "^4.4.0"
+ "@types/json-schema" "^7.0.12"
+ "@types/semver" "^7.5.0"
+ "@typescript-eslint/scope-manager" "6.21.0"
+ "@typescript-eslint/types" "6.21.0"
+ "@typescript-eslint/typescript-estree" "6.21.0"
+ semver "^7.5.4"
+
"@typescript-eslint/visitor-keys@5.10.0":
version "5.10.0"
resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.0.tgz"
@@ -4238,6 +4326,14 @@
"@typescript-eslint/types" "5.10.0"
eslint-visitor-keys "^3.0.0"
+"@typescript-eslint/visitor-keys@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
+ integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
+ dependencies:
+ "@typescript-eslint/types" "6.21.0"
+ eslint-visitor-keys "^3.4.1"
+
"@ucast/core@^1.0.0", "@ucast/core@^1.4.1", "@ucast/core@^1.6.1":
version "1.10.2"
resolved "https://registry.npmjs.org/@ucast/core/-/core-1.10.2.tgz"
@@ -7943,6 +8039,11 @@ eslint-visitor-keys@^3.3.0:
resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz"
integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+eslint-visitor-keys@^3.4.1:
+ version "3.4.3"
+ resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+ integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
eslint-webpack-plugin@^3.1.1:
version "3.1.1"
resolved "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-3.1.1.tgz"
@@ -8947,7 +9048,7 @@ globalthis@^1.0.3:
dependencies:
define-properties "^1.1.3"
-globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, globby@^11.0.4:
+globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, globby@^11.0.4, globby@^11.1.0:
version "11.1.0"
resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -11415,6 +11516,13 @@ minimatch@3.0.4, minimatch@^3.0.4:
dependencies:
brace-expansion "^1.1.7"
+minimatch@9.0.3:
+ version "9.0.3"
+ resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
+ integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+ dependencies:
+ brace-expansion "^2.0.1"
+
minimatch@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -14625,6 +14733,13 @@ semver@^7.1.1, semver@^7.1.3, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semve
dependencies:
lru-cache "^6.0.0"
+semver@^7.5.4:
+ version "7.6.0"
+ resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
+ integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
+ dependencies:
+ lru-cache "^6.0.0"
+
send@0.17.2:
version "0.17.2"
resolved "https://registry.npmjs.org/send/-/send-0.17.2.tgz"
@@ -15825,6 +15940,11 @@ tryer@^1.0.1:
resolved "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz"
integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
+ts-api-utils@^1.0.1:
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.2.1.tgz#f716c7e027494629485b21c0df6180f4d08f5e8b"
+ integrity sha512-RIYA36cJn2WiH9Hy77hdF9r7oEwxAtB/TS9/S4Qd90Ap4z5FSiin5zEiTL44OII1Y3IIlEvxwxFUVgrHSZ/UpA==
+
ts-invariant@^0.10.3:
version "0.10.3"
resolved "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz"