From 2855437b9bca54a42fcd4a1bd9e18c86e675749c Mon Sep 17 00:00:00 2001
From: httpjamesm <github@httpjames.space>
Date: Wed, 28 Jun 2023 23:55:55 -0400
Subject: [PATCH] refactor: use useIonAlert

---
 src/features/user/AgeAlert.tsx   | 30 ----------------
 src/features/user/ScoreAlert.tsx | 31 -----------------
 src/features/user/Scores.tsx     | 59 +++++++++++++++++++-------------
 3 files changed, 35 insertions(+), 85 deletions(-)
 delete mode 100644 src/features/user/AgeAlert.tsx
 delete mode 100644 src/features/user/ScoreAlert.tsx

diff --git a/src/features/user/AgeAlert.tsx b/src/features/user/AgeAlert.tsx
deleted file mode 100644
index 6a934819ed..0000000000
--- a/src/features/user/AgeAlert.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { IonAlert } from "@ionic/react";
-import { Dispatch, SetStateAction } from "react";
-import { formatDistanceToNowStrict } from "date-fns";
-
-interface AccountAgeAlertProps {
-  isOpen: boolean;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
-  accountCreated: string;
-}
-
-export default function AccountAgeAlert(props: AccountAgeAlertProps) {
-  const relativeDate = formatDistanceToNowStrict(
-    new Date(`${props.accountCreated}Z`),
-    {
-      addSuffix: false,
-    },
-  );
-
-  const creationDate = new Date(props.accountCreated);
-
-  return (
-    <IonAlert
-      isOpen={props.isOpen}
-      header={`Account is ${relativeDate} old`}
-      buttons={[{ text: "OK", handler: () => props.setIsOpen(false) }]}
-      onDidDismiss={() => props.setIsOpen(false)}
-      message={`Created on ${creationDate.toDateString()} at ${creationDate.toLocaleTimeString()}`}
-    />
-  );
-}
diff --git a/src/features/user/ScoreAlert.tsx b/src/features/user/ScoreAlert.tsx
deleted file mode 100644
index 57b399cbdd..0000000000
--- a/src/features/user/ScoreAlert.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { IonAlert } from "@ionic/react";
-import { Dispatch, SetStateAction } from "react";
-
-interface ScoreAlertProps {
-  isOpen: boolean;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
-  postScore: number;
-  commentScore: number;
-  focus: "post" | "comment";
-}
-
-export default function ScoreAlert(props: ScoreAlertProps) {
-  return (
-    <IonAlert
-      isOpen={props.isOpen}
-      onDidDismiss={() => props.setIsOpen(false)}
-      header={`${
-        props.focus === "post" ? props.postScore : props.commentScore
-      } ${props.focus} points`}
-      buttons={[{ text: "OK", handler: () => props.setIsOpen(false) }]}
-      style={{
-        "white-space": "pre-line",
-      }}
-      message={`
-        ${props.focus === "post" ? props.commentScore : props.postScore} ${
-        props.focus === "post" ? "Comment" : "Post"
-      } Points\n  
-        ${props.postScore + props.commentScore} Total Points`}
-    />
-  );
-}
diff --git a/src/features/user/Scores.tsx b/src/features/user/Scores.tsx
index 9b53e2aaee..779ffbe625 100644
--- a/src/features/user/Scores.tsx
+++ b/src/features/user/Scores.tsx
@@ -2,9 +2,8 @@ import styled from "@emotion/styled";
 import { PersonAggregates } from "lemmy-js-client";
 import { formatNumber } from "../../helpers/number";
 import Ago from "../labels/Ago";
-import AccountAgeAlert from "./AgeAlert";
-import { useState } from "react";
-import ScoreAlert from "./ScoreAlert";
+import { useIonAlert } from "@ionic/react";
+import { formatDistanceToNowStrict } from "date-fns";
 
 const Container = styled.div`
   display: flex;
@@ -33,19 +32,40 @@ interface ScoreProps {
 }
 
 export default function Scores({ aggregates, accountCreated }: ScoreProps) {
-  const [accountAgeAlertOpen, setAccountAgeAlertOpen] = useState(false);
-  const [scoreAlertOpen, setScoreAlertOpen] = useState(false);
-  const [scoreAlertFocus, setScoreAlertFocus] = useState<"comment" | "post">(
-    "comment",
+  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 showScoreAlert = async (focus: "post" | "comment") => {
+    const subHeader = `${focus === "post" ? commentScore : postScore} ${
+      focus === "post" ? "Comment" : "Post"
+    } Points`;
+    const message = `${postScore + commentScore} Total Points`;
+
+    await present({
+      header: `${focus === "post" ? postScore : commentScore} ${focus} points`,
+      htmlAttributes: { style: "white-space: pre-line;" },
+      subHeader,
+      message,
+      buttons: [{ text: "OK" }],
+    });
+  };
 
   return (
     <>
       <Container>
         <Score
           onClick={() => {
-            setScoreAlertOpen(true);
-            setScoreAlertFocus("comment");
+            showScoreAlert("comment");
           }}
         >
           {formatNumber(aggregates.comment_score)}
@@ -53,8 +73,7 @@ export default function Scores({ aggregates, accountCreated }: ScoreProps) {
         </Score>
         <Score
           onClick={() => {
-            setScoreAlertOpen(true);
-            setScoreAlertFocus("post");
+            showScoreAlert("post");
           }}
         >
           {formatNumber(aggregates.post_score)}
@@ -62,25 +81,17 @@ export default function Scores({ aggregates, accountCreated }: ScoreProps) {
         </Score>
         <Score
           onClick={() => {
-            setAccountAgeAlertOpen(true);
+            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>
-      <AccountAgeAlert
-        isOpen={accountAgeAlertOpen}
-        setIsOpen={setAccountAgeAlertOpen}
-        accountCreated={accountCreated}
-      />
-      <ScoreAlert
-        isOpen={scoreAlertOpen}
-        setIsOpen={setScoreAlertOpen}
-        focus={scoreAlertFocus}
-        postScore={aggregates.post_score}
-        commentScore={aggregates.comment_score}
-      />
     </>
   );
 }