mirror of
https://github.com/linsa-io/linsa.git
synced 2026-01-12 12:20:23 +01:00
chore: temp solution for fetching clerk on every navigated
This commit is contained in:
@@ -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', {
|
||||||
|
|||||||
@@ -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'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'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'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">
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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 (
|
||||||
|
|||||||
@@ -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 />,
|
||||||
|
|||||||
Reference in New Issue
Block a user