From 98e0edd3312ad7cb94336a7d3465034b61cfd380 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Tue, 6 Jul 2021 11:34:36 +0100
Subject: [PATCH] Re-write types for modal actions.

---
 src/components/ui/Button.tsx                  |  2 ++
 src/components/ui/Modal.tsx                   | 22 +++++-----------
 src/context/intermediate/modals/Clipboard.tsx |  2 +-
 src/context/intermediate/modals/Error.tsx     |  4 +--
 src/context/intermediate/modals/Input.tsx     |  6 ++---
 src/context/intermediate/modals/Prompt.tsx    | 25 ++++++++++---------
 src/context/intermediate/modals/SignedOut.tsx |  2 +-
 .../intermediate/popovers/ModifyAccount.tsx   |  4 +--
 .../intermediate/popovers/UserPicker.tsx      |  2 +-
 9 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index ecd4e799..2b72e4ef 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -6,6 +6,8 @@ interface Props {
     readonly error?: boolean;
 }
 
+export type ButtonProps = Props & Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'as'>;
+
 export default styled.button<Props>`
     z-index: 1;
     display: flex;
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 15f47e82..df77a07a 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -1,10 +1,9 @@
 import styled, { css, keyframes } from "styled-components";
 
-import classNames from "classnames";
 import { createPortal, useEffect } from "preact/compat";
 
 import { Children } from "../../types/Preact";
-import Button from "./Button";
+import Button, { ButtonProps } from "./Button";
 
 const open = keyframes`
     0% {opacity: 0;}
@@ -100,12 +99,9 @@ const ModalActions = styled.div`
     background: var(--secondary-background);
 `;
 
