diff --git a/app/components/header.tsx b/app/components/header.tsx
new file mode 100644
index 0000000..645df7b
--- /dev/null
+++ b/app/components/header.tsx
@@ -0,0 +1,40 @@
+import {LinkContainer} from 'react-router-bootstrap'
+import {Container, Nav, Navbar, NavDropdown} from 'react-bootstrap';
+
+function Header() {
+ return (
+
+
+
+ K-FRIDGE
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/app/root.tsx b/app/root.tsx
index 781d6fe..44a7fb2 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,29 +1,25 @@
import type { LinksFunction } from "@remix-run/node";
import {
Links,
- LiveReload,
- Outlet
+ Scripts,
+ Outlet,
+ useRouteError,
+ isRouteErrorResponse
} from "@remix-run/react";
+import type { PropsWithChildren } from "react";
-import globalLargeStylesUrl from "~/styles/global-large.css?url";
-import globalMediumStylesUrl from "~/styles/global-medium.css?url";
-import globalStylesUrl from "~/styles/global.css?url";
+import stylesheet from "bootstrap/dist/css/bootstrap.min.css?url";
export const links: LinksFunction = () => [
- { rel: "stylesheet", href: globalStylesUrl },
- {
- rel: "stylesheet",
- href: globalMediumStylesUrl,
- media: "print, (min-width: 640px)",
- },
- {
- rel: "stylesheet",
- href: globalLargeStylesUrl,
- media: "screen and (min-width: 1024px)",
- },
+ { rel: "stylesheet", href: stylesheet },
];
-export default function App() {
+import Header from "~/components/header";
+
+function Document({
+ children,
+ title = "K-FRIDGE",
+}: PropsWithChildren<{ title?: string }>) {
return (
@@ -32,13 +28,53 @@ export default function App() {
name="viewport"
content="width=device-width, initial-scale=1"
/>
- Remix: So great, it's funny!
+ {title}
-
-
+
+ {children}
+
);
+}
+
+export default function App() {
+ return (
+
+
+
+ );
+}
+
+export function ErrorBoundary() {
+ const error = useRouteError();
+
+ if (isRouteErrorResponse(error)) {
+ return (
+
+
+
+ {error.status} {error.statusText}
+
+
+
+ );
+ }
+
+ const errorMessage =
+ error instanceof Error
+ ? error.message
+ : "Unknown error";
+ return (
+
+
+
App Error
+
{errorMessage}
+
diff --git a/app/routes/beers.$beerid.tsx b/app/routes/beers.$beerid.tsx
index 531a706..4d83d04 100644
--- a/app/routes/beers.$beerid.tsx
+++ b/app/routes/beers.$beerid.tsx
@@ -1,9 +1,39 @@
-import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import type {
+ LoaderFunctionArgs,
+ ActionFunctionArgs
+} from "@remix-run/node";
+import { json, redirect } from "@remix-run/node";
+import {
+ useLoaderData,
+ useParams,
+ isRouteErrorResponse,
+ useRouteError } from "@remix-run/react";
import { db } from "~/utils/db.server";
+export const action = async ({
+ params,
+ request,
+ }: ActionFunctionArgs) => {
+ const form = await request.formData();
+ if (form.get("intent") !== "delete") {
+ throw new Response(
+ `The intent ${form.get("intent")} is not supported`,
+ { status: 400 }
+ );
+ }
+ const beer = await db.beer.findUnique({
+ where: { id: params.beerid },
+ });
+ if (!beer) {
+ throw new Response("Can't delete what does not exist", {
+ status: 404,
+ });
+ }
+ await db.beer.delete({ where: { id: params.beerid } });
+ return redirect("/beers");
+ };
+
export const loader = async ({
params,
}: LoaderFunctionArgs) => {
@@ -11,7 +41,9 @@ export const loader = async ({
where: { id: params.beerid },
});
if (!beer) {
- throw new Error("Beer not found");
+ throw new Response("Beer not found.", {
+ status: 404,
+ });
}
return json({ beer });
};
@@ -24,6 +56,45 @@ export default function BeerRoute() {
You selected this beer:
{data.beer.name}
ABV {data.beer.abv}%
+
+ What you're trying to do is not allowed.
+
+ );
+ }
+ if (error.status === 404) {
+ return (
+
+ Huh? What the heck is "{beerid}"?
+
+ );
+ }
+ }
+
+ return (
+
+ There was an error loading beer by the id "{beerid}".
+ Sorry.
+
+ );
+ }
\ No newline at end of file
diff --git a/app/routes/beers._index.tsx b/app/routes/beers._index.tsx
index e995422..9a5ca0e 100644
--- a/app/routes/beers._index.tsx
+++ b/app/routes/beers._index.tsx
@@ -18,7 +18,7 @@ export default function BeersIndexRoute() {
return (
-
Here's a random Beer:
+
Here's a random Beer:
{data.randomBeer.name}
"{data.randomBeer.name}" Permalink
@@ -26,3 +26,11 @@ export default function BeersIndexRoute() {
+ Something unexpected went wrong. Sorry about that.
+
+ );
+ }
\ No newline at end of file
diff --git a/app/routes/beers.new.tsx b/app/routes/beers.new.tsx
index d9cd9ea..6b7dc6a 100644
--- a/app/routes/beers.new.tsx
+++ b/app/routes/beers.new.tsx
@@ -1,7 +1,25 @@
import type { ActionFunctionArgs } from "@remix-run/node";
import { redirect } from "@remix-run/node";
+import { useActionData } from "@remix-run/react";
import { db } from "~/utils/db.server";
+import { badRequest } from "~/utils/request.server";
+
+function validateBeerAbv(abv: number) {
+ if (abv < 0) {
+ return "Negative ABV not allowed";
+ }
+
+ if (abv > 100) {
+ return "ABV can not be more than 100%";
+ }
+ }
+
+ function validateBeerName(name: string) {
+ if (name.length < 3) {
+ return "That beer's name is too short";
+ }
+ }
export const action = async ({
request,
@@ -15,36 +33,115 @@ export const action = async ({
typeof name !== "string" ||
typeof abv !== "number"
) {
- throw new Error("Form not submitted correctly.");
+ return badRequest({
+ fieldErrors: null,
+ fields: null,
+ formError: "Form not submitted correctly.",
+ });
}
+ const fieldErrors = {
+ abv: validateBeerAbv(abv),
+ name: validateBeerName(name),
+ };
const fields = { name, abv };
+ if (Object.values(fieldErrors).some(Boolean)) {
+ return badRequest({
+ fieldErrors,
+ fields,
+ formError: null,
+ });
+ }
const beer = await db.beer.create({ data: fields });
return redirect(`/beers/${beer.id}`);
};
export default function NewBeerRoute() {
+ const actionData = useActionData();
return (
);
+ }
+
+ export function ErrorBoundary() {
+ return (
+
+ Something unexpected went wrong. Sorry about that.
+
+ );
}
\ No newline at end of file
diff --git a/app/routes/beers.tsx b/app/routes/beers.tsx
index b907327..91d6bab 100644
--- a/app/routes/beers.tsx
+++ b/app/routes/beers.tsx
@@ -1,4 +1,3 @@
-import type { LinksFunction } from "@remix-run/node";
import { json } from "@remix-run/node";
import {
Link,
@@ -6,13 +5,8 @@ import {
useLoaderData,
} from "@remix-run/react";
-import stylesUrl from "~/styles/beers.css?url";
import { db } from "~/utils/db.server";
-export const links: LinksFunction = () => [
- { rel: "stylesheet", href: stylesUrl },
-];
-
export const loader = async () => {
return json({
beerListItems: await db.beer.findMany({
@@ -27,40 +21,42 @@ export default function BeersRoute() {
const data = useLoaderData();
return (
-
-
-
-
+
+
-
-
-
-
Get a random beer
-
Here are a few more beers to check out:
-
- {data.beerListItems.map(({ id, name }) => (
- -
- {name}
-
- ))}
-
-
- Add your own
-
-
-
-
-
+
+
+
+
Get a random beer
+
Here are a few more beers to check out:
+
+ {data.beerListItems.map(({ id, name }) => (
+ -
+ {name}
+
+ ))}
+
+
+
+ Add your own
+
+
+
+
+
+