48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
import Layout from "../components/layout";
|
|
import { useFetchUser } from "../lib/user";
|
|
|
|
function Home() {
|
|
const { user, loading } = useFetchUser();
|
|
|
|
return (
|
|
<Layout user={user} loading={loading}>
|
|
<h1 className="text-3xl font-bold underline">Hello world!</h1>
|
|
|
|
{loading && <p>Loading login info...</p>}
|
|
|
|
{!loading && !user && (
|
|
<>
|
|
<p>
|
|
To test the login click in <i>Login</i>
|
|
</p>
|
|
<p>
|
|
Once you have logged in you should be able to click in{" "}
|
|
<i>Profile</i> and <i>Logout</i>
|
|
</p>
|
|
</>
|
|
)}
|
|
|
|
{user && (
|
|
<>
|
|
<h4>Rendered user info on the client</h4>
|
|
<img src={user.picture} alt="user picture" />
|
|
<p>nickname: {user.nickname}</p>
|
|
<p>name: {user.name}</p>
|
|
<p>
|
|
<form method="POST" action="/api/v1/bookmarks">
|
|
<label for="title">title: </label>
|
|
<input type="text" name="title" />
|
|
<br />
|
|
<label for="url">url:</label>
|
|
<input type="text" name="url" />
|
|
<button type="submit">Add bookmark</button>
|
|
</form>
|
|
</p>
|
|
</>
|
|
)}
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export default Home;
|