diff --git a/app/root.tsx b/app/root.tsx index 3cf661b..9d3b1e1 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -6,7 +6,8 @@ import { useRouteError, isRouteErrorResponse, json, - useLoaderData + useLoaderData, + ScrollRestoration } from "@remix-run/react"; import type { PropsWithChildren } from "react"; @@ -37,6 +38,7 @@ function Document({ {children} + diff --git a/app/routes/inventory/cocktail.$cocktailslug.tsx b/app/routes/inventory/cocktail.$cocktailslug.tsx new file mode 100644 index 0000000..11cf179 --- /dev/null +++ b/app/routes/inventory/cocktail.$cocktailslug.tsx @@ -0,0 +1,71 @@ +import type { + LoaderFunctionArgs +} from "@remix-run/node"; +import { json } from "@remix-run/node"; +import { + useLoaderData, + useParams, + isRouteErrorResponse, + useRouteError } from "@remix-run/react"; + +import DrinkPage from "~/components/cards/drink.page"; + +import { db } from "~/utils/db.server"; +import { enhance } from "@zenstackhq/runtime"; +import { findIdFromSlug } from "~/models/drinks.server"; + +export const loader = async ({ +params, +}: LoaderFunctionArgs) => { +const dbe = enhance(db); + +const cocktailid = await findIdFromSlug(params.cocktailslug); + +const cocktail = await dbe.cocktail.findUnique({ + where: { id: cocktailid }, + include: { manufacturer: true, containers: { include: { section: true}}} +}); +if (!cocktail) { + throw new Response("Cocktail not found.", { + status: 404, + }); +} +return json({ cocktail }); +}; + +export default function CocktailRoute() { +const data = useLoaderData(); + +return ( + +); +} + +export function ErrorBoundary() { + const { cocktailid } = useParams(); + const error = useRouteError(); + + if (isRouteErrorResponse(error)) { + if (error.status === 400) { + return ( +
+ What you're trying to do is not allowed. +
+ ); + } + if (error.status === 404) { + return ( +
+ Huh? What the heck is "{cocktailid}"? +
+ ); + } + } + + return ( +
+ There was an error loading cocktail by the id "{cocktailid}". + Sorry. +
+ ); +} \ No newline at end of file diff --git a/app/routes/inventory/layout.tsx b/app/routes/inventory/layout.tsx index d07e903..7e5bad1 100644 --- a/app/routes/inventory/layout.tsx +++ b/app/routes/inventory/layout.tsx @@ -1,5 +1,6 @@ import { LoaderFunctionArgs } from "@remix-run/node"; -import { Outlet, json, useLoaderData } from "@remix-run/react"; +import { Outlet, json, useLoaderData, useRevalidator } from "@remix-run/react"; +import { useEffect } from "react"; import { getSession } from "~/auth/session"; import Header, { HeaderData } from "~/components/header"; @@ -20,8 +21,21 @@ export async function loader({ return json({data}); } + + export default function InventoryLayout() { let data = useLoaderData(); + let revalidator = useRevalidator(); + + useEffect(() => { + const timer = setTimeout(() => { + if (revalidator.state === "idle") { + revalidator.revalidate(); + } + }, 5000); + + return () => clearTimeout(timer); + }); return ( <> diff --git a/app/routes/inventory/route.tsx b/app/routes/inventory/route.tsx index 643e48a..82644f8 100644 --- a/app/routes/inventory/route.tsx +++ b/app/routes/inventory/route.tsx @@ -31,9 +31,7 @@ export default function BeersRoute() { const [searchParams, setSearchParams] = useSearchParams(); function CustomToggle({ children, eventKey } : any) { - const decoratedOnClick = useAccordionButton(eventKey, () => - console.log('totally custom!'), - ); + const decoratedOnClick = useAccordionButton(eventKey, () => {}); return (