Merge pull request #551 from phospho-app/dev

fix: project deletion and improve onboarding
phospho-app · Jun 24, 2024 · 5d6f7cc · 5d6f7cc
2 parents a535625 + 8cf1f39
commit 5d6f7cc
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 77 deletions.
diff --git a/platform/app/onboarding/create-project/page.tsx b/platform/app/onboarding/create-project/page.tsx
@@ -2,7 +2,7 @@
 
 import Authenticate from "@/components/authenticate";
 import FetchOrgProject from "@/components/fetch-data/fetch-org-project";
-import { Icons } from "@/components/small-spinner";
+import { Icons, Spinner } from "@/components/small-spinner";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -56,6 +56,8 @@ export default function Page() {
   const [creatingProject, setCreatingProject] = useState(false);
   const toast = useToast();
 
+  const [redirecting, setRedirecting] = useState(false);
+
   const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
 
   // 1. Define your form.
@@ -67,6 +69,7 @@ export default function Page() {
   });
 
   async function defaultProject() {
+    setRedirecting(true);
     if (creatingProject) {
       return;
     }
@@ -125,6 +128,7 @@ export default function Page() {
       }
     }
     setCreatingProject(true);
+    setRedirecting(true);
 
     // Do something with the form values.
     // ✅ This will be type-safe and validated.
@@ -193,10 +197,8 @@ export default function Page() {
                     loading || creatingProject || !form.formState.isValid
                   }
                 >
+                  {redirecting && <Spinner className="mr-1" />}
                   {!creatingProject && <>Create project</>}
-                  {creatingProject && (
-                    <Icons.spinner className="w-4 h-4 animate-spin" />
-                  )}
                 </Button>
               </div>
             </form>
@@ -228,11 +230,9 @@ export default function Page() {
               onClick={() => {
                 defaultProject();
               }}
-              disabled={loading || creatingProject}
+              disabled={loading || creatingProject || redirecting}
             >
-              {creatingProject && (
-                <Icons.spinner className="w-4 h-4 animate-spin" />
-              )}
+              {redirecting && <Spinner className="mr-1" />}
               Explore sample data
             </Button>
           </div>

diff --git a/platform/app/onboarding/customize/[id]/add-events.tsx b/platform/app/onboarding/customize/[id]/add-events.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Icons } from "@/components/small-spinner";
+import { Spinner } from "@/components/small-spinner";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -15,17 +15,12 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useToast } from "@/components/ui/use-toast";
 import { DetectionScope, EventDefinition } from "@/models/models";
 import { navigationStateStore } from "@/store/store";
 import { useUser } from "@propelauth/nextjs/client";
-import { set } from "date-fns";
 import { ChevronDown } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { sendUserFeedback } from "phospho";
