remix-demo

react router (remix) demo

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

report.tsx

(1906B)

      1 import { useLoaderData } from "@remix-run/react";
      2 import type { LoaderArgs, MetaFunction } from "@remix-run/server-runtime";
      3 import Heading from "~/components/Heading";
      4 import CenteredLayout from "~/components/layouts/CenteredLayout";
      5 import SubHeading from "~/components/SubHeading";
      6 import { generateReport } from "~/controllers/adminReport.server";
      7 import { formatDateWithoutTime } from "~/utils/date";
      8 
      9 export const meta: MetaFunction = () => ({
     10   title: "Admin Report | Calories Counter",
     11 });
     12 
     13 export function loader({ request }: LoaderArgs) {
     14   return generateReport(request);
     15 }
     16 
     17 export default function AdminReport() {
     18   const { thisWeek, lastWeek } = useLoaderData();
     19   return (
     20     <section>
     21       <CenteredLayout>
     22         <Heading>Admin Report</Heading>
     23         <section>
     24           <SubHeading>This Week</SubHeading>
     25           <p>
     26             There were a total of{" "}
     27             <em className="font-semibold">{thisWeek.total} food entries</em> and
     28             an average of{" "}
     29             <em className="font-semibold">
     30               {thisWeek.averagePerUser} calories
     31             </em>{" "}
     32             consumed per user from{" "}
     33             {formatDateWithoutTime(new Date(thisWeek.start))} to{" "}
     34             {formatDateWithoutTime(new Date(thisWeek.end))}.
     35           </p>
     36         </section>
     37         <section>
     38           <SubHeading>Last Week</SubHeading>
     39           <p>
     40             There were a total of{" "}
     41             <em className="font-semibold">{lastWeek.total} food entries</em> and
     42             an average of{" "}
     43             <em className="font-semibold">
     44               {lastWeek.averagePerUser} calories
     45             </em>{" "}
     46             consumed per user from{" "}
     47             {formatDateWithoutTime(new Date(lastWeek.start))} to{" "}
     48             {formatDateWithoutTime(new Date(lastWeek.end))}.
     49           </p>
     50         </section>
     51       </CenteredLayout>
     52     </section>
     53   );
     54 }