remix-demo

report.tsx

(1663B)

 import { useLoaderData } from "@remix-run/react";
 import type { LoaderArgs, MetaFunction } from "@remix-run/server-runtime";
 import Heading from "~/components/Heading";
 import CenteredLayout from "~/components/layouts/CenteredLayout";
 import Timeline from "~/components/layouts/Timeline";
 import { generateReport } from "~/controllers/report.server";
 
 export const meta: MetaFunction = () => ({
   title: "Report | Calories Counter",
 });
 
 type Result = {
   threshold: number;
   history: { [index: string]: number };
 };
 
 export async function loader({ request }: LoaderArgs) {
   return generateReport(request);
 }
 
 export default function Report() {
   const { threshold, history }: Result = useLoaderData();
 
   const timelineValues = Object.keys(history).map((date) => {
     const calories = history[date];
     const failed = calories > threshold;
     const style = failed ? "text-red-500 font-semibold" : "text-gray-900";
 
     return {
       id: date,
       date: date,
       node: (
         <div key={date} className={style}>
           {calories}{" "}
           <abbr title="calories" className="no-underline">
             cals
           </abbr>
           {failed ? <div>Over the threshold!</div> : null}
         </div>
       ),
     };
   });
 
   return (
     <section>
       <CenteredLayout>
         <Heading>Report</Heading>
         <p className="mb-6 text-lg text-gray-500">
           Below is a list of your calories intake per day. Remember, your
           calories threshold limit is{" "}
           <em className="font-semibold">{threshold} calories</em>.
         </p>
         <Timeline values={timelineValues} />
       </CenteredLayout>
     </section>
   );
 }