@@ -331,7 +326,12 @@ export default function AddEvents({
           </div>
         </CardContent>
         <CardFooter className="flex justify-between">
-          <Button variant="link" onClick={() => router.push(redirectTo)}>
+          <Button
+            variant="link"
+            onClick={() => {
+              router.push(redirectTo);
+            }}
+          >
             Skip
           </Button>
           <Button
@@ -349,11 +349,8 @@ export default function AddEvents({
             }}
             disabled={loading || customEvents === null}
           >
-            {sendEventsLoading ? (
-              <Icons.spinner className="w-4 h-4 animate-spin" />
-            ) : (
-              "Save and continue"
-            )}
+            {sendEventsLoading && <Spinner className="mr-1" />}
+            Save and continue
           </Button>
         </CardFooter>
       </Card>

diff --git a/platform/app/onboarding/survey/about-you.tsx b/platform/app/onboarding/survey/about-you.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Spinner } from "@/components/small-spinner";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -30,60 +31,36 @@ import { z } from "zod";
 // empty, or min 4
 const myString = z
   .string()
-  .min(5, {
-    message: "Description must be at least 5 characters.",
+  .min(3, {
+    message: "Description must be at least 3 characters.",
   })
   .max(200, { message: "Description must be at most 200 characters." })
   .optional();
 
-const formSchema = z
-  .object({
-    code: z.union([z.literal("yes"), z.literal("no")]).optional(),
-    customer: z
-      .union([
-        z.literal("software"),
-        z.literal("data"),
-        z.literal("manager"),
-        z.literal("founder"),
-        z.literal("other"),
-      ])
-      .optional(),
-    contact: z
-      .union([
-        z.literal("friends"),
-        z.literal("socials"),
-        z.literal("blog"),
-        z.literal("conference"),
-        z.literal("other"),
-      ])
-      .optional(),
-    // if build is "other", then customBuild is required
-    customCustomer: myString.optional(),
-    customContact: myString.optional(),
-  })
-  //   .partial()
-  .refine(
-    (data) => {
-      if (data.customer === "other" && !data.customCustomer) {
-        return false;
-      }
-      if (data.contact === "other" && !data.customContact) {
-        return false;
-      }
-      if (data.customer !== "other") {
-        return true;
-      }
-      if (data.contact !== "other") {
-        return true;
-      }
-
-      return true;
-    },
-    {
-      message: "Custom customer and custom purpose are required.",
-      path: ["customCustomer", "customPurpose"],
-    },
-  );
+const formSchema = z.object({
+  code: z.union([z.literal("yes"), z.literal("no")]).optional(),
+  customer: z
+    .union([
+      z.literal("software"),
+      z.literal("data"),
+      z.literal("manager"),
+      z.literal("founder"),
+      z.literal("other"),
+    ])
+    .optional(),
+  contact: z
+    .union([
+      z.literal("friends"),
+      z.literal("socials"),
+      z.literal("blog"),
+      z.literal("conference"),
+      z.literal("other"),
+    ])
+    .optional(),
+  // if build is "other", then customBuild is required
+  customCustomer: myString.optional(),
+  customContact: myString.optional(),
+});
 
 const CARD_STYLE =
   "flex flex-col items-left justify-center p-6 text-xl font-semibold space-y-4";
@@ -99,6 +76,7 @@ export default function AboutYou({
   const [project, setProject] = useState<Project | null>(null);
   const { loading, accessToken } = useUser();
   const selectedOrgId = navigationStateStore((state) => state.selectedOrgId);
+  const [redirect, setRedirect] = useState(false);
 
   useEffect(() => {
     (async () => {
@@ -143,6 +121,7 @@ export default function AboutYou({
 
   // 2. Define a submit handler.
   async function onSubmit(values: z.infer<typeof formSchema>) {
+    setRedirect(true);
     router.push("/onboarding/create-project");
     fetch(`/api/onboarding/log-onboarding-survey`, {
       method: "POST",
@@ -300,7 +279,8 @@ export default function AboutYou({
 
               <div className="flex justify-end">
                 {/* Button is only accessible when the form is complete */}
-                <Button type="submit" disabled={loading}>
+                <Button type="submit" disabled={redirect}>
+                  {redirect && <Spinner className=" mr-1" />}
                   Next
                 </Button>
               </div>

diff --git a/platform/components/projects/create-project-form.tsx b/platform/components/projects/create-project-form.tsx
@@ -48,6 +48,8 @@ const CreateProjectDialog = ({
   const [isCreating, setIsCreating] = useState(false);
   const [isCreated, setIsCreated] = useState(false);
 
+  const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
+
   const router = useRouter();
 
   const FormSchema = z.object({
@@ -84,13 +86,16 @@ const CreateProjectDialog = ({
     const responseBody = await creation_response.json();
     if (responseBody.project_name === projectName) {
       // Change the selected project
-      setproject_id(responseBody.id);
+
+      await delay(1000);
       mutate(
         [`/api/organizations/${selectedOrgId}/projects`, accessToken],
         async (data: any) => {
           return { projects: [responseBody, data.projects] };
         },
       );
+      await delay(1000);
+      setproject_id(responseBody.id);
       setIsCreated(true);
       setIsCreating(false);
       setOpen(false);
@@ -205,6 +210,7 @@ const CreateProjectDialog = ({
             {isCreating && (
               <AlertDialogAction disabled>
                 <Icons.spinner className="mr-1 h-4 w-4 animate-spin" />
+                Create project
               </AlertDialogAction>
             )}
           </div>

diff --git a/platform/components/projects/delete-project-popup.tsx b/platform/components/projects/delete-project-popup.tsx
@@ -9,6 +9,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
+  AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { dataStateStore, navigationStateStore } from "@/store/store";
@@ -34,16 +35,18 @@ const AlertDialogDeleteProject = () => {
   return (
     selectedProject && (
       <AlertDialog>
-        <Button variant="destructive" className="justify-start">
-          Delete project
-        </Button>
+        <AlertDialogTrigger asChild>
+          <Button variant="destructive" className="justify-start">
+            Delete project
+          </Button>
+        </AlertDialogTrigger>
         <AlertDialogContent className="md:w-1/3">
           <AlertDialogHeader>
             <AlertDialogTitle>
               Delete the project "{selectedProject.project_name}"?
             </AlertDialogTitle>
-            <AlertDialogDescription>
-              <div className="mt-4">Are you sure? No undo.</div>
+            <AlertDialogDescription className="mt-4">
+              Are you sure? No undo.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>