49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
import { useNavigate, Link } from 'react-router-dom'
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
|
|
import { fetchPageList, postNewPage } from '../apiTools.jsx';
|
|
import { useFixLinks } from '../clientStuff.jsx';
|
|
|
|
import PageList from './PageList.jsx';
|
|
import GraphRender from './GraphRender.jsx';
|
|
|
|
import './Landing.css'
|
|
|
|
function Landing() {
|
|
const queryClient = useQueryClient();
|
|
const navigate = useNavigate();
|
|
|
|
const makeNewPage = useMutation({ // for changing the value when we're done with it
|
|
mutationFn: () => postNewPage()
|
|
.catch((error) => { console.log("got an error", error.json()) }),
|
|
onSettled: async (data, error, variables) => {
|
|
// Invalidate and navigate to the new page
|
|
await queryClient.invalidateQueries({ queryKey: ['pages'] });
|
|
navigate(`/${data}/edit`);
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div className="landing-page">
|
|
<header>
|
|
<h1>Welcome to the forest.</h1>
|
|
<hr/>
|
|
</header>
|
|
<div className="landing-container">
|
|
<section className="landing-section">
|
|
<GraphRender />
|
|
</section>
|
|
<section className="landing-section">
|
|
<PageList />
|
|
</section>
|
|
<section className="landing-section">
|
|
<button>Sign up</button><br/>
|
|
<button>Log in</button><br/>
|
|
<button onClick={makeNewPage.mutate} >Dig new room!</button><br/>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Landing; |