shoofle/the-forest
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added history view

Browse Source
This commit is contained in:
Shoofle 2024-10-06 16:01:13 -04:00
parent 13fb4db1d1
commit 0b74f4dccd
8 changed files with 144 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/App.jsx
View File

@ -3,9 +3,11 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Landing from '/src/landing/Landing.jsx'; import Landing from '/src/landing/Landing.jsx';
import PageView from '/src/page/PageView.jsx'; import PageView from '/src/page/PageView.jsx';
import PageEdit from '/src/page/PageEdit.jsx'; import PageEdit from '/src/page/PageEdit.jsx';
import HistoryView from '/src/page/HistoryView.jsx';
import LogIn from '/src/login/LogIn.jsx'; import LogIn from '/src/login/LogIn.jsx';
import Register from '/src/login/Register.jsx'; import Register from '/src/login/Register.jsx';
import Profile from '/src/login/Profile.jsx'; import Profile from '/src/login/Profile.jsx';
import AuthProvider from '/src/AuthProvider.jsx'; import AuthProvider from '/src/AuthProvider.jsx';
import './App.css'; import './App.css';
@ -21,8 +23,10 @@ function App() {
<Route path="/" element={<Landing/>}/> <Route path="/" element={<Landing/>}/>
<Route path="/login" element={<LogIn/>}/> <Route path="/login" element={<LogIn/>}/>
<Route path="/register" element={<Register/>}/> <Route path="/register" element={<Register/>}/>
<Route path="/:pagenumber" element={<PageView/>}/> <Route path="/:pagenumber" element={<PageEdit/>}/>
<Route path="/:pagenumber/edit" element={<PageEdit/>}/> <Route path="/:pagenumber/edit" element={<PageEdit editing="true"/>}/>
<Route path="/:pagenumber/history" element={<HistoryView/>}/>
<Route path="/:pagenumber/:editid" element={<PageEdit/>}/>
<Route path="/profile" element={<Profile/>}/> <Route path="/profile" element={<Profile/>}/>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>

32
client/src/apiTools.jsx
View File

@ -27,47 +27,43 @@ const defaults = {
}; };
export async function postNewPage() { export async function postNewPage() {
return shoofetch(`${apiUrl}/page/new`, { return shoofetch(`${apiUrl}/page/new`, {method: 'POST'})
method: 'POST',
})
} }
export async function fetchPageList() { export async function fetchPageList() {
return shoofetch(`${apiUrl}/pages`, {method: 'GET'}); return shoofetch(`${apiUrl}/pages`, {method: 'GET'});
} }
export async function fetchPage(id) { export async function fetchPage(number) {
return fetch(`${apiUrl}/page/${id}`, { return shoofetch(`${apiUrl}/page/${number}`, {method: 'GET'});
method: 'GET', }
...defaults
}).then((res) => res.json()) export async function fetchPageHistory(number) {
return shoofetch(`${apiUrl}/page/${number}/history`, {method: 'GET'});
}
export async function fetchPageAtEdit(number, id) {
return shoofetch(`${apiUrl}/page/${number}/${id}`, {method: 'GET'});
} }
export async function postPage({id, title, description}) { export async function postPage({id, title, description}) {
return shoofetch(`${apiUrl}/page/${id}`, { return shoofetch(`${apiUrl}/page/${id}`, {
method: 'POST', method: 'POST',
body: JSON.stringify({id: id, title: title, description: description}), body: JSON.stringify({id: id, title: title, description: description}),
...defaults
}) })
} }
export async function deletePage(id) { export async function deletePage(id) {
return fetch(`${apiUrl}/page/${id}`, { return shoofetch(`${apiUrl}/page/${id}`, {method: 'DELETE'});
method: 'DELETE',
...defaults
})
} }
export async function fetchGraph() { export async function fetchGraph() {
return fetch(`${apiUrl}/graph`, { return shoofetch(`${apiUrl}/graph`, {method: 'GET'})
method: 'GET',
...defaults
}).then((res) => res.json())
.then((serialized) => { .then((serialized) => {
const graph = new Graph(); const graph = new Graph();
graph.import(serialized); graph.import(serialized);
return graph; return graph;
}) });
} }
export async function createAccount({name, password, nonce}) { export async function createAccount({name, password, nonce}) {

1
client/src/login/Profile.jsx
View File

@ -30,6 +30,7 @@ function Profile() {
<label> <label>
Id: Id:
<input {...register("id")} value={id} disabled/> <input {...register("id")} value={id} disabled/>
<br/>
</label> </label>
<label> <label>
User name: User name:

49
client/src/page/HistoryView.jsx Normal file
View File

@ -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;

97
client/src/page/PageEdit.jsx
View File

@ -1,24 +1,28 @@
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useParams, useNavigate } from 'react-router-dom'; import { useParams, useNavigate } from 'react-router-dom';
import { apiUrl, fetchPage, postPage, deletePage } from '../apiTools.jsx'; import { apiUrl, fetchPage, fetchPageAtEdit, postPage, deletePage } from '../apiTools.jsx';
import { useFixLinks } from '../clientStuff.jsx';
import { useLoggedIn } from '../AuthProvider.jsx';
import './Pages.css'; import './Pages.css';
function PageEdit() { function Page({ editing }) {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const navigate = useNavigate(); const navigate = useNavigate();
const { pagenumber } = useParams(); const { pagenumber, editid } = useParams();
const loggedIn = useLoggedIn();
const noLoad = useFixLinks();
const fetchQuery = useQuery({ // fetch the currrent values const fetchQuery = useQuery({ // fetch the currrent values
queryKey: ['page', pagenumber], queryKey: ['page', pagenumber, editid],
queryFn: () => fetchPage(pagenumber) queryFn: () => editid ? fetchPageAtEdit(pagenumber, editid) : fetchPage(pagenumber)
}) })
const postMutation = useMutation({ // for changing the value when we're done with it const postMutation = useMutation({ // for changing the value when we're done with it
mutationFn: ({id, title, description}) => postPage({id, title, description}), mutationFn: ({id, title, description}) => postPage({id, title, description}),
onSettled: async (data, error, variables) => { onSettled: async (data, error, variables) => {
// Invalidate and refetch // Invalidate and refetch
await queryClient.invalidateQueries({ queryKey: ['page', variables.id] }) await queryClient.invalidateQueries({ queryKey: ['page', variables.id, undefined] })
}, },
}); });
@ -30,11 +34,12 @@ function PageEdit() {
}, },
}); });
const ready = !(fetchQuery.error || fetchQuery.isPending); const readyToShow = !(fetchQuery.error || fetchQuery.isPending);
let {id, title, description, html} = fetchQuery.data || {}; let {id, title, description, html, time, author} = fetchQuery.data || {};
if (!title) title = "&nbsp;"; if (!title) title = "[no title]";
if (!description) description = "&nbsp;"; if (!html) html = "[body missing]";
if (!description) description = "[body missing]";
function submitChanges(e) { function submitChanges(e) {
const newTitle = document.querySelector('span').innerHTML; const newTitle = document.querySelector('span').innerHTML;
@ -42,7 +47,7 @@ function PageEdit() {
postMutation.mutate({ postMutation.mutate({
id: pagenumber, id: pagenumber,
title: newTitle, title: newTitle,
description: newText, description: newText
}); });
navigate(`/${pagenumber}`, {replace: true}) navigate(`/${pagenumber}`, {replace: true})
} }
@ -57,39 +62,53 @@ function PageEdit() {
<div className="main-column"> <div className="main-column">
<header> <header>
<h1> <h1>
<a href="/">🌳</a> <a href="/" {...noLoad}>🌳</a>
{pagenumber}.&nbsp; {pagenumber}.
<span <span
contentEditable="true" contentEditable={editing}
dangerouslySetInnerHTML={{__html: ready ? title : "..." }} /> dangerouslySetInnerHTML={{__html: readyToShow ? title : "..." }} />
</h1> </h1>
{readyToShow && editid && `saved at ${time} by user #${author}`}
<hr/> <hr/>
</header> </header>
<section> <section className="page-contents">
{ ready ? { readyToShow ?
<> (
<div className="page-contents"> editing ?
<pre <pre
contentEditable="true" contentEditable="true"
dangerouslySetInnerHTML={{__html: description}} /> dangerouslySetInnerHTML={{__html: description}} />
</div> :
<button <div
disabled={postMutation.isPending} dangerouslySetInnerHTML={{__html: html}}
onClick={submitChanges}> {...noLoad} />
{postMutation.isPending ? "Updating..." : "Update"} )
</button> :
<button "..."
disabled={deleteMutation.isPending} }
onClick={submitDelete}>
{deleteMutation.isPending ? "Deleting..." : "Delete this page (no backsies)"}
</button>
</>
:
<div className="page-contents">
{ fetchQuery.isPending ? "Loading..." : JSON.stringify(fetchQuery.error) }
</div>
}
</section> </section>
<button
onClick={() => navigate(`/${pagenumber}/history`)}>
History
</button>
{editing && (
<button
disabled={postMutation.isPending}
onClick={submitChanges}>
{postMutation.isPending ? "Updating..." : "Update"}
</button>)}
{!editing && !editid && (
<button
disabled={!loggedIn}
onClick={() => navigate(`/${pagenumber}/edit`)}>
Edit Page
</button>)}
{loggedIn && (
<button
disabled={deleteMutation.isPending}
onClick={submitDelete}>
{deleteMutation.isPending ? "Deleting..." : "Delete this page and entire edit history (no backsies)"}
</button>)}
</div> </div>
); );
} }

