feat: add minimal page to view comments

Author: sarod

browser-extension/entrypoints/report-page/ReportPage.tsx

@@ -1,3 +1,4 @@
+import { Link } from "react-router";
 import { Post } from "../shared/model/post";
 import { getPosts as getPostsFromStorage } from "../shared/storage/posts-storage";
 import "./ReportPage.css";
@@ -15,7 +16,7 @@ function downloadPost(post: Post) {
   }
 }
 
-function ReportPageApp() {
+function ReportPage() {
   const [posts, setPosts] = useState<Post[] | undefined>(undefined);
   useEffect(() => {
     getPostsFromStorage().then((posts) => {
@@ -42,6 +43,7 @@ function ReportPageApp() {
 
               <th>Nb commentaires</th>
               <th>Id</th>
+              <th>View details</th>
               <th>Télécharger</th>
             </tr>
           </thead>
@@ -59,6 +61,9 @@ function ReportPageApp() {
                 <td>
                   <a href={post.url}>{post.postId}</a>
                 </td>
+                <td>
+                  <Link to={"/posts/" + post.postId}>View</Link>
+                </td>
                 <td>
                   <button onClick={() => downloadPost(post)}>
                     Télécharger
@@ -80,4 +85,4 @@ function ellipsis(str: string, maxLength: number = 50): string {
   return str.substring(0, maxLength - 1) + "…";
 }
 
-export default ReportPageApp;
+export default ReportPage;

browser-extension/entrypoints/report-page/main.tsx

@@ -1,10 +1,17 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import ReportPageApp from "./ReportPage.tsx";
+import ReportPage from "./ReportPage.tsx";
 import "../shared/main-style.css";
+import { HashRouter, Route, Routes } from "react-router";
+import PostDetailPage from "./posts/PostScrapDetails.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <ReportPageApp />
-  </React.StrictMode>,
+    <HashRouter>
+      <Routes>
+        <Route index path="/" element={<ReportPage />} />
+        <Route path="/posts/:postId" element={<PostDetailPage />} />
+      </Routes>
+    </HashRouter>
+  </React.StrictMode>
 );

browser-extension/entrypoints/report-page/posts/PostScrapDetails.tsx

@@ -0,0 +1,85 @@
+import { getPost } from "@/entrypoints/shared/storage/posts-storage";
+import { Post } from "@/entrypoints/shared/model/post";
+import { useParams } from "react-router";
+
+function PostDetailPage() {
+  const { postId } = useParams();
+  const [post, setPost] = useState<Post | undefined>(undefined);
+  useEffect(() => {
+    getPost(postId || "").then((post) => {
+      setPost(post);
+    });
+  }, [postId]);
+
+  return (
+    <>
+      <h1>BTH app - Report Page</h1>
+
+      <h2>Posts</h2>
+      {!post && <div>Loading...</div>}
+      {post && (
+        <>
+          <div>
+            <div>
+              <a href={post.author.accountHref}>{post.author.name}</a>
+            </div>
+            <div>{post.postId}</div>
+            <div>{post.publishedAt}</div>
+            <div>{post.scrapedAt}</div>
+            <div>{post.socialNetwork}</div>
+            <div>{post.textContent}</div>
+            <div>{post.title}</div>
+            <div>
+              <a href={post.url}>{post.url}</a>
+            </div>
+          </div>
+          <h2>Commentaires</h2>
+          <table>
+            <thead>
+              <tr>
+                <th>Date scraping</th>
+                <th>Auteur</th>
+                <th>Date publication</th>
+                <th>Aperçu contenu/description</th>
+
+                <th>Nb likes</th>
+                <th>Nb replies</th>
+                <th>Id</th>
+                <th>Screenshot</th>
+              </tr>
+            </thead>
+            <tbody>
+              {post.comments.map((comment, index) => (
+                <tr key={index}>
+                  <td> {comment.scrapedAt}</td>
+
+                  <td> {comment.author.name}</td>
+                  <td> {comment.publishedAt}</td>
+                  <td> {ellipsis(comment.textContent || "")}</td>
+
+                  <td> {comment.nbLikes}</td>
+                  <td> {comment.replies.length}</td>
+
+                  <td>
+                    <img
+                      src={"data:image/png;base64," + comment.screenshotData}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </>
+      )}
+    </>
+  );
+}
+
+function ellipsis(str: string, maxLength: number = 50): string {
+  if (str.length <= maxLength) {
+    return str;
+  }
+  return str.substring(0, maxLength - 1) + "…";
+}
+
+export default PostDetailPage;

browser-extension/entrypoints/shared/storage/posts-storage.ts

@@ -10,3 +10,10 @@ export async function getPosts(): Promise<Post[]> {
   const partial = await browser.storage.local.get("posts");
   return (partial["posts"] as Post[]) || [];
 }
+
+export async function getPost(postId: string): Promise<Post | undefined> {
+  const posts = await getPosts();
+  const post = posts.find((p) => p.postId === postId);
+  console.log("getPost", postId, post);
+  return post;
+}

browser-extension/package.json

@@ -21,7 +21,8 @@
   "dependencies": {
     "puppeteer-core": "^24.34.0",
     "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+    "react-dom": "^19.2.3",
+    "react-router": "^7.12.0"
   },
   "devDependencies": {
     "@eslint/css": "^0.14.1",