Add confetti

apps/web/components/layout/page.component.tsx

@@ -1,9 +1,10 @@
 import { Menu, Transition } from "@headlessui/react";
 import { ArrowLeftIcon, CogIcon } from "@heroicons/react/solid";
+import confetti from "canvas-confetti";
 import classNames from "classnames";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { Fragment } from "react";
+import React, { Fragment, useEffect } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useUserData } from "../../utils/useUser";
 import BillingBanner from "../billing/billing-banner";
@@ -56,6 +57,20 @@ export default function Page({
     [router, backRoute]
   );
 
+  useEffect(() => {
+    if (router.query?.yay && confetti) {
+      try {
+        confetti({
+          particleCount: 100,
+          spread: 70,
+          origin: { y: 0.5 },
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }, [router.query?.yay]);
+
   return (
     <>
       <header className="bg-white dark:bg-black shadow dark:shadow-sm dark:shadow-gray-700/50 sticky top-0 z-10 backdrop-filter backdrop-blur-lg bg-opacity-70 dark:bg-opacity-70">

apps/web/package.json

@@ -26,10 +26,12 @@
     "@supabase/auth-ui-shared": "^0.1.8",
     "@supabase/supabase-js": "^2.39.3",
     "@tailwindcss/typography": "^0.5.1",
+    "@types/canvas-confetti": "^1.6.4",
     "@upstash/redis": "^1.20.6",
     "@vercel/analytics": "^1.0.1",
     "@vercel/og": "^0.0.20",
-    "chrono-node": "^2.5.0",
+    "canvas-confetti": "^1.9.3",
+    "chrono-node": "^2.7.6",
     "classnames": "^2.3.1",
     "easymde": "^2.18.0",
     "eslint-config-next": "^14.0.4",

apps/web/pages/pages/[page_id]/new.tsx

@@ -1,3 +1,4 @@
+import { PostStatus } from "@changes-page/supabase/types/page";
 import { InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
 import { useState } from "react";
@@ -52,6 +53,10 @@ export default function NewPost({
 
       track("PostCreated");
 
+      if (values.status !== PostStatus.draft) {
+        return await router.replace(`${ROUTES.PAGES}/${page_id}?yay=true`);
+      }
+
       return await router.replace(`${ROUTES.PAGES}/${page_id}`);
     } catch (_) {
       setSaving(false);

apps/web/pages/pages/new.tsx

@@ -51,7 +51,7 @@ export default function NewPage() {
         url_slug: values.url_slug,
       });
 
-      return await router.push(ROUTES.PAGES);
+      return await router.push(ROUTES.PAGES + "?yay=true");
     } catch (e) {
       notifyError();
       setSaving(false);

apps/web/utils/revalidate.ts

@@ -1,13 +1,17 @@
 import { httpPost } from "./http";
 
 export const revalidatePage = async (path: string) => {
-  const revalidateEndpoint =
-    process.env.REVALIDATE_ENDPOINT || "https://hey.changes.page";
+  try {
+    const revalidateEndpoint =
+      process.env.REVALIDATE_ENDPOINT || "https://hey.changes.page";
 
-  const result = await httpPost({
-    url: `${revalidateEndpoint}/api/revalidate?secret=${process.env.REVALIDATE_TOKEN}`,
-    data: { path },
-  });
+    const result = await httpPost({
+      url: `${revalidateEndpoint}/api/revalidate?secret=${process.env.REVALIDATE_TOKEN}`,
+      data: { path },
+    });
 
-  console.log("revalidatePage: Result:", path, result);
+    console.log("revalidatePage: Result:", path, result);
+  } catch (error) {
+    console.error("revalidatePage failed: Error:", error);
+  }
 };