hzhang/HangmanLab.Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: hzhang:87b4246a9b06966852e72077537b861b246f4aa7
Branches Tags
hzhang:master
...
compare: hzhang:101666d26d4db0d2627d61aa0e0b651456527a08
Branches Tags
hzhang:master

1 Commits
87b4246a9b ... 101666d26d

Author SHA1 Message Date
hzhang
101666d26d upgrade react-query to v5 2025-05-09 00:44:53 +01:00
20 changed files with 507 additions and 478 deletions
Expand all files Collapse all files

5
BuildConfig.sh
View File

@@ -5,7 +5,7 @@ FRONTEND_HOST="${FRONTEND_HOST:-http://localhost:80}"
KC_CLIENT_ID="${KC_CLIENT_ID:-labdev}" KC_CLIENT_ID="${KC_CLIENT_ID:-labdev}"
KC_HOST="${KC_HOST:-https://login.hangman-lab.top}" KC_HOST="${KC_HOST:-https://login.hangman-lab.top}"
KC_REALM="${KC_REALM:-Hangman-Lab}" KC_REALM="${KC_REALM:-Hangman-Lab}"
DEBUG="${DEBUG:false}"
rm -f /usr/share/nginx/html/config.js rm -f /usr/share/nginx/html/config.js
@@ -24,7 +24,8 @@ cat <<EOL > /usr/share/nginx/html/config.json
"scope": "openid profile email roles", "scope": "openid profile email roles",
"popup_redirect_uri": "${FRONTEND_HOST}/popup_callback", "popup_redirect_uri": "${FRONTEND_HOST}/popup_callback",
"silent_redirect_uri": "${FRONTEND_HOST}/silent_callback" "silent_redirect_uri": "${FRONTEND_HOST}/silent_callback"
} },
"DEBUG": ${DEBUG}
} }
EOL EOL

57
package-lock.json generated
View File