-export interface Action {
-    text: Children;
-    onClick: () => void;
+export type Action = Omit<ButtonProps, 'onClick'> & {
     confirmation?: boolean;
-    contrast?: boolean;
-    error?: boolean;
+    onClick: () => void;
 }
 
 interface Props {
@@ -181,15 +177,9 @@ export default function Modal(props: Props) {
                 {content}
                 {props.actions && (
                     <ModalActions>
-                        {props.actions.map((x) => (
-                            <Button
-                                contrast={x.contrast ?? true}
-                                error={x.error ?? false}
-                                onClick={x.onClick}
-                                disabled={props.disabled}>
-                                {x.text}
-                            </Button>
-                        ))}
+                        {props.actions.map((x) =>
+                            <Button {...x} disabled={props.disabled} />
+                        )}
                     </ModalActions>
                 )}
             </ModalContainer>
diff --git a/src/context/intermediate/modals/Clipboard.tsx b/src/context/intermediate/modals/Clipboard.tsx
index d84c43d3..03a7e0be 100644
--- a/src/context/intermediate/modals/Clipboard.tsx
+++ b/src/context/intermediate/modals/Clipboard.tsx
@@ -17,7 +17,7 @@ export function ClipboardModal({ onClose, text }: Props) {
                 {
                     onClick: onClose,
                     confirmation: true,
-                    text: <Text id="app.special.modals.actions.close" />,
+                    children: <Text id="app.special.modals.actions.close" />,
                 },
             ]}>
             {location.protocol !== "https:" && (
diff --git a/src/context/intermediate/modals/Error.tsx b/src/context/intermediate/modals/Error.tsx
index 64cadebc..bef27eb7 100644
--- a/src/context/intermediate/modals/Error.tsx
+++ b/src/context/intermediate/modals/Error.tsx
@@ -17,11 +17,11 @@ export function ErrorModal({ onClose, error }: Props) {
                 {
                     onClick: onClose,
                     confirmation: true,
-                    text: <Text id="app.special.modals.actions.ok" />,
+                    children: <Text id="app.special.modals.actions.ok" />,
                 },
                 {
                     onClick: () => location.reload(),
-                    text: <Text id="app.special.modals.actions.reload" />,
+                    children: <Text id="app.special.modals.actions.reload" />,
                 },
             ]}>
             <Text id={`error.${error}`}>{error}</Text>
diff --git a/src/context/intermediate/modals/Input.tsx b/src/context/intermediate/modals/Input.tsx
index 9f2b37a7..0af0163b 100644
--- a/src/context/intermediate/modals/Input.tsx
+++ b/src/context/intermediate/modals/Input.tsx
@@ -39,7 +39,7 @@ export function InputModal({
             actions={[
                 {
                     confirmation: true,
-                    text: <Text id="app.special.modals.actions.ok" />,
+                    children: <Text id="app.special.modals.actions.ok" />,
                     onClick: () => {
                         setProcessing(true);
                         callback(value)
@@ -51,7 +51,7 @@ export function InputModal({
                     },
                 },
                 {
-                    text: <Text id="app.special.modals.actions.cancel" />,
+                    children: <Text id="app.special.modals.actions.cancel" />,
                     onClick: onClose,
                 },
             ]}
@@ -155,7 +155,7 @@ export function SpecialInputModal(props: SpecialProps) {
                             status: {
                                 ...client.user?.status,
                                 text: text.trim().length > 0 ? text : undefined,
-                            },
+                            }
                         })
                     }
                 />
diff --git a/src/context/intermediate/modals/Prompt.tsx b/src/context/intermediate/modals/Prompt.tsx
index c09e1bb7..de7adfd6 100644
--- a/src/context/intermediate/modals/Prompt.tsx
+++ b/src/context/intermediate/modals/Prompt.tsx
@@ -122,7 +122,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                             confirmation: true,
                             contrast: true,
                             error: true,
-                            text: (
+                            children: (
                                 <Text
                                     id={`app.special.modals.actions.${event[1]}`}
                                 />
@@ -165,7 +165,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                             },
                         },
                         {
-                            text: (
+                            children: (
                                 <Text id="app.special.modals.actions.cancel" />
                             ),
                             onClick: onClose,
@@ -192,7 +192,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                             confirmation: true,
                             contrast: true,
                             error: true,
-                            text: (
+                            children: (
                                 <Text id="app.special.modals.actions.delete" />
                             ),
                             onClick: async () => {
@@ -212,10 +212,11 @@ export function SpecialPromptModal(props: SpecialProps) {
                             },
                         },
                         {
-                            text: (
+                            children: (
                                 <Text id="app.special.modals.actions.cancel" />
                             ),
                             onClick: onClose,
+                            plain: true,
                         },
                     ]}
                     content={
@@ -255,12 +256,12 @@ export function SpecialPromptModal(props: SpecialProps) {
                     question={<Text id={`app.context_menu.create_invite`} />}
                     actions={[
                         {
-                            text: <Text id="app.special.modals.actions.ok" />,
+                            children: <Text id="app.special.modals.actions.ok" />,
                             confirmation: true,
                             onClick: onClose,
                         },
                         {
-                            text: <Text id="app.context_menu.copy_link" />,
+                            children: <Text id="app.context_menu.copy_link" />,
                             onClick: () =>
                                 writeClipboard(
                                     `${window.location.protocol}//${window.location.host}/invite/${code}`,
@@ -291,7 +292,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                     question={<Text id={`app.context_menu.kick_member`} />}
                     actions={[
                         {
-                            text: <Text id="app.special.modals.actions.kick" />,
+                            children: <Text id="app.special.modals.actions.kick" />,
                             contrast: true,
                             error: true,
                             confirmation: true,
@@ -311,7 +312,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                             },
                         },
                         {
-                            text: (
+                            children: (
                                 <Text id="app.special.modals.actions.cancel" />
                             ),
                             onClick: onClose,
@@ -341,7 +342,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                     question={<Text id={`app.context_menu.ban_member`} />}
                     actions={[
                         {
-                            text: <Text id="app.special.modals.actions.ban" />,
+                            children: <Text id="app.special.modals.actions.ban" />,
                             contrast: true,
                             error: true,
                             confirmation: true,
@@ -362,7 +363,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                             },
                         },
                         {
-                            text: (
+                            children: (
                                 <Text id="app.special.modals.actions.cancel" />
                             ),
                             onClick: onClose,
@@ -404,7 +405,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                         {
                             confirmation: true,
                             contrast: true,
-                            text: (
+                            children: (
                                 <Text id="app.special.modals.actions.create" />
                             ),
                             onClick: async () => {
@@ -432,7 +433,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                             },
                         },
                         {
-                            text: (
+                            children: (
                                 <Text id="app.special.modals.actions.cancel" />
                             ),
                             onClick: onClose,
diff --git a/src/context/intermediate/modals/SignedOut.tsx b/src/context/intermediate/modals/SignedOut.tsx
index 7c7f3577..7b4979f6 100644
--- a/src/context/intermediate/modals/SignedOut.tsx
+++ b/src/context/intermediate/modals/SignedOut.tsx
@@ -16,7 +16,7 @@ export function SignedOutModal({ onClose }: Props) {
                 {
                     onClick: onClose,
                     confirmation: true,
-                    text: <Text id="app.special.modals.actions.ok" />,
+                    children: <Text id="app.special.modals.actions.ok" />,
                 },
             ]}
         />
diff --git a/src/context/intermediate/popovers/ModifyAccount.tsx b/src/context/intermediate/popovers/ModifyAccount.tsx
index 2b8aaf2b..f07e23eb 100644
--- a/src/context/intermediate/popovers/ModifyAccount.tsx
+++ b/src/context/intermediate/popovers/ModifyAccount.tsx
@@ -71,7 +71,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
                 {
                     confirmation: true,
                     onClick: handleSubmit(onSubmit),
-                    text:
+                    children:
                         field === "email" ? (
                             <Text id="app.special.modals.actions.send_email" />
                         ) : (
@@ -80,7 +80,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
                 },
                 {
                     onClick: onClose,
-                    text: <Text id="app.special.modals.actions.close" />,
+                    children: <Text id="app.special.modals.actions.close" />,
                 },
             ]}>
             {/* Preact / React typing incompatabilities */}
diff --git a/src/context/intermediate/popovers/UserPicker.tsx b/src/context/intermediate/popovers/UserPicker.tsx
index 0dc0792a..748bdc0f 100644
--- a/src/context/intermediate/popovers/UserPicker.tsx
+++ b/src/context/intermediate/popovers/UserPicker.tsx
@@ -28,7 +28,7 @@ export function UserPicker(props: Props) {
             onClose={props.onClose}
             actions={[
                 {
-                    text: <Text id="app.special.modals.actions.ok" />,
+                    children: <Text id="app.special.modals.actions.ok" />,
                     onClick: () => props.callback(selected).then(props.onClose),
                 },
             ]}>