From 0476f514b39b83e0b6cb02f418671713525bcf7d Mon Sep 17 00:00:00 2001
From: Rafael Ciobotariu <rafael.ciobotariu@yahoo.com>
Date: Sun, 30 Mar 2025 15:23:40 +0300
Subject: [PATCH 1/3] added guide details component for text guideType

---
 .../src/pages/GuideDetails.tsx                | 39 ++++++++++++++++++-
 .../src/pages/NotificationDetails.tsx         |  4 +-
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/pages/GuideDetails.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/pages/GuideDetails.tsx
index c6592b9a8..fd75a603e 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/pages/GuideDetails.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/pages/GuideDetails.tsx
@@ -1,14 +1,49 @@
+import { Spinner } from "@/components/Spinner";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useGuides } from "@/queries/use-guides";
 import { Route } from "@/routes/guides/$guideId";
+import { notFound } from "@tanstack/react-router";
 
 function GuideDetails() {
   const { guideId } = Route.useParams();
 
-  const { data: guide } = useGuides((guides) =>
+  const { data: guide, isLoading } = useGuides((guides) =>
     guides.find((g) => g.id === guideId)
   );
 
-  return <>{JSON.stringify(guide)}</>;
+  {
+    console.log(guide);
+  }
+  // return <>{JSON.stringify(guide)}</>;
+
+  /* 
+    {guide.guideType === GuideType.Text && (
+              <BookOpen className="h-5 w-5" />
+            )}
+            {guide.guideType === GuideType.Website && (
+              <Globe className="h-5 w-5" />
+            )}
+            {guide.guideType === GuideType.Document && (
+              <FileDown className="h-5 w-5" />
+            )}
+  */
+  if (isLoading) return <Spinner show={isLoading} />;
+
+  if (!guide) throw notFound();
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>{guide.title}</CardTitle>
+        </CardHeader>
+        {guide.guideType === "Text" && (
+          <CardContent>
+            <div dangerouslySetInnerHTML={{ __html: guide.text }} />
+          </CardContent>
+        )}
+      </Card>
+    </>
+  );
 }
 
 export default GuideDetails;
diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx
index 35b426e4e..e237d11fa 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx
@@ -1,13 +1,15 @@
 import Notification from "@/components/notifications";
+import { Spinner } from "@/components/Spinner";
 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) =>
+  const { data: notification, isLoading } = useNotifications((notification) =>
     notification.notifications.find((n) => n.id == notificationId)
   );
+  if (isLoading) return <Spinner show={isLoading} />;
 
   if (!notification) throw notFound();
 

From 356c136d0221f8bdae1cf8847fc22b618b94f01a Mon Sep 17 00:00:00 2001
From: Rafael Ciobotariu <rafael.ciobotariu@yahoo.com>
Date: Mon, 31 Mar 2025 13:22:27 +0300
Subject: [PATCH 2/3] finished guide details page

---
 .../src/pages/GuideDetails.tsx                | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/pages/GuideDetails.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/pages/GuideDetails.tsx
index fd75a603e..0df18afc2 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/pages/GuideDetails.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/pages/GuideDetails.tsx
@@ -1,8 +1,11 @@
 import { Spinner } from "@/components/Spinner";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { downloadFile } from "@/lib/utils";
 import { useGuides } from "@/queries/use-guides";
 import { Route } from "@/routes/guides/$guideId";
 import { notFound } from "@tanstack/react-router";
+import { Download, ExternalLink } from "lucide-react";
 
 function GuideDetails() {
   const { guideId } = Route.useParams();
@@ -11,22 +14,6 @@ function GuideDetails() {
     guides.find((g) => g.id === guideId)
   );
 
-  {
-    console.log(guide);
-  }
-  // return <>{JSON.stringify(guide)}</>;
-
-  /* 
-    {guide.guideType === GuideType.Text && (
-              <BookOpen className="h-5 w-5" />
-            )}
-            {guide.guideType === GuideType.Website && (
-              <Globe className="h-5 w-5" />
-            )}
-            {guide.guideType === GuideType.Document && (
-              <FileDown className="h-5 w-5" />
-            )}
-  */
   if (isLoading) return <Spinner show={isLoading} />;
 
   if (!guide) throw notFound();
@@ -37,10 +24,26 @@ function GuideDetails() {
           <CardTitle>{guide.title}</CardTitle>
         </CardHeader>
         {guide.guideType === "Text" && (
-          <CardContent>
+          <CardContent className="h-full w-full">
             <div dangerouslySetInnerHTML={{ __html: guide.text }} />
           </CardContent>
         )}
+        {guide.guideType === "Website" && (
+          <Button variant="link" className="cursor-pointer">
+            <a href={guide.websiteUrl}>Visit Website</a>
+            <ExternalLink className="h-4 w-4" />
+          </Button>
+        )}
+        {guide.guideType === "Document" && (
+          <Button
+            variant="link"
+            className="cursor-pointer"
+            onClick={() => downloadFile(guide.presignedUrl)}
+          >
+            Download
+            <Download className="h-4 w-4" />
+          </Button>
+        )}
       </Card>
     </>
   );

From b351e71d4d9cff137a563de4c98901dea7748fce Mon Sep 17 00:00:00 2001
From: Ion Dormenco <idormenco@gmail.com>
Date: Mon, 31 Mar 2025 13:40:32 +0300
Subject: [PATCH 3/3] Update NotificationDetails.tsx

---
 .../src/pages/NotificationDetails.tsx                           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx b/web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx
index 15717d691..e237d11fa 100644
--- a/web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx
+++ b/web-citizen-reporting/web-citizen-reporting-template/src/pages/NotificationDetails.tsx
@@ -1,4 +1,4 @@
-mport Notification from "@/components/notifications";
+import Notification from "@/components/notifications";
 import { Spinner } from "@/components/Spinner";
 import { useNotifications } from "@/queries/use-notifications";
 import { Route } from "@/routes/notifications/$notificationId";