The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
add modal generic success type
+10
-10
+10
-10
components/Modal.tsx
+10
-10
components/Modal.tsx
···
1
1
"use client";
2
+
2
3
import { Progress } from "@nextui-org/react";
3
4
import { AnimatePresence, motion, MotionConfig } from "framer-motion";
4
-
import { FunctionComponent, useState } from "react";
5
+
import { useState } from "react";
5
6
import { HiX } from "react-icons/hi";
6
7
import TailSpin from "react-loading-icons/dist/esm/components/tail-spin";
7
8
···
10
11
11
12
import ErrorBanner from "./Error";
12
13
13
-
interface Props {
14
+
interface Props<T> {
14
15
className?: string;
15
16
variant?: "default" | "danger";
16
17
···
19
20
subChildren?: React.ReactNode;
20
21
21
22
onSubmit?: () => Promise<Response> | undefined;
22
-
onSuccess?: () => void;
23
+
onSuccess?: (data: T) => void;
23
24
onClose: () => void;
24
25
25
26
show: boolean;
26
27
buttonName?: string
27
28
}
28
-
const Modal: FunctionComponent<Props> = ({ className, variant, title, children, subChildren, onSubmit, onClose, onSuccess, show, buttonName = "Submit" }) => {
29
+
30
+
export default function Modal<T>({ className, variant, title, children, subChildren, onSubmit, onClose, onSuccess, show, buttonName = "Submit" }: Props<T>) {
29
31
30
32
const [state, setState] = useState<"LOADING" | undefined>(undefined);
31
33
const [error, setError] = useState<string | undefined>(undefined);
···
129
131
130
132
setState("LOADING");
131
133
onSubmit?.()
132
-
?.then(async (res) => {
134
+
?.then(async (res: Response) => {
133
135
setState(undefined);
134
136
if (res.ok) {
135
137
onClose();
136
-
onSuccess?.();
138
+
onSuccess?.(await res.json());
137
139
}
138
140
else setError((await res.json() as RouteErrorResponse).message || "Unknown server error");
139
141
})
140
-
.catch((e) => setError(e || "Unknown server error"));
142
+
.catch((e: Error) => setError(e.message || "Unknown server error"));
141
143
}}
142
144
className={cn("flex bg-violet-600 hover:bg-violet-700 text-neutral-200 font-medium py-2 px-5 duration-200 rounded-md", !onSubmit && "ml-auto", state === "LOADING" && "opacity-50 cursor-wait", variant === "danger" && "bg-red-500/80 hover:bg-red-600")}
143
145
disabled={state === "LOADING"}
···
156
158
</MotionConfig>
157
159
);
158
160
159
-
};
160
-
161
-
export default Modal;
161
+
}