Move to TanStack Start from Next.js (#184)

web/app/components/Onboarding.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useState } from "react"
+import { atom, useAtom } from "jotai"
+import { atomWithStorage } from "jotai/utils"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { isExistingUserFn } from "~/actions"
+import { useLocation } from "@tanstack/react-router"
+
+const hasVisitedAtom = atomWithStorage("hasVisitedLearnAnything", false)
+const isDialogOpenAtom = atom(true)
+
+export function Onboarding() {
+  const { pathname } = useLocation()
+  const [hasVisited, setHasVisited] = useAtom(hasVisitedAtom)
+  const [isOpen, setIsOpen] = useAtom(isDialogOpenAtom)
+  const [isFetching, setIsFetching] = useState(true)
+  const [isExisting, setIsExisting] = useState(false)
+
+  useEffect(() => {
+    const loadUser = async () => {
+      try {
+        const existingUser = await isExistingUserFn()
+        setIsExisting(existingUser)
+        setIsOpen(true)
+      } catch (error) {
+        console.error("Error loading user:", error)
+      } finally {
+        setIsFetching(false)
+      }
+    }
+
+    if (!hasVisited && pathname !== "/") {
+      loadUser()
+    }
+  }, [hasVisited, pathname, setIsOpen])
+
+  const handleClose = () => {
+    setIsOpen(false)
+    setHasVisited(true)
+  }
+
+  if (hasVisited || isFetching) return null
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent className="max-w-xl">
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            <h1 className="text-2xl font-bold">Welcome to Learn Anything!</h1>
+          </AlertDialogTitle>
+        </AlertDialogHeader>
+
+        <AlertDialogDescription className="text-foreground/70 space-y-4 text-base leading-5">
+          {isExisting && (
+            <>
+              <p className="font-medium">Existing Customer Notice</p>
+              <p>
+                We noticed you are an existing Learn Anything customer. We
+                sincerely apologize for any broken experience you may have
+                encountered on the old website. We&apos;ve been working hard on
+                this new version, which addresses previous issues and offers
+                more features. As an early customer, you&apos;re locked in at
+                the <strong>$3</strong> price for our upcoming pro version.
+                Thank you for your support!
+              </p>
+            </>
+          )}
+          <p>
+            Learn Anything is a learning platform that organizes knowledge in a
+            social way. You can create pages, add links, track learning status
+            of any topic, and more things in the future.
+          </p>
+          <p>
+            Try do these quick onboarding steps to get a feel for the product:
+          </p>
+          <ul className="list-inside list-disc">
+            <li>Create your first page</li>
+            <li>Add a link to a resource</li>
+            <li>Update your learning status on a topic</li>
+          </ul>
+          <p>
+            If you have any questions, don&apos;t hesitate to reach out. Click
+            on question mark button in the bottom right corner and enter your
+            message.
+          </p>
+        </AlertDialogDescription>
+
+        <AlertDialogFooter className="mt-4">
+          <AlertDialogCancel onClick={handleClose}>Close</AlertDialogCancel>
+          <AlertDialogAction onClick={handleClose}>
+            Get Started
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+export default Onboarding