From 86c76df873d8fad746aff5de0b0db178737468e1 Mon Sep 17 00:00:00 2001 From: trafficlunar Date: Wed, 16 Apr 2025 18:17:29 +0100 Subject: [PATCH] feat: add dialog buttons to profile settings --- src/app/components/profile-settings/index.tsx | 106 ++++++++++++++++++ .../profile-settings/submit-dialog-button.tsx | 86 ++++++++++++++ src/app/profile/settings/page.tsx | 69 +----------- 3 files changed, 194 insertions(+), 67 deletions(-) create mode 100644 src/app/components/profile-settings/index.tsx create mode 100644 src/app/components/profile-settings/submit-dialog-button.tsx diff --git a/src/app/components/profile-settings/index.tsx b/src/app/components/profile-settings/index.tsx new file mode 100644 index 0000000..771fa4e --- /dev/null +++ b/src/app/components/profile-settings/index.tsx @@ -0,0 +1,106 @@ +"use client"; + +import { useState } from "react"; +import SubmitDialogButton from "./submit-dialog-button"; +import DeleteAccount from "./delete-account"; + +interface Props { + name: string | null | undefined; + username: string | null | undefined; +} + +export default function ProfileSettings({ name, username }: Props) { + const [displayName, setDisplayName] = useState(name ?? ""); + const [usernameState, setUsernameState] = useState(username ?? ""); + + return ( +
+
+

Profile Settings

+

Update your account info, username, and preferences.

+
+ + {/* Separator */} +
+
+ Account Info +
+
+ + {/* Change Name */} +
+
+ +

This is a display name shown on your profile — feel free to change it anytime

+
+ +
+ setDisplayName(e.target.value)} /> + {}} + > +
+

New display name:

+

"{name}"

+
+ +
+
+ + {/* Change Username */} +
+
+ +

Your unique tag on the site. Can only be changed once every 90 days

+
+ +
+
+ setUsernameState(e.target.value)} + /> + @ +
+ {}} + > +
+

New username:

+

"@{usernameState}"

+
+ +
+
+ + {/* Separator */} +
+
+ Danger Zone +
+
+ + {/* Delete Account */} +
+
+ +

This will permanently remove your account and all uploaded Miis. This action cannot be undone

+
+ + +
+
+ ); +} diff --git a/src/app/components/profile-settings/submit-dialog-button.tsx b/src/app/components/profile-settings/submit-dialog-button.tsx new file mode 100644 index 0000000..d7c193a --- /dev/null +++ b/src/app/components/profile-settings/submit-dialog-button.tsx @@ -0,0 +1,86 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { createPortal } from "react-dom"; +import { Icon } from "@iconify/react"; + +interface Props { + title: string; + description: string; + onSubmit: () => void; + error?: string; + children?: React.ReactNode; +} + +export default function SubmitDialogButton({ title, description, onSubmit, error, children }: Props) { + const [isOpen, setIsOpen] = useState(false); + const [isVisible, setIsVisible] = useState(false); + + const submit = () => { + onSubmit(); + close(); + window.location.reload(); // I would use router.refresh() here but the API data fetching breaks + }; + + const close = () => { + setIsVisible(false); + setTimeout(() => { + setIsOpen(false); + }, 300); + }; + + useEffect(() => { + if (isOpen) { + // slight delay to trigger animation + setTimeout(() => setIsVisible(true), 10); + } + }, [isOpen]); + + return ( + <> + + + {isOpen && + createPortal( +
+
+ +
+
+

{title}

+ +
+ +

{description}

+ + {children} + {error && Error: {error}} + +
+ + +
+
+
, + document.body + )} + + ); +} diff --git a/src/app/profile/settings/page.tsx b/src/app/profile/settings/page.tsx index b008fdc..3bbf3a0 100644 --- a/src/app/profile/settings/page.tsx +++ b/src/app/profile/settings/page.tsx @@ -7,7 +7,7 @@ import { Icon } from "@iconify/react"; import { auth } from "@/lib/auth"; import { prisma } from "@/lib/prisma"; -import DeleteAccount from "@/app/components/profile-settings/delete-account"; +import ProfileSettings from "@/app/components/profile-settings"; export default async function ProfileSettingsPage() { const session = await auth(); @@ -46,72 +46,7 @@ export default async function ProfileSettingsPage() {
-
-
-

Profile Settings

-

Update your account info, username, and preferences.

-
- - {/* Separator */} -
-
- Account Info -
-
- - {/* Change Name */} -
-
- -

This is the name shown on your profile — feel free to change it anytime

-
- -
- - -
-
- - {/* Change Username */} -
-
- -

Your unique tag on the site. Can only be changed once every 90 days

-
- -
- - -
-
- - {/* Separator */} -
-
- Danger Zone -
-
- - {/* Delete Account */} -
-
- -

This will permanently remove your account and all uploaded Miis. This action cannot be undone

-
- - -
-
+ ); }