fix: improve notes get and delete
This commit is contained in:
parent
1ba1949f41
commit
646bbaaeb9
@ -82,6 +82,12 @@ export async function register(_prevState: unknown, formData: FormData) {
|
|||||||
redirect("/notes");
|
redirect("/notes");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function logOut() {
|
||||||
|
const cookieStore = await cookies();
|
||||||
|
cookieStore.delete("session");
|
||||||
|
redirect("/auth");
|
||||||
|
}
|
||||||
|
|
||||||
export async function getAuth() {
|
export async function getAuth() {
|
||||||
const cookieStore = await cookies();
|
const cookieStore = await cookies();
|
||||||
const token = cookieStore.get("session")?.value;
|
const token = cookieStore.get("session")?.value;
|
||||||
@ -109,8 +115,10 @@ export async function getAuth() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function logOut() {
|
export async function requireAuth() {
|
||||||
const cookieStore = await cookies();
|
const user = await getAuth();
|
||||||
cookieStore.delete("session");
|
if (!user) {
|
||||||
redirect("/auth");
|
redirect("/auth");
|
||||||
}
|
}
|
||||||
|
return user;
|
||||||
|
}
|
||||||
|
@ -2,11 +2,13 @@
|
|||||||
|
|
||||||
import { revalidatePath } from "next/cache";
|
import { revalidatePath } from "next/cache";
|
||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
import { desc, eq } from "drizzle-orm";
|
import { desc, eq, and } from "drizzle-orm";
|
||||||
|
import { INote, notesTable, usersTable } from "@/lib/db/schema";
|
||||||
import { db } from "@/lib/db";
|
import { db } from "@/lib/db";
|
||||||
import { INote, IUser, notesTable, usersTable } from "@/lib/db/schema";
|
import { requireAuth } from "./auth";
|
||||||
|
|
||||||
export async function createNote(user: IUser) {
|
export async function createNote() {
|
||||||
|
const user = await requireAuth();
|
||||||
const result = await db
|
const result = await db
|
||||||
.insert(notesTable)
|
.insert(notesTable)
|
||||||
.values({ authorId: user.id })
|
.values({ authorId: user.id })
|
||||||
@ -15,7 +17,8 @@ export async function createNote(user: IUser) {
|
|||||||
redirect(`/notes/${id}`);
|
redirect(`/notes/${id}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getNotes(user: IUser): Promise<INote[]> {
|
export async function getNotes(): Promise<INote[]> {
|
||||||
|
const user = await requireAuth();
|
||||||
return db
|
return db
|
||||||
.select()
|
.select()
|
||||||
.from(notesTable)
|
.from(notesTable)
|
||||||
@ -23,9 +26,11 @@ export async function getNotes(user: IUser): Promise<INote[]> {
|
|||||||
.orderBy(desc(notesTable.lastEdited));
|
.orderBy(desc(notesTable.lastEdited));
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function deleteNote(note: INote) {
|
export async function deleteNote(formData: FormData) {
|
||||||
|
const user = await requireAuth();
|
||||||
|
const noteId = formData.get("noteId") as string;
|
||||||
await db
|
await db
|
||||||
.delete(notesTable)
|
.delete(notesTable)
|
||||||
.where(eq(notesTable.id, note.id));
|
.where(and(eq(notesTable.id, noteId), eq(notesTable.authorId, user.id)));
|
||||||
revalidatePath("/notes");
|
revalidatePath("/notes");
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import { Metadata } from "next";
|
import { Metadata } from "next";
|
||||||
import { Noto_Sans_Mono } from "next/font/google";
|
import { Noto_Sans_Mono } from "next/font/google";
|
||||||
import { getAuth } from "./actions/auth";
|
|
||||||
import Header from "@/components/Header";
|
import Header from "@/components/Header";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
|
||||||
@ -19,12 +18,10 @@ export default async function RootLayout({
|
|||||||
}: Readonly<{
|
}: Readonly<{
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
const user = await getAuth();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body className={`${notoSansMono.variable} font-mono antialiased`}>
|
<body className={`${notoSansMono.variable} font-mono antialiased`}>
|
||||||
<Header user={user} />
|
<Header />
|
||||||
<div className="m-4">
|
<div className="m-4">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
import { getAuth } from "@/app/actions/auth";
|
import { Metadata } from "next";
|
||||||
|
import { requireAuth } from "@/app/actions/auth";
|
||||||
import { getNotes } from "@/app/actions/notes";
|
import { getNotes } from "@/app/actions/notes";
|
||||||
import NoteCard from "@/components/ui/NoteCard";
|
import NoteCard from "@/components/ui/NoteCard";
|
||||||
import { Metadata } from "next";
|
|
||||||
import { redirect } from "next/navigation";
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Notes - Rhyme",
|
title: "Notes - Rhyme",
|
||||||
@ -10,16 +9,17 @@ export const metadata: Metadata = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default async function Notes() {
|
export default async function Notes() {
|
||||||
const user = await getAuth();
|
const user = await requireAuth();
|
||||||
if (!user) {
|
const notes = await getNotes();
|
||||||
redirect("/auth");
|
|
||||||
}
|
|
||||||
const notes = await getNotes(user);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1 className="font-bold text-xl mb-4">Notes of {user.username}:</h1>
|
<h1 className="font-bold text-xl mb-4">Notes of {user.username}:</h1>
|
||||||
{notes.map((note) => <NoteCard key={note.id} note={note} /> )}
|
{notes.length === 0 ? (
|
||||||
|
<span className="text-neutral-400">You have no notes yet</span>
|
||||||
|
) : (
|
||||||
|
notes.map((note) => <NoteCard key={note.id} note={note} /> )
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,13 +1,12 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { CircleQuestionMark, List, Plus, UserRound, UserRoundMinus } from "lucide-react";
|
import { CircleQuestionMark, List, Plus, UserRound, UserRoundMinus } from "lucide-react";
|
||||||
import { logOut } from "@/app/actions/auth";
|
import { getAuth, logOut } from "@/app/actions/auth";
|
||||||
import { createNote } from "@/app/actions/notes";
|
import { createNote } from "@/app/actions/notes";
|
||||||
import { IUser } from "@/lib/db/schema";
|
|
||||||
import HeaderButton from "./ui/HeaderButton";
|
import HeaderButton from "./ui/HeaderButton";
|
||||||
|
|
||||||
export default function Header({ user }: { user: IUser | null }) {
|
export default async function Header() {
|
||||||
|
const user = await getAuth();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="flex items-center gap-6 m-4">
|
<header className="flex items-center gap-6 m-4">
|
||||||
<Link href={user ? "/notes" : "/"}>
|
<Link href={user ? "/notes" : "/"}>
|
||||||
@ -16,7 +15,9 @@ export default function Header({ user }: { user: IUser | null }) {
|
|||||||
|
|
||||||
{user && (
|
{user && (
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<HeaderButton title="new" icon={<Plus size={20} />} onClick={() => createNote(user)} />
|
<form action={createNote}>
|
||||||
|
<HeaderButton type="submit" title="new" icon={<Plus size={20} />} />
|
||||||
|
</form>
|
||||||
<Link href="/notes">
|
<Link href="/notes">
|
||||||
<HeaderButton title="list" icon={<List size={20} />} />
|
<HeaderButton title="list" icon={<List size={20} />} />
|
||||||
</Link>
|
</Link>
|
||||||
@ -28,7 +29,9 @@ export default function Header({ user }: { user: IUser | null }) {
|
|||||||
<HeaderButton title="about" icon={<CircleQuestionMark size={20} />} />
|
<HeaderButton title="about" icon={<CircleQuestionMark size={20} />} />
|
||||||
</Link>
|
</Link>
|
||||||
{user ? (
|
{user ? (
|
||||||
<HeaderButton onClick={logOut} title="log out" icon={<UserRoundMinus size={20} />} />
|
<form action={logOut}>
|
||||||
|
<HeaderButton type="submit" title="log out" icon={<UserRoundMinus size={20} />} />
|
||||||
|
</form>
|
||||||
) : (
|
) : (
|
||||||
<Link href="/auth">
|
<Link href="/auth">
|
||||||
<HeaderButton title="login" icon={<UserRound size={20} />} />
|
<HeaderButton title="login" icon={<UserRound size={20} />} />
|
||||||
|
@ -14,11 +14,6 @@ function makeTimestamp(date: Date) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function NoteCard({ note }: { note: INote }) {
|
export default function NoteCard({ note }: { note: INote }) {
|
||||||
const deleteNoteAction = async () => {
|
|
||||||
"use server";
|
|
||||||
await deleteNote(note);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center mb-3 gap-4">
|
<div className="flex items-center mb-3 gap-4">
|
||||||
<Link href={`/notes/${note.id}`} className="flex flex-col border border-neutral-500 py-3 px-4 rounded-lg hover:bg-neutral-800 w-full">
|
<Link href={`/notes/${note.id}`} className="flex flex-col border border-neutral-500 py-3 px-4 rounded-lg hover:bg-neutral-800 w-full">
|
||||||
@ -26,7 +21,10 @@ export default function NoteCard({ note }: { note: INote }) {
|
|||||||
<i className="text-neutral-400 text-sm">Last time edited: {makeTimestamp(note.lastEdited)}</i>
|
<i className="text-neutral-400 text-sm">Last time edited: {makeTimestamp(note.lastEdited)}</i>
|
||||||
<i className="text-neutral-400 text-sm">Creation date: {makeTimestamp(note.creationTime)}</i>
|
<i className="text-neutral-400 text-sm">Creation date: {makeTimestamp(note.creationTime)}</i>
|
||||||
</Link>
|
</Link>
|
||||||
<IconOnlyButton icon={<X size={24} />} onClick={deleteNoteAction} />
|
<form action={deleteNote}>
|
||||||
|
<input type="hidden" name="noteId" value={note.id} />
|
||||||
|
<IconOnlyButton icon={<X size={24} />} type="submit" />
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user