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) => {
if (!url) {
return new Response('Missing "url" query parameter', {
+12 -41
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from "react"
import { useEffect } from "react"
import { atom, useAtom } from "jotai"
import { atomWithStorage } from "jotai/utils"
import {
@@ -11,7 +11,6 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { isExistingUserFn } from "~/actions"
import { useLocation } from "@tanstack/react-router"
const hasVisitedAtom = atomWithStorage("hasVisitedLearnAnything", false)
@@ -21,24 +20,10 @@ 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()
setIsOpen(true)
}
}, [hasVisited, pathname, setIsOpen])
@@ -47,36 +32,21 @@ export function Onboarding() {
setHasVisited(true)
}
if (hasVisited || isFetching) return null
if (hasVisited) 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>
<AlertDialogTitle>Welcome to Learn Anything!</AlertDialogTitle>
</AlertDialogHeader>
<AlertDialogDescription className="text-foreground/70 space-y-4 text-base leading-5">
{isExisting && (
<>
<p className="font-medium">Existing Customer Notice</p>
<AlertDialogDescription asChild>
<div className="text-foreground/70 space-y-4 text-base leading-5">
<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.
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:
@@ -87,10 +57,11 @@ export function Onboarding() {
<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
If you have any questions, don't hesitate to reach out. Click on
question mark button in the bottom right corner and enter your
message.
</p>
</div>
</AlertDialogDescription>
<AlertDialogFooter className="mt-4">
-1
View File
@@ -7,7 +7,6 @@ import { routerWithQueryClient } from "@tanstack/react-router-with-query"
export function createRouter() {
const queryClient = new QueryClient()
const router = routerWithQueryClient(
createTanStackRouter({
routeTree,
+9 -6
View File
@@ -4,12 +4,14 @@ import {
Outlet,
ScrollRestoration,
createRootRouteWithContext,
useLocation,
} from "@tanstack/react-router"
import { Body, Head, Html, Meta, Scripts } from "@tanstack/start"
import * as React from "react"
import { fetchClerkAuth } from "~/actions"
import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary.js"
import { NotFound } from "~/components/NotFound.js"
import { isServer } from "~/lib/utils"
import appCss from "~/styles/app.css?url"
export const TanStackRouterDevtools =
@@ -64,17 +66,18 @@ export const Route = createRootRouteWithContext<{
{ rel: "manifest", href: "/site.webmanifest", color: "#fffff" },
{ rel: "icon", href: "/favicon.ico" },
],
beforeLoad: async ({ cause }) => {
if (cause !== "stay") {
beforeLoad: async ({ context, cause, location }) => {
// console.log(cause, location)
const { user } = await fetchClerkAuth()
return {
user,
}
}
// }
return {
user: null,
}
// return {
// user: null,
// }
},
errorComponent: (props) => {
return (
@@ -2,14 +2,12 @@ import { createFileRoute, Outlet, redirect } from "@tanstack/react-router"
export const Route = createFileRoute("/_layout/_pages/_protected")({
beforeLoad: ({ context, location, cause }) => {
if (cause !== "stay") {
if (!context?.user?.userId) {
throw redirect({
to: "/sign-in/$",
search: { redirect_url: location.pathname },
})
}
}
},
component: () => <Outlet />,
})