release: v2.1.2

omsimos · Jul 17, 2024 · ad8558f · ad8558f
2 parents ee48ff9 + 5bb9ac3
commit ad8558f
Show file tree

Hide file tree

Showing 18 changed files with 421 additions and 152 deletions.
diff --git a/apps/www/src/app/(authentication)/login/page.tsx b/apps/www/src/app/(authentication)/login/page.tsx
@@ -7,6 +7,7 @@ import { V1Link } from "@/app/components/v1-link";
 
 const BrowserWarning = dynamic(
   () => import("@umamin/ui/components/browser-warning"),
+  { ssr: false }
 );
 
 export const metadata = {

diff --git a/apps/www/src/app/(authentication)/register/page.tsx b/apps/www/src/app/(authentication)/register/page.tsx
@@ -7,6 +7,7 @@ import { V1Link } from "@/app/components/v1-link";
 
 const BrowserWarning = dynamic(
   () => import("@umamin/ui/components/browser-warning"),
+  { ssr: false }
 );
 
 export const metadata = {

diff --git a/apps/www/src/app/(user)/to/[username]/components/form.tsx b/apps/www/src/app/(user)/to/[username]/components/form.tsx
@@ -16,6 +16,7 @@ import useBotDetection from "@/hooks/use-bot-detection";
 import { Textarea } from "@umamin/ui/components/textarea";
 import { useDynamicTextarea } from "@/hooks/use-dynamic-textarea";
 import type { UserByUsernameQueryResult } from "../../../queries";
+import { ProgressDialog } from "@/app/components/progress-dialog";
 
 const CREATE_MESSAGE_MUTATION = graphql(`
   mutation CreateMessage($input: CreateMessageInput!) {
@@ -27,7 +28,7 @@ const CREATE_MESSAGE_MUTATION = graphql(`
 
 const createMessagePersisted = graphql.persisted(
   "3550bab6df63cc9b4f891263677b487dbf67eba1b5cc9af9fec5fc037d2e49f0",
-  CREATE_MESSAGE_MUTATION,
+  CREATE_MESSAGE_MUTATION
 );
 
 type Props = {
@@ -40,6 +41,7 @@ export default function ChatForm({ currentUserId, user }: Props) {
   const [content, setContent] = useState("");
   const [message, setMessage] = useState("");
   const [isFetching, setIsFetching] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
 
   const inputRef = useDynamicTextarea(content);
 
@@ -74,65 +76,76 @@ export default function ChatForm({ currentUserId, user }: Props) {
         return;
       }
 
-      setMessage(content.replace(/(\r\n|\n|\r){2,}/g, "\n\n"));
-      setContent("");
-      toast.success("Message sent");
+      setDialogOpen(true);
       setIsFetching(false);
 
       logEvent(analytics, "send_message");
     } catch (err: any) {
-      toast.error(err.message);
+      toast.error("An error occured");
       setIsFetching(false);
     }
   }
 
   return (
-    <div
-      className={cn(
-        "flex flex-col justify-between pb-6 h-full max-h-[400px] relative w-full min-w-0",
-        user?.quietMode ? "min-h-[250px]" : "min-h-[350px]",
-      )}
-    >
-      <div className="flex flex-col h-full overflow-scroll pt-10 px-5 sm:px-7 pb-5 w-full relative min-w-0 ">
-        <ChatList
-          imageUrl={user?.imageUrl}
-          question={user?.question ?? ""}
-          reply={message}
-        />
-      </div>
-
-      {user?.quietMode ? (
-        <span className="text-muted-foreground text-center text-sm">
-          User has enabled quiet mode
-        </span>
-      ) : (
-        <form
-          onSubmit={handleSubmit}
-          className="px-5 sm:px-7 flex items-center space-x-2 w-full self-center pt-2 max-w-lg"
-        >
-          <Textarea
-            id="message"
-            required
-            ref={inputRef}
-            value={content}
-            onChange={(e) => {
-              setContent(e.target.value);
-            }}
-            maxLength={500}
-            placeholder="Type your message..."
-            className="focus-visible:ring-transparent text-base resize-none min-h-10 max-h-20"
-            autoComplete="off"
+    <>
+      <ProgressDialog
+        type="Message"
+        description="Your message is anonymous and encrypted. It will be delivered to the recipient's inbox."
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        onProgressComplete={() => {
+          setMessage(content.replace(/(\r\n|\n|\r){2,}/g, "\n\n"));
+          setContent("");
+        }}
+      />
+      <div
+        className={cn(
+          "flex flex-col justify-between pb-6 h-full max-h-[400px] relative w-full min-w-0",
+          user?.quietMode ? "min-h-[250px]" : "min-h-[350px]"
+        )}
+      >
+        <div className="flex flex-col h-full overflow-scroll pt-10 px-5 sm:px-7 pb-5 w-full relative min-w-0 ">
+          <ChatList
+            imageUrl={user?.imageUrl}
+            question={user?.question ?? ""}
+            reply={message}
           />
-          <Button type="submit" size="icon" disabled={isFetching}>
-            {isFetching ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
-            ) : (
-              <Send className="h-4 w-4" />
-            )}
-            <span className="sr-only">Send</span>
-          </Button>
-        </form>
-      )}
-    </div>
+        </div>
+
+        {user?.quietMode ? (
+          <span className="text-muted-foreground text-center text-sm">
+            User has enabled quiet mode
+          </span>
+        ) : (
+          <form
+            onSubmit={handleSubmit}
+            className="px-5 sm:px-7 flex items-center space-x-2 w-full self-center pt-2 max-w-lg"
+          >
+            <Textarea
+              id="message"
+              required
+              ref={inputRef}
+              value={content}
+              disabled={isFetching}
+              onChange={(e) => {
+                setContent(e.target.value);
+              }}
+              maxLength={500}
+              placeholder="Type your message..."
+              className="focus-visible:ring-transparent text-base resize-none min-h-10 max-h-20"
+              autoComplete="off"
+            />
+            <Button type="submit" size="icon" disabled={isFetching}>
+              {isFetching ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <Send className="h-4 w-4" />
+              )}
+              <span className="sr-only">Send</span>
+            </Button>
+          </form>
+        )}
+      </div>
+    </>
   );
 }