48
client/src/page/PageView.jsx
View File

@ -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;

12
server/routes/api.js
View File

@ -12,9 +12,19 @@ app.use(page_routes);
const user_routes = require('./users.js'); const user_routes = require('./users.js');
app.use(user_routes); app.use(user_routes);
const graphQuery = db.prepare(`
select p.number, p.html, p.time
from pages p
where time >= (
select max(s.time)
from pages s
where s.number = p.number
)
order by p.time desc
`);
app.get('/graph', (req, res) => { app.get('/graph', (req, res) => {
try { try {
const rows = db.prepare('select number, html from pages').all(); const rows = graphQuery.all();
const graph = graphFromList(rows); const graph = graphFromList(rows);
res.status(200).json(graph); res.status(200).json(graph);
} catch (error) { } catch (error) {

10
server/routes/pages.js
View File

@ -30,8 +30,8 @@ app.get('/pages', (req, res) => {
app.post('/page/new', loginRequired, (req, res) => { app.post('/page/new', loginRequired, (req, res) => {
try { try {
const maxPageNumber = db.prepare('select max(number) as maximum from pages').get() const maxPage = db.prepare('select max(number) as maximum from pages').get()
const newPageNumber = maxPageNumber.maximum + 1; const newPageNumber = maxPage.maximum + 1;
const newPage = db.prepare('insert into pages (number, title, description, author) values (?, ?, ?, ?) returning number') const newPage = db.prepare('insert into pages (number, title, description, author) values (?, ?, ?, ?) returning number')
.get(newPageNumber, "new page", "this page is new!", req.session.userId); .get(newPageNumber, "new page", "this page is new!", req.session.userId);
res.status(200).json(newPageNumber); res.status(200).json(newPageNumber);
@ -61,9 +61,9 @@ app.post('/page/:number', loginRequired, (req, res) => {
} }
}); });
app.delete('/page/:id', loginRequired, (req, res) => { app.delete('/page/:number', loginRequired, (req, res) => {
try { try {
const changes = db.prepare('delete from pages where number = ?').run(req.params.id); const changes = db.prepare('delete from pages where number = ?').run(req.params.number);
res.status(200).json({id: req.params.id}); res.status(200).json({id: req.params.id});
} catch (error) { } catch (error) {
res.status(500).json({"error": error}); res.status(500).json({"error": error});
@ -72,7 +72,7 @@ app.delete('/page/:id', loginRequired, (req, res) => {
app.get('/page/:number/history', (req, res) => { app.get('/page/:number/history', (req, res) => {
try { try {
const all = db.prepare('select number, id, time, author from pages where number=:number order by time desc').all(req.params); const all = db.prepare('select * from pages where number=:number order by time desc').all(req.params);
res.status(200).json(all); res.status(200).json(all);
} catch (error) { } catch (error) {
res.status(500).json({"error": error}); res.status(500).json({"error": error});