55 lines
2.4 KiB
JavaScript
55 lines
2.4 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import {Link, useParams} from "react-router-dom";
|
|
import "katex/dist/katex.min.css";
|
|
import "./MarkdownContent.css";
|
|
import MarkdownView from "./MarkdownView";
|
|
import PermissionGuard from "../PermissionGuard";
|
|
import {useMarkdown} from "../../utils/queries/markdown-queries";
|
|
import {usePath} from "../../utils/queries/path-queries";
|
|
import {useMarkdownSetting} from "../../utils/queries/markdown-setting-queries";
|
|
import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries";
|
|
import {useMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries";
|
|
|
|
const MarkdownContent = () => {
|
|
const { id } = useParams();
|
|
const [indexTitle, setIndexTitle] = useState(null);
|
|
const {data: markdown, isLoading, error} = useMarkdown(id);
|
|
const {data: path, isFetching: isPathFetching} = usePath(markdown?.path_id);
|
|
const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id);
|
|
const {data: templateSetting, isFetching: isTemplateSettingFetching} = useMarkdownTemplateSetting(setting?.template_setting_id);
|
|
const {data: template, isFetching: isTemplateFetching} = useMarkdownTemplate(templateSetting?.template_id);
|
|
|
|
useEffect(() => {
|
|
if(markdown && markdown.title === "index" && path){
|
|
setIndexTitle(path.id === 1 ? "Home" : path.name);
|
|
}
|
|
}, [markdown, path]);
|
|
|
|
|
|
const notReady = isLoading || isPathFetching || isSettingFetching || isTemplateSettingFetching || isTemplateFetching;
|
|
|
|
if (notReady) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return <div>Error: {error.message || "Failed to load content"}</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="markdown-content-container">
|
|
<div className="field has-addons markdown-content-container-header">
|
|
<h1 className="title control">{markdown.title === "index" ? indexTitle : markdown.title}</h1>
|
|
<PermissionGuard rolesRequired={['admin']}>
|
|
<Link to={`/markdown/edit/${id}`} className="control button is-primary is-light">
|
|
Edit
|
|
</Link>
|
|
</PermissionGuard>
|
|
</div>
|
|
<MarkdownView content={JSON.parse(markdown.content)} template={template}/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MarkdownContent;
|