fix: improve notes get and delete

This commit is contained in:
Kirill Siukhin 2025-07-15 01:37:20 +05:00
parent 1ba1949f41
commit 646bbaaeb9
6 changed files with 50 additions and 39 deletions

View File

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

View File

@ -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");
} }

View File

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

View File

@ -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} /> )
)}
</> </>
); );
} }

View File

@ -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} />} />

View File

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