From 241b9cd27ba5124ab5248fa4883c5fd4b4e794c0 Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Sat, 18 Jun 2022 12:33:22 +0100
Subject: [PATCH] feat(modal): port Clipboard

---
 src/context/intermediate/Intermediate.tsx     |  9 ++-----
 src/context/intermediate/Modals.tsx           |  3 ---
 .../components}/Clipboard.tsx                 | 17 +++++++------
 src/context/modals/components/Error.tsx       |  2 +-
 src/context/modals/components/ShowToken.tsx   | 10 ++++++--
 .../modals/components/SignOutSessions.tsx     |  4 ++-
 src/context/modals/components/SignedOut.tsx   |  2 +-
 src/context/modals/index.tsx                  | 25 ++++++++++++++++---
 src/context/modals/types.ts                   |  4 +++
 9 files changed, 49 insertions(+), 27 deletions(-)
 rename src/context/{intermediate/modals => modals/components}/Clipboard.tsx (65%)

diff --git a/src/context/intermediate/Intermediate.tsx b/src/context/intermediate/Intermediate.tsx
index 9a1ac4d1..b58c37de 100644
--- a/src/context/intermediate/Intermediate.tsx
+++ b/src/context/intermediate/Intermediate.tsx
@@ -12,6 +12,7 @@ import { determineLink } from "../../lib/links";
 
 import { useApplicationState } from "../../mobx/State";
 
+import { modalController } from "../modals";
 import Modals from "./Modals";
 
 export type Screen =
@@ -171,13 +172,7 @@ export default function Intermediate(props: Props) {
                 return true;
             },
             openScreen: (screen: Screen) => openScreen(screen),
-            writeClipboard: (text: string) => {
-                if (navigator.clipboard) {
-                    navigator.clipboard.writeText(text);
-                } else {
-                    actions.openScreen({ id: "clipboard", text });
-                }
-            },
+            writeClipboard: (a: string) => modalController.writeText(a),
         };
         // eslint-disable-next-line
     }, []);
diff --git a/src/context/intermediate/Modals.tsx b/src/context/intermediate/Modals.tsx
index 8ff715c3..a2a91507 100644
--- a/src/context/intermediate/Modals.tsx
+++ b/src/context/intermediate/Modals.tsx
@@ -1,6 +1,5 @@
 //import { isModalClosing } from "../../components/ui/Modal";
 import { Screen } from "./Intermediate";
-import { ClipboardModal } from "./modals/Clipboard";
 import { ExternalLinkModal } from "./modals/ExternalLinkPrompt";
 import { InputModal } from "./modals/Input";
 import { OnboardingModal } from "./modals/Onboarding";
