chore: temp solution for fetching clerk on every navigated

This commit is contained in:
Aslam H
2024-10-07 17:01:26 +07:00
parent 950ebc3dad
commit b43c9762a1
5 changed files with 41 additions and 91 deletions
-21
View File
@@ -54,27 +54,6 @@ export const sendFeedbackFn = createServerFn(
}, },
) )
export const isExistingUserFn = createServerFn(
"GET",
async (_, { request }) => {
const auth = await getAuth(request)
if (!auth.userId) {
return false
}
const user = await clerkClient({
telemetry: { disabled: true },
}).users.getUser(auth.userId)
const roninUser = await get.existingStripeSubscriber.with({
email: user.emailAddresses[0].emailAddress,
})
return user.emailAddresses[0].emailAddress === roninUser?.email
},
)
export const getMetadata = createServerFn("GET", async (url: string) => { export const getMetadata = createServerFn("GET", async (url: string) => {
if (!url) { if (!url) {
return new Response('Missing "url" query parameter', { return new Response('Missing "url" query parameter', {
+25 -54
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from "react" import { useEffect } from "react"
import { atom, useAtom } from "jotai" import { atom, useAtom } from "jotai"
import { atomWithStorage } from "jotai/utils" import { atomWithStorage } from "jotai/utils"
import { import {
@@ -11,7 +11,6 @@ import {
AlertDialogHeader, AlertDialogHeader,
AlertDialogTitle, AlertDialogTitle,
} from "@/components/ui/alert-dialog" } from "@/components/ui/alert-dialog"
import { isExistingUserFn } from "~/actions"
import { useLocation } from "@tanstack/react-router" import { useLocation } from "@tanstack/react-router"
const hasVisitedAtom = atomWithStorage("hasVisitedLearnAnything", false) const hasVisitedAtom = atomWithStorage("hasVisitedLearnAnything", false)
@@ -21,24 +20,10 @@ export function Onboarding() {
const { pathname } = useLocation() const { pathname } = useLocation()
const [hasVisited, setHasVisited] = useAtom(hasVisitedAtom) const [hasVisited, setHasVisited] = useAtom(hasVisitedAtom)
const [isOpen, setIsOpen] = useAtom(isDialogOpenAtom) const [isOpen, setIsOpen] = useAtom(isDialogOpenAtom)
const [isFetching, setIsFetching] = useState(true)
const [isExisting, setIsExisting] = useState(false)
useEffect(() => { 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 !== "/") { if (!hasVisited && pathname !== "/") {
loadUser() setIsOpen(true)
} }
}, [hasVisited, pathname, setIsOpen]) }, [hasVisited, pathname, setIsOpen])
@@ -47,50 +32,36 @@ export function Onboarding() {
setHasVisited(true) setHasVisited(true)
} }
if (hasVisited || isFetching) return null if (hasVisited) return null
return ( return (
<AlertDialog open={isOpen} onOpenChange={setIsOpen}> <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
<AlertDialogContent className="max-w-xl"> <AlertDialogContent className="max-w-xl">
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle> <AlertDialogTitle>Welcome to Learn Anything!</AlertDialogTitle>
<h1 className="text-2xl font-bold">Welcome to Learn Anything!</h1>
</AlertDialogTitle>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogDescription className="text-foreground/70 space-y-4 text-base leading-5"> <AlertDialogDescription asChild>
{isExisting && ( <div className="text-foreground/70 space-y-4 text-base leading-5">
<> <p>
<p className="font-medium">Existing Customer Notice</p> Learn Anything is a learning platform that organizes knowledge in
<p> a social way. You can create pages, add links, track learning
We noticed you are an existing Learn Anything customer. We status of any topic, and more things in the future.
sincerely apologize for any broken experience you may have </p>
encountered on the old website. We&apos;ve been working hard on <p>
this new version, which addresses previous issues and offers Try do these quick onboarding steps to get a feel for the product:
more features. As an early customer, you&apos;re locked in at </p>
the <strong>$3</strong> price for our upcoming pro version. <ul className="list-inside list-disc">
Thank you for your support! <li>Create your first page</li>
</p> <li>Add a link to a resource</li>
</> <li>Update your learning status on a topic</li>
)} </ul>
<p> <p>
Learn Anything is a learning platform that organizes knowledge in a If you have any questions, don't hesitate to reach out. Click on
social way. You can create pages, add links, track learning status question mark button in the bottom right corner and enter your
of any topic, and more things in the future. message.
</p> </p>
<p> </div>
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> </AlertDialogDescription>
<AlertDialogFooter className="mt-4"> <AlertDialogFooter className="mt-4">
-1
View File
@@ -7,7 +7,6 @@ import { routerWithQueryClient } from "@tanstack/react-router-with-query"
export function createRouter() { export function createRouter() {
const queryClient = new QueryClient() const queryClient = new QueryClient()
const router = routerWithQueryClient( const router = routerWithQueryClient(
createTanStackRouter({ createTanStackRouter({
routeTree, routeTree,
+11 -8
View File
@@ -4,12 +4,14 @@ import {
Outlet, Outlet,
ScrollRestoration, ScrollRestoration,
createRootRouteWithContext, createRootRouteWithContext,
useLocation,
} from "@tanstack/react-router" } from "@tanstack/react-router"
import { Body, Head, Html, Meta, Scripts } from "@tanstack/start" import { Body, Head, Html, Meta, Scripts } from "@tanstack/start"
import * as React from "react" import * as React from "react"
import { fetchClerkAuth } from "~/actions" import { fetchClerkAuth } from "~/actions"
import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary.js" import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary.js"
import { NotFound } from "~/components/NotFound.js" import { NotFound } from "~/components/NotFound.js"
import { isServer } from "~/lib/utils"
import appCss from "~/styles/app.css?url" import appCss from "~/styles/app.css?url"
export const TanStackRouterDevtools = export const TanStackRouterDevtools =
@@ -64,17 +66,18 @@ export const Route = createRootRouteWithContext<{
{ rel: "manifest", href: "/site.webmanifest", color: "#fffff" }, { rel: "manifest", href: "/site.webmanifest", color: "#fffff" },
{ rel: "icon", href: "/favicon.ico" }, { rel: "icon", href: "/favicon.ico" },
], ],
beforeLoad: async ({ cause }) => { beforeLoad: async ({ context, cause, location }) => {
if (cause !== "stay") { // console.log(cause, location)
const { user } = await fetchClerkAuth()
return {
user,
}
}
const { user } = await fetchClerkAuth()
return { return {
user: null, user,
} }
// }
// return {
// user: null,
// }
}, },
errorComponent: (props) => { errorComponent: (props) => {
return ( return (
+5 -7
View File
@@ -2,13 +2,11 @@ import { createFileRoute, Outlet, redirect } from "@tanstack/react-router"
export const Route = createFileRoute("/_layout/_pages/_protected")({ export const Route = createFileRoute("/_layout/_pages/_protected")({
beforeLoad: ({ context, location, cause }) => { beforeLoad: ({ context, location, cause }) => {
if (cause !== "stay") { if (!context?.user?.userId) {
if (!context?.user?.userId) { throw redirect({
throw redirect({ to: "/sign-in/$",
to: "/sign-in/$", search: { redirect_url: location.pathname },
search: { redirect_url: location.pathname }, })
})
}
} }
}, },
component: () => <Outlet />, component: () => <Outlet />,