@@ -10,7 +10,8 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@reduxjs/toolkit": "^2.7.0", "@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", "assert": "^2.1.0",
"axios": "^1.7.9", "axios": "^1.7.9",
"bulma": "^1.0.2", "bulma": "^1.0.2",
@@ -2712,38 +2713,56 @@
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==" "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="
}, },
"node_modules/@tanstack/query-core": { "node_modules/@tanstack/query-core": {
"version": "4.36.1", "version": "5.75.5",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.36.1.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.75.5.tgz",
"integrity": "sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==", "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": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
} }
}, },
"node_modules/@tanstack/react-query": { "node_modules/@tanstack/react-query": {
"version": "4.36.1", "version": "5.75.5",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.36.1.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.75.5.tgz",
"integrity": "sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==", "integrity": "sha512-QrLCJe40BgBVlWdAdf2ZEVJ0cISOuEy/HKupId1aTKU6gPJZVhSvZpH+Si7csRflCJphzlQ77Yx6gUxGW9o0XQ==",
"license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-core": "4.36.1", "@tanstack/query-core": "5.75.5"
"use-sync-external-store": "^1.2.0"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react": "^18 || ^19"
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", }
"react-native": "*" },
"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": { "funding": {
"react-dom": { "type": "github",
"optional": true "url": "https://github.com/sponsors/tannerlinsley"
}, },
"react-native": { "peerDependencies": {
"optional": true "@tanstack/react-query": "^5.75.5",
} "react": "^18 || ^19"
} }
}, },
"node_modules/@testing-library/dom": { "node_modules/@testing-library/dom": {

3
package.json
View File

@@ -13,7 +13,8 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@reduxjs/toolkit": "^2.7.0", "@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", "assert": "^2.1.0",
"axios": "^1.7.9", "axios": "^1.7.9",
"bulma": "^1.0.2", "bulma": "^1.0.2",

6
src/App.js
View File

@@ -29,15 +29,15 @@ const App = () => {
element={<Navigate to = "/markdown/1"/>} element={<Navigate to = "/markdown/1"/>}
/> />
<Route path="/testx" element={<h2>test2</h2>}/> <Route path="/testx" element={<h2>test2</h2>}/>
<Route path="/markdown/:id" element={<MarkdownContent />} /> <Route path="/markdown/:strId" element={<MarkdownContent />} />
<Route path="/callback" element={<Callback />} /> <Route path="/callback" element={<Callback />} />
<Route path="/test" element={<h1>TEST</h1>}></Route> <Route path="/test" element={<h1>TEST</h1>}></Route>
<Route path="/markdown/create" element={<MarkdownEditor />} /> <Route path="/markdown/create" element={<MarkdownEditor />} />
<Route path="/markdown/edit/:id" element={<MarkdownEditor />} /> <Route path="/markdown/edit/:strId" element={<MarkdownEditor />} />
<Route path="/popup_callback" element={<PopupCallback />} /> <Route path="/popup_callback" element={<PopupCallback />} />
<Route path="/silent_callback" element={<SilentCallback />} /> <Route path="/silent_callback" element={<SilentCallback />} />
<Route path="/template/create" element={<MarkdownTemplateEditor />} /> <Route path="/template/create" element={<MarkdownTemplateEditor />} />
<Route path="/template/edit/:id" element={<MarkdownTemplateEditor />} /> <Route path="/template/edit/:strId" element={<MarkdownTemplateEditor />} />
</Routes> </Routes>
</main> </main>
</div> </div>

14
src/components/Debug/ControlledReactQueryDevtools.js Normal file
View File

@@ -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 (<ReactQueryDevtools />);
return (<></>);
};
export default ControlledReactQueryDevtools;

3
src/components/MarkdownTemplate/MarkdownTemplateEditor.js
View File

@@ -10,7 +10,8 @@ const MarkdownTemplateEditor = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const { id } = useParams(); const { strId } = useParams();
const id = Number(strId);
const { data: template, isFetching: templateIsFetching } = useMarkdownTemplate(id); const { data: template, isFetching: templateIsFetching } = useMarkdownTemplate(id);
const saveMarkdownTemplate = useSaveMarkdownTemplate(); const saveMarkdownTemplate = useSaveMarkdownTemplate();

18
src/components/MarkdownTemplate/TemplateSelector.js
View File

@@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useMarkdownTemplates } from "../../utils/queries/markdown-template-queries"; import { useMarkdownTemplates } from "../../utils/queries/markdown-template-queries";
const TemplateSelector = ({ template, onChange }) => { const TemplateSelector = ({ template, onChange, onCreate }) => {
const { data: templates, isFetching: templatesAreFetching } = useMarkdownTemplates(); const { data: templates, isFetching: templatesAreFetching } = useMarkdownTemplates();
const [_template, setTemplate] = useState( const [_template, setTemplate] = useState(
templates?.find((t) => t.id === template?.id) || { templates?.find((t) => t.id === template?.id) || {
@@ -34,13 +34,15 @@ const TemplateSelector = ({ template, onChange }) => {
value={template?.id || ""} value={template?.id || ""}
onChange={(e) => { onChange={(e) => {
const id = parseInt(e.target.value, 10); const id = parseInt(e.target.value, 10);
onChange( const selectedTemplate = templates.find((t) => t.id === id) || {
templates.find((t) => t.id === id) || { title: "",
title: "", parameters: [],
parameters: [], layout: "",
layout: "", };
} onChange(selectedTemplate);
); if (onCreate) {
onCreate(selectedTemplate);
}
}} }}
> >
<option value="">(None)</option> <option value="">(None)</option>

5
src/components/Markdowns/MarkdownContent.js
View File

@@ -11,7 +11,8 @@ import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries
import {useMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries"; import {useMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries";
const MarkdownContent = () => { const MarkdownContent = () => {
const { id } = useParams(); const { strId } = useParams();
const id = Number(strId);
const [indexTitle, setIndexTitle] = useState(null); const [indexTitle, setIndexTitle] = useState(null);
const {data: markdown, isLoading, error} = useMarkdown(id); const {data: markdown, isLoading, error} = useMarkdown(id);
const {data: path, isFetching: isPathFetching} = usePath(markdown?.path_id); const {data: path, isFetching: isPathFetching} = usePath(markdown?.path_id);
@@ -35,8 +36,8 @@ const MarkdownContent = () => {
if (error) { if (error) {
return <div>Error: {error.message || "Failed to load content"}</div>; return <div>Error: {error.message || "Failed to load content"}</div>;
} }
if (markdown.isMessage) { if (markdown.isMessage) {
return ( return (
<div className="markdown-content-container"> <div className="markdown-content-container">
<div className="notification is-info"> <div className="notification is-info">

148
src/components/Markdowns/MarkdownEditor.js
View File

@@ -11,11 +11,13 @@ import {useMarkdownTemplate, useMarkdownTemplates} from "../../utils/queries/mar
import TemplatedEditor from "./TemplatedEditor"; import TemplatedEditor from "./TemplatedEditor";
import {useMarkdownTemplateSetting, useUpdateMarkdownTemplateSetting, useCreateMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries"; import {useMarkdownTemplateSetting, useUpdateMarkdownTemplateSetting, useCreateMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries";
import TemplateSelector from "../MarkdownTemplate/TemplateSelector"; import TemplateSelector from "../MarkdownTemplate/TemplateSelector";
import {useCreateMarkdownSetting} from "../../utils/queries/markdown-setting-queries";
const MarkdownEditor = () => { const MarkdownEditor = () => {
const { roles } = useContext(AuthContext); const { roles } = useContext(AuthContext);
const navigate = useNavigate(); const navigate = useNavigate();
const { id } = useParams(); const { strId } = useParams();
const id = Number(strId);
const [title, setTitle] = useState(""); const [title, setTitle] = useState("");
const [content, setContent] = useState({}); const [content, setContent] = useState({});
const [shortcut, setShortcut] = useState(""); const [shortcut, setShortcut] = useState("");
@@ -23,6 +25,7 @@ const MarkdownEditor = () => {
const [isRawMode, setIsRawMode] = useState(false); const [isRawMode, setIsRawMode] = useState(false);
const [rawContent, setRawContent] = useState(""); const [rawContent, setRawContent] = useState("");
const [jsonError, setJsonError] = useState(""); const [jsonError, setJsonError] = useState("");
const [selectedTemplate, setSelectedTemplate] = useState(null);
const {data: markdown, isFetching: isMarkdownFetching, error} = useMarkdown(id); const {data: markdown, isFetching: isMarkdownFetching, error} = useMarkdown(id);
const saveMarkdown = useSaveMarkdown(); const saveMarkdown = useSaveMarkdown();
const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id); const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id);
@@ -32,10 +35,12 @@ const MarkdownEditor = () => {
const createTemplateSetting = useCreateMarkdownTemplateSetting(); const createTemplateSetting = useCreateMarkdownTemplateSetting();
const updateSetting = useUpdateMarkdownSetting(); const updateSetting = useUpdateMarkdownSetting();
const {data: templates, isFetching: templatesAreFetching} = useMarkdownTemplates(); const {data: templates, isFetching: templatesAreFetching} = useMarkdownTemplates();
const createMarkdownSetting = useCreateMarkdownSetting();
const notReady = isMarkdownFetching || isTemplateFetching || isSettingFetching || isTemplateSettingFetching || templatesAreFetching; const notReady = isMarkdownFetching || isTemplateFetching || isSettingFetching || isTemplateSettingFetching || templatesAreFetching;
useEffect(() => { useEffect(() => {
if(markdown){ if (markdown) {
setTitle(markdown.title); setTitle(markdown.title);
if (markdown.isMessage) { if (markdown.isMessage) {
navigate("/"); navigate("/");
@@ -56,22 +61,84 @@ const MarkdownEditor = () => {
} }
}, [markdown, navigate]); }, [markdown, navigate]);
useEffect(() => {
if (template) {
setSelectedTemplate(template);
}
}, [template]);
const handleSave = () => { const handleSave = () => {
if (isRawMode && jsonError) { if (isRawMode && jsonError) {
alert("Please fix the JSON errors before saving"); alert("Please fix the JSON errors before saving");
return; return;
} }
saveMarkdown.mutate( const saveData = {
{id, data: {title, content: JSON.stringify(content), path_id: pathId, shortcut}}, title,
{ content: JSON.stringify(content),
onSuccess: () => { path_id: pathId,
navigate("/"); shortcut
}, };
onError: () => { console.log("markdown", markdown);
alert("Error saving markdown file"); 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 = () => { const toggleEditMode = () => {
@@ -104,54 +171,17 @@ const MarkdownEditor = () => {
}; };
const handleTemplateChange = (newTemplate) => { const handleTemplateChange = (newTemplate) => {
if (!newTemplate) return; setSelectedTemplate(newTemplate);
if (templateSetting) { if (templateSetting) {
updateTemplateSetting.mutate( updateTemplateSetting.mutate({
{ id: templateSetting.id,
id: templateSetting.id, data: {
data: { template_id: newTemplate.id } template_id: newTemplate.id
},
{
onSuccess: () => {
setContent({});
},
onError: () => {
alert("Error updating template");
}
} }
); });
} 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"); const hasPermission = roles.includes("admin") || roles.includes("creator");
if (!hasPermission) if (!hasPermission)
return <div className="notification is-danger">Permission Denied</div>; return <div className="notification is-danger">Permission Denied</div>;
@@ -211,7 +241,7 @@ const MarkdownEditor = () => {
<div className="field"> <div className="field">
<div className="control"> <div className="control">
<TemplateSelector <TemplateSelector
template={template} template={selectedTemplate || template}
onChange={handleTemplateChange} onChange={handleTemplateChange}
/> />
</div> </div>
@@ -249,7 +279,7 @@ const MarkdownEditor = () => {
<TemplatedEditor <TemplatedEditor
style={{height: "70vh"}} style={{height: "70vh"}}
content={content} content={content}
template={template} template={!markdown?.id ? selectedTemplate : template}
onContentChanged={(k, v) => setContent( onContentChanged={(k, v) => setContent(
prev => ({...prev, [k]: v}) prev => ({...prev, [k]: v})
)} )}
@@ -275,7 +305,11 @@ const MarkdownEditor = () => {
<div className="column is-half"> <div className="column is-half">
<h3 className="subtitle is-5">Preview</h3> <h3 className="subtitle is-5">Preview</h3>
<MarkdownView content={content} template={template} height='70vh'/> <MarkdownView
content={content}
template={!markdown?.id ? selectedTemplate : template}
height='70vh'
/>
</div> </div>
</div> </div>
</div> </div>

12
src/components/PathManager.js
View File

@@ -24,10 +24,10 @@ const PathManager = ({ currentPathId = 1, onPathChange }) => {
let current_id = pathId; let current_id = pathId;
while (current_id) { while (current_id) {
try { try {
const pathData = await queryClient.fetchQuery( const pathData = await queryClient.fetchQuery({
["path", current_id], queryKey: ["path", current_id],
() => fetch_(`${config.BACKEND_HOST}/api/path/${current_id}`) queryFn: () => fetch_(`${config.BACKEND_HOST}/api/path/${current_id}`)
); });
if (!pathData) break; if (!pathData) break;
path.unshift({ name: pathData.name, id: pathData.id }); path.unshift({ name: pathData.name, id: pathData.id });
current_id = pathData.parent_id; current_id = pathData.parent_id;
@@ -71,8 +71,8 @@ const PathManager = ({ currentPathId = 1, onPathChange }) => {
{ name: searchTerm.trim(), parent_id: currentPathId }, { name: searchTerm.trim(), parent_id: currentPathId },
{ {
onSuccess: (newDir) => { onSuccess: (newDir) => {
queryClient.setQueryData(["path", newDir.id], newDir); queryClient.setQueryData({queryKey: ["path", newDir.id]}, newDir);
queryClient.invalidateQueries(["paths", currentPathId]); queryClient.invalidateQueries({queryKey: ["paths", currentPathId]});
setSearchTerm(""); setSearchTerm("");
alert("Directory created successfully."); alert("Directory created successfully.");
}, },

2
src/index.js
View File

@@ -5,6 +5,7 @@ import AuthProvider, {AuthContext} from "./AuthProvider";
import "bulma/css/bulma.min.css"; import "bulma/css/bulma.min.css";
import {QueryClient, QueryClientProvider} from "@tanstack/react-query" import {QueryClient, QueryClientProvider} from "@tanstack/react-query"
import ConfigProvider from "./ConfigProvider"; import ConfigProvider from "./ConfigProvider";
import ControlledReactQueryDevtools from "./components/Debug/ControlledReactQueryDevtools";
const queryClient = new QueryClient({ const queryClient = new QueryClient({
defaultOptions: { defaultOptions: {
@@ -52,6 +53,7 @@ root.render(
<AuthProvider> <AuthProvider>
<EnhancedAuthProvider> <EnhancedAuthProvider>
<App /> <App />
<ControlledReactQueryDevtools />
</EnhancedAuthProvider> </EnhancedAuthProvider>
</AuthProvider> </AuthProvider>
</QueryClientProvider> </QueryClientProvider>

40
src/utils/queries/markdown-permission-setting-queries.js
View File

@@ -5,13 +5,13 @@ import {fetch_} from "../request-utils";
export const useMarkdownPermissionSettings = () => { export const useMarkdownPermissionSettings = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useQuery( return useQuery({
["markdown_permission_settings"], queryKey: ["markdown_permission_settings"],
() => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/`), { queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/`),
onSuccess: (data) => { onSuccess: async (data) => {
if(data){ if (data) {
for(const setting of data){ for (const setting of data) {
queryClient.invalidateQueries(["markdown_permission_setting", setting.id]); await queryClient.invalidateQueries(["markdown_permission_setting", setting.id]);
} }
} }
} }
@@ -21,9 +21,9 @@ export const useMarkdownPermissionSettings = () => {
export const useMarkdownPermissionSetting = (setting_id) => { export const useMarkdownPermissionSetting = (setting_id) => {
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["markdown_permission_setting", setting_id], queryKey: ["markdown_permission_setting", setting_id],
() => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/${setting_id}/`), { queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/${setting_id}`),
enabled: !!setting_id, enabled: !!setting_id,
} }
); );
@@ -32,15 +32,17 @@ export const useMarkdownPermissionSetting = (setting_id) => {
export const useCreateMarkdownPermissionSetting = () => { export const useCreateMarkdownPermissionSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation((data) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/`, { return useMutation(
method: "POST", {
body: JSON.stringify(data), mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/permission/`, {
}), { method: "POST",
onSuccess: (data) => { body: JSON.stringify(data),
queryClient.invalidateQueries(["markdown_permission_setting", data.id]); }),
queryClient.invalidateQueries(["markdown_permission_settings"]); onSuccess: async (data) => {
} await queryClient.invalidateQueries(["markdown_permission_setting", data.id]);
}); await queryClient.invalidateQueries(["markdown_permission_settings"]);
}
});
}; };
export const useUpdateMarkdownPermissionSetting = () => { export const useUpdateMarkdownPermissionSetting = () => {

117
src/utils/queries/markdown-queries.js
View File

@@ -6,71 +6,72 @@ import {useConfig} from "../../ConfigProvider";
export const useMarkdown = (id) => { export const useMarkdown = (id) => {
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["markdown", id], queryKey: ["markdown", id],
() => fetch_(`${config.BACKEND_HOST}/api/markdown/${id}`), queryFn: () => fetch_(`${config.BACKEND_HOST}/api/markdown/${id}`),
{ enabled: !!id,
enabled: !!id, });
});
}; };
export const useIndexMarkdown = (path_id) => { export const useIndexMarkdown = (path_id) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["index_markdown", path_id], queryKey: ["index_markdown", path_id],
() => fetch_(`${config.BACKEND_HOST}/api/markdown/get_index/${path_id}`),{ queryFn: () => fetch_(`${config.BACKEND_HOST}/api/markdown/get_index/${path_id}`),
enabled: !!path_id, enabled: !!path_id,
onSuccess: (data) => { onSuccess: (data) => {
if(data && data.id){ if(data && data.id){
queryClient.setQueryData(["markdown", data.id], data); queryClient.setQueryData({queryKey: ["markdown", data.id]}, data);
}
} }
}); }
});
}; };
export const useHomeMarkdown = () => { export const useHomeMarkdown = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["home_markdown"], queryKey: ["home_markdown"],
() => fetch_(`${config.BACKEND_HOST}/api/markdown/get_home`), { queryFn: () => fetch_(`${config.BACKEND_HOST}/api/markdown/get_home`),
onSuccess: (data) => { onSuccess: (data) => {
if (data && data.id){ if (data && data.id){
queryClient.setQueryData(["markdown", data.id], data); queryClient.setQueryData({queryKey: ["markdown", data.id]}, data);
}
} }
}); }
});
}; };
export const useMarkdownsByPath = (pathId) => { export const useMarkdownsByPath = (pathId) => {
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["markdownsByPath", pathId], queryKey: ["markdownsByPath", pathId],
() => fetch_(`${config.BACKEND_HOST}/api/markdown/by_path/${pathId}`), queryFn: () => fetch_(`${config.BACKEND_HOST}/api/markdown/by_path/${pathId}`),
{ enabled: !!pathId
enabled: !!pathId });
});
}; };
export const useSaveMarkdown = () => { export const useSaveMarkdown = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const config = useConfig(); const config = useConfig();
return useMutation(({id, data}) => { return useMutation({
const url = id mutationFn: ({id, data}) => {
? `${config.BACKEND_HOST}/api/markdown/${id}` const url = id
: `${config.BACKEND_HOST}/api/markdown/`; ? `${config.BACKEND_HOST}/api/markdown/${id}`
const method = id ? "PATCH" : "POST"; : `${config.BACKEND_HOST}/api/markdown/`;
return fetch_(url, { const method = id ? "PATCH" : "POST";
method, return fetch_(url, {
body: JSON.stringify(data), method,
}) body: JSON.stringify(data),
},{ });
onSuccess: (res) => { },
queryClient.invalidateQueries(["markdownsByPath", res.path_id]); onSuccess: async (res) => {
queryClient.invalidateQueries(["markdown", res.id]); await queryClient.invalidateQueries({queryKey: ["markdownsByPath", res.path_id]});
queryClient.invalidateQueries(["tree"]); 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 queryClient = useQueryClient();
const config = useConfig(); const config = useConfig();
return useMutation( return useMutation({
({markdown, direction}) => { mutationFn: ({markdown, direction}) => {
const apiEndpoint = `${config.BACKEND_HOST}/api/markdown/move_${direction}/${markdown.id}`; const apiEndpoint = `${config.BACKEND_HOST}/api/markdown/move_${direction}/${markdown.id}`;
return fetch_(apiEndpoint, {method: "PATCH"}); return fetch_(apiEndpoint, {method: "PATCH"});
}, },
{ onSuccess: () => {
onSuccess: () => { queryClient.invalidateQueries({queryKey: ["paths"]});
queryClient.invalidateQueries(["paths"]); queryClient.invalidateQueries({queryKey: ["tree"]});
queryClient.invalidateQueries(["tree"]);
}
} }
); });
}; };
export const useSearchMarkdown = (keyword) => { export const useSearchMarkdown = (keyword) => {
const config = useConfig(); const config = useConfig();
return useQuery(["markdownsByKeyword", keyword], return useQuery({
() => fetch_( queryKey: ["markdownsByKeyword", keyword],
queryFn: () => fetch_(
`${config.BACKEND_HOST}/api/markdown/search/${encodeURIComponent(keyword)}`, `${config.BACKEND_HOST}/api/markdown/search/${encodeURIComponent(keyword)}`,
), ),
{ enabled: !!keyword,
enabled: !!keyword, });
}
);
}; };
export const useLinks = () => { export const useLinks = () => {
const config = useConfig(); 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`)
});
} }

69
src/utils/queries/markdown-setting-queries.js
View File

@@ -5,71 +5,66 @@ import {fetch_} from "../request-utils";
export const useMarkdownSettings = () => { export const useMarkdownSettings = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useQuery( return useQuery({
["markdown_setting"], queryKey: ["markdown_setting"],
() => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/`), queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/`),
{ onSuccess: (data) => {
onSuccess: (data) => { if(data){
if(data){ for(const setting of data)
for(const setting of data) queryClient.setQueryData({queryKey: ["markdown_setting", setting.id]}, setting);
queryClient.invalidateQueries(["markdown_setting", setting.id]);
}
} }
} }
); });
}; };
export const useMarkdownSetting = (setting_id) => { export const useMarkdownSetting = (setting_id) => {
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["markdown_setting", setting_id], queryKey: ["markdown_setting", setting_id],
() => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/${setting_id}`, {}), { queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/${setting_id}`, {}),
enabled: !!setting_id, enabled: !!setting_id,
} });
);
}; };
export const useCreateMarkdownSetting = () => { export const useCreateMarkdownSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
(data) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/`, { mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/`, {
method: "POST", method: "POST",
body: JSON.stringify(data) body: JSON.stringify(data)
}), { }),
onSuccess: (data) => { onSuccess: (data) => {
queryClient.invalidateQueries(["markdown_setting", data.id]); queryClient.invalidateQueries({queryKey: ["markdown_setting", data.id]});
}
} }
); });
}; };
export const useUpdateMarkdownSetting = () => { export const useUpdateMarkdownSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/${id}`, { mutationFn: ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/${id}`, {
method: "PATCH", method: "PATCH",
body: JSON.stringify(data) body: JSON.stringify(data)
}),{ }),
onSuccess: (data, variables) => { onSuccess: (data, variables) => {
queryClient.invalidateQueries(["markdown_setting", variables.id]); queryClient.invalidateQueries({queryKey: ["markdown_setting", variables.id]});
} }
}); });
}; };
export const useDeleteMarkdownSetting = () => { export const useDeleteMarkdownSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
(id) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/${id}`, { mutationFn: (id) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/${id}`, {
method: "DELETE", method: "DELETE",
}),{ }),
onSuccess: (data) => { onSuccess: (data) => {
queryClient.invalidateQueries(["markdown_setting", data.id]); queryClient.invalidateQueries({queryKey: ["markdown_setting", data.id]});
}
} }
); });
}; };

97
src/utils/queries/markdown-template-queries.js
View File

@@ -7,95 +7,90 @@ import {data} from "react-router-dom";
export const useMarkdownTemplate = (template_id) => { export const useMarkdownTemplate = (template_id) => {
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["markdown_template", template_id], queryKey: ["markdown_template", template_id],
() => fetch_(`${config.BACKEND_HOST}/api/template/markdown/${template_id}`), { queryFn: () => fetch_(`${config.BACKEND_HOST}/api/template/markdown/${template_id}`),
enabled: !!template_id, enabled: !!template_id,
} });
);
}; };
export const useMarkdownTemplates = () => { export const useMarkdownTemplates = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useQuery( return useQuery({
["markdown_templates"], queryKey: ["markdown_templates"],
() => fetch_(`${config.BACKEND_HOST}/api/template/markdown/`), { queryFn: () => fetch_(`${config.BACKEND_HOST}/api/template/markdown/`),
onSuccess: (data) => { onSuccess: (data) => {
if(data){ if(data){
for(const template of data){ for(const template of data){
queryClient.setQueryData(["markdown_template", template.id], template); queryClient.setQueryData({queryKey: ["markdown_template", template.id]}, template);
}
} }
} }
} }
); });
}; };
export const useUpdateMarkdownTemplate = () => { export const useUpdateMarkdownTemplate = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
({id, data}) => fetch_(`${config.BACKEND_HOST}/api/template/markdown/${id}`, { mutationFn: ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/template/markdown/${id}`, {
method: "PUT", method: "PUT",
body: JSON.stringify(data), body: JSON.stringify(data),
}), }),
{ onSuccess: (data) => {
onSuccess: (data) => { queryClient.invalidateQueries({queryKey: ["markdown_template", data.id]});
queryClient.invalidateQueries(["markdown_template", data.id]); queryClient.invalidateQueries({queryKey: ["markdown_templates"]});
queryClient.invalidateQueries(["markdown_templates"]);
}
} }
); });
} }
export const useCreateMarkdownTemplate = () => { export const useCreateMarkdownTemplate = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
(data) => fetch_(`${config.BACKEND_HOST}/api/template/markdown/`, { mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/template/markdown/`, {
method: "POST", method: "POST",
body: JSON.stringify(data), body: JSON.stringify(data),
}),{ }),
onSuccess: (data) => { onSuccess: (data) => {
queryClient.invalidateQueries(["markdown_template", data.id]); queryClient.invalidateQueries({queryKey: ["markdown_template", data.id]});
queryClient.invalidateQueries(["markdown_templates"]); queryClient.invalidateQueries({queryKey: ["markdown_templates"]});
}
} }
); });
} }
export const useDeleteMarkdownTemplate = () => { export const useDeleteMarkdownTemplate = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
(id) => fetch_(`${config.BACKEND_HOST}/api/template/markdown/${id}`, { mutationFn: (id) => fetch_(`${config.BACKEND_HOST}/api/template/markdown/${id}`, {
method: "DELETE" method: "DELETE"
}), { }),
onSuccess: (res, variables) => { onSuccess: (res, variables) => {
queryClient.invalidateQueries(["markdown_template", variables]); queryClient.invalidateQueries({queryKey: ["markdown_template", variables]});
queryClient.invalidateQueries(["markdown_templates"]); queryClient.invalidateQueries({queryKey: ["markdown_templates"]});
}
} }
) });
} }
export const useSaveMarkdownTemplate = () => { export const useSaveMarkdownTemplate = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation(({id, data}) => { return useMutation({
const url = id mutationFn: ({id, data}) => {
? `${config.BACKEND_HOST}/api/template/markdown/${id}` const url = id
: `${config.BACKEND_HOST}/api/template/markdown/`; ? `${config.BACKEND_HOST}/api/template/markdown/${id}`
const method = id? "PUT": "POST"; : `${config.BACKEND_HOST}/api/template/markdown/`;
return fetch_(url, { const method = id? "PUT": "POST";
method, return fetch_(url, {
body: JSON.stringify(data), method,
}) body: JSON.stringify(data),
},{ });
},
onSuccess: (data) => { onSuccess: (data) => {
queryClient.invalidateQueries(["markdown_template", data.id]); queryClient.invalidateQueries({queryKey: ["markdown_template", data.id]});
queryClient.invalidateQueries(["markdown_templates"]); queryClient.invalidateQueries({queryKey: ["markdown_templates"]});
} }
}); });
} }

67
src/utils/queries/markdown-template-setting-queries.js
View File

@@ -5,40 +5,39 @@ import {fetch_} from "../request-utils";
export const useMarkdownTemplateSettings = () => { export const useMarkdownTemplateSettings = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useQuery( return useQuery({
["markdown_template_settings"], queryKey: ["markdown_template_settings"],
() => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/`), { queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/`),
onSuccess: (data) => { onSuccess: (data) => {
if(data){ if(data){
for(const setting of data){ for(const setting of data){
queryClient.invalidateQueries(["markdown_template_setting", settings.id]); queryClient.setQueryData({queryKey: ["markdown_template_setting", setting.id]}, setting);
}
} }
} }
} }
); });
}; };
export const useMarkdownTemplateSetting = (setting_id) => { export const useMarkdownTemplateSetting = (setting_id) => {
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["markdown_template_setting", setting_id], queryKey: ["markdown_template_setting", setting_id],
() => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/${setting_id}`), { queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/${setting_id}`),
enabled: !!setting_id, enabled: !!setting_id,
} });
);
}; };
export const useCreateMarkdownTemplateSetting = () => { export const useCreateMarkdownTemplateSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation((data) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/`, { return useMutation({
method: "POST", mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/`, {
body: JSON.stringify(data), method: "POST",
}), { body: JSON.stringify(data),
}),
onSuccess: (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 = () => { export const useUpdateMarkdownTemplateSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/${id}`, { mutationFn: ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/${id}`, {
method: "PATCH", method: "PATCH",
body: JSON.stringify(data), body: JSON.stringify(data),
}),{ }),
onSuccess: (res) => { onSuccess: (res) => {
queryClient.invalidateQueries(["markdown_template_setting", res.id]); queryClient.invalidateQueries({queryKey: ["markdown_template_setting", res.id]});
queryClient.invalidateQueries(["markdown_template_settings"]); queryClient.invalidateQueries({queryKey: ["markdown_template_settings"]});
}
} }
); });
}; };
export const useDeleteMarkdownTemplateSetting = () => { export const useDeleteMarkdownTemplateSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
({id}) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/${id}`, { mutationFn: ({id}) => fetch_(`${config.BACKEND_HOST}/api/setting/markdown/template/${id}`, {
method: "DELETE", method: "DELETE",
}), { }),
onSuccess: (res, variables) => { onSuccess: (res, variables) => {
queryClient.invalidateQueries(["markdown_template_setting", variables.id]); queryClient.invalidateQueries({queryKey: ["markdown_template_setting", variables.id]});
}
} }
); });
}; };

98
src/utils/queries/path-queries.js
View File

@@ -6,87 +6,77 @@ import {useConfig} from "../../ConfigProvider";
export const usePaths = (parent_id) => { export const usePaths = (parent_id) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["paths", parent_id], queryKey: ["paths", parent_id],
() => fetch_(`${config.BACKEND_HOST}/api/path/parent/${parent_id}`), queryFn: () => fetch_(`${config.BACKEND_HOST}/api/path/parent/${parent_id}`),
{ enabled: !!parent_id,
enabled: !!parent_id, onSuccess: (data) => {
onSuccess: (data) => { if(data) {
if(data) { for (const pth of data)
for (const pth of data) {
{ queryClient.setQueryData({queryKey: ["path", pth.id]}, pth);
queryClient.setQueryData(["path", pth.id], pth);
}
} }
} }
} }
); });
}; };
export const usePath = (id) => { export const usePath = (id) => {
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["path", id], queryKey: ["path", id],
() => fetch_(`${config.BACKEND_HOST}/api/path/${id}`), queryFn: () => fetch_(`${config.BACKEND_HOST}/api/path/${id}`),
{ enabled: !!id
enabled: !!id });
}
);
}; };
export const useCreatePath = () => { export const useCreatePath = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
(data) => fetch_(`${config.BACKEND_HOST}/api/path/`, { mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/path/`, {
method: "POST", method: "POST",
body: JSON.stringify(data), body: JSON.stringify(data),
}), }),
{ onSuccess: (res) => {
onSuccess: (res) => { queryClient.invalidateQueries({queryKey: ["paths", res.parent_id]});
queryClient.invalidateQueries(["paths", res.parent_id]); queryClient.invalidateQueries({queryKey: ["tree"]});
queryClient.invalidateQueries(["tree"]); },
}, });
}
);
}; };
export const useUpdatePath = () => { export const useUpdatePath = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
({ id, data }) => fetch_(`${config.BACKEND_HOST}/api/path/${id}`, { mutationFn: ({ id, data }) => fetch_(`${config.BACKEND_HOST}/api/path/${id}`, {
method: "PATCH", method: "PATCH",
body: JSON.stringify(data), body: JSON.stringify(data),
}), }),
{ onSuccess: (res) => {
onSuccess: (res) => { queryClient.invalidateQueries({queryKey: ["paths", res.parent_id]});
queryClient.invalidateQueries(["paths", res.parent_id]); queryClient.invalidateQueries({queryKey: ["path", res.id]});
queryClient.invalidateQueries(["path", res.id]); queryClient.invalidateQueries({queryKey: ["tree"]});
queryClient.invalidateQueries(["tree"]); },
}, });
}
);
}; };
export const useDeletePath = () => { export const useDeletePath = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
(id) => fetch_(`${config.BACKEND_HOST}/api/path/${id}`, { mutationFn: (id) => fetch_(`${config.BACKEND_HOST}/api/path/${id}`, {
method: "DELETE", method: "DELETE",
}), }),
{ onSuccess: () => {
onSuccess: () => { queryClient.invalidateQueries({queryKey: ["paths"]});
queryClient.invalidateQueries(["paths"]); queryClient.invalidateQueries({queryKey: ["tree"]});
queryClient.invalidateQueries(["tree"]); },
}, });
}
);
}; };
@@ -94,16 +84,14 @@ export const useMovePath = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const config = useConfig(); const config = useConfig();
return useMutation( return useMutation({
({path, direction}) => { mutationFn: ({path, direction}) => {
const apiEndpoint = `${config.BACKEND_HOST}/api/path/move_${direction}/${path.id}`; const apiEndpoint = `${config.BACKEND_HOST}/api/path/move_${direction}/${path.id}`;
return fetch_(apiEndpoint, {method: "PATCH"}); return fetch_(apiEndpoint, {method: "PATCH"});
}, },
{ onSuccess: () => {
onSuccess: () => { queryClient.invalidateQueries({queryKey: ["paths"]});
queryClient.invalidateQueries(["paths"]); queryClient.invalidateQueries({queryKey: ["tree"]});
queryClient.invalidateQueries(["tree"]);
}
} }
); });
}; };

75
src/utils/queries/path-setting-queries.js
View File

@@ -5,76 +5,69 @@ import {fetch_} from "../request-utils";
export const usePathSettings = () => { export const usePathSettings = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useQuery( return useQuery({
"path_settings", queryKey: ["path_settings"],
() => fetch_(`${config.BACKEND_HOST}/api/setting/path/`), queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/path/`),
{ onSuccess: (data) => {
onSuccess: (data) => { if(data){
if(data){ for(const setting of data)
for(const setting of data) queryClient.setQueryData({queryKey: ["path_setting", setting.id]}, setting);
queryClient.setQueryData(["path_setting", setting.id], setting);
}
} }
} }
); });
}; };
export const usePathSetting = (setting_id) => { export const usePathSetting = (setting_id) => {
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["path_setting", setting_id], queryKey: ["path_setting", setting_id],
() => fetch_(`${config.BACKEND_HOST}/api/setting/path/${setting_id}`), queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/path/${setting_id}`),
{ enabled: !!setting_id,
enabled: !!setting_id, });
}
);
}; };
export const useCreatePathSetting = () => { export const useCreatePathSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
(data) => fetch_(`${config.BACKEND_HOST}/api/setting/path/`, { mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/setting/path/`, {
method: "POST", method: "POST",
body: JSON.stringify(data) body: JSON.stringify(data)
}), { }),
onSuccess: (data) => { onSuccess: (data) => {
queryClient.invalidateQueries(["path_setting", data.id]); queryClient.invalidateQueries({queryKey: ["path_setting", data.id]});
queryClient.invalidateQueries(["path_settings"]); queryClient.invalidateQueries({queryKey: ["path_settings"]});
}
} }
); });
}; };
export const useUpdatePathSetting = () => { export const useUpdatePathSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/path/${id}`, { mutationFn: ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/path/${id}`, {
method: "PATCH", method: "PATCH",
body: JSON.stringify(data) body: JSON.stringify(data)
}), { }),
onSuccess: (data, variables) => { onSuccess: (data, variables) => {
queryClient.invalidateQueries(["path_setting", variables.id]); queryClient.invalidateQueries({queryKey: ["path_setting", variables.id]});
queryClient.invalidateQueries(["path_settings"]); queryClient.invalidateQueries({queryKey: ["path_settings"]});
}
} }
); });
}; };
export const useDeletePathSetting = () => { export const useDeletePathSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
(id) => fetch_(`${config.BACKEND_HOST}/api/setting/path/${id}`, { mutationFn: (id) => fetch_(`${config.BACKEND_HOST}/api/setting/path/${id}`, {
method: "DELETE", method: "DELETE",
}),{ }),
onSuccess: (data, variables) => { onSuccess: (data, variables) => {
queryClient.invalidateQueries(["path_setting", variables.id]); queryClient.invalidateQueries({queryKey: ["path_setting", variables.id]});
queryClient.invalidateQueries(["path_settings"]); queryClient.invalidateQueries({queryKey: ["path_settings"]});
}
} }
); });
}; };

18
src/utils/queries/tree-queries.js
View File

@@ -6,14 +6,12 @@ import {useConfig} from "../../ConfigProvider";
export const useTree = () => { export const useTree = () => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["tree"], queryKey: ["tree"],
() => fetch_(`${config.BACKEND_HOST}/api/tree/`), queryFn: () => fetch_(`${config.BACKEND_HOST}/api/tree/`),
{ onSuccess: data => {
onSuccess: data => { if(data)
if(data) queryClient.setQueryData({queryKey: ["tree"]}, data);
queryClient.setQueryData(["tree"], data);
}
} }
); });
} };

131
src/utils/queries/webhook-queries.js
View File

@@ -5,147 +5,132 @@ import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
export const useWebhooks = () =>{ export const useWebhooks = () =>{
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["webhooks"], queryKey: ["webhooks"],
() => fetch_(`${config.BACKEND_HOST}/api/webhook/`), queryFn: () => fetch_(`${config.BACKEND_HOST}/api/webhook/`),
{ onSuccess: (data) => {
onSuccess: (data) => { if(data){
if(data){ for(const webhook of data){
for(const webhook of data){ queryClient.setQueryData({queryKey: ["webhook", data.id]}, data);
queryClient.setQueryData(["webhook", data.id], data);
}
} }
} }
} }
); });
}; };
export const useCreateWebhook = () => { export const useCreateWebhook = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
(data) => fetch_(`${config.BACKEND_HOST}/api/webhook/`, { mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/webhook/`, {
method: "POST", method: "POST",
body: JSON.stringify({ body: JSON.stringify({
"hook_url": data "hook_url": data
}), }),
}), }),
{ onSuccess: () => {
onSuccess: () => { queryClient.invalidateQueries({queryKey: ["webhooks"]});
queryClient.invalidateQueries(["webhooks"]);
}
} }
); });
}; };
export const useUpdateWebhook = () =>{ export const useUpdateWebhook = () =>{
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
({id, data}) => fetch_(`${config.BACKEND_HOST}/api/webhook/${id}`, { mutationFn: ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/webhook/${id}`, {
method: "PATCH", method: "PATCH",
body: JSON.stringify(data) body: JSON.stringify(data)
}), }),
{ onSuccess: (res) => {
onSuccess: (res) => { queryClient.invalidateQueries({queryKey: ["webhook", res.id]});
queryClient.invalidateQueries(["webhook", res.id]); queryClient.invalidateQueries({queryKey: ["webhooks"]});
queryClient.invalidateQueries(["webhooks"]);
}
} }
); });
}; };
export const useDeleteWebhook = () => { export const useDeleteWebhook = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
(id) => fetch_(`${config.BACKEND_HOST}/api/webhook/${id}`, { mutationFn: (id) => fetch_(`${config.BACKEND_HOST}/api/webhook/${id}`, {
method: "DELETE", method: "DELETE",
}), }),
{ onSuccess: (res, variables) => {
onSuccess: (res, variables) => { queryClient.invalidateQueries({queryKey: ["webhook", variables.id]});
queryClient.invalidateQueries(["webhook", variables.id]); queryClient.invalidateQueries({queryKey: ["webhooks"]});
queryClient.invalidateQueries(["webhooks"]);
}
} }
) });
} }
export const useWebhookSettings = () => { export const useWebhookSettings = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useQuery( return useQuery({
["webhook_setting"], queryKey: ["webhook_setting"],
() => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/`), queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/`),
{ onSuccess: (data) => {
onSuccess: (data) => { if(data){
if(data){ for(const setting of data){
for(const setting of data){ queryClient.setQueryData({queryKey: ["webhook_setting", setting.id]}, setting);
queryClient.setQueryData(["webhook_setting", setting.id], setting);
}
} }
} }
} }
); });
}; };
export const useWebhookSetting = (setting_id) => { export const useWebhookSetting = (setting_id) => {
const config = useConfig(); const config = useConfig();
return useQuery( return useQuery({
["webhook_setting", setting_id], queryKey: ["webhook_setting", setting_id],
() => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/${setting_id}`), queryFn: () => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/${setting_id}`),
{ enabled: !!setting_id,
enabled: !!setting_id, });
});
}; };
export const useCreateWebhookSetting = () => { export const useCreateWebhookSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
(data) => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/`, { mutationFn: (data) => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/`, {
method: "POST", method: "POST",
body: JSON.stringify(data) body: JSON.stringify(data)
}),{ }),
onSuccess: (res) => { onSuccess: (res) => {
queryClient.invalidateQueries(["webhook_setting", res.id]); queryClient.invalidateQueries({queryKey: ["webhook_setting", res.id]});
queryClient.invalidateQueries(["webhook_setting"]); queryClient.invalidateQueries({queryKey: ["webhook_setting"]});
}
} }
); });
}; };
export const useUpdateWebhookSetting = () => { export const useUpdateWebhookSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/${id}`, { mutationFn: ({id, data}) => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/${id}`, {
method: "PATCH", method: "PATCH",
body: JSON.stringify(data) body: JSON.stringify(data)
}),{ }),
onSuccess: (res, variables) => { onSuccess: (res, variables) => {
queryClient.invalidateQueries(["webhook_setting", variables.id]); queryClient.invalidateQueries({queryKey: ["webhook_setting", variables.id]});
queryClient.invalidateQueries(["webhook_setting"]); queryClient.invalidateQueries({queryKey: ["webhook_setting"]});
}
} }
); });
}; };
export const useDeleteWebhookSetting = () => { export const useDeleteWebhookSetting = () => {
const config = useConfig(); const config = useConfig();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return useMutation( return useMutation({
(id) => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/${id}`, { mutationFn: (id) => fetch_(`${config.BACKEND_HOST}/api/setting/path/webhook/${id}`, {
method: "DELETE", method: "DELETE",
}), }),
{ onSuccess: (res, variables) => {
onSuccess: (res, variables) => { queryClient.invalidateQueries({queryKey: ["webhook_setting", variables.id]});
queryClient.invalidateQueries(["webhook_setting", variables.id]); queryClient.invalidateQueries({queryKey: ["webhook_setting"]});
queryClient.invalidateQueries(["webhook_setting"]);
}
} }
); });
}; };