remix-demo

react router (remix) demo

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

$id.tsx

(2371B)

      1 import { useLoaderData } from "@remix-run/react";
      2 import type {
      3   ActionArgs,
      4   LoaderArgs,
      5   MetaFunction,
      6 } from "@remix-run/server-runtime";
      7 import { redirect } from "@remix-run/server-runtime";
      8 import Form from "~/components/forms/Form";
      9 import Input from "~/components/forms/Input";
     10 import PrimaryButton from "~/components/forms/PrimaryButton";
     11 import { foodEntryAdminValidator } from "~/schemas/foodEntry";
     12 import { formatDateTime } from "~/utils/date";
     13 import foodEntryController from "~/controllers/foodEntry.server";
     14 import Heading from "~/components/Heading";
     15 
     16 export const meta: MetaFunction<typeof loader> = ({ data }) => {
     17   // @ts-ignore
     18   const foodName = data.name;
     19 
     20   if (!foodName) return {};
     21   return {
     22     title: foodName + " Food Entry | Calories Counter",
     23   };
     24 };
     25 
     26 export async function loader({ request, params }: LoaderArgs) {
     27   return await foodEntryController.get(request, params);
     28 }
     29 
     30 export async function action({ request, params }: ActionArgs) {
     31   const response = await foodEntryController.update(request, params);
     32   if (response.ok) return redirect("..");
     33   else return response;
     34 }
     35 
     36 export default function FoodEntriesNew() {
     37   const { name, calories, consumed, userId } = useLoaderData();
     38 
     39   const now = formatDateTime(new Date());
     40   const consumedFormatted = formatDateTime(new Date(consumed));
     41 
     42   return (
     43     <section>
     44       <Heading>Edit Food Entry</Heading>
     45       <Form
     46         replace
     47         method="post"
     48         validator={foodEntryAdminValidator}
     49         autoComplete="off"
     50       >
     51         <Input
     52           label="Food Name"
     53           name="name"
     54           type="text"
     55           defaultValue={name}
     56           required
     57         />
     58         <Input
     59           label="Calories"
     60           name="calories"
     61           type="number"
     62           min={0}
     63           max={5000}
     64           defaultValue={calories}
     65           required
     66         />
     67         <Input
     68           label="Date Consumed"
     69           name="consumed"
     70           type="datetime-local"
     71           defaultValue={consumedFormatted}
     72           max={now}
     73           required
     74         />
     75         <Input
     76           label="User ID"
     77           name="userId"
     78           type="text"
     79           defaultValue={userId}
     80           required
     81         />
     82         <PrimaryButton type="submit" className="w-full" data-cy="edit-food">
     83           Edit Food
     84         </PrimaryButton>
     85       </Form>
     86     </section>
     87   );
     88 }