remix-demo

react router (remix) demo

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

FoodEntries.tsx

(2054B)

      1 import { Role } from "@prisma/client";
      2 import { Form, Link } from "@remix-run/react";
      3 import { useUser } from "~/utils/hooks";
      4 import { formatReadableDateTime } from "~/utils/date";
      5 import Timeline from "./layouts/Timeline";
      6 
      7 interface FoodEntry {
      8   id: string;
      9   name: string;
     10   consumed: string;
     11   calories: number;
     12   user?: {
     13     name: string;
     14   };
     15 }
     16 
     17 interface FoodEntriesProps {
     18   foodEntries: FoodEntry[];
     19 }
     20 
     21 export default function FoodEntries({ foodEntries }: FoodEntriesProps) {
     22   const user = useUser();
     23   const timelineValues = foodEntries.map((entry) => ({
     24     id: entry.id,
     25     date: formatReadableDateTime(new Date(entry.consumed)) || entry.consumed,
     26     node: (
     27       <div key={entry.id} data-cy={entry.name}>
     28         <div className="my-2 flex flex-row-reverse justify-end gap-2">
     29           <div className="text-gray-900">{entry.name}</div>
     30           <div className="min-w-max font-light">
     31             {entry.calories}{" "}
     32             <abbr title="calories" className="no-underline">
     33               cals
     34             </abbr>
     35           </div>
     36         </div>
     37         {user.role === Role.ADMIN && (
     38           <div className="flex justify-end space-x-3 text-sm">
     39             <span className="font-light">
     40               by {entry.user?.name || "unknown"}
     41             </span>
     42             <div className="space-x-2">
     43               <Link
     44                 to={entry.id}
     45                 aria-label={`Edit ${entry.name}`}
     46                 className="text-blue-600 hover:underline"
     47               >
     48                 Edit
     49               </Link>
     50               <Form replace method="post" className="inline">
     51                 <input type="hidden" name="id" value={entry.id} />
     52                 <button
     53                   type="submit"
     54                   aria-label={`Remove ${entry.name}`}
     55                   className="text-red-600 hover:underline"
     56                 >
     57                   Remove
     58                 </button>
     59               </Form>
     60             </div>
     61           </div>
     62         )}
     63       </div>
     64     ),
     65   }));
     66 
     67   return <Timeline values={timelineValues} />;
     68 }