fix: notifications now are not transparent. Modals for my account now close whe nfinished

This commit is contained in:
Juan Di Toro 2024-03-25 08:34:22 +01:00
parent 7ca98d0cfb
commit 415d9d14a6
4 changed files with 72 additions and 44 deletions

View File

@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
<ToastPrimitives.Action
ref={ref}
className={cn(
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
className
)}
{...props}

View File

@ -6,18 +6,23 @@ import {
ToastProvider,
ToastTitle,
ToastViewport,
} from "~/components/ui/toast"
import { useToast } from "~/components/ui/use-toast"
} from "~/components/ui/toast";
import { useToast } from "~/components/ui/use-toast";
export function Toaster() {
const { toasts } = useToast()
const { toasts } = useToast();
return (
<ToastProvider>
{toasts.map(({ id, title, description, action, cancelMutation, ...props }) => {
const undoButton = cancelMutation ? <ToastAction altText="Undo" onClick={cancelMutation}>Undo</ToastAction> : undefined
{toasts.map(
({ id, title, description, action, cancelMutation, ...props }) => {
const undoButton = cancelMutation ? (
<ToastAction altText="Undo" onClick={cancelMutation}>
Undo
</ToastAction>
) : undefined;
return (
<Toast key={id} {...props}>
<Toast key={id} {...props} variant={"default"}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && (
@ -28,9 +33,10 @@ export function Toaster() {
{undoButton}
<ToastClose />
</Toast>
)
})}
);
},
)}
<ToastViewport />
</ToastProvider>
)
);
}

View File

@ -9,7 +9,7 @@ import {
useUpdate,
useUpdatePassword,
} from "@refinedev/core";
import { useMemo, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { z } from "zod";
import { Field } from "~/components/forms";
import { GeneralLayout } from "~/components/general-layout";
@ -53,21 +53,28 @@ export default function MyAccount() {
changeAvatar: false,
});
return (
<Authenticated key="account" v3LegacyAuthProviderCompatible>
<GeneralLayout>
<h1 className="text-lg font-bold mb-4">My Account</h1>
<Dialog
onOpenChange={(open) => {
if (!open) {
const closeModal = () => {
setModal({
changeEmail: false,
changePassword: false,
setupTwoFactor: false,
changeAvatar: false,
});
};
const isModalOpen = Object.values(openModal).some(isOpen => isOpen);
return (
<Authenticated key="account">
<GeneralLayout>
<h1 className="text-lg font-bold mb-4">My Account</h1>
<Dialog
onOpenChange={(open) => {
if (!open) {
closeModal();
}
}}>
}}
open={isModalOpen}
>
<UsageCard
label="Usage"
currentUsage={2}
@ -213,12 +220,12 @@ export default function MyAccount() {
</ManagementCard>
</div>
<DialogContent>
{openModal.changeAvatar && <ChangeAvatarForm />}
{openModal.changeAvatar && <ChangeAvatarForm close={closeModal} />}
{openModal.changeEmail && (
<ChangeEmailForm currentValue={identity?.email || ""} />
<ChangeEmailForm currentValue={identity?.email || ""} close={closeModal} />
)}
{openModal.changePassword && <ChangePasswordForm />}
{openModal.setupTwoFactor && <SetupTwoFactorDialog />}
{openModal.changePassword && <ChangePasswordForm close={closeModal} />}
{openModal.setupTwoFactor && <SetupTwoFactorDialog close={closeModal} />}
</DialogContent>
</Dialog>
</GeneralLayout>
@ -243,9 +250,9 @@ const ChangeEmailSchema = z
return true;
});
const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
const ChangeEmailForm = ({ currentValue, close }: { currentValue: string, close: () => void }) => {
const { data: identity } = useGetIdentity<{ id: BaseKey }>();
const { mutate: updateEmail } = useUpdate();
const { mutate: updateEmail, isSuccess } = useUpdate();
const [form, fields] = useForm({
id: "login",
constraint: getZodConstraint(ChangeEmailSchema),
@ -269,6 +276,12 @@ const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
},
});
useEffect(() => {
if (isSuccess) {
close();
}
}, [isSuccess, close]);
return (
<>
<DialogHeader>
@ -320,8 +333,8 @@ const ChangePasswordSchema = z
return true;
});
const ChangePasswordForm = () => {
const { mutate: updatePassword } =
const ChangePasswordForm = ({ close }: { close: () => void }) => {
const { mutate: updatePassword, isSuccess } =
useUpdatePassword<UpdatePasswordFormRequest>();
const [form, fields] = useForm({
id: "login",
@ -342,6 +355,12 @@ const ChangePasswordForm = () => {
},
});
useEffect(() => {
if (isSuccess) {
close();
}
}, [isSuccess, close]);
return (
<>
<DialogHeader>
@ -375,7 +394,7 @@ const ChangePasswordForm = () => {
);
};
const SetupTwoFactorDialog = () => {
const SetupTwoFactorDialog = ({ close }: { close: () => void }) => {
const [continueModal, setContinue] = useState<boolean>(false);
return (
@ -414,7 +433,7 @@ const SetupTwoFactorDialog = () => {
);
};
const ChangeAvatarForm = () => {
const ChangeAvatarForm = ({ close }: { close: () => void }) => {
const {
getRootProps,
getInputProps,
@ -424,9 +443,6 @@ const ChangeAvatarForm = () => {
removeFile,
cancelAll,
} = useUppy();
console.log({ state, files: getFiles() });
const isUploading = state === "uploading";
const isCompleted = state === "completed";
const hasStarted = state !== "idle" && state !== "initializing";
@ -439,6 +455,12 @@ const ChangeAvatarForm = () => {
}
}, [file]);
useEffect(() => {
if (isCompleted) {
close();
}
}, [isCompleted, close]);
return (
<>
<DialogHeader className="mb-6">

View File

@ -11,7 +11,7 @@ import { Authenticated } from "@refinedev/core";
export default function Dashboard() {
return (
<Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
<Authenticated key="dashboard">
<GeneralLayout>
<h1 className="font-bold mb-4 text-3xl">Dashboard</h1>
<UpgradeAccountBanner />