Skip to content

Commit

Permalink
warning alert for attestation intent update
Browse files Browse the repository at this point in the history
  • Loading branch information
shadrach-tayo committed Jan 7, 2025
1 parent 872e700 commit fc6e0ce
Show file tree
Hide file tree
Showing 6 changed files with 385 additions and 17 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
},
"dependencies": {
"@hookform/resolvers": "^3.9.0",
"@radix-ui/react-alert-dialog": "^1.1.4",
"@radix-ui/react-avatar": "^1.1.1",
"@radix-ui/react-checkbox": "^1.1.2",
"@radix-ui/react-collapsible": "^1.1.1",
Expand All @@ -21,7 +22,7 @@
"@radix-ui/react-scroll-area": "^1.2.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.3",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export default function Page({
formdata.append("attestationId", attestation.id.toString());
formAction(formdata);
}}
isEdit={true}
state={state}
defaultValues={{
name: attestation.name,
Expand Down
125 changes: 112 additions & 13 deletions src/components/organisms/forms/attestation-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,29 @@ import {
FormLabel,
FormMessage,
} from "@/components/ui/form";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";

import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { Layout, LayoutBody } from "@/components/custom/Layout";
import { createAttestation } from "@/app/actions";
import { useFormStatus } from "react-dom";
import React, {
ComponentType,
ForwardRefExoticComponent,
RefAttributes,
useEffect,
} from "react";
import React, { useEffect, useRef, useState } from "react";
import { getQueryClient } from "@/lib/get-query-client";
import { tags } from "@/lib/tags";
import { useRouter } from "next/navigation";
import { Checkbox } from "@/components/ui/checkbox";

const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const ACCEPTED_IMAGE_TYPES = [
Expand Down Expand Up @@ -75,7 +83,7 @@ const attestationSchema = z.object({
.boolean()
.transform((value) => (value.toString() === "true" ? true : false))
.default(false),
canUpdateOrcid: z.coerce
canUpdateOrcid: z.coerce
.boolean()
.transform((value) => (value.toString() === "true" ? true : false))
.default(false),
Expand All @@ -87,21 +95,28 @@ export default function AttestationForm({
formAction,
defaultValues,
state,
isEdit = false,
}: // pending,
{
formAction: (formData: FormData) => void;
state: ReturnType<typeof createAttestation>;
defaultValues?: FormValues;
isEdit?: boolean;
// pending: boolean;
}) {
const router = useRouter();
const [showDialog, setShowDialog] = useState(false);
const [publishNew, setPublishNew] = useState(false);

const form = useForm<FormValues>({
resolver: zodResolver(attestationSchema),
defaultValues,
});

const formRef = useRef<HTMLFormElement>(null);

function onSubmit(data: FormValues) {
console.log("onSubmit");
const formData = new FormData();

formData.append("name", data.name);
Expand All @@ -111,6 +126,10 @@ export default function AttestationForm({
formData.append("canUpdateOrcid", data.canUpdateOrcid.toString());
formData.append("communityId", data.communityId);

if (isEdit) {
formData.append("publishNew", publishNew.toString());
}

if (data.imageUrl) {
formData.append("imageUrl", data.imageUrl);
}
Expand All @@ -129,6 +148,7 @@ export default function AttestationForm({
console.log(`${key}: ${value}`);
}

setShowDialog(false);
formAction(formData);
}

Expand All @@ -150,7 +170,20 @@ export default function AttestationForm({
}
}, [defaultValues?.communityId, form, formState, router]);

const presubmit = () => {
if (
form.formState.dirtyFields.name ||
form.formState.dirtyFields.description
) {
setShowDialog(true);
} else {
formRef.current?.submit();
}
};
const isProtected = form.watch("protected");

const isIntentChanged =
form.formState.dirtyFields.name || form.formState.dirtyFields.description;
return (
<Layout>
<LayoutBody className="max-w-4xl mx-auto">
Expand All @@ -162,7 +195,12 @@ export default function AttestationForm({
</div>
</div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<form
onSubmit={form.handleSubmit(onSubmit)}
ref={formRef}
className="space-y-8"
id="attestationForm"
>
<FormField
control={form.control}
name="name"
Expand Down Expand Up @@ -291,8 +329,10 @@ export default function AttestationForm({
ORCID Work Record Privilege
</FormLabel>
<FormDescription>
Authorize this attestation to update ORCID work record, if a claim on
this attestation gets verified it automatically reflects on the user&apos;s ORCID work record.
Authorize this attestation to update ORCID work record,
if a claim on this attestation gets verified it
automatically reflects on the user&apos;s ORCID work
record.
</FormDescription>
</div>
<FormControl>
Expand Down Expand Up @@ -365,9 +405,68 @@ export default function AttestationForm({
))}
</ul>
)}
<SubmitButton type="submit" disabled={form.formState.isSubmitting}>
Submit Attestation
</SubmitButton>

{!isEdit && (
<SubmitButton
type="submit"
disabled={form.formState.isSubmitting}
>
Submit Attestation
</SubmitButton>
)}

{isEdit && (
<AlertDialog
open={showDialog}
onOpenChange={(open) => setShowDialog(open)}
>
<AlertDialogTrigger asChild>
<SubmitButton disabled={form.formState.isSubmitting}>
Submit Attestation
</SubmitButton>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
{isIntentChanged && (
<AlertDialogDescription>
This action cannot be undone. This will publish a new
version of this attestation and require all submissions
to reclaim the updated attestation to rejoin the
community.
</AlertDialogDescription>
)}
</AlertDialogHeader>
{isIntentChanged && (
<div className="flex items-center space-x-2">
<Checkbox
id="intent"
checked={publishNew}
onCheckedChange={(checked) =>
setPublishNew(checked as boolean)
}
/>
<label
htmlFor="intent"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Publish new version of attestation
</label>
</div>
)}
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<SubmitButton
type="submit"
disabled={form.formState.isSubmitting}
form="attestationForm"
>
Continue
</SubmitButton>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)}
</form>
</Form>
</LayoutBody>
Expand Down
141 changes: 141 additions & 0 deletions src/components/ui/alert-dialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
ref={ref}
/>
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
/>
</AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className
)}
{...props}
/>
)
AlertDialogHeader.displayName = "AlertDialogHeader"

const AlertDialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold", className)}
{...props}
/>
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
AlertDialogDescription.displayName =
AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Action>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Action
ref={ref}
className={cn(buttonVariants(), className)}
{...props}
/>
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Cancel
ref={ref}
className={cn(
buttonVariants({ variant: "outline" }),
"mt-2 sm:mt-0",
className
)}
{...props}
/>
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
AlertDialog,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel,
}
4 changes: 2 additions & 2 deletions src/contexts/Providers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ export default function Providers(props: PropsWithChildren<unknown>) {
const queryClient = getQueryClient()

return (
<ThemeContext>
// <ThemeContext>
<HydrationBoundary state={dehydrate(queryClient)}>
<PanelProvider>{props.children}</PanelProvider>
</HydrationBoundary>
</ThemeContext>
// </ThemeContext>
);
}
Loading

0 comments on commit fc6e0ce

Please sign in to comment.