chore: changes based on code review

eight-labs · Jun 8, 2024 · 65a5d08 · 65a5d08
1 parent 31d0b3e
commit 65a5d08
Show file tree

Hide file tree

Showing 8 changed files with 377 additions and 372 deletions.
diff --git a/apps/web/src/app/(main)/_actions/revalidateDashboard.ts b/apps/web/src/app/(main)/_actions/revalidateDashboard.ts
@@ -0,0 +1,13 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+
+// eslint-disable-next-line @typescript-eslint/require-await
+export const revalidateDashboard = async () => {
+  revalidatePath('/dashboard');
+};
+
+// eslint-disable-next-line @typescript-eslint/require-await
+export const revalidateFromClient = async (route: string) => {
+  revalidatePath(route);
+};
diff --git a/apps/web/src/app/(main)/dashboard/_components/new-form-dialog.tsx b/apps/web/src/app/(main)/dashboard/_components/new-form-dialog.tsx
@@ -48,19 +48,13 @@ export function CreateFormDialog() {
   const router = useRouter();
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
-    defaultValues: {
-      name: '',
-      description: '',
-      returnUrl: '',
-      keys: [''],
-    },
   });
   const [showDialog, setShowDialog] = useState<boolean>(false);
-  const [_isCreatePending, startCreateTransaction] = useTransition();
+  const [isCreatePending, startCreateTransaction] = useTransition();
 
   const { mutateAsync: createNewForm } = api.form.create.useMutation();
 
-  const createPost = (data: z.infer<typeof FormSchema>) => {
+  const createForm = (data: z.infer<typeof FormSchema>) => {
     startCreateTransaction(async () => {
       await createNewForm(
         {
@@ -86,7 +80,7 @@ export function CreateFormDialog() {
   };
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    createPost(data);
+    createForm(data);
 
     setShowDialog(false);
   }
@@ -159,6 +153,7 @@ export function CreateFormDialog() {
               <Button
                 onClick={form.handleSubmit(onSubmit)}
                 className="mt-2 w-full"
+                loading={isCreatePending}
               >
                 Create Form
               </Button>

diff --git a/apps/web/src/app/(main)/form/[id]/form-settings.tsx b/apps/web/src/app/(main)/form/[id]/form-settings.tsx
@@ -24,7 +24,7 @@ import { Switch } from '@formbase/ui/primitives/switch';
 
 import { api } from '~/lib/trpc/react';
 
-import { refreshDashboardAfterDeletion } from '../_actions/refresh-dashboard-after-deletion';
+import { revalidateDashboard } from '../../_actions/revalidateDashboard';
 import { DeleteFormDialog } from './delete-form-dialog';
 
 const formNameSchema = z.object({
@@ -65,7 +65,7 @@ export function FormSettings({ form }: FormSettingsProps) {
   }
 
   const redirectToDashboard = () => {
-    void refreshDashboardAfterDeletion();
+    void revalidateDashboard();
     router.push('/dashboard');
   };
 

diff --git a/apps/web/src/app/(main)/form/_actions/refresh-dashboard-after-deletion.ts b/apps/web/src/app/(main)/form/_actions/refresh-dashboard-after-deletion.ts
diff --git a/apps/web/src/app/(main)/onboarding/form/create-form-dialog.tsx b/apps/web/src/app/(main)/onboarding/form/create-form-dialog.tsx
@@ -48,21 +48,14 @@ export function CreateFormDialog() {
   const router = useRouter();
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
-    defaultValues: {
-      name: '',
-      description: '',
-      returnUrl: '',
-      keys: [''],
-    },
   });
   const [showDialog, setShowDialog] = useState<boolean>(false);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, startCreateTransaction] = useTransition();
+  const [isCreatingForm, startCreateTransaction] = useTransition();
 
   const { mutateAsync: createNewForm } =
     api.form.createOnboardingForm.useMutation();
 
-  const createPost = (data: z.infer<typeof FormSchema>) => {
+  const createForm = (data: z.infer<typeof FormSchema>) => {
     startCreateTransaction(async () => {
       await createNewForm(
         {
@@ -84,7 +77,7 @@ export function CreateFormDialog() {
   };
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    createPost(data);
+    createForm(data);
 
     setShowDialog(false);
   }
@@ -157,6 +150,7 @@ export function CreateFormDialog() {
               <Button
                 onClick={form.handleSubmit(onSubmit)}
                 className="mt-2 w-full"
+                loading={isCreatingForm}
               >
                 Create Form Endpoint
               </Button>

diff --git a/apps/web/src/app/(main)/onboarding/form/send-submission-button.tsx b/apps/web/src/app/(main)/onboarding/form/send-submission-button.tsx
@@ -8,6 +8,8 @@ import { toast } from 'sonner';
 
 import { Button } from '@formbase/ui/primitives/button';
 
+import { revalidateFromClient } from '../../_actions/revalidateDashboard';
+
 type SendFormSubmissionButton = {
   formId: string | null;
 };
@@ -29,17 +31,16 @@ export default function SendFormSubmissionButton({
 
       toast.success('Form submission sent!');
 
-      //   router.push(`/form/${formId}`);
-      //   'TODO: redirec to form page after we figure out how to refetch the submissions')
-      router.push('dasbhoard');
+      void revalidateFromClient(`/form/${formId}`);
+      router.push(`/form/${formId}`);
     });
   };
   return (
     <Button
       onClick={handleFormSubmission}
       className="flex items-center gap-1"
       loading={isSubmittingForm}
-      disabled={!formId}
+      disabled={!formId || isSubmittingForm}
     >
       {!isSubmittingForm && <Send className="w-4 h-4" />}
       <span>Send a submission</span>

diff --git a/packages/ui/primitives/button.tsx b/packages/ui/primitives/button.tsx
@@ -52,7 +52,7 @@ const Loader = ({
 };
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:select-none disabled:opacity-50',
   {
     variants: {
       variant: {