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', {
+12 -41
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,36 +32,21 @@ 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 className="font-medium">Existing Customer Notice</p>
<p> <p>
We noticed you are an existing Learn Anything customer. We Learn Anything is a learning platform that organizes knowledge in
sincerely apologize for any broken experience you may have a social way. You can create pages, add links, track learning
encountered on the old website. We&apos;ve been working hard on status of any topic, and more things in the future.
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>
<p> <p>
Try do these quick onboarding steps to get a feel for the product: 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> <li>Update your learning status on a topic</li>
</ul> </ul>
<p> <p>
If you have any questions, don&apos;t hesitate to reach out. Click If you have any questions, don't hesitate to reach out. Click on
on question mark button in the bottom right corner and enter your question mark button in the bottom right corner and enter your
message. message.
</p> </p>
</div>
</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,
+9 -6
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() const { user } = await fetchClerkAuth()
return { return {
user, user,
} }
} // }
return { // return {
user: null, // user: null,
} // }
}, },
errorComponent: (props) => { errorComponent: (props) => {
return ( return (
@@ -2,14 +2,12 @@ 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 />,
}) })