switch to remix
This commit is contained in:
commit
52a0ba1b3b
77 changed files with 13468 additions and 0 deletions
23
app/routes/healthcheck.tsx
Normal file
23
app/routes/healthcheck.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// learn more: https://fly.io/docs/reference/configuration/#services-http_checks
|
||||
import type { LoaderFunction } from "remix";
|
||||
import { prisma } from "~/db.server";
|
||||
|
||||
export const loader: LoaderFunction = async ({ request }) => {
|
||||
const host =
|
||||
request.headers.get("X-Forwarded-Host") ?? request.headers.get("host");
|
||||
|
||||
try {
|
||||
// if we can connect to the database and make a simple query
|
||||
// and make a HEAD request to ourselves, then we're good.
|
||||
await Promise.all([
|
||||
prisma.user.count(),
|
||||
fetch(`http://${host}`, { method: "HEAD" }).then((r) => {
|
||||
if (!r.ok) return Promise.reject(r);
|
||||
}),
|
||||
]);
|
||||
return new Response("OK");
|
||||
} catch (error: unknown) {
|
||||
console.log("healthcheck ❌", { error });
|
||||
return new Response("ERROR", { status: 500 });
|
||||
}
|
||||
};
|
||||
137
app/routes/index.tsx
Normal file
137
app/routes/index.tsx
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
import { Link } from "remix";
|
||||
import { useOptionalUser } from "~/utils";
|
||||
|
||||
export default function Index() {
|
||||
const user = useOptionalUser();
|
||||
return (
|
||||
<main className="relative min-h-screen bg-white sm:flex sm:items-center sm:justify-center">
|
||||
<div className="relative sm:pb-16 sm:pt-8">
|
||||
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<div className="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
className="h-full w-full object-cover"
|
||||
src="https://user-images.githubusercontent.com/1500684/158276320-c46b661b-8eff-4a4d-82c6-cf296c987a12.jpg"
|
||||
alt="BB King playing blues on his Les Paul guitar"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[color:rgba(27,167,254,0.5)] mix-blend-multiply" />
|
||||
</div>
|
||||
<div className="lg:pb-18 relative px-4 pt-16 pb-8 sm:px-6 sm:pt-24 sm:pb-14 lg:px-8 lg:pt-32">
|
||||
<h1 className="text-center text-6xl font-extrabold tracking-tight sm:text-8xl lg:text-9xl">
|
||||
<span className="block uppercase text-blue-500 drop-shadow-md">
|
||||
Blues Stack
|
||||
</span>
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-lg text-center text-xl text-white sm:max-w-3xl">
|
||||
Check the README.md file for instructions on how to get this
|
||||
project deployed.
|
||||
</p>
|
||||
<div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
|
||||
{user ? (
|
||||
<Link
|
||||
to="/notes"
|
||||
className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-blue-700 shadow-sm hover:bg-blue-50 sm:px-8"
|
||||
>
|
||||
View Notes for {user.email}
|
||||
</Link>
|
||||
) : (
|
||||
<div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5 sm:space-y-0">
|
||||
<Link
|
||||
to="/join"
|
||||
className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-blue-700 shadow-sm hover:bg-blue-50 sm:px-8"
|
||||
>
|
||||
Sign up
|
||||
</Link>
|
||||
<Link
|
||||
to="/login"
|
||||
className="flex items-center justify-center rounded-md bg-blue-500 px-4 py-3 font-medium text-white hover:bg-blue-600 "
|
||||
>
|
||||
Log In
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<a href="https://remix.run">
|
||||
<img
|
||||
src="https://user-images.githubusercontent.com/1500684/158298926-e45dafff-3544-4b69-96d6-d3bcc33fc76a.svg"
|
||||
alt="Remix"
|
||||
className="mx-auto mt-16 w-full max-w-[12rem] md:max-w-[16rem]"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto max-w-7xl py-2 px-4 sm:px-6 lg:px-8">
|
||||
<div className="mt-6 flex flex-wrap justify-center gap-8">
|
||||
{[
|
||||
{
|
||||
src: "https://user-images.githubusercontent.com/1500684/157764397-ccd8ea10-b8aa-4772-a99b-35de937319e1.svg",
|
||||
alt: "Fly.io",
|
||||
href: "https://fly.io",
|
||||
},
|
||||
{
|
||||
src: "https://user-images.githubusercontent.com/1500684/158238105-e7279a0c-1640-40db-86b0-3d3a10aab824.svg",
|
||||
alt: "PostgreSQL",
|
||||
href: "https://www.postgresql.org/",
|
||||
},
|
||||
{
|
||||
src: "https://user-images.githubusercontent.com/1500684/157764484-ad64a21a-d7fb-47e3-8669-ec046da20c1f.svg",
|
||||
alt: "Prisma",
|
||||
href: "https://prisma.io",
|
||||
},
|
||||
{
|
||||
src: "https://user-images.githubusercontent.com/1500684/157764276-a516a239-e377-4a20-b44a-0ac7b65c8c14.svg",
|
||||
alt: "Tailwind",
|
||||
href: "https://tailwindcss.com",
|
||||
},
|
||||
{
|
||||
src: "https://user-images.githubusercontent.com/1500684/157764454-48ac8c71-a2a9-4b5e-b19c-edef8b8953d6.svg",
|
||||
alt: "Cypress",
|
||||
href: "https://www.cypress.io",
|
||||
},
|
||||
{
|
||||
src: "https://user-images.githubusercontent.com/1500684/157772386-75444196-0604-4340-af28-53b236faa182.svg",
|
||||
alt: "MSW",
|
||||
href: "https://mswjs.io",
|
||||
},
|
||||
{
|
||||
src: "https://user-images.githubusercontent.com/1500684/157772447-00fccdce-9d12-46a3-8bb4-fac612cdc949.svg",
|
||||
alt: "Vitest",
|
||||
href: "https://vitest.dev",
|
||||
},
|
||||
{
|
||||
src: "https://user-images.githubusercontent.com/1500684/157772662-92b0dd3a-453f-4d18-b8be-9fa6efde52cf.png",
|
||||
alt: "Testing Library",
|
||||
href: "https://testing-library.com",
|
||||
},
|
||||
{
|
||||
src: "https://user-images.githubusercontent.com/1500684/157772934-ce0a943d-e9d0-40f8-97f3-f464c0811643.svg",
|
||||
alt: "Prettier",
|
||||
href: "https://prettier.io",
|
||||
},
|
||||
{
|
||||
src: "https://user-images.githubusercontent.com/1500684/157772990-3968ff7c-b551-4c55-a25c-046a32709a8e.svg",
|
||||
alt: "ESLint",
|
||||
href: "https://eslint.org",
|
||||
},
|
||||
{
|
||||
src: "https://user-images.githubusercontent.com/1500684/157773063-20a0ed64-b9f8-4e0b-9d1e-0b65a3d4a6db.svg",
|
||||
alt: "TypeScript",
|
||||
href: "https://typescriptlang.org",
|
||||
},
|
||||
].map((img) => (
|
||||
<a
|
||||
key={img.href}
|
||||
href={img.href}
|
||||
className="flex h-16 w-32 justify-center p-1 grayscale transition hover:grayscale-0 focus:grayscale-0"
|
||||
>
|
||||
<img alt={img.alt} src={img.src} />
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
179
app/routes/join.tsx
Normal file
179
app/routes/join.tsx
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
import * as React from "react";
|
||||
import type { ActionFunction, LoaderFunction, MetaFunction } from "remix";
|
||||
import {
|
||||
Form,
|
||||
Link,
|
||||
redirect,
|
||||
useSearchParams,
|
||||
json,
|
||||
useActionData,
|
||||
} from "remix";
|
||||
|
||||
import { getUserId, createUserSession } from "~/session.server";
|
||||
|
||||
import { createUser, getUserByEmail } from "~/models/user.server";
|
||||
import { validateEmail } from "~/utils";
|
||||
|
||||
export const loader: LoaderFunction = async ({ request }) => {
|
||||
const userId = await getUserId(request);
|
||||
if (userId) return redirect("/");
|
||||
return json({});
|
||||
};
|
||||
|
||||
interface ActionData {
|
||||
errors: {
|
||||
email?: string;
|
||||
password?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const action: ActionFunction = async ({ request }) => {
|
||||
const formData = await request.formData();
|
||||
const email = formData.get("email");
|
||||
const password = formData.get("password");
|
||||
const redirectTo = formData.get("redirectTo");
|
||||
|
||||
if (!validateEmail(email)) {
|
||||
return json<ActionData>(
|
||||
{ errors: { email: "Email is invalid" } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
if (typeof password !== "string") {
|
||||
return json<ActionData>(
|
||||
{ errors: { password: "Password is required" } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
return json<ActionData>(
|
||||
{ errors: { password: "Password is too short" } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const existingUser = await getUserByEmail(email);
|
||||
if (existingUser) {
|
||||
return json<ActionData>(
|
||||
{ errors: { email: "A user already exists with this email" } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const user = await createUser(email, password);
|
||||
|
||||
return createUserSession({
|
||||
request,
|
||||
userId: user.id,
|
||||
remember: false,
|
||||
redirectTo: typeof redirectTo === "string" ? redirectTo : "/",
|
||||
});
|
||||
};
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return {
|
||||
title: "Sign Up",
|
||||
};
|
||||
};
|
||||
|
||||
export default function Join() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const redirectTo = searchParams.get("redirectTo") ?? undefined;
|
||||
const actionData = useActionData() as ActionData;
|
||||
const emailRef = React.useRef<HTMLInputElement>(null);
|
||||
const passwordRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (actionData?.errors?.email) {
|
||||
emailRef.current?.focus();
|
||||
} else if (actionData?.errors?.password) {
|
||||
passwordRef.current?.focus();
|
||||
}
|
||||
}, [actionData]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-full flex-col justify-center">
|
||||
<div className="mx-auto w-full max-w-md px-8">
|
||||
<Form method="post" className="space-y-6" noValidate>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Email address
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
ref={emailRef}
|
||||
id="email"
|
||||
required
|
||||
autoFocus={true}
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
aria-invalid={actionData?.errors?.email ? true : undefined}
|
||||
aria-describedby="email-error"
|
||||
className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
|
||||
/>
|
||||
{actionData?.errors?.email && (
|
||||
<div className="pt-1 text-red-700" id="email-error">
|
||||
{actionData.errors.email}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
id="password"
|
||||
ref={passwordRef}
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
aria-invalid={actionData?.errors?.password ? true : undefined}
|
||||
aria-describedby="password-error"
|
||||
className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
|
||||
/>
|
||||
{actionData?.errors?.password && (
|
||||
<div className="pt-1 text-red-700" id="password-error">
|
||||
{actionData.errors.password}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="redirectTo" value={redirectTo} />
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full rounded bg-blue-500 py-2 px-4 text-white hover:bg-blue-600 focus:bg-blue-400"
|
||||
>
|
||||
Create Account
|
||||
</button>
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="text-center text-sm text-gray-500">
|
||||
Already have an account?{" "}
|
||||
<Link
|
||||
className="text-blue-500 underline"
|
||||
to={{
|
||||
pathname: "/login",
|
||||
search: searchParams.toString(),
|
||||
}}
|
||||
>
|
||||
Log in
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
192
app/routes/login.tsx
Normal file
192
app/routes/login.tsx
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
import * as React from "react";
|
||||
import type { ActionFunction, LoaderFunction, MetaFunction } from "remix";
|
||||
import {
|
||||
Form,
|
||||
json,
|
||||
Link,
|
||||
useActionData,
|
||||
redirect,
|
||||
useSearchParams,
|
||||
} from "remix";
|
||||
|
||||
import { createUserSession, getUserId } from "~/session.server";
|
||||
import { verifyLogin } from "~/models/user.server";
|
||||
import { validateEmail } from "~/utils";
|
||||
|
||||
export const loader: LoaderFunction = async ({ request }) => {
|
||||
const userId = await getUserId(request);
|
||||
if (userId) return redirect("/");
|
||||
return json({});
|
||||
};
|
||||
|
||||
interface ActionData {
|
||||
errors?: {
|
||||
email?: string;
|
||||
password?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const action: ActionFunction = async ({ request }) => {
|
||||
const formData = await request.formData();
|
||||
const email = formData.get("email");
|
||||
const password = formData.get("password");
|
||||
const redirectTo = formData.get("redirectTo");
|
||||
const remember = formData.get("remember");
|
||||
|
||||
if (!validateEmail(email)) {
|
||||
return json<ActionData>(
|
||||
{ errors: { email: "Email is invalid" } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
if (typeof password !== "string") {
|
||||
return json<ActionData>(
|
||||
{ errors: { password: "Password is required" } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
return json<ActionData>(
|
||||
{ errors: { password: "Password is too short" } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const user = await verifyLogin(email, password);
|
||||
|
||||
if (!user) {
|
||||
return json<ActionData>(
|
||||
{ errors: { email: "Invalid email or password" } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
return createUserSession({
|
||||
request,
|
||||
userId: user.id,
|
||||
remember: remember === "on" ? true : false,
|
||||
redirectTo: typeof redirectTo === "string" ? redirectTo : "/notes",
|
||||
});
|
||||
};
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return {
|
||||
title: "Login",
|
||||
};
|
||||
};
|
||||
|
||||
export default function LoginPage() {
|
||||
const [searchParams] = useSearchParams();
|
||||
const redirectTo = searchParams.get("redirectTo") || "/notes";
|
||||
const actionData = useActionData() as ActionData;
|
||||
const emailRef = React.useRef<HTMLInputElement>(null);
|
||||
const passwordRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (actionData?.errors?.email) {
|
||||
emailRef.current?.focus();
|
||||
} else if (actionData?.errors?.password) {
|
||||
passwordRef.current?.focus();
|
||||
}
|
||||
}, [actionData]);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-full flex-col justify-center">
|
||||
<div className="mx-auto w-full max-w-md px-8">
|
||||
<Form method="post" className="space-y-6" noValidate>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Email address
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
ref={emailRef}
|
||||
id="email"
|
||||
required
|
||||
autoFocus={true}
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
aria-invalid={actionData?.errors?.email ? true : undefined}
|
||||
aria-describedby="email-error"
|
||||
className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
|
||||
/>
|
||||
{actionData?.errors?.email && (
|
||||
<div className="pt-1 text-red-700" id="email-error">
|
||||
{actionData.errors.email}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
id="password"
|
||||
ref={passwordRef}
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
aria-invalid={actionData?.errors?.password ? true : undefined}
|
||||
aria-describedby="password-error"
|
||||
className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
|
||||
/>
|
||||
{actionData?.errors?.password && (
|
||||
<div className="pt-1 text-red-700" id="password-error">
|
||||
{actionData.errors.password}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="redirectTo" value={redirectTo} />
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full rounded bg-blue-500 py-2 px-4 text-white hover:bg-blue-600 focus:bg-blue-400"
|
||||
>
|
||||
Log in
|
||||
</button>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="remember"
|
||||
name="remember"
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<label
|
||||
htmlFor="remember"
|
||||
className="ml-2 block text-sm text-gray-900"
|
||||
>
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-center text-sm text-gray-500">
|
||||
Don't have an account?{" "}
|
||||
<Link
|
||||
className="text-blue-500 underline"
|
||||
to={{
|
||||
pathname: "/join",
|
||||
search: searchParams.toString(),
|
||||
}}
|
||||
>
|
||||
Sign up
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
11
app/routes/logout.tsx
Normal file
11
app/routes/logout.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import type { ActionFunction, LoaderFunction } from "remix";
|
||||
import { redirect } from "remix";
|
||||
import { logout } from "~/session.server";
|
||||
|
||||
export const action: ActionFunction = async ({ request }) => {
|
||||
return logout(request);
|
||||
};
|
||||
|
||||
export const loader: LoaderFunction = async () => {
|
||||
return redirect("/");
|
||||
};
|
||||
73
app/routes/notes.tsx
Normal file
73
app/routes/notes.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import { Form, json, useLoaderData, Outlet, Link, NavLink } from "remix";
|
||||
import type { LoaderFunction } from "remix";
|
||||
|
||||
import { requireUserId } from "~/session.server";
|
||||
import { useUser } from "~/utils";
|
||||
import { getNoteListItems } from "~/models/note.server";
|
||||
|
||||
type LoaderData = {
|
||||
noteListItems: Awaited<ReturnType<typeof getNoteListItems>>;
|
||||
};
|
||||
|
||||
export const loader: LoaderFunction = async ({ request }) => {
|
||||
const userId = await requireUserId(request);
|
||||
const noteListItems = await getNoteListItems({ userId });
|
||||
return json<LoaderData>({ noteListItems });
|
||||
};
|
||||
|
||||
export default function NotesPage() {
|
||||
const data = useLoaderData() as LoaderData;
|
||||
const user = useUser();
|
||||
|
||||
return (
|
||||
<div className="flex h-full min-h-screen flex-col">
|
||||
<header className="flex items-center justify-between bg-slate-800 p-4 text-white">
|
||||
<h1 className="text-3xl font-bold">
|
||||
<Link to=".">Notes</Link>
|
||||
</h1>
|
||||
<p>{user.email}</p>
|
||||
<Form action="/logout" method="post">
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded bg-slate-600 py-2 px-4 text-blue-100 hover:bg-blue-500 active:bg-blue-600"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</Form>
|
||||
</header>
|
||||
|
||||
<main className="flex h-full bg-white">
|
||||
<div className="h-full w-80 border-r bg-gray-50">
|
||||
<Link to="new" className="block p-4 text-xl text-blue-500">
|
||||
+ New Note
|
||||
</Link>
|
||||
|
||||
<hr />
|
||||
|
||||
{data.noteListItems.length === 0 ? (
|
||||
<p className="p-4">No notes yet</p>
|
||||
) : (
|
||||
<ol>
|
||||
{data.noteListItems.map((note) => (
|
||||
<li key={note.id}>
|
||||
<NavLink
|
||||
className={({ isActive }) =>
|
||||
`block border-b p-4 text-xl ${isActive ? "bg-white" : ""}`
|
||||
}
|
||||
to={note.id}
|
||||
>
|
||||
📝 {note.title}
|
||||
</NavLink>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-6">
|
||||
<Outlet />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
68
app/routes/notes/$noteId.tsx
Normal file
68
app/routes/notes/$noteId.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
import type { LoaderFunction, ActionFunction } from "remix";
|
||||
import { redirect } from "remix";
|
||||
import { json, useLoaderData, useCatch, Form } from "remix";
|
||||
import invariant from "tiny-invariant";
|
||||
import type { Note } from "~/models/note.server";
|
||||
import { deleteNote } from "~/models/note.server";
|
||||
import { getNote } from "~/models/note.server";
|
||||
import { requireUserId } from "~/session.server";
|
||||
|
||||
type LoaderData = {
|
||||
note: Note;
|
||||
};
|
||||
|
||||
export const loader: LoaderFunction = async ({ request, params }) => {
|
||||
const userId = await requireUserId(request);
|
||||
invariant(params.noteId, "noteId not found");
|
||||
|
||||
const note = await getNote({ userId, id: params.noteId });
|
||||
if (!note) {
|
||||
throw new Response("Not Found", { status: 404 });
|
||||
}
|
||||
return json<LoaderData>({ note });
|
||||
};
|
||||
|
||||
export const action: ActionFunction = async ({ request, params }) => {
|
||||
const userId = await requireUserId(request);
|
||||
invariant(params.noteId, "noteId not found");
|
||||
|
||||
await deleteNote({ userId, id: params.noteId });
|
||||
|
||||
return redirect("/notes");
|
||||
};
|
||||
|
||||
export default function NoteDetailsPage() {
|
||||
const data = useLoaderData() as LoaderData;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold">{data.note.title}</h3>
|
||||
<p className="py-6">{data.note.body}</p>
|
||||
<hr className="my-4" />
|
||||
<Form method="post">
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded bg-blue-500 py-2 px-4 text-white hover:bg-blue-600 focus:bg-blue-400"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ErrorBoundary({ error }: { error: Error }) {
|
||||
console.error(error);
|
||||
|
||||
return <div>An unexpected error occurred: {error.message}</div>;
|
||||
}
|
||||
|
||||
export function CatchBoundary() {
|
||||
const caught = useCatch();
|
||||
|
||||
if (caught.status === 404) {
|
||||
return <div>Note not found</div>;
|
||||
}
|
||||
|
||||
throw new Error(`Unexpected caught response with status: ${caught.status}`);
|
||||
}
|
||||
12
app/routes/notes/index.tsx
Normal file
12
app/routes/notes/index.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { Link } from "remix";
|
||||
|
||||
export default function NoteIndexPage() {
|
||||
return (
|
||||
<p>
|
||||
No note selected. Select a note on the left, or{" "}
|
||||
<Link to="new" className="text-blue-500 underline">
|
||||
create a new note.
|
||||
</Link>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
116
app/routes/notes/new.tsx
Normal file
116
app/routes/notes/new.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import * as React from "react";
|
||||
import { Form, json, redirect, useActionData } from "remix";
|
||||
import type { ActionFunction } from "remix";
|
||||
import Alert from "@reach/alert";
|
||||
|
||||
import { createNote } from "~/models/note.server";
|
||||
import { requireUserId } from "~/session.server";
|
||||
|
||||
type ActionData = {
|
||||
errors?: {
|
||||
title?: string;
|
||||
body?: string;
|
||||
};
|
||||
};
|
||||
|
||||
export const action: ActionFunction = async ({ request }) => {
|
||||
const userId = await requireUserId(request);
|
||||
|
||||
const formData = await request.formData();
|
||||
const title = formData.get("title");
|
||||
const body = formData.get("body");
|
||||
|
||||
if (typeof title !== "string" || title.length === 0) {
|
||||
return json<ActionData>(
|
||||
{ errors: { title: "Title is required" } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
if (typeof body !== "string" || body.length === 0) {
|
||||
return json<ActionData>(
|
||||
{ errors: { body: "Body is required" } },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
const note = await createNote({ title, body, userId });
|
||||
|
||||
return redirect(`/notes/${note.id}`);
|
||||
};
|
||||
|
||||
export default function NewNotePage() {
|
||||
const actionData = useActionData() as ActionData;
|
||||
const titleRef = React.useRef<HTMLInputElement>(null);
|
||||
const bodyRef = React.useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (actionData?.errors?.title) {
|
||||
titleRef.current?.focus();
|
||||
} else if (actionData?.errors?.body) {
|
||||
bodyRef.current?.focus();
|
||||
}
|
||||
}, [actionData]);
|
||||
|
||||
return (
|
||||
<Form
|
||||
method="post"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: 8,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<label className="flex w-full flex-col gap-1">
|
||||
<span>Title: </span>
|
||||
<input
|
||||
ref={titleRef}
|
||||
name="title"
|
||||
className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
|
||||
aria-invalid={actionData?.errors?.title ? true : undefined}
|
||||
aria-errormessage={
|
||||
actionData?.errors?.title ? "title-error" : undefined
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
{actionData?.errors?.title && (
|
||||
<Alert className="pt-1 text-red-700" id="title=error">
|
||||
{actionData.errors.title}
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex w-full flex-col gap-1">
|
||||
<span>Body: </span>
|
||||
<textarea
|
||||
ref={bodyRef}
|
||||
name="body"
|
||||
rows={8}
|
||||
className="w-full flex-1 rounded-md border-2 border-blue-500 py-2 px-3 text-lg leading-6"
|
||||
aria-invalid={actionData?.errors?.body ? true : undefined}
|
||||
aria-errormessage={
|
||||
actionData?.errors?.body ? "body-error" : undefined
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
{actionData?.errors?.body && (
|
||||
<Alert className="pt-1 text-red-700" id="body=error">
|
||||
{actionData.errors.body}
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded bg-blue-500 py-2 px-4 text-white hover:bg-blue-600 focus:bg-blue-400"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue