Citizen reporting web

web-citizen-reporting/web-citizen-reporting-template/src/components/notifications.tsx

@@ -0,0 +1,58 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { Link } from "@tanstack/react-router";
+import type { FC } from "react";
+import { Button } from "./ui/button";
+
+interface NotificationProps {
+  id: string;
+  sentAt: Date;
+  title: string;
+  body: string;
+  isInsideList?: boolean;
+}
+
+export const Notification: FC<NotificationProps> = ({
+  id,
+  sentAt,
+  title,
+  body,
+  isInsideList,
+}) => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>
+          Sent at: {new Date(sentAt).toLocaleString("en-GB")}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div
+          className={cn({ "line-clamp-2": isInsideList })}
+          dangerouslySetInnerHTML={{ __html: body }}
+        />
+      </CardContent>
+      <CardFooter>
+        {isInsideList && (
+          <Link
+            title="Read more"
+            to="/notifications/$notificationId"
+            params={{ notificationId: id }}
+          >
+            <Button>Read more</Button>{" "}
+          </Link>
+        )}
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default Notification;

web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx

@@ -1,13 +1,24 @@
+import Notification from "@/components/notifications";
 import { useNotifications } from "@/queries/use-notifications";
 import { Route } from "@/routes/notifications/$notificationId";
+import { notFound } from "@tanstack/react-router";
 
 function NotificationDetails() {
   const { notificationId } = Route.useParams();
   const { data: notification } = useNotifications((notification) =>
     notification.notifications.find((n) => n.id == notificationId)
   );
 
-  return <>{JSON.stringify(notification)}</>;
+  if (!notification) throw notFound();
+
+  return (
+    <Notification
+      id={notification.id}
+      sentAt={notification.sentAt}
+      title={notification.title}
+      body={notification.body}
+    />
+  );
 }
 
 export default NotificationDetails;

web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationsList.tsx

@@ -1,9 +1,28 @@
+import Notification from "@/components/notifications";
 import { useNotifications } from "@/queries/use-notifications";
+import { typographyClasses } from "@/routes/typography";
 
 function NotificationsList() {
   const { data: notification } = useNotifications();
 
-  return <>{JSON.stringify(notification)}</>;
+  return (
+    <div className="flex flex-col gap-12">
+      <h1 className={typographyClasses.h1}>
+        Notifications from {notification?.ngoName}
+      </h1>
+      <div className="flex flex-col gap-12">
+        {notification?.notifications.map((notification) => (
+          <Notification
+            isInsideList
+            id={notification.id}
+            sentAt={notification.sentAt}
+            title={notification.title}
+            body={notification.body}
+          />
+        ))}
+      </div>
+    </div>
+  );
 }
 
 export default NotificationsList;

web-citizen-reporting/web-citizen-reporting-template/src/routes/__root.tsx

@@ -1,24 +1,28 @@
 import {
   Outlet,
   createRootRouteWithContext,
+  useLocation,
   useRouterState,
 } from "@tanstack/react-router";
 
 import Footer from "@/components/Footer";
 import { SiteHeader } from "@/components/SiteHeader";
-import type { QueryClient } from "@tanstack/react-query";
-import NotFound from "@/pages/NotFound";
 import { Spinner } from "@/components/Spinner";
+import NotFound from "@/pages/NotFound";
+import type { QueryClient } from "@tanstack/react-query";
 
 function RouterSpinner() {
   const isLoading = useRouterState({ select: (s) => s.status === "pending" });
   return <Spinner show={isLoading} />;
 }
 
-export const Route = createRootRouteWithContext<{
-  queryClient: QueryClient;
-}>()({
-  component: () => (
+function RootComponent() {
+  const pathname = useLocation({
+    select: (location) => location.pathname,
+  });
+  const isFooterHidden = pathname === "/thank-you";
+
+  return (
     <>
       <SiteHeader />
       <div className="container-wrapper">
@@ -29,10 +33,16 @@ export const Route = createRootRouteWithContext<{
             </div>
             <Outlet />
           </section>
-          <Footer />
+          {!isFooterHidden && <Footer />}
         </div>
       </div>
     </>
-  ),
+  );
+}
+
+export const Route = createRootRouteWithContext<{
+  queryClient: QueryClient;
+}>()({
+  component: () => <RootComponent />,
   notFoundComponent: () => <NotFound />,
 });

web-citizen-reporting/web-citizen-reporting-template/src/routes/typography.tsx

@@ -1,5 +1,19 @@
 import { createFileRoute } from "@tanstack/react-router";
 
+export const typographyClasses = {
+  h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+  p: "leading-7 [&:not(:first-child)]:mt-6",
+  h2: "mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0",
+  a: "font-medium text-primary underline underline-offset-4",
+  blockquote: "mt-6 border-l-2 pl-6 italic",
+  h3: "mt-8 scroll-m-20 text-2xl font-semibold tracking-tight",
+  ul: "my-6 ml-6 list-disc [&>li]:mt-2",
+  table: "w-full",
+  tr: "m-0 border-t p-0 even:bg-muted",
+  th: "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+  td: "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+};
+
 export const Route = createFileRoute("/typography")({
   component: TypographyDemo,
 });