parent
13fb4db1d1
commit
0b74f4dccd
@ -0,0 +1,49 @@ |
|||||||
|
import { useQuery } from '@tanstack/react-query'; |
||||||
|
import { useParams, useNavigate } from 'react-router-dom'; |
||||||
|
import { fetchPageHistory } from '../apiTools.jsx'; |
||||||
|
import { useFixLinks } from '../clientStuff.jsx'; |
||||||
|
|
||||||
|
import './Pages.css'; |
||||||
|
|
||||||
|
function HistoryView() { |
||||||
|
const noLoad = useFixLinks(); |
||||||
|
const { pagenumber, editid } = useParams(); |
||||||
|
const navigate = useNavigate(); |
||||||
|
|
||||||
|
const { isPending, error, data } = useQuery({ // fetch the currrent values |
||||||
|
queryKey: ['page history', pagenumber], |
||||||
|
queryFn: () => fetchPageHistory(pagenumber) |
||||||
|
}) |
||||||
|
const edits = data; |
||||||
|
|
||||||
|
const ready = !(error || isPending); |
||||||
|
|
||||||
|
const pageTitle = edits ? edits[0]?.title : "[no title]"; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="main-column"> |
||||||
|
<div> |
||||||
|
<header> |
||||||
|
<h1><a href="/" {...noLoad}>🌳</a>{pagenumber}. {ready ? pageTitle : "..."}</h1> |
||||||
|
<hr/> |
||||||
|
</header> |
||||||
|
<section className="page-contents"> |
||||||
|
{ ready ? |
||||||
|
<ol> |
||||||
|
{ edits.map(({id, number, title, time, author}) => |
||||||
|
<li key={id}> |
||||||
|
<a href={`/${number}/${id}`} {...noLoad}>{id} : "{title}", {time} by user #{author}</a> |
||||||
|
</li> |
||||||
|
) } |
||||||
|
</ol> |
||||||
|
: |
||||||
|
(isPending ? "Loading..." : JSON.stringify(error)) |
||||||
|
} |
||||||
|
</section> |
||||||
|
<button onClick={() => navigate(`/${pagenumber}`)}>Return to page</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default HistoryView; |
@ -1,48 +0,0 @@ |
|||||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; |
|
||||||
import { useParams, useNavigate } from 'react-router-dom'; |
|
||||||
import { apiUrl, fetchPage, postPage } from '../apiTools.jsx'; |
|
||||||
import { useFixLinks } from '../clientStuff.jsx'; |
|
||||||
|
|
||||||
import './Pages.css'; |
|
||||||
|
|
||||||
function PageView() { |
|
||||||
const queryClient = useQueryClient(); |
|
||||||
const navigate = useNavigate(); |
|
||||||
const noLoad = useFixLinks(); |
|
||||||
const { pagenumber } = useParams(); |
|
||||||
|
|
||||||
const { isPending, error, data } = useQuery({ // fetch the currrent values |
|
||||||
queryKey: ['page', pagenumber], |
|
||||||
queryFn: () => fetchPage(pagenumber) |
|
||||||
}) |
|
||||||
|
|
||||||
const ready = !(error || isPending); |
|
||||||
|
|
||||||
let {id, title, description, html} = data || {}; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="main-column"> |
|
||||||
<div> |
|
||||||
<header> |
|
||||||
<h1> |
|
||||||
<a href="/" {...noLoad}>🌳</a>{pagenumber}. {ready ? (title || " ") : "..."}</h1> |
|
||||||
<hr/> |
|
||||||
</header> |
|
||||||
<section> |
|
||||||
{ ready ? |
|
||||||
<div |
|
||||||
className="page-contents" |
|
||||||
dangerouslySetInnerHTML={{ __html: (html || " ") }} |
|
||||||
{...noLoad} |
|
||||||
/> |
|
||||||
: |
|
||||||
(isPending ? "Loading..." : JSON.stringify(error)) |
|
||||||
} |
|
||||||
<button onClick={(e) => { e.preventDefault(); navigate(`/${pagenumber}/edit`, {replace: true})}}>Edit this page!</button> |
|
||||||
</section> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default PageView; |
|
Loading…
Reference in new issue