From 0e48cbcb9ed8fa5c2072b915889e5ba1e0ac4bbc Mon Sep 17 00:00:00 2001
From: pylixonly <82711525+amsyarasyiq@users.noreply.github.com>
Date: Tue, 19 Dec 2023 15:21:07 +0800
Subject: [PATCH] [UI > InputAlert] Revert and fix (#211)

* Revert "[UI > InputAlert] Fix for new UI"

This reverts commit 963ddc50c54ddf6a6a19ef1578ff682c91d5aec8.

* real fix

* unrevert some changes
---
 src/ui/components/InputAlert.tsx | 69 ++++++++++++++++++--------------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/ui/components/InputAlert.tsx b/src/ui/components/InputAlert.tsx
index d425c3c..527c24d 100644
--- a/src/ui/components/InputAlert.tsx
+++ b/src/ui/components/InputAlert.tsx
@@ -1,42 +1,49 @@
 import { InputAlertProps } from "@types";
-import { findByName, findByProps } from "@metro/filters";
-
-interface InternalInputAlertProps extends InputAlertProps {
-    onClose?: () => void;
-    onSubmit?: (input: string) => void;
-    isLoading?: boolean;
-}
+import { findByProps } from "@metro/filters";
+import { Forms, Alert } from "@ui/components";
 
+const { FormInput } = Forms;
 const Alerts = findByProps("openLazy", "close");
-const UserSettingsInputAlert = findByName("UserSettingsInputAlert") as React.ComponentClass<InternalInputAlertProps>;
 
-// TODO: Moving to Discord's UserSettingsInputAlert here has some issues:
-//* - Errors are not cleared upon typing
-//* - The confirmText does not apply
-//* - The confirm button is not disabled when there is an error
+export default function InputAlert({ title, confirmText, confirmColor, onConfirm, cancelText, placeholder, initialValue = "", secureTextEntry }: InputAlertProps) {
+    const [value, setValue] = React.useState(initialValue);
+    const [error, setError] = React.useState("");
 
-export default class InputAlert extends UserSettingsInputAlert {
-    constructor(props: InternalInputAlertProps) {
-        super(props);
-        props.secureTextEntry = false;
-        props.onClose = Alerts.close;
-        props.onSubmit = (i: string) => this.onConfirmWrapper(i);
-        this.state = { input: props.initialValue };
-    }
-
-    onConfirmWrapper(input: string) {
-        // @ts-expect-error
-        this.props.isLoading = true;
-
-        const asyncOnConfirm = Promise.resolve(this.props.onConfirm(input));
+    function onConfirmWrapper() {
+        const asyncOnConfirm = Promise.resolve(onConfirm(value))
 
         asyncOnConfirm.then(() => {
             Alerts.close();
         }).catch((e: Error) => {
-            this.setState({ error: e.message });
+            setError(e.message);
         });
-
-        // @ts-expect-error
-        this.props.isLoading = false;
     };
-}
+
+    return (
+        <Alert
+            title={title}
+            confirmText={confirmText}
+            confirmColor={confirmColor}
+            isConfirmButtonDisabled={error.length !== 0}
+            onConfirm={onConfirmWrapper}
+            cancelText={cancelText}
+            onCancel={() => Alerts.close()}
+        >
+            <FormInput
+                placeholder={placeholder}
+                value={value}
+                onChange={(v: string | { text: string }) => {
+                    setValue(typeof v === "string" ? v : v.text);
+                    if (error) setError("");
+                }}
+                returnKeyType="done"
+                onSubmitEditing={onConfirmWrapper}
+                error={error || undefined}
+                secureTextEntry={secureTextEntry}
+                autoFocus={true}
+                showBorder={true}
+                style={{ paddingVertical: 5, alignSelf: "stretch", paddingHorizontal: 0 }}
+            />
+        </Alert>
+    );
+};
\ No newline at end of file