remix-demo

new.tsx

(3100B)

 import type {
   ActionArgs,
   LinksFunction,
   MetaFunction,
 } from "@remix-run/server-runtime";
 import { redirect } from "@remix-run/server-runtime";
 import Form from "~/components/forms/Form";
 import Input from "~/components/forms/Input";
 import PrimaryButton from "~/components/forms/PrimaryButton";
 import foodEntryController from "~/controllers/foodEntry.server";
 import {
   foodEntryUserValidator,
   foodEntryAdminValidator,
 } from "~/schemas/foodEntry";
 import { formatDateTime } from "~/utils/date";
 import { useState } from "react";
 import { debounce } from "throttle-debounce";
 import { useUser } from "~/utils/hooks";
 import { Role } from "@prisma/client";
 import comboboxStyles from "@reach/combobox/styles.css";
 import InputCombobox from "~/components/forms/InputCombobox";
 import Heading from "~/components/Heading";
 
 export const meta: MetaFunction = () => ({
   title: "Create Food Entry | Calories Counter",
 });
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: comboboxStyles }];
 };
 
 export async function action({ request }: ActionArgs) {
   const response = await foodEntryController.create(request);
   if (response.ok) return redirect("..");
   else return response;
 }
 
 export default function FoodEntriesNew() {
   const user = useUser();
   const now = formatDateTime(new Date());
   const searchDebounced = debounce(250, autocompleteSearch);
   const [foodOptions, setFoodOptions] = useState([]);
   const [calories, setCalories] = useState(0);
 
   async function autocompleteSearch(query: string) {
     if (!query) return;
 
     const result = await fetch(`/api/foods?query=${encodeURIComponent(query)}`);
     setFoodOptions(await result.json());
   }
 
   async function findFoodByName(name: string) {
     const result = await fetch(`/api/foods/${name}`);
     const body = await result.json();
     setCalories(body.calories);
   }
 
   const validator =
     user.role === Role.ADMIN ? foodEntryAdminValidator : foodEntryUserValidator;
 
   return (
     <section>
       <Heading>Add Food Entry</Heading>
       <Form replace method="post" validator={validator} autoComplete="off">
         <InputCombobox
           label="Food Name"
           name="name"
           options={foodOptions}
           onInputChange={searchDebounced}
           onSelect={findFoodByName}
           required
         />
         <Input
           label="Calories"
           name="calories"
           type="number"
           min={0}
           max={5000}
           defaultValue={calories || undefined}
           required
         />
         <Input
           label="Date Consumed"
           name="consumed"
           type="datetime-local"
           defaultValue={now}
           max={now}
           required
         />
         {user.role === Role.ADMIN ? (
           <Input
             label="User ID"
             name="userId"
             type="text"
             defaultValue={user.id}
             required
           />
         ) : null}
         <PrimaryButton type="submit" className="w-full" data-cy="add-food">
           Add Food
         </PrimaryButton>
       </Form>
     </section>
   );
 }