diff --git a/apps/frontend/src/components/header.tsx b/apps/frontend/src/components/header.tsx index 459acd1..2b9c3a1 100644 --- a/apps/frontend/src/components/header.tsx +++ b/apps/frontend/src/components/header.tsx @@ -1,13 +1,17 @@ import { useAuth } from "../providers/AuthProvider"; +import { useNavigate } from "react-router-dom"; export default function Header() { const auth = useAuth(); + const navigate = useNavigate(); return (
-

- Alex / dev + QA -

+ navigate("/")}> +

+ Alex / dev + QA +

+
{auth.user !== null ? ( auth.logout()}> diff --git a/apps/frontend/src/components/input.tsx b/apps/frontend/src/components/input.tsx index 6acc570..5f27338 100644 --- a/apps/frontend/src/components/input.tsx +++ b/apps/frontend/src/components/input.tsx @@ -3,6 +3,7 @@ type InputType = { forLabel: string; type: "password" | "email" | "text"; dark?: boolean; + defaultValue?: string; onChange?: (v: string) => void; }; @@ -10,6 +11,7 @@ export default function Input({ label, forLabel, type, + defaultValue, dark = true, onChange, }: InputType) { @@ -23,6 +25,7 @@ export default function Input({ onChange={onChange ? (e) => onChange(e.target.value) : undefined} type={type} required + defaultValue={defaultValue} name={forLabel} className={`${dark ? "bg-black text-white" : "bg-white text-black"} rounded-lg border-white block`} /> diff --git a/apps/frontend/src/pages/editor.tsx b/apps/frontend/src/pages/editor.tsx index d69d93a..081f8a1 100644 --- a/apps/frontend/src/pages/editor.tsx +++ b/apps/frontend/src/pages/editor.tsx @@ -30,8 +30,6 @@ export default function Editor() { }, []); async function createPost() { - console.log(values); - if (!values?.title || !values.content || !values.description) { setError("Missing required value"); return; @@ -66,7 +64,13 @@ export default function Editor() { return ( -

+

history.back()} + > + <- Back +

+

{editingPost ? "Edit" : "Create"} Post

@@ -76,6 +80,7 @@ export default function Editor() { label="Title" type="text" dark={false} + defaultValue={editingPost?.title} onChange={(v) => setValues((prevState) => { return { @@ -88,6 +93,7 @@ export default function Editor() { @@ -131,7 +137,7 @@ export default function Editor() { /> ) : (
- {values.content} + {values.content || editingPost?.content}
)} @@ -142,6 +148,7 @@ export default function Editor() { > Submit +

{error}

); diff --git a/apps/frontend/src/pages/home.tsx b/apps/frontend/src/pages/home.tsx index 98cdaa7..caba16a 100644 --- a/apps/frontend/src/pages/home.tsx +++ b/apps/frontend/src/pages/home.tsx @@ -1,11 +1,15 @@ import Layout from "../components/layout"; import PostRow from "../components/postRow"; import { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useAuth } from "../providers/AuthProvider"; import type { Post } from "../utils/types"; export default function Home() { const [posts, setPosts] = useState(null); const [loaded, setLoaded] = useState(false); + const auth = useAuth(); + const navigate = useNavigate(); useEffect(() => { fetch("/api/posts", { @@ -51,7 +55,17 @@ export default function Home() {

-

Posts

+
+

Posts

+ {auth.user && ( +

navigate("/editor")} + > + Create +

+ )} +
diff --git a/apps/frontend/src/pages/post.tsx b/apps/frontend/src/pages/post.tsx index acdb29b..7bc59b3 100644 --- a/apps/frontend/src/pages/post.tsx +++ b/apps/frontend/src/pages/post.tsx @@ -1,12 +1,15 @@ import Layout from "../components/layout"; import { useState, useEffect } from "react"; -import { useParams } from "react-router-dom"; +import { useParams, useNavigate } from "react-router-dom"; +import { useAuth } from "../providers/AuthProvider"; import type { Post } from "../utils/types"; import Markdown from "react-markdown"; export default function Post() { const [post, setPost] = useState(null); const params = useParams(); + const navigate = useNavigate(); + const auth = useAuth(); useEffect(() => { if (params.slug) { @@ -32,6 +35,13 @@ export default function Post() { return (
+ navigate("/")} + className="text-sm opacity-50 hover:underline" + > + <- Home +

{post.title}

{post.description}

@@ -46,6 +56,14 @@ export default function Post() { {post.updatedAt !== post.createdAt && "- updated on " + new Date(post.updatedAt).toLocaleString()}

+ {auth.user && ( +

navigate(`/editor/${post.slug}`)} + > + Edit +

+ )}
);