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

upgrade react-query to v5

Browse Source
This commit is contained in:
h z
2025-05-09 00:44:53 +01:00
parent 87b4246a9b
commit 101666d26d
20 changed files with 507 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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 { id } = useParams();
const { strId } = useParams();
const id = Number(strId);
const { data: template, isFetching: templateIsFetching } = useMarkdownTemplate(id);
const saveMarkdownTemplate = useSaveMarkdownTemplate();

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

@@ -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);
}
}}
>
<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";
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 <div>Error: {error.message || "Failed to load content"}</div>;
}
if (markdown.isMessage) {
return (
<div className="markdown-content-container">
<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 {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 <div className="notification is-danger">Permission Denied</div>;
@@ -211,7 +241,7 @@ const MarkdownEditor = () => {
<div className="field">
<div className="control">
<TemplateSelector
template={template}
template={selectedTemplate || template}
onChange={handleTemplateChange}
/>
</div>
@@ -249,7 +279,7 @@ const MarkdownEditor = () => {
<TemplatedEditor
style={{height: "70vh"}}
content={content}
template={template}
template={!markdown?.id ? selectedTemplate : template}
onContentChanged={(k, v) => setContent(
prev => ({...prev, [k]: v})
)}
@@ -275,7 +305,11 @@ const MarkdownEditor = () => {
<div className="column is-half">
<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>

12
src/components/PathManager.js
View File

@@ -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.");
},