diff --git a/apps/www/src/app/(user)/to/[username]/components/unauthenticated.tsx b/apps/www/src/app/(user)/to/[username]/components/unauthenticated.tsx
@@ -14,11 +14,15 @@ import {
   AlertDialogTitle,
 } from "@umamin/ui/components/alert-dialog";
 
-export default function UnauthenticatedDialog({ isLoggedIn }: { isLoggedIn: boolean }) {
-  const [open, setOpen] = useState(!isLoggedIn);
+export default function UnauthenticatedDialog({
+  isLoggedIn,
+}: {
+  isLoggedIn: boolean;
+}) {
+  const [open, onOpenChange] = useState(!isLoggedIn);
 
   return (
-    <AlertDialog open={open} onOpenChange={setOpen}>
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle className="flex items-center justify-center">

diff --git a/apps/www/src/app/(user)/to/[username]/page.tsx b/apps/www/src/app/(user)/to/[username]/page.tsx
@@ -7,7 +7,6 @@ import { getUserByUsername } from "../../queries";
 import { ShareButton } from "@/app/components/share-button";
 import { Card, CardHeader } from "@umamin/ui/components/card";
 
-const AdContainer = dynamic(() => import("@umamin/ui/ad"));
 const ChatForm = dynamic(() => import("./components/form"));
 const UnauthenticatedDialog = dynamic(
   () => import("./components/unauthenticated"),
@@ -65,10 +64,7 @@ export default async function SendMessage({
   const { session } = await getSession();
 
   return (
-    <main className="pb-24 min-h-screen flex flex-col">
-      {/* v2-send-to */}
-      <AdContainer className="mb-5 w-full mt-20 max-w-2xl mx-auto" slotId="9163326848" />
-
+    <main className="pb-24 min-h-screen flex flex-col justify-center">
       <div className="container w-full max-w-2xl">
         <Card className="border flex flex-col w-full">
           <CardHeader className="bg-background border-b w-full item-center rounded-t-2xl flex justify-between flex-row">

diff --git a/apps/www/src/app/components/navbar.tsx b/apps/www/src/app/components/navbar.tsx
@@ -1,5 +1,4 @@
 import Link from "next/link";
-import dynamic from "next/dynamic";
 import { Badge } from "@umamin/ui/components/badge";
 import {
   LinkIcon,
@@ -12,10 +11,7 @@ import {
 import { getSession } from "@/lib/auth";
 import { Icons } from "./utilities/icons";
 import { ToggleTheme } from "./utilities/toggle-theme";
-
-const ShareLinkDialog = dynamic(() => import("./share-link-dialog"), {
-  ssr: false,
-});
+import { ShareLinkDialog } from "./share-link-dialog";
 
 export async function Navbar() {
   const { user } = await getSession();

diff --git a/apps/www/src/app/components/progress-dialog.tsx b/apps/www/src/app/components/progress-dialog.tsx
@@ -0,0 +1,86 @@
+import { toast } from "sonner";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@umamin/ui/components/alert-dialog";
+import { Progress } from "@umamin/ui/components/progress";
+
+const AdContainer = dynamic(() => import("@umamin/ui/ad"));
+
+type Props = {
+  type: string;
+  description: string;
+  open: boolean;
+  onProgressComplete?: () => void;
+  // eslint-disable-next-line no-unused-vars
+  onOpenChange: (open: boolean) => void;
+};
+
+export function ProgressDialog({
+  type,
+  description,
+  open,
+  onOpenChange,
+  onProgressComplete,
+}: Props) {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (open) {
+      setProgress(0);
+
+      const duration = 5000;
+      const intervalTime = 100;
+      const totalIntervals = duration / intervalTime;
+      let currentInterval = 0;
+
+      const interval = setInterval(() => {
+        currentInterval += 1;
+        setProgress(Math.min(100, (currentInterval / totalIntervals) * 100));
+
+        if (currentInterval >= totalIntervals) {
+          clearInterval(interval);
+          toast.success(`${type} sent successfully`);
+
+          if (onProgressComplete) {
+            onProgressComplete();
+          }
+        }
+      }, intervalTime);
+
+      return () => clearInterval(interval);
+    }
+  }, [open, type]);
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="px-0 max-w-full">
+        <AlertDialogHeader className="px-4">
+          <AlertDialogTitle>
+            {progress === 100 ? `${type} Sent` : `Sending ${type}`}
+          </AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <AdContainer className="w-full mx-auto" slotId="9163326848" />
+
+        <AlertDialogFooter className="px-4">
+          {progress !== 100 ? (
+            <Progress value={progress} className="h-2" />
+          ) : (
+            <AlertDialogAction disabled={progress !== 100}>
+              Continue
+            </AlertDialogAction>
+          )}
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/apps/www/src/app/components/share-button.tsx b/apps/www/src/app/components/share-button.tsx
@@ -5,22 +5,26 @@ import { analytics } from "@/lib/firebase";
 import { logEvent } from "firebase/analytics";
 
 const onShare = (username: string) => {
-  if (typeof window !== "undefined") {
-    const url = `${window.location.origin}/user/${username}`;
+  try {
+    if (typeof window !== "undefined") {
+      const url = `${window.location.origin}/user/${username}`;
 
-    if (
-      navigator.share &&
-      navigator.canShare({ url }) &&
-      process.env.NODE_ENV === "production"
-    ) {
-      navigator.share({ url });
-    } else {
-      navigator.clipboard.writeText(
-        `${window.location.origin}/user/${username}`,
-      );
-    }
+      if (
+        navigator.share &&
+        navigator.canShare({ url }) &&
+        process.env.NODE_ENV === "production"
+      ) {
+        navigator.share({ url });
+      } else {
+        navigator.clipboard.writeText(
+          `${window.location.origin}/user/${username}`
+        );
+      }
 
-    logEvent(analytics, "share_profile");
+      logEvent(analytics, "share_profile");
+    }
+  } catch (err) {
+    console.log(err);
   }
 };
 

diff --git a/apps/www/src/app/components/share-link-dialog.tsx b/apps/www/src/app/components/share-link-dialog.tsx
@@ -25,7 +25,7 @@ const onCopy = (url: string) => {
   }
 };
 
-export default function ShareLinkDialog({ username }: { username: string }) {
+export function ShareLinkDialog({ username }: { username: string }) {
   const url =
     typeof window !== "undefined"
       ? `${window.location.origin}/to/${username}`