Merge pull request #48 from dotslashf/development

Development
dotslashf · Sep 3, 2024 · 4b6e2a9 · 4b6e2a9
2 parents a9ae360 + 9864caf
commit 4b6e2a9
Show file tree

Hide file tree

Showing 23 changed files with 271 additions and 110 deletions.
diff --git a/src/app/_components/CreateCopyPastaPage.tsx b/src/app/_components/CreateCopyPastaPage.tsx
@@ -23,15 +23,15 @@ import {
 } from "../../server/form/copyPasta";
 import { type z } from "zod";
 import useToast from "~/components/ui/use-react-hot-toast";
-import { redirect } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import MultipleSelector, {
   type Option,
 } from "~/components/ui/multiple-selector";
 import { badgeVariants } from "~/components/ui/badge";
 import { DateTimePicker } from "~/components/ui/datetime-picker";
 import { id } from "date-fns/locale";
-import { DAYS } from "~/lib/constant";
+import { DAYS, parseErrorMessages } from "~/lib/constant";
 
 export default function CreateCopyPasta() {
   const [tags] = api.tag.list.useSuspenseQuery(undefined, {
@@ -42,6 +42,8 @@ export default function CreateCopyPasta() {
   const createMutation = api.copyPasta.create.useMutation();
   const getUploadUrl = api.upload.getUploadSignedUrl.useMutation();
 
+  const router = useRouter();
+
   const tagOptions: Option[] = tags.map((tag) => {
     return {
       label: tag.name,
@@ -66,9 +68,9 @@ export default function CreateCopyPasta() {
 
   useEffect(() => {
     if (createMutation.isSuccess) {
-      redirect("/dashboard/profile");
+      return router.push("/dashboard/profile");
     }
-  }, [createMutation.isSuccess]);
+  }, [createMutation.isSuccess, router]);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = event.target.files?.[0];
@@ -80,7 +82,7 @@ export default function CreateCopyPasta() {
       setFile(selectedFile);
       form.setValue("imageUrl", selectedFile);
     } else {
-      toast({
+      void toast({
         message: "Hanya boleh gambar dan berukuran <= 2MB 🤓",
         type: "danger",
       });
@@ -90,17 +92,18 @@ export default function CreateCopyPasta() {
   async function onSubmit(values: z.infer<typeof createCopyPastaFormClient>) {
     try {
       if (!file) {
-        toast({
-          type: "promise",
+        await toast({
           message: "",
+          type: "promise",
           promiseFn: createMutation.mutateAsync({
             ...values,
             source: determineSource(values.sourceUrl),
           }),
           promiseMsg: {
-            error: "Duh, gagal nih 😢",
             loading: "Sedang memasak 🔥",
             success: "Makasih! Tunggu diapproved ya 😎",
+            // eslint-disable-next-line
+            error: (err) => `${parseErrorMessages(err)}`,
           },
         });
         return;
@@ -119,26 +122,22 @@ export default function CreateCopyPasta() {
         body: file,
       });
 
-      toast({
-        type: "promise",
+      await toast({
         message: "",
+        type: "promise",
         promiseFn: createMutation.mutateAsync({
           ...values,
           source: determineSource(values.sourceUrl),
           imageUrl: url.split("?")[0],
         }),
         promiseMsg: {
-          error: "Duh, gagal nih 😢",
           loading: "Sedang memasak 🔥",
           success: "Makasih! Tunggu diapproved ya 😎",
+          // eslint-disable-next-line
+          error: (err) => `${parseErrorMessages(err)}`,
         },
       });
-    } catch (error) {
-      toast({
-        type: "danger",
-        message: "Duh, gagal nih",
-      });
-    }
+    } catch (error) {}
   }
 
   return (
@@ -174,7 +173,7 @@ export default function CreateCopyPasta() {
                     maxSelected={3}
                     hidePlaceholderWhenSelected
                     onMaxSelected={(maxLimit) => {
-                      toast({
+                      void toast({
                         type: "danger",
                         message: `Maximal tag hanya ${maxLimit}`,
                       });
@@ -207,7 +206,6 @@ export default function CreateCopyPasta() {
                       onChange={field.onChange}
                       granularity="day"
                       placeholder={formatDateToHuman(new Date())}
-                      displayFormat={{ hour24: "PPP" }}
                       locale={id}
                     />
                   </FormControl>
@@ -252,8 +250,13 @@ export default function CreateCopyPasta() {
           </div>
         </div>
         <div className="mt-6 w-full">
-          <Button type="submit" className="w-full items-center">
-            Tambah <PlusIcon className="ml-2 h-4 w-4" />
+          <Button
+            type="submit"
+            className="w-full items-center"
+            disabled={form.formState.isSubmitting}
+          >
+            {form.formState.isSubmitting ? "Mengarsipkan..." : "Tambah"}
+            <PlusIcon className="ml-2 h-4 w-4" />
           </Button>
         </div>
       </form>

diff --git a/src/app/_components/EditCopyPastaPage.tsx b/src/app/_components/EditCopyPastaPage.tsx
@@ -83,7 +83,7 @@ export default function EditCopyPasta({ id }: EditCopyPastaProps) {
   }, [editMutation.isSuccess, id]);
 
   function onSubmit(values: z.infer<typeof editCopyPastaForm>) {
-    toast({
+    void toast({
       message: "",
       promiseFn: editMutation.mutateAsync({
         ...values,
@@ -132,7 +132,7 @@ export default function EditCopyPasta({ id }: EditCopyPastaProps) {
                     maxSelected={3}
                     hidePlaceholderWhenSelected
                     onMaxSelected={(maxLimit) => {
-                      toast({
+                      void toast({
                         type: "danger",
                         message: `Maximal tag hanya ${maxLimit}`,
                       });

diff --git a/src/app/_components/SignInPage.tsx b/src/app/_components/SignInPage.tsx
@@ -23,6 +23,9 @@ export default function SignInSocialProviders() {
     sendGAEvent("event", ANALYTICS_EVENT.BUTTON_CLICKED, {
       value: `signIn.${platform}`,
     });
+    window.umami?.track(ANALYTICS_EVENT.BUTTON_CLICKED, {
+      value: `signIn.${platform}`,
+    });
     void signIn(platform, {
       callbackUrl: "/",
     });

diff --git a/src/app/_components/UserCopyPastaPage.tsx b/src/app/_components/UserCopyPastaPage.tsx
@@ -34,6 +34,9 @@ export default function UserCopyPastaPage({ id }: UserCopyPastaProps) {
     sendGAEvent("event", ANALYTICS_EVENT.BUTTON_CLICKED, {
       value: `user.${id}.next`,
     });
+    window.umami?.track(ANALYTICS_EVENT.BUTTON_CLICKED, {
+      value: `user.${id}.next`,
+    });
   }
 
   const session: Session = {

diff --git a/src/components/CopyPasta/CardById.tsx b/src/components/CopyPasta/CardById.tsx
@@ -65,14 +65,17 @@ export default function CardById({ copyPasta }: CardProps) {
     navigator.clipboard
       .writeText(copyPasta.content)
       .then(() => {
-        toast({
+        void toast({
           message:
             "Bersiap untuk kejahilan kecil 😼\n Silahkan paste templatenya!",
           type: "info",
         });
         sendGAEvent("event", ANALYTICS_EVENT.BUTTON_CLICKED, {
           value: `copyPaste.${copyPasta.id}`,
         });
+        window.umami?.track(ANALYTICS_EVENT.BUTTON_CLICKED, {
+          value: `copyPaste.${copyPasta.id}`,
+        });
       })
       .catch((err) => console.log(err));
   }
@@ -81,11 +84,12 @@ export default function CardById({ copyPasta }: CardProps) {
     navigator.clipboard
       .writeText(`${baseUrl}/copy-pasta/${copyPasta.id}?utm_content=shared_url`)
       .then(() => {
-        toast({
+        void toast({
           message: "Url siap dibagikan! ⚓",
           type: "info",
         });
         sendGAEvent("event", ANALYTICS_EVENT.SHARE, { value: "copyPasta.url" });
+        window.umami?.track(ANALYTICS_EVENT.SHARE, { value: "copyPasta.url" });
       })
       .catch((err) => console.log(err));
   }
@@ -96,16 +100,31 @@ export default function CardById({ copyPasta }: CardProps) {
     sendGAEvent("event", ANALYTICS_EVENT.BUTTON_CLICKED, {
       value: `tag.${tag.name}`,
     });
+    window.umami?.track(ANALYTICS_EVENT.BUTTON_CLICKED, {
+      value: `tag.${tag.name}`,
+    });
     return router.push(`/?${currentParams.toString()}`);
   };
 
   const handleSourceClick = () => {
     sendGAEvent("event", ANALYTICS_EVENT.BUTTON_CLICKED, {
       value: `source.${copyPasta.source}`,
     });
+    window.umami?.track(ANALYTICS_EVENT.BUTTON_CLICKED, {
+      value: `source.${copyPasta.source}`,
+    });
     return router.push(`?source=${copyPasta.source}`);
   };
 
+  function handleDoksli() {
+    sendGAEvent("event", ANALYTICS_EVENT.DOKSLI, {
+      value: copyPasta.id,
+    });
+    window.umami?.track(ANALYTICS_EVENT.DOKSLI, {
+      value: copyPasta.id,
+    });
+  }
+
   return (
     <Card className="h-full">
       <CardHeader className="pb-0 lg:p-6 lg:pb-0">
@@ -219,11 +238,7 @@ export default function CardById({ copyPasta }: CardProps) {
                 <Link
                   href={copyPasta.sourceUrl}
                   className={cn(buttonVariants({ variant: "outline" }))}
-                  onClick={() =>
-                    sendGAEvent("event", ANALYTICS_EVENT.DOKSLI, {
-                      value: copyPasta.id,
-                    })
-                  }
+                  onClick={handleDoksli}
                   prefetch={false}
                   target="__blank"
                 >

diff --git a/src/components/CopyPasta/CardDashboard.tsx b/src/components/CopyPasta/CardDashboard.tsx
@@ -20,6 +20,24 @@ export default function CardDashboard({
   isApprovalMode,
   type,
 }: CardDashboardProps) {
+  function handleDoksli() {
+    sendGAEvent("event", ANALYTICS_EVENT.DOKSLI, {
+      value: copyPasta.id,
+    });
+    window.umami?.track(ANALYTICS_EVENT.DOKSLI, {
+      value: copyPasta.id,
+    });
+  }
+
+  function handleMoreInfo() {
+    sendGAEvent("event", ANALYTICS_EVENT.BUTTON_CLICKED, {
+      value: "copyPasta.moreInfo",
+    });
+    window.umami?.track(ANALYTICS_EVENT.BUTTON_CLICKED, {
+      value: "copyPasta.moreInfo",
+    });
+  }
+
   return (
     <Card className="h-full">
       <CardHeader className="pb-0">
@@ -75,11 +93,7 @@ export default function CardDashboard({
             <Link
               href={copyPasta.sourceUrl}
               className={cn(buttonVariants({ variant: "link", size: "url" }))}
-              onClick={() =>
-                sendGAEvent("event", ANALYTICS_EVENT.DOKSLI, {
-                  value: copyPasta.id,
-                })
-              }
+              onClick={handleDoksli}
               prefetch={false}
               target="__blank"
             >
@@ -107,11 +121,7 @@ export default function CardDashboard({
             <Link
               href={`/copy-pasta/${copyPasta.id}?utm_content=user_profile`}
               className={cn(buttonVariants({ variant: "link", size: "url" }))}
-              onClick={() =>
-                sendGAEvent("event", ANALYTICS_EVENT.BUTTON_CLICKED, {
-                  value: "copyPasta.moreInfo",
-                })
-              }
+              onClick={handleMoreInfo}
             >
               Lebih Lanjut <ArrowRight className="ml-2 h-3 w-3" />
             </Link>

diff --git a/src/components/CopyPasta/CardMinimal.tsx b/src/components/CopyPasta/CardMinimal.tsx
@@ -34,6 +34,9 @@ export default function CardMinimal({ copyPasta }: CardProps) {
       sendGAEvent("event", ANALYTICS_EVENT.BUTTON_CLICKED, {
         value: `tag.${tag.name}`,
       });
+      window.umami?.track(ANALYTICS_EVENT.BUTTON_CLICKED, {
+        value: `tag.${tag.name}`,
+      });
     }
     return router.push(`?${currentParams.toString()}`);
   };
@@ -42,25 +45,49 @@ export default function CardMinimal({ copyPasta }: CardProps) {
     sendGAEvent("event", ANALYTICS_EVENT.BUTTON_CLICKED, {
       value: `source.${copyPasta.source}`,
     });
+    window.umami?.track(ANALYTICS_EVENT.BUTTON_CLICKED, {
+      value: `source.${copyPasta.source}`,
+    });
     return router.push(`?source=${copyPasta.source}`);
   };
 
   function handleCopy() {
     navigator.clipboard
       .writeText(copyPasta.content)
       .then(() => {
-        toast({
+        void toast({
           message:
             "Bersiap untuk kejahilan kecil 😼\n Silahkan paste templatenya!",
           type: "info",
         });
         sendGAEvent("event", ANALYTICS_EVENT.BUTTON_CLICKED, {
           value: `copyPaste.${copyPasta.id}`,
         });
+        window.umami?.track(ANALYTICS_EVENT.BUTTON_CLICKED, {
+          value: `copyPaste.${copyPasta.id}`,
+        });
       })
       .catch((err) => console.log(err));
   }
 
+  function handleDoksli() {
+    sendGAEvent("event", ANALYTICS_EVENT.DOKSLI, {
+      value: copyPasta.id,
+    });
+    window.umami?.track(ANALYTICS_EVENT.DOKSLI, {
+      value: copyPasta.id,
+    });
+  }
+
+  function handleMoreInfo() {
+    sendGAEvent("event", ANALYTICS_EVENT.BUTTON_CLICKED, {
+      value: "copyPasta.moreInfo",
+    });
+    window.umami?.track(ANALYTICS_EVENT.BUTTON_CLICKED, {
+      value: "copyPasta.moreInfo",
+    });
+  }
+
   return (
     <Card className="h-full">
       <CardHeader className="pb-0">
@@ -135,11 +162,7 @@ export default function CardMinimal({ copyPasta }: CardProps) {
             <Link
               href={copyPasta.sourceUrl}
               className={cn(buttonVariants({ variant: "link", size: "url" }))}
-              onClick={() =>
-                sendGAEvent("event", ANALYTICS_EVENT.DOKSLI, {
-                  value: copyPasta.id,
-                })
-              }
+              onClick={handleDoksli}
               prefetch={false}
               target="__blank"
             >
@@ -157,11 +180,7 @@ export default function CardMinimal({ copyPasta }: CardProps) {
           <Link
             href={`/copy-pasta/${copyPasta.id}?utm_content=timeline`}
             className={cn(buttonVariants({ variant: "link", size: "url" }))}
-            onClick={() =>
-              sendGAEvent("event", ANALYTICS_EVENT.BUTTON_CLICKED, {
-                value: "copyPasta.moreInfo",
-              })
-            }
+            onClick={handleMoreInfo}
           >
             Lebih Lanjut <ArrowRight className="ml-2 h-3 w-3" />
           </Link>