remix-demo

react router (remix) demo

git clone https://9o.is/git/remix-demo.git

food-entries.tsx

(1231B)

      1 import type {
      2   ActionArgs,
      3   LoaderArgs,
      4   MetaFunction,
      5 } from "@remix-run/server-runtime";
      6 import { json } from "@remix-run/server-runtime";
      7 import { Outlet, useLoaderData } from "@remix-run/react";
      8 import FoodEntries from "~/components/FoodEntries";
      9 import TwoColumnsLayout from "~/components/layouts/TwoColumnsLayout";
     10 import foodEntryController from "~/controllers/foodEntry.server";
     11 import SubHeading from "~/components/SubHeading";
     12 
     13 export const meta: MetaFunction = () => ({
     14   title: "Food Entries | Calories Counter",
     15 });
     16 
     17 export function loader({ request }: LoaderArgs) {
     18   return foodEntryController.getAll(request);
     19 }
     20 
     21 export async function action({ request }: ActionArgs) {
     22   const formData = await request.formData();
     23   const id = formData.get("id");
     24 
     25   if (typeof id !== "string") {
     26     return json({ errors: "ID is missing" }, { status: 422 });
     27   }
     28 
     29   return foodEntryController.remove(request, { id });
     30 }
     31 
     32 export default function FoodEntriesIndex() {
     33   const foodEntries = useLoaderData();
     34 
     35   const history = (
     36     <section>
     37       <SubHeading>Food Entry History</SubHeading>
     38       <FoodEntries foodEntries={foodEntries} />
     39     </section>
     40   );
     41 
     42   return <TwoColumnsLayout first={<Outlet />} second={history} />;
     43 }