@@ -22,8 +21,6 @@ export default function Modals({ screen, openScreen }: Props) {
             return <PromptModal onClose={onClose} {...screen} />;
         case "_input":
             return <InputModal onClose={onClose} {...screen} />;
-        case "clipboard":
-            return <ClipboardModal onClose={onClose} {...screen} />;
         case "onboarding":
             return <OnboardingModal onClose={onClose} {...screen} />;
         case "external_link_prompt":
diff --git a/src/context/intermediate/modals/Clipboard.tsx b/src/context/modals/components/Clipboard.tsx
similarity index 65%
rename from src/context/intermediate/modals/Clipboard.tsx
rename to src/context/modals/components/Clipboard.tsx
index 710e2a84..0361eb8e 100644
--- a/src/context/intermediate/modals/Clipboard.tsx
+++ b/src/context/modals/components/Clipboard.tsx
@@ -2,19 +2,18 @@ import { Text } from "preact-i18n";
 
 import { Modal } from "@revoltchat/ui";
 
-interface Props {
-    onClose: () => void;
-    text: string;
-}
+import { noopTrue } from "../../../lib/js";
 
-export function ClipboardModal({ onClose, text }: Props) {
+import { ModalProps } from "../types";
+
+export default function Clipboard({ text, ...props }: ModalProps<"clipboard">) {
     return (
         <Modal
-            onClose={onClose}
+            {...props}
             title={<Text id="app.special.modals.clipboard.unavailable" />}
             actions={[
                 {
-                    onClick: onClose,
+                    onClick: noopTrue,
                     confirmation: true,
                     children: <Text id="app.special.modals.actions.close" />,
                 },
@@ -25,7 +24,9 @@ export function ClipboardModal({ onClose, text }: Props) {
                 </p>
             )}
             <Text id="app.special.modals.clipboard.copy" />{" "}
-            <code style={{ userSelect: "all" }}>{text}</code>
+            <code style={{ userSelect: "all", wordBreak: "break-all" }}>
+                {text}
+            </code>
         </Modal>
     );
 }
diff --git a/src/context/modals/components/Error.tsx b/src/context/modals/components/Error.tsx
index 92e3f7c8..892f5794 100644
--- a/src/context/modals/components/Error.tsx
+++ b/src/context/modals/components/Error.tsx
@@ -6,7 +6,7 @@ import { noopTrue } from "../../../lib/js";
 
 import { ModalProps } from "../types";
 
-export function Error({ error, ...props }: ModalProps<"error">) {
+export default function Error({ error, ...props }: ModalProps<"error">) {
     return (
         <Modal
             {...props}
diff --git a/src/context/modals/components/ShowToken.tsx b/src/context/modals/components/ShowToken.tsx
index 92c7fac3..c28ca841 100644
--- a/src/context/modals/components/ShowToken.tsx
+++ b/src/context/modals/components/ShowToken.tsx
@@ -6,7 +6,11 @@ import { noopTrue } from "../../../lib/js";
 
 import { ModalProps } from "../types";
 
-export function ShowToken({ name, token, ...props }: ModalProps<"show_token">) {
+export default function ShowToken({
+    name,
+    token,
+    ...props
+}: ModalProps<"show_token">) {
     return (
         <Modal
             {...props}
@@ -23,7 +27,9 @@ export function ShowToken({ name, token, ...props }: ModalProps<"show_token">) {
                     children: <Text id="app.special.modals.actions.close" />,
                 },
             ]}>
-            <code style={{ userSelect: "all" }}>{token}</code>
+            <code style={{ userSelect: "all", wordBreak: "break-all" }}>
+                {token}
+            </code>
         </Modal>
     );
 }
diff --git a/src/context/modals/components/SignOutSessions.tsx b/src/context/modals/components/SignOutSessions.tsx
index 46afff05..35b07882 100644
--- a/src/context/modals/components/SignOutSessions.tsx
+++ b/src/context/modals/components/SignOutSessions.tsx
@@ -10,7 +10,9 @@ import { ModalProps } from "../types";
 /**
  * Confirm whether a user wants to sign out of all other sessions
  */
-export function SignOutSessions(props: ModalProps<"sign_out_sessions">) {
+export default function SignOutSessions(
+    props: ModalProps<"sign_out_sessions">,
+) {
     const onClick = useCallback(() => {
         props.onDeleting();
         props.client.api.delete("/auth/session/all").then(props.onDelete);
diff --git a/src/context/modals/components/SignedOut.tsx b/src/context/modals/components/SignedOut.tsx
index 21c702e5..0f3fa66d 100644
--- a/src/context/modals/components/SignedOut.tsx
+++ b/src/context/modals/components/SignedOut.tsx
@@ -9,7 +9,7 @@ import { ModalProps } from "../types";
 /**
  * Indicate that the user has been signed out of their account
  */
-export function SignedOut(props: ModalProps<"signed_out">) {
+export default function SignedOut(props: ModalProps<"signed_out">) {
     return (
         <Modal
             {...props}
diff --git a/src/context/modals/index.tsx b/src/context/modals/index.tsx
index cd969190..1b0670fd 100644
--- a/src/context/modals/index.tsx
+++ b/src/context/modals/index.tsx
@@ -9,14 +9,15 @@ import type { Client, API } from "revolt.js";
 import { ulid } from "ulid";
 
 import Changelog from "./components/Changelog";
-import { Error } from "./components/Error";
+import Clipboard from "./components/Clipboard";
+import Error from "./components/Error";
 import MFAEnableTOTP from "./components/MFAEnableTOTP";
 import MFAFlow from "./components/MFAFlow";
 import MFARecovery from "./components/MFARecovery";
 import OutOfDate from "./components/OutOfDate";
-import { ShowToken } from "./components/ShowToken";
-import { SignOutSessions } from "./components/SignOutSessions";
-import { SignedOut } from "./components/SignedOut";
+import ShowToken from "./components/ShowToken";
+import SignOutSessions from "./components/SignOutSessions";
+import SignedOut from "./components/SignedOut";
 import { Modal } from "./types";
 
 type Components = Record<string, React.FC<any>>;
@@ -140,10 +141,26 @@ class ModalControllerExtended extends ModalController<Modal> {
                 ),
         );
     }
+
+    /**
+     * Write text to the clipboard
+     * @param text Text to write
+     */
+    writeText(text: string) {
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(text);
+        } else {
+            this.push({
+                type: "clipboard",
+                text,
+            });
+        }
+    }
 }
 
 export const modalController = new ModalControllerExtended({
     changelog: Changelog,
+    clipboard: Clipboard,
     error: Error,
     mfa_flow: MFAFlow,
     mfa_recovery: MFARecovery,
diff --git a/src/context/modals/types.ts b/src/context/modals/types.ts
index 6349c132..1b5a36e7 100644
--- a/src/context/modals/types.ts
+++ b/src/context/modals/types.ts
@@ -47,6 +47,10 @@ export type Modal = {
           type: "error";
           error: string;
       }
+    | {
+          type: "clipboard";
+          text: string;
+      }
     | {
           type: "signed_out";
       }