From b43c9762a17027a2b7f45f39547ca828c5245d72 Mon Sep 17 00:00:00 2001 From: Aslam H Date: Mon, 7 Oct 2024 17:01:26 +0700 Subject: [PATCH] chore: temp solution for fetching clerk on every navigated --- web/app/actions.ts | 21 ------ web/app/components/Onboarding.tsx | 79 +++++++------------- web/app/router.tsx | 1 - web/app/routes/__root.tsx | 19 +++-- web/app/routes/_layout/_pages/_protected.tsx | 12 ++- 5 files changed, 41 insertions(+), 91 deletions(-) diff --git a/web/app/actions.ts b/web/app/actions.ts index a4fb2a19..31838fa3 100644 --- a/web/app/actions.ts +++ b/web/app/actions.ts @@ -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', { diff --git a/web/app/components/Onboarding.tsx b/web/app/components/Onboarding.tsx index 4c9761c1..d516bde7 100644 --- a/web/app/components/Onboarding.tsx +++ b/web/app/components/Onboarding.tsx @@ -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,50 +32,36 @@ export function Onboarding() { setHasVisited(true) } - if (hasVisited || isFetching) return null + if (hasVisited) return null return ( - -

Welcome to Learn Anything!

- + Welcome to Learn Anything! - - {isExisting && ( - <> -

Existing Customer Notice

-

- 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've been working hard on - this new version, which addresses previous issues and offers - more features. As an early customer, you're locked in at - the $3 price for our upcoming pro version. - Thank you for your support! -

- - )} -

- 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. -

-

- Try do these quick onboarding steps to get a feel for the product: -

-
    -
  • Create your first page
    • -
  • Add a link to a resource
    • -
  • Update your learning status on a topic
    • -
-

- 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. -

+ +
+

+ 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. +

+

+ Try do these quick onboarding steps to get a feel for the product: +

+
    +
  • Create your first page
    • +
  • Add a link to a resource
    • +
  • Update your learning status on a topic
    • +
+

+ 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. +

+
diff --git a/web/app/router.tsx b/web/app/router.tsx index 3b96be59..f6ff9595 100644 --- a/web/app/router.tsx +++ b/web/app/router.tsx @@ -7,7 +7,6 @@ import { routerWithQueryClient } from "@tanstack/react-router-with-query" export function createRouter() { const queryClient = new QueryClient() - const router = routerWithQueryClient( createTanStackRouter({ routeTree, diff --git a/web/app/routes/__root.tsx b/web/app/routes/__root.tsx index 83d098b0..390f107d 100644 --- a/web/app/routes/__root.tsx +++ b/web/app/routes/__root.tsx @@ -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") { - const { user } = await fetchClerkAuth() - return { - user, - } - } + beforeLoad: async ({ context, cause, location }) => { + // console.log(cause, location) + const { user } = await fetchClerkAuth() return { - user: null, + user, } + // } + + // return { + // user: null, + // } }, errorComponent: (props) => { return ( diff --git a/web/app/routes/_layout/_pages/_protected.tsx b/web/app/routes/_layout/_pages/_protected.tsx index 6ffb58fa..b008283c 100644 --- a/web/app/routes/_layout/_pages/_protected.tsx +++ b/web/app/routes/_layout/_pages/_protected.tsx @@ -2,13 +2,11 @@ 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 }, - }) - } + if (!context?.user?.userId) { + throw redirect({ + to: "/sign-in/$", + search: { redirect_url: location.pathname }, + }) } }, component: () => ,