From 101666d26d4db0d2627d61aa0e0b651456527a08 Mon Sep 17 00:00:00 2001 From: hzhang Date: Fri, 9 May 2025 00:44:53 +0100 Subject: [PATCH] upgrade react-query to v5 --- BuildConfig.sh | 5 +- package-lock.json | 57 ++++--- package.json | 3 +- src/App.js | 6 +- .../Debug/ControlledReactQueryDevtools.js | 14 ++ .../MarkdownTemplateEditor.js | 3 +- .../MarkdownTemplate/TemplateSelector.js | 18 ++- src/components/Markdowns/MarkdownContent.js | 5 +- src/components/Markdowns/MarkdownEditor.js | 148 +++++++++++------- src/components/PathManager.js | 12 +- src/index.js | 2 + .../markdown-permission-setting-queries.js | 40 ++--- src/utils/queries/markdown-queries.js | 117 +++++++------- src/utils/queries/markdown-setting-queries.js | 69 ++++---- .../queries/markdown-template-queries.js | 97 ++++++------ .../markdown-template-setting-queries.js | 67 ++++---- src/utils/queries/path-queries.js | 98 +++++------- src/utils/queries/path-setting-queries.js | 75 ++++----- src/utils/queries/tree-queries.js | 18 +-- src/utils/queries/webhook-queries.js | 131 +++++++--------- 20 files changed, 507 insertions(+), 478 deletions(-) create mode 100644 src/components/Debug/ControlledReactQueryDevtools.js diff --git a/BuildConfig.sh b/BuildConfig.sh index db154c1..e47d349 100644 --- a/BuildConfig.sh +++ b/BuildConfig.sh @@ -5,7 +5,7 @@ FRONTEND_HOST="${FRONTEND_HOST:-http://localhost:80}" KC_CLIENT_ID="${KC_CLIENT_ID:-labdev}" KC_HOST="${KC_HOST:-https://login.hangman-lab.top}" KC_REALM="${KC_REALM:-Hangman-Lab}" - +DEBUG="${DEBUG:false}" rm -f /usr/share/nginx/html/config.js @@ -24,7 +24,8 @@ cat < /usr/share/nginx/html/config.json "scope": "openid profile email roles", "popup_redirect_uri": "${FRONTEND_HOST}/popup_callback", "silent_redirect_uri": "${FRONTEND_HOST}/silent_callback" - } + }, + "DEBUG": ${DEBUG} } EOL diff --git a/package-lock.json b/package-lock.json index 3012418..4b9e296 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "license": "ISC", "dependencies": { "@reduxjs/toolkit": "^2.7.0", - "@tanstack/react-query": "^4.36.1", + "@tanstack/react-query": "^5.75.5", + "@tanstack/react-query-devtools": "^5.75.5", "assert": "^2.1.0", "axios": "^1.7.9", "bulma": "^1.0.2", @@ -2712,38 +2713,56 @@ "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==" }, "node_modules/@tanstack/query-core": { - "version": "4.36.1", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.36.1.tgz", - "integrity": "sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==", + "version": "5.75.5", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.75.5.tgz", + "integrity": "sha512-kPDOxtoMn2Ycycb76Givx2fi+2pzo98F9ifHL/NFiahEDpDwSVW6o12PRuQ0lQnBOunhRG5etatAhQij91M3MQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/query-devtools": { + "version": "5.74.7", + "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.74.7.tgz", + "integrity": "sha512-nSNlfuGdnHf4yB0S+BoNYOE1o3oAH093weAYZolIHfS2stulyA/gWfSk/9H4ZFk5mAAHb5vNqAeJOmbdcGPEQw==", + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" } }, "node_modules/@tanstack/react-query": { - "version": "4.36.1", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.36.1.tgz", - "integrity": "sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==", + "version": "5.75.5", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.75.5.tgz", + "integrity": "sha512-QrLCJe40BgBVlWdAdf2ZEVJ0cISOuEy/HKupId1aTKU6gPJZVhSvZpH+Si7csRflCJphzlQ77Yx6gUxGW9o0XQ==", + "license": "MIT", "dependencies": { - "@tanstack/query-core": "4.36.1", - "use-sync-external-store": "^1.2.0" + "@tanstack/query-core": "5.75.5" }, "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-native": "*" + "react": "^18 || ^19" + } + }, + "node_modules/@tanstack/react-query-devtools": { + "version": "5.75.5", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.75.5.tgz", + "integrity": "sha512-S31U00nJOQIbxydRH1kOwdLRaLBrda8O5QjzmgkRg60UZzPGdbI6+873Qa0YGUfPeILDbR2ukgWyg7CJQPy4iA==", + "license": "MIT", + "dependencies": { + "@tanstack/query-devtools": "5.74.7" }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "@tanstack/react-query": "^5.75.5", + "react": "^18 || ^19" } }, "node_modules/@testing-library/dom": { diff --git a/package.json b/package.json index 286405b..268ee7d 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "license": "ISC", "dependencies": { "@reduxjs/toolkit": "^2.7.0", - "@tanstack/react-query": "^4.36.1", + "@tanstack/react-query": "^5.75.5", + "@tanstack/react-query-devtools": "^5.75.5", "assert": "^2.1.0", "axios": "^1.7.9", "bulma": "^1.0.2", diff --git a/src/App.js b/src/App.js index c9b16e9..ad1ca89 100644 --- a/src/App.js +++ b/src/App.js @@ -29,15 +29,15 @@ const App = () => { element={} /> test2}/> - } /> + } /> } /> TEST}> } /> - } /> + } /> } /> } /> } /> - } /> + } /> diff --git a/src/components/Debug/ControlledReactQueryDevtools.js b/src/components/Debug/ControlledReactQueryDevtools.js new file mode 100644 index 0000000..f19fc22 --- /dev/null +++ b/src/components/Debug/ControlledReactQueryDevtools.js @@ -0,0 +1,14 @@ +import React from "react"; +import {useConfig} from "../../ConfigProvider"; +import {ReactQueryDevtools} from "@tanstack/react-query-devtools"; + +export const ControlledReactQueryDevtools = () => { + const config = useConfig(); + if(config.DEBUG) + return (); + + return (<>); + +}; + +export default ControlledReactQueryDevtools; \ No newline at end of file diff --git a/src/components/MarkdownTemplate/MarkdownTemplateEditor.js b/src/components/MarkdownTemplate/MarkdownTemplateEditor.js index cf5cab6..cd7f047 100644 --- a/src/components/MarkdownTemplate/MarkdownTemplateEditor.js +++ b/src/components/MarkdownTemplate/MarkdownTemplateEditor.js @@ -10,7 +10,8 @@ const MarkdownTemplateEditor = () => { const navigate = useNavigate(); - const { id } = useParams(); + const { strId } = useParams(); + const id = Number(strId); const { data: template, isFetching: templateIsFetching } = useMarkdownTemplate(id); const saveMarkdownTemplate = useSaveMarkdownTemplate(); diff --git a/src/components/MarkdownTemplate/TemplateSelector.js b/src/components/MarkdownTemplate/TemplateSelector.js index 7109285..de12009 100644 --- a/src/components/MarkdownTemplate/TemplateSelector.js +++ b/src/components/MarkdownTemplate/TemplateSelector.js @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; import { useMarkdownTemplates } from "../../utils/queries/markdown-template-queries"; -const TemplateSelector = ({ template, onChange }) => { +const TemplateSelector = ({ template, onChange, onCreate }) => { const { data: templates, isFetching: templatesAreFetching } = useMarkdownTemplates(); const [_template, setTemplate] = useState( templates?.find((t) => t.id === template?.id) || { @@ -34,13 +34,15 @@ const TemplateSelector = ({ template, onChange }) => { value={template?.id || ""} onChange={(e) => { const id = parseInt(e.target.value, 10); - onChange( - templates.find((t) => t.id === id) || { - title: "", - parameters: [], - layout: "", - } - ); + const selectedTemplate = templates.find((t) => t.id === id) || { + title: "", + parameters: [], + layout: "", + }; + onChange(selectedTemplate); + if (onCreate) { + onCreate(selectedTemplate); + } }} > diff --git a/src/components/Markdowns/MarkdownContent.js b/src/components/Markdowns/MarkdownContent.js index 2cb7295..1e81cf7 100644 --- a/src/components/Markdowns/MarkdownContent.js +++ b/src/components/Markdowns/MarkdownContent.js @@ -11,7 +11,8 @@ import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries import {useMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries"; const MarkdownContent = () => { - const { id } = useParams(); + const { strId } = useParams(); + const id = Number(strId); const [indexTitle, setIndexTitle] = useState(null); const {data: markdown, isLoading, error} = useMarkdown(id); const {data: path, isFetching: isPathFetching} = usePath(markdown?.path_id); @@ -35,8 +36,8 @@ const MarkdownContent = () => { if (error) { return
Error: {error.message || "Failed to load content"}
; } - if (markdown.isMessage) { + return (
diff --git a/src/components/Markdowns/MarkdownEditor.js b/src/components/Markdowns/MarkdownEditor.js index 78fb922..733dbf1 100644 --- a/src/components/Markdowns/MarkdownEditor.js +++ b/src/components/Markdowns/MarkdownEditor.js @@ -11,11 +11,13 @@ import {useMarkdownTemplate, useMarkdownTemplates} from "../../utils/queries/mar import TemplatedEditor from "./TemplatedEditor"; import {useMarkdownTemplateSetting, useUpdateMarkdownTemplateSetting, useCreateMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries"; import TemplateSelector from "../MarkdownTemplate/TemplateSelector"; +import {useCreateMarkdownSetting} from "../../utils/queries/markdown-setting-queries"; const MarkdownEditor = () => { const { roles } = useContext(AuthContext); const navigate = useNavigate(); - const { id } = useParams(); + const { strId } = useParams(); + const id = Number(strId); const [title, setTitle] = useState(""); const [content, setContent] = useState({}); const [shortcut, setShortcut] = useState(""); @@ -23,6 +25,7 @@ const MarkdownEditor = () => { const [isRawMode, setIsRawMode] = useState(false); const [rawContent, setRawContent] = useState(""); const [jsonError, setJsonError] = useState(""); + const [selectedTemplate, setSelectedTemplate] = useState(null); const {data: markdown, isFetching: isMarkdownFetching, error} = useMarkdown(id); const saveMarkdown = useSaveMarkdown(); const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id); @@ -32,10 +35,12 @@ const MarkdownEditor = () => { const createTemplateSetting = useCreateMarkdownTemplateSetting(); const updateSetting = useUpdateMarkdownSetting(); const {data: templates, isFetching: templatesAreFetching} = useMarkdownTemplates(); + const createMarkdownSetting = useCreateMarkdownSetting(); const notReady = isMarkdownFetching || isTemplateFetching || isSettingFetching || isTemplateSettingFetching || templatesAreFetching; + useEffect(() => { - if(markdown){ + if (markdown) { setTitle(markdown.title); if (markdown.isMessage) { navigate("/"); @@ -56,22 +61,84 @@ const MarkdownEditor = () => { } }, [markdown, navigate]); + useEffect(() => { + if (template) { + setSelectedTemplate(template); + } + }, [template]); + const handleSave = () => { if (isRawMode && jsonError) { alert("Please fix the JSON errors before saving"); return; } - saveMarkdown.mutate( - {id, data: {title, content: JSON.stringify(content), path_id: pathId, shortcut}}, - { - onSuccess: () => { - navigate("/"); - }, - onError: () => { - alert("Error saving markdown file"); + const saveData = { + title, + content: JSON.stringify(content), + path_id: pathId, + shortcut + }; + console.log("markdown", markdown); + console.log(markdown?.id ? "update" : "create",) + if (!markdown?.id) { + saveMarkdown.mutate( + {data: saveData}, + { + onSuccess: (newMarkdown) => { + createMarkdownSetting.mutate({}, { + onSuccess: (settingRes) => { + saveMarkdown.mutate({ + id: newMarkdown.id, + data: { + setting_id: settingRes.id + } + }, { + onSuccess: () => { + if (selectedTemplate?.id) { + createTemplateSetting.mutate({ + template_id: selectedTemplate.id + }, { + onSuccess: (templateSettingRes) => { + updateSetting.mutate({ + id: settingRes.id, + data: { + template_setting_id: templateSettingRes.id + } + }, { + onSuccess: () => { + navigate("/"); + } + }); + } + }); + } else { + navigate("/"); + } + } + }); + } + }); + }, + onError: () => { + alert("Error saving markdown file"); + } } - }); + ); + } else { + console.log("try update"); + saveMarkdown.mutate( + {id, data: saveData}, + { + onSuccess: () => { + navigate("/markdown/" + id); + }, + onError: () => { + alert("Error saving markdown file"); + } + } + ); + } }; const toggleEditMode = () => { @@ -104,54 +171,17 @@ const MarkdownEditor = () => { }; const handleTemplateChange = (newTemplate) => { - if (!newTemplate) return; - + setSelectedTemplate(newTemplate); if (templateSetting) { - updateTemplateSetting.mutate( - { - id: templateSetting.id, - data: { template_id: newTemplate.id } - }, - { - onSuccess: () => { - setContent({}); - }, - onError: () => { - alert("Error updating template"); - } + updateTemplateSetting.mutate({ + id: templateSetting.id, + data: { + template_id: newTemplate.id } - ); - } else if (setting) { - createTemplateSetting.mutate( - { template_id: newTemplate.id }, - { - onSuccess: (newTemplateSetting) => { - updateSetting.mutate( - { - id: setting.id, - data: { template_setting_id: newTemplateSetting.id } - }, - { - onSuccess: () => { - setContent({}); - }, - onError: () => { - alert("Error updating markdown setting"); - } - } - ); - }, - onError: () => { - alert("Error creating template setting"); - } - } - ); - } else { - alert("Cannot change template: No markdown setting found"); + }); } }; - const hasPermission = roles.includes("admin") || roles.includes("creator"); if (!hasPermission) return
Permission Denied
; @@ -211,7 +241,7 @@ const MarkdownEditor = () => {
@@ -249,7 +279,7 @@ const MarkdownEditor = () => { setContent( prev => ({...prev, [k]: v}) )} @@ -275,7 +305,11 @@ const MarkdownEditor = () => {

Preview

- +
diff --git a/src/components/PathManager.js b/src/components/PathManager.js index 11e955e..774bb44 100644 --- a/src/components/PathManager.js +++ b/src/components/PathManager.js @@ -24,10 +24,10 @@ const PathManager = ({ currentPathId = 1, onPathChange }) => { let current_id = pathId; while (current_id) { try { - const pathData = await queryClient.fetchQuery( - ["path", current_id], - () => fetch_(`${config.BACKEND_HOST}/api/path/${current_id}`) - ); + const pathData = await queryClient.fetchQuery({ + queryKey: ["path", current_id], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/path/${current_id}`) + }); if (!pathData) break; path.unshift({ name: pathData.name, id: pathData.id }); current_id = pathData.parent_id; @@ -71,8 +71,8 @@ const PathManager = ({ currentPathId = 1, onPathChange }) => { { name: searchTerm.trim(), parent_id: currentPathId }, { onSuccess: (newDir) => { - queryClient.setQueryData(["path", newDir.id], newDir); - queryClient.invalidateQueries(["paths", currentPathId]); + queryClient.setQueryData({queryKey: ["path", newDir.id]}, newDir); + queryClient.invalidateQueries({queryKey: ["paths", currentPathId]}); setSearchTerm(""); alert("Directory created successfully."); }, diff --git a/src/index.js b/src/index.js index 0aa12b1..18a53bd 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ import AuthProvider, {AuthContext} from "./AuthProvider"; import "bulma/css/bulma.min.css"; import {QueryClient, QueryClientProvider} from "@tanstack/react-query" import ConfigProvider from "./ConfigProvider"; +import ControlledReactQueryDevtools from "./components/Debug/ControlledReactQueryDevtools"; const queryClient = new QueryClient({ defaultOptions: { @@ -52,6 +53,7 @@ root.render( + diff --git a/src/utils/queries/markdown-permission-setting-queries.js b/src/utils/queries/markdown-permission-setting-queries.js index 9b03fca..cf76e3e 100644 --- a/src/utils/queries/markdown-permission-setting-queries.js +++ b/src/utils/queries/markdown-permission-setting-queries.js @@ -5,13 +5,13 @@ import {fetch_} from "../request-utils"; export const useMarkdownPermissionSettings = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useQuery( - ["markdown_permission_settings"], - () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/`), { - onSuccess: (data) => { - if(data){ - for(const setting of data){ - queryClient.invalidateQueries(["markdown_permission_setting", setting.id]); + return useQuery({ + queryKey: ["markdown_permission_settings"], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/`), + onSuccess: async (data) => { + if (data) { + for (const setting of data) { + await queryClient.invalidateQueries(["markdown_permission_setting", setting.id]); } } } @@ -21,9 +21,9 @@ export const useMarkdownPermissionSettings = () => { export const useMarkdownPermissionSetting = (setting_id) => { const config = useConfig(); - return useQuery( - ["markdown_permission_setting", setting_id], - () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/${setting_id}/`), { + return useQuery({ + queryKey: ["markdown_permission_setting", setting_id], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/${setting_id}`), enabled: !!setting_id, } ); @@ -32,15 +32,17 @@ export const useMarkdownPermissionSetting = (setting_id) => { export const useCreateMarkdownPermissionSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation((data) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/`, { - method: "POST", - body: JSON.stringify(data), - }), { - onSuccess: (data) => { - queryClient.invalidateQueries(["markdown_permission_setting", data.id]); - queryClient.invalidateQueries(["markdown_permission_settings"]); - } - }); + return useMutation( + { + mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/`, { + method: "POST", + body: JSON.stringify(data), + }), + onSuccess: async (data) => { + await queryClient.invalidateQueries(["markdown_permission_setting", data.id]); + await queryClient.invalidateQueries(["markdown_permission_settings"]); + } + }); }; export const useUpdateMarkdownPermissionSetting = () => { diff --git a/src/utils/queries/markdown-queries.js b/src/utils/queries/markdown-queries.js index b371b79..c2671f8 100644 --- a/src/utils/queries/markdown-queries.js +++ b/src/utils/queries/markdown-queries.js @@ -6,71 +6,72 @@ import {useConfig} from "../../ConfigProvider"; export const useMarkdown = (id) => { const config = useConfig(); - return useQuery( - ["markdown", id], - () => fetch_(`${config.BACKEND_HOST}/api/markdown/${id}`), - { - enabled: !!id, - }); + return useQuery({ + queryKey: ["markdown", id], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/markdown/${id}`), + enabled: !!id, + }); }; export const useIndexMarkdown = (path_id) => { const queryClient = useQueryClient(); const config = useConfig(); - return useQuery( - ["index_markdown", path_id], - () => fetch_(`${config.BACKEND_HOST}/api/markdown/get_index/${path_id}`),{ - enabled: !!path_id, - onSuccess: (data) => { - if(data && data.id){ - queryClient.setQueryData(["markdown", data.id], data); - } + return useQuery({ + queryKey: ["index_markdown", path_id], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/markdown/get_index/${path_id}`), + enabled: !!path_id, + onSuccess: (data) => { + if(data && data.id){ + queryClient.setQueryData({queryKey: ["markdown", data.id]}, data); } - }); + } + }); }; export const useHomeMarkdown = () => { const queryClient = useQueryClient(); const config = useConfig(); - return useQuery( - ["home_markdown"], - () => fetch_(`${config.BACKEND_HOST}/api/markdown/get_home`), { - onSuccess: (data) => { - if (data && data.id){ - queryClient.setQueryData(["markdown", data.id], data); - } + return useQuery({ + queryKey: ["home_markdown"], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/markdown/get_home`), + onSuccess: (data) => { + if (data && data.id){ + queryClient.setQueryData({queryKey: ["markdown", data.id]}, data); } - }); + } + }); }; export const useMarkdownsByPath = (pathId) => { const config = useConfig(); - return useQuery( - ["markdownsByPath", pathId], - () => fetch_(`${config.BACKEND_HOST}/api/markdown/by_path/${pathId}`), - { - enabled: !!pathId - }); + return useQuery({ + queryKey: ["markdownsByPath", pathId], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/markdown/by_path/${pathId}`), + enabled: !!pathId + }); }; export const useSaveMarkdown = () => { const queryClient = useQueryClient(); const config = useConfig(); - return useMutation(({id, data}) => { - const url = id - ? `${config.BACKEND_HOST}/api/markdown/${id}` - : `${config.BACKEND_HOST}/api/markdown/`; - const method = id ? "PATCH" : "POST"; - return fetch_(url, { - method, - body: JSON.stringify(data), - }) - },{ - onSuccess: (res) => { - queryClient.invalidateQueries(["markdownsByPath", res.path_id]); - queryClient.invalidateQueries(["markdown", res.id]); - queryClient.invalidateQueries(["tree"]); + return useMutation({ + mutationFn: ({id, data}) => { + const url = id + ? `${config.BACKEND_HOST}/api/markdown/${id}` + : `${config.BACKEND_HOST}/api/markdown/`; + const method = id ? "PATCH" : "POST"; + return fetch_(url, { + method, + body: JSON.stringify(data), + }); + }, + onSuccess: async (res) => { + await queryClient.invalidateQueries({queryKey: ["markdownsByPath", res.path_id]}); + await queryClient.invalidateQueries({queryKey: ["markdown", res.id]}); + await queryClient.invalidateQueries({queryKey: ["tree"]}); + + console.log("invalidateQueries: ", res.id, typeof res.id); }, }); }; @@ -80,34 +81,34 @@ export const useMoveMarkdown = () => { const queryClient = useQueryClient(); const config = useConfig(); - return useMutation( - ({markdown, direction}) => { + return useMutation({ + mutationFn: ({markdown, direction}) => { const apiEndpoint = `${config.BACKEND_HOST}/api/markdown/move_${direction}/${markdown.id}`; return fetch_(apiEndpoint, {method: "PATCH"}); }, - { - onSuccess: () => { - queryClient.invalidateQueries(["paths"]); - queryClient.invalidateQueries(["tree"]); - } + onSuccess: () => { + queryClient.invalidateQueries({queryKey: ["paths"]}); + queryClient.invalidateQueries({queryKey: ["tree"]}); } - ); + }); }; export const useSearchMarkdown = (keyword) => { const config = useConfig(); - return useQuery(["markdownsByKeyword", keyword], - () => fetch_( + return useQuery({ + queryKey: ["markdownsByKeyword", keyword], + queryFn: () => fetch_( `${config.BACKEND_HOST}/api/markdown/search/${encodeURIComponent(keyword)}`, ), - { - enabled: !!keyword, - } - ); + enabled: !!keyword, + }); }; export const useLinks = () => { const config = useConfig(); - return useQuery(["links"], () => fetch_(`${config.BACKEND_HOST}/api/markdown/links`)); + return useQuery({ + queryKey: ["links"], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/markdown/links`) + }); } diff --git a/src/utils/queries/markdown-setting-queries.js b/src/utils/queries/markdown-setting-queries.js index 1fb881e..5d55629 100644 --- a/src/utils/queries/markdown-setting-queries.js +++ b/src/utils/queries/markdown-setting-queries.js @@ -5,71 +5,66 @@ import {fetch_} from "../request-utils"; export const useMarkdownSettings = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useQuery( - ["markdown_setting"], - () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/`), - { - onSuccess: (data) => { - if(data){ - for(const setting of data) - queryClient.invalidateQueries(["markdown_setting", setting.id]); - } + return useQuery({ + queryKey: ["markdown_setting"], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/`), + onSuccess: (data) => { + if(data){ + for(const setting of data) + queryClient.setQueryData({queryKey: ["markdown_setting", setting.id]}, setting); } } - ); + }); }; export const useMarkdownSetting = (setting_id) => { const config = useConfig(); - return useQuery( - ["markdown_setting", setting_id], - () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/${setting_id}`, {}), { - enabled: !!setting_id, - } - ); + return useQuery({ + queryKey: ["markdown_setting", setting_id], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/${setting_id}`, {}), + enabled: !!setting_id, + }); }; export const useCreateMarkdownSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - (data) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/`, { + return useMutation({ + mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/`, { method: "POST", body: JSON.stringify(data) - }), { - onSuccess: (data) => { - queryClient.invalidateQueries(["markdown_setting", data.id]); - } + }), + onSuccess: (data) => { + queryClient.invalidateQueries({queryKey: ["markdown_setting", data.id]}); } - ); + }); }; export const useUpdateMarkdownSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/${id}`, { + return useMutation({ + mutationFn: ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/${id}`, { method: "PATCH", body: JSON.stringify(data) - }),{ - onSuccess: (data, variables) => { - queryClient.invalidateQueries(["markdown_setting", variables.id]); - } - }); + }), + onSuccess: (data, variables) => { + queryClient.invalidateQueries({queryKey: ["markdown_setting", variables.id]}); + } + }); }; export const useDeleteMarkdownSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - (id) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/${id}`, { + return useMutation({ + mutationFn: (id) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/${id}`, { method: "DELETE", - }),{ - onSuccess: (data) => { - queryClient.invalidateQueries(["markdown_setting", data.id]); - } + }), + onSuccess: (data) => { + queryClient.invalidateQueries({queryKey: ["markdown_setting", data.id]}); } - ); + }); }; diff --git a/src/utils/queries/markdown-template-queries.js b/src/utils/queries/markdown-template-queries.js index f57dbc8..d46130c 100644 --- a/src/utils/queries/markdown-template-queries.js +++ b/src/utils/queries/markdown-template-queries.js @@ -7,95 +7,90 @@ import {data} from "react-router-dom"; export const useMarkdownTemplate = (template_id) => { const config = useConfig(); - return useQuery( - ["markdown_template", template_id], - () => fetch_(`${config.BACKEND_HOST}/api/template/markdown/${template_id}`), { - enabled: !!template_id, - } - ); + return useQuery({ + queryKey: ["markdown_template", template_id], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/template/markdown/${template_id}`), + enabled: !!template_id, + }); }; export const useMarkdownTemplates = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useQuery( - ["markdown_templates"], - () => fetch_(`${config.BACKEND_HOST}/api/template/markdown/`), { - onSuccess: (data) => { - if(data){ - for(const template of data){ - queryClient.setQueryData(["markdown_template", template.id], template); - } + return useQuery({ + queryKey: ["markdown_templates"], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/template/markdown/`), + onSuccess: (data) => { + if(data){ + for(const template of data){ + queryClient.setQueryData({queryKey: ["markdown_template", template.id]}, template); } } } - ); + }); }; export const useUpdateMarkdownTemplate = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/template/markdown/${id}`, { + return useMutation({ + mutationFn: ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/template/markdown/${id}`, { method: "PUT", body: JSON.stringify(data), }), - { - onSuccess: (data) => { - queryClient.invalidateQueries(["markdown_template", data.id]); - queryClient.invalidateQueries(["markdown_templates"]); - } + onSuccess: (data) => { + queryClient.invalidateQueries({queryKey: ["markdown_template", data.id]}); + queryClient.invalidateQueries({queryKey: ["markdown_templates"]}); } - ); + }); } export const useCreateMarkdownTemplate = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - (data) => fetch_(`${config.BACKEND_HOST}/api/template/markdown/`, { + return useMutation({ + mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/template/markdown/`, { method: "POST", body: JSON.stringify(data), - }),{ - onSuccess: (data) => { - queryClient.invalidateQueries(["markdown_template", data.id]); - queryClient.invalidateQueries(["markdown_templates"]); - } + }), + onSuccess: (data) => { + queryClient.invalidateQueries({queryKey: ["markdown_template", data.id]}); + queryClient.invalidateQueries({queryKey: ["markdown_templates"]}); } - ); + }); } export const useDeleteMarkdownTemplate = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - (id) => fetch_(`${config.BACKEND_HOST}/api/template/markdown/${id}`, { + return useMutation({ + mutationFn: (id) => fetch_(`${config.BACKEND_HOST}/api/template/markdown/${id}`, { method: "DELETE" - }), { - onSuccess: (res, variables) => { - queryClient.invalidateQueries(["markdown_template", variables]); - queryClient.invalidateQueries(["markdown_templates"]); - } + }), + onSuccess: (res, variables) => { + queryClient.invalidateQueries({queryKey: ["markdown_template", variables]}); + queryClient.invalidateQueries({queryKey: ["markdown_templates"]}); } - ) + }); } export const useSaveMarkdownTemplate = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation(({id, data}) => { - const url = id - ? `${config.BACKEND_HOST}/api/template/markdown/${id}` - : `${config.BACKEND_HOST}/api/template/markdown/`; - const method = id? "PUT": "POST"; - return fetch_(url, { - method, - body: JSON.stringify(data), - }) - },{ + return useMutation({ + mutationFn: ({id, data}) => { + const url = id + ? `${config.BACKEND_HOST}/api/template/markdown/${id}` + : `${config.BACKEND_HOST}/api/template/markdown/`; + const method = id? "PUT": "POST"; + return fetch_(url, { + method, + body: JSON.stringify(data), + }); + }, onSuccess: (data) => { - queryClient.invalidateQueries(["markdown_template", data.id]); - queryClient.invalidateQueries(["markdown_templates"]); + queryClient.invalidateQueries({queryKey: ["markdown_template", data.id]}); + queryClient.invalidateQueries({queryKey: ["markdown_templates"]}); } }); } diff --git a/src/utils/queries/markdown-template-setting-queries.js b/src/utils/queries/markdown-template-setting-queries.js index 947f189..6af11a7 100644 --- a/src/utils/queries/markdown-template-setting-queries.js +++ b/src/utils/queries/markdown-template-setting-queries.js @@ -5,40 +5,39 @@ import {fetch_} from "../request-utils"; export const useMarkdownTemplateSettings = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useQuery( - ["markdown_template_settings"], - () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/`), { - onSuccess: (data) => { - if(data){ - for(const setting of data){ - queryClient.invalidateQueries(["markdown_template_setting", settings.id]); - } + return useQuery({ + queryKey: ["markdown_template_settings"], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/`), + onSuccess: (data) => { + if(data){ + for(const setting of data){ + queryClient.setQueryData({queryKey: ["markdown_template_setting", setting.id]}, setting); } } } - ); + }); }; export const useMarkdownTemplateSetting = (setting_id) => { const config = useConfig(); - return useQuery( - ["markdown_template_setting", setting_id], - () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/${setting_id}`), { - enabled: !!setting_id, - } - ); + return useQuery({ + queryKey: ["markdown_template_setting", setting_id], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/${setting_id}`), + enabled: !!setting_id, + }); }; export const useCreateMarkdownTemplateSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation((data) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/`, { - method: "POST", - body: JSON.stringify(data), - }), { + return useMutation({ + mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/`, { + method: "POST", + body: JSON.stringify(data), + }), onSuccess: (data) => { - queryClient.invalidateQueries(["markdown_template_setting", data.id]); + queryClient.invalidateQueries({queryKey: ["markdown_template_setting", data.id]}); } }); }; @@ -46,29 +45,27 @@ export const useCreateMarkdownTemplateSetting = () => { export const useUpdateMarkdownTemplateSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/${id}`, { + return useMutation({ + mutationFn: ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/${id}`, { method: "PATCH", body: JSON.stringify(data), - }),{ - onSuccess: (res) => { - queryClient.invalidateQueries(["markdown_template_setting", res.id]); - queryClient.invalidateQueries(["markdown_template_settings"]); - } + }), + onSuccess: (res) => { + queryClient.invalidateQueries({queryKey: ["markdown_template_setting", res.id]}); + queryClient.invalidateQueries({queryKey: ["markdown_template_settings"]}); } - ); + }); }; export const useDeleteMarkdownTemplateSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - ({id}) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/${id}`, { + return useMutation({ + mutationFn: ({id}) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/${id}`, { method: "DELETE", - }), { - onSuccess: (res, variables) => { - queryClient.invalidateQueries(["markdown_template_setting", variables.id]); - } + }), + onSuccess: (res, variables) => { + queryClient.invalidateQueries({queryKey: ["markdown_template_setting", variables.id]}); } - ); + }); }; diff --git a/src/utils/queries/path-queries.js b/src/utils/queries/path-queries.js index ba2c770..492f52e 100644 --- a/src/utils/queries/path-queries.js +++ b/src/utils/queries/path-queries.js @@ -6,87 +6,77 @@ import {useConfig} from "../../ConfigProvider"; export const usePaths = (parent_id) => { const queryClient = useQueryClient(); const config = useConfig(); - return useQuery( - ["paths", parent_id], - () => fetch_(`${config.BACKEND_HOST}/api/path/parent/${parent_id}`), - { - enabled: !!parent_id, - onSuccess: (data) => { - if(data) { - for (const pth of data) - { - queryClient.setQueryData(["path", pth.id], pth); - } + return useQuery({ + queryKey: ["paths", parent_id], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/path/parent/${parent_id}`), + enabled: !!parent_id, + onSuccess: (data) => { + if(data) { + for (const pth of data) + { + queryClient.setQueryData({queryKey: ["path", pth.id]}, pth); } } } - ); + }); }; export const usePath = (id) => { const config = useConfig(); - return useQuery( - ["path", id], - () => fetch_(`${config.BACKEND_HOST}/api/path/${id}`), - { - enabled: !!id - } - ); + return useQuery({ + queryKey: ["path", id], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/path/${id}`), + enabled: !!id + }); }; export const useCreatePath = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - (data) => fetch_(`${config.BACKEND_HOST}/api/path/`, { + return useMutation({ + mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/path/`, { method: "POST", body: JSON.stringify(data), }), - { - onSuccess: (res) => { - queryClient.invalidateQueries(["paths", res.parent_id]); - queryClient.invalidateQueries(["tree"]); - }, - } - ); + onSuccess: (res) => { + queryClient.invalidateQueries({queryKey: ["paths", res.parent_id]}); + queryClient.invalidateQueries({queryKey: ["tree"]}); + }, + }); }; export const useUpdatePath = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - ({ id, data }) => fetch_(`${config.BACKEND_HOST}/api/path/${id}`, { + return useMutation({ + mutationFn: ({ id, data }) => fetch_(`${config.BACKEND_HOST}/api/path/${id}`, { method: "PATCH", body: JSON.stringify(data), }), - { - onSuccess: (res) => { - queryClient.invalidateQueries(["paths", res.parent_id]); - queryClient.invalidateQueries(["path", res.id]); - queryClient.invalidateQueries(["tree"]); - }, - } - ); + onSuccess: (res) => { + queryClient.invalidateQueries({queryKey: ["paths", res.parent_id]}); + queryClient.invalidateQueries({queryKey: ["path", res.id]}); + queryClient.invalidateQueries({queryKey: ["tree"]}); + }, + }); }; export const useDeletePath = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - (id) => fetch_(`${config.BACKEND_HOST}/api/path/${id}`, { + return useMutation({ + mutationFn: (id) => fetch_(`${config.BACKEND_HOST}/api/path/${id}`, { method: "DELETE", }), - { - onSuccess: () => { - queryClient.invalidateQueries(["paths"]); - queryClient.invalidateQueries(["tree"]); - }, - } - ); + onSuccess: () => { + queryClient.invalidateQueries({queryKey: ["paths"]}); + queryClient.invalidateQueries({queryKey: ["tree"]}); + }, + }); }; @@ -94,16 +84,14 @@ export const useMovePath = () => { const queryClient = useQueryClient(); const config = useConfig(); - return useMutation( - ({path, direction}) => { + return useMutation({ + mutationFn: ({path, direction}) => { const apiEndpoint = `${config.BACKEND_HOST}/api/path/move_${direction}/${path.id}`; return fetch_(apiEndpoint, {method: "PATCH"}); }, - { - onSuccess: () => { - queryClient.invalidateQueries(["paths"]); - queryClient.invalidateQueries(["tree"]); - } + onSuccess: () => { + queryClient.invalidateQueries({queryKey: ["paths"]}); + queryClient.invalidateQueries({queryKey: ["tree"]}); } - ); + }); }; diff --git a/src/utils/queries/path-setting-queries.js b/src/utils/queries/path-setting-queries.js index a72a1ad..50eb187 100644 --- a/src/utils/queries/path-setting-queries.js +++ b/src/utils/queries/path-setting-queries.js @@ -5,76 +5,69 @@ import {fetch_} from "../request-utils"; export const usePathSettings = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useQuery( - "path_settings", - () => fetch_(`${config.BACKEND_HOST}/api/setting/path/`), - { - onSuccess: (data) => { - if(data){ - for(const setting of data) - queryClient.setQueryData(["path_setting", setting.id], setting); - } + return useQuery({ + queryKey: ["path_settings"], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/path/`), + onSuccess: (data) => { + if(data){ + for(const setting of data) + queryClient.setQueryData({queryKey: ["path_setting", setting.id]}, setting); } } - ); + }); }; export const usePathSetting = (setting_id) => { const config = useConfig(); - return useQuery( - ["path_setting", setting_id], - () => fetch_(`${config.BACKEND_HOST}/api/setting/path/${setting_id}`), - { - enabled: !!setting_id, - } - ); + return useQuery({ + queryKey: ["path_setting", setting_id], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/path/${setting_id}`), + enabled: !!setting_id, + }); }; export const useCreatePathSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - (data) => fetch_(`${config.BACKEND_HOST}/api/setting/path/`, { + return useMutation({ + mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/setting/path/`, { method: "POST", body: JSON.stringify(data) - }), { - onSuccess: (data) => { - queryClient.invalidateQueries(["path_setting", data.id]); - queryClient.invalidateQueries(["path_settings"]); - } + }), + onSuccess: (data) => { + queryClient.invalidateQueries({queryKey: ["path_setting", data.id]}); + queryClient.invalidateQueries({queryKey: ["path_settings"]}); } - ); + }); }; export const useUpdatePathSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/path/${id}`, { + return useMutation({ + mutationFn: ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/path/${id}`, { method: "PATCH", body: JSON.stringify(data) - }), { - onSuccess: (data, variables) => { - queryClient.invalidateQueries(["path_setting", variables.id]); - queryClient.invalidateQueries(["path_settings"]); - } + }), + onSuccess: (data, variables) => { + queryClient.invalidateQueries({queryKey: ["path_setting", variables.id]}); + queryClient.invalidateQueries({queryKey: ["path_settings"]}); } - ); + }); }; export const useDeletePathSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - (id) => fetch_(`${config.BACKEND_HOST}/api/setting/path/${id}`, { + return useMutation({ + mutationFn: (id) => fetch_(`${config.BACKEND_HOST}/api/setting/path/${id}`, { method: "DELETE", - }),{ - onSuccess: (data, variables) => { - queryClient.invalidateQueries(["path_setting", variables.id]); - queryClient.invalidateQueries(["path_settings"]); - } + }), + onSuccess: (data, variables) => { + queryClient.invalidateQueries({queryKey: ["path_setting", variables.id]}); + queryClient.invalidateQueries({queryKey: ["path_settings"]}); } - ); + }); }; diff --git a/src/utils/queries/tree-queries.js b/src/utils/queries/tree-queries.js index 3bcc057..7dd4510 100644 --- a/src/utils/queries/tree-queries.js +++ b/src/utils/queries/tree-queries.js @@ -6,14 +6,12 @@ import {useConfig} from "../../ConfigProvider"; export const useTree = () => { const queryClient = useQueryClient(); const config = useConfig(); - return useQuery( - ["tree"], - () => fetch_(`${config.BACKEND_HOST}/api/tree/`), - { - onSuccess: data => { - if(data) - queryClient.setQueryData(["tree"], data); - } + return useQuery({ + queryKey: ["tree"], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/tree/`), + onSuccess: data => { + if(data) + queryClient.setQueryData({queryKey: ["tree"]}, data); } - ); -} + }); +}; diff --git a/src/utils/queries/webhook-queries.js b/src/utils/queries/webhook-queries.js index a0d4f3f..bb444b6 100644 --- a/src/utils/queries/webhook-queries.js +++ b/src/utils/queries/webhook-queries.js @@ -5,147 +5,132 @@ import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"; export const useWebhooks = () =>{ const queryClient = useQueryClient(); const config = useConfig(); - return useQuery( - ["webhooks"], - () => fetch_(`${config.BACKEND_HOST}/api/webhook/`), - { - onSuccess: (data) => { - if(data){ - for(const webhook of data){ - queryClient.setQueryData(["webhook", data.id], data); - } + return useQuery({ + queryKey: ["webhooks"], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/webhook/`), + onSuccess: (data) => { + if(data){ + for(const webhook of data){ + queryClient.setQueryData({queryKey: ["webhook", data.id]}, data); } } } - ); + }); }; export const useCreateWebhook = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - (data) => fetch_(`${config.BACKEND_HOST}/api/webhook/`, { + return useMutation({ + mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/webhook/`, { method: "POST", body: JSON.stringify({ "hook_url": data }), }), - { - onSuccess: () => { - queryClient.invalidateQueries(["webhooks"]); - } + onSuccess: () => { + queryClient.invalidateQueries({queryKey: ["webhooks"]}); } - ); + }); }; export const useUpdateWebhook = () =>{ const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/webhook/${id}`, { + return useMutation({ + mutationFn: ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/webhook/${id}`, { method: "PATCH", body: JSON.stringify(data) }), - { - onSuccess: (res) => { - queryClient.invalidateQueries(["webhook", res.id]); - queryClient.invalidateQueries(["webhooks"]); - } + onSuccess: (res) => { + queryClient.invalidateQueries({queryKey: ["webhook", res.id]}); + queryClient.invalidateQueries({queryKey: ["webhooks"]}); } - ); + }); }; export const useDeleteWebhook = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - (id) => fetch_(`${config.BACKEND_HOST}/api/webhook/${id}`, { + return useMutation({ + mutationFn: (id) => fetch_(`${config.BACKEND_HOST}/api/webhook/${id}`, { method: "DELETE", }), - { - onSuccess: (res, variables) => { - queryClient.invalidateQueries(["webhook", variables.id]); - queryClient.invalidateQueries(["webhooks"]); - } + onSuccess: (res, variables) => { + queryClient.invalidateQueries({queryKey: ["webhook", variables.id]}); + queryClient.invalidateQueries({queryKey: ["webhooks"]}); } - ) + }); } export const useWebhookSettings = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useQuery( - ["webhook_setting"], - () => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/`), - { - onSuccess: (data) => { - if(data){ - for(const setting of data){ - queryClient.setQueryData(["webhook_setting", setting.id], setting); - } + return useQuery({ + queryKey: ["webhook_setting"], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/`), + onSuccess: (data) => { + if(data){ + for(const setting of data){ + queryClient.setQueryData({queryKey: ["webhook_setting", setting.id]}, setting); } } } - ); + }); }; export const useWebhookSetting = (setting_id) => { const config = useConfig(); - return useQuery( - ["webhook_setting", setting_id], - () => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/${setting_id}`), - { - enabled: !!setting_id, - }); + return useQuery({ + queryKey: ["webhook_setting", setting_id], + queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/${setting_id}`), + enabled: !!setting_id, + }); }; export const useCreateWebhookSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - (data) => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/`, { + return useMutation({ + mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/`, { method: "POST", body: JSON.stringify(data) - }),{ - onSuccess: (res) => { - queryClient.invalidateQueries(["webhook_setting", res.id]); - queryClient.invalidateQueries(["webhook_setting"]); - } + }), + onSuccess: (res) => { + queryClient.invalidateQueries({queryKey: ["webhook_setting", res.id]}); + queryClient.invalidateQueries({queryKey: ["webhook_setting"]}); } - ); + }); }; export const useUpdateWebhookSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/${id}`, { + return useMutation({ + mutationFn: ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/${id}`, { method: "PATCH", body: JSON.stringify(data) - }),{ - onSuccess: (res, variables) => { - queryClient.invalidateQueries(["webhook_setting", variables.id]); - queryClient.invalidateQueries(["webhook_setting"]); - } + }), + onSuccess: (res, variables) => { + queryClient.invalidateQueries({queryKey: ["webhook_setting", variables.id]}); + queryClient.invalidateQueries({queryKey: ["webhook_setting"]}); } - ); + }); }; export const useDeleteWebhookSetting = () => { const config = useConfig(); const queryClient = useQueryClient(); - return useMutation( - (id) => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/${id}`, { + return useMutation({ + mutationFn: (id) => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/${id}`, { method: "DELETE", }), - { - onSuccess: (res, variables) => { - queryClient.invalidateQueries(["webhook_setting", variables.id]); - queryClient.invalidateQueries(["webhook_setting"]); - } + onSuccess: (res, variables) => { + queryClient.invalidateQueries({queryKey: ["webhook_setting", variables.id]}); + queryClient.invalidateQueries({queryKey: ["webhook_setting"]}); } - ); + }); };