argh

1 files changed, 106 insertions, 0 deletions

diff --git a/front/src/components/post/StatsModal.tsx b/front/src/components/post/StatsModal.tsx
new file mode 100644
index 0000000..4720b2a
--- /dev/null
+++ b/front/src/components/post/StatsModal.tsx
@@ -0,0 +1,106 @@
+import type { Poast } from "@/types/trill";
+import Modal from "../modals/Modal";
+import { useState } from "react";
+import Post from "./Post";
+import RP from "./RP";
+import Avatar from "../Avatar";
+import { stringToReact } from "./Reactions";
+
+function StatsModal({ poast, close }: { close: any; poast: Poast }) {
+  const [tab, setTab] = useState("replies");
+  const replies = poast.children || [];
+  const quotes = poast.engagement.quoted;
+  const reposts = poast.engagement.shared;
+  const reacts = poast.engagement.reacts;
+  function set(e: React.MouseEvent, s: string) {
+    e.stopPropagation();
+    setTab(s);
+  }
+  // TODO revise the global thingy here
+  return (
+    <Modal close={close}>
+      <div id="stats-modal">
+        <Post poast={poast} refetch={() => {}} />
+        <div id="tabs">
+          <div
+            role="link"
+            className={"tab" + (tab === "replies" ? " active-tab" : "")}
+            onClick={(e) => set(e, "replies")}
+          >
+            <h4>Replies</h4>
+          </div>
+          <div
+            role="link"
+            className={"tab" + (tab === "quotes" ? " active-tab" : "")}
+            onClick={(e) => set(e, "quotes")}
+          >
+            <h4>Quotes</h4>
+          </div>
+          <div
+            role="link"
+            className={"tab" + (tab === "reposts" ? " active-tab" : "")}
+            onClick={(e) => set(e, "reposts")}
+          >
+            <h4>Reposts</h4>
+          </div>
+          <div
+            role="link"
+            className={"tab" + (tab === "reacts" ? " active-tab" : "")}
+            onClick={(e) => set(e, "reacts")}
+          >
+            <h4>Reacts</h4>
+          </div>
+        </div>
+        <div id="engagement">
+          {tab === "replies" ? (
+            <div id="replies">
+              {replies.map((p) => (
+                <div key={p} className="reply-stat">
+                  <RP
+                    host={poast.host}
+                    id={p}
+                    rter={undefined}
+                    rtat={undefined}
+                    rtid={undefined}
+                  />
+                </div>
+              ))}
+            </div>
+          ) : tab === "quotes" ? (
+            <div id="quotes">
+              {quotes.map((p) => (
+                <div key={p.pid.id} className="quote-stat">
+                  <RP
+                    host={p.pid.ship}
+                    id={p.pid.id}
+                    rter={undefined}
+                    rtat={undefined}
+                    rtid={undefined}
+                  />
+                </div>
+              ))}
+            </div>
+          ) : tab === "reposts" ? (
+            <div id="reposts">
+              {reposts.map((p) => (
+                <div key={p.pid.id} className="repost-stat">
+                  <Avatar p={p.pid.ship} size={40} />
+                </div>
+              ))}
+            </div>
+          ) : tab === "reacts" ? (
+            <div id="reacts">
+              {Object.keys(reacts).map((p) => (
+                <div key={p} className="react-stat btw">
+                  <Avatar p={p} size={32} />
+                  {stringToReact(reacts[p])}
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </Modal>
+  );
+}
+export default StatsModal;