Add user score and age alerts (#55)

Co-authored-by: Alexander Harding <2166114+aeharding@users.noreply.github.com>
aeharding · Jun 29, 2023 · 7cfbf22 · 7cfbf22
1 parent eff46fe
commit 7cfbf22
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 14 deletions.
diff --git a/src/features/user/Scores.tsx b/src/features/user/Scores.tsx
@@ -2,6 +2,8 @@ import styled from "@emotion/styled";
 import { PersonAggregates } from "lemmy-js-client";
 import { formatNumber } from "../../helpers/number";
 import Ago from "../labels/Ago";
+import { useIonAlert } from "@ionic/react";
+import { formatDistanceToNowStrict } from "date-fns";
 
 const Container = styled.div`
   display: flex;
@@ -14,6 +16,7 @@ const Score = styled.div`
   text-align: center;
   font-size: 1.3rem;
   font-weight: 600;
+  cursor: pointer;
 
   aside {
     margin-top: 0.35rem;
@@ -29,20 +32,73 @@ interface ScoreProps {
 }
 
 export default function Scores({ aggregates, accountCreated }: ScoreProps) {
+  const [present] = useIonAlert();
+
+  const relativeDate = formatDistanceToNowStrict(
+    new Date(`${accountCreated}Z`),
+    {
+      addSuffix: false,
+    }
+  );
+  const creationDate = new Date(accountCreated);
+
+  const postScore = aggregates.post_score;
+  const commentScore = aggregates.comment_score;
+  const totalScore = postScore + commentScore;
+
+  const showScoreAlert = async (focus: "post" | "comment") => {
+    const postPointsLine = `${postScore.toLocaleString()} Post Points`;
+    const commentPointsLine = `${commentScore.toLocaleString()} Comment Points`;
+
+    const totalScoreLine = `${totalScore.toLocaleString()} Total Points`;
+
+    const header = focus === "post" ? postPointsLine : commentPointsLine;
+
+    const message = [
+      focus === "post" ? commentPointsLine : postPointsLine,
+      totalScoreLine,
+    ];
+
+    await present({
+      header,
+      cssClass: "preserve-newlines",
+      message: message.join("\n"),
+      buttons: [{ text: "OK" }],
+    });
+  };
+
   return (
-    <Container>
-      <Score>
-        {formatNumber(aggregates.comment_score)}
-        <aside>Comment score</aside>
-      </Score>
-      <Score>
-        {formatNumber(aggregates.post_score)}
-        <aside>Post score</aside>
-      </Score>
-      <Score>
-        <Ago date={accountCreated} />
-        <aside>Account age</aside>
-      </Score>
-    </Container>
+    <>
+      <Container>
+        <Score
+          onClick={() => {
+            showScoreAlert("comment");
+          }}
+        >
+          {formatNumber(aggregates.comment_score)}
+          <aside>Comment score</aside>
+        </Score>
+        <Score
+          onClick={() => {
+            showScoreAlert("post");
+          }}
+        >
+          {formatNumber(aggregates.post_score)}
+          <aside>Post score</aside>
+        </Score>
+        <Score
+          onClick={() => {
+            present({
+              header: `Account is ${relativeDate} old`,
+              message: `Created on ${creationDate.toDateString()} at ${creationDate.toLocaleTimeString()}`,
+              buttons: [{ text: "OK" }],
+            });
+          }}
+        >
+          <Ago date={accountCreated} />
+          <aside>Account age</aside>
+        </Score>
+      </Container>
+    </>
   );
 }
diff --git a/src/index.css b/src/index.css
@@ -48,3 +48,7 @@ ion-modal.small {
 ion-modal.small ion-header ion-toolbar:first-of-type {
   padding-top: 0px;
 }
+
+ion-alert.preserve-newlines {
+  white-space: pre-line;
+}