Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2023-09-08

Channels

#fulcro
<
2023-09-08
>
Patrick Brown18:09:52

I'm having issues that I think surround hooks and context, but I'm so turned around that I can't be sure. Any ideas or help is a nice thing. relevant code: In ns decl: [com.fulcrologic.fulcro.algorithms.react-interop :refer [react-factory]] ["@clerk/clerk-react" :as clerk] In body: (def clerk-provider (react-factory clerk/ClerkProvider)) (def when-signed-in (react-factory clerk/SignedIn)) (def when-signed-out (react-factory clerk/SignedOut)) (def use-user (react-factory clerk/useUser)) Component: (defsc ROOT [this props] {:use-hooks? true} (clerk-provider {:publishableKey clerk-pub-key} (when-signed-in {} (kit/full-container {} (user-button {:showName true})) (kit/full-container {} (let [{:keys [user]} (use-user)] (pr-str user)))) (when-signed-out {} (kit/full-container {} (redirect-to-sign-in {}))))) PROBLEM DESCRIPTION: Provider works, login redirect works when signed out, user-button works and has user when signed in, what I can't figure out is how to use the use-user or any other hook the clerk library provides. Trying to destructure the user out returns nil. Calling (pr-str (use-user)) returns. #js {"$$typeof" #object[Symbol(react.element)], :type #object[useUser], :key nil, :ref nil, :props #js {}, :_owner #object[FiberNode [object Object]], :_store #js {}} I'm proper lost, even a nudge in the right direction may be very helpful. CHEERS. https://github.com/armincerf/squint-chat/blob/e15ee1b6e1191f0ad901d9f90856196136c5a53c/src/App.cljs#L8 https://clerk.com/docs/references/react/use-user

Patrick Brown21:09:58

Looking around in react components tab with devtools, I've got all the user information in the 'ClerkContextProvider' as well as a few parent contexts for my component. What am I looking for? I was thinking comp/with-parent-context, but that doesn't seem to do it.

tony.kay19:09:08

useUser is a hook not a component

tony.kay19:09:11

be my guess

tony.kay19:09:01

don’t wrap it in a factory. This is plain react you’re using here….I’ve not used that lib, but my guess would be 

(let [user (clerk/useUser)] ...)

tony.kay19:09:09

export default function Home() {
  const { isSignedIn, user, isLoaded } = useUser();
in React this is a component (they are calling Home), and it is destructuring those items. So yes, my answer above is correct, though it will be a js object: (.-isSignedIn user) unless you convert is with js->clj

Patrick Brown00:09:50

Thanks for the reply. When I call clerk/useUser hook in that way, the error is Error: UserContext not found. The context is in a parent component I just need to get to it. I looked into the f.f.r.c. ns but I don't think this use case is the purpose of that ns. Any insight into what I'm missing would be a real help.

tony.kay05:09:04

no idea. Not a Fulcro problem. You need to read and understand React, React Hooks, and the clerk system. Fulcro is not involved in this. Literally Fulcro just calls react to render the elements, which are generated by react factories. Fulcro is about data management. React context, hooks, etc work as advertised.

tony.kay05:09:26

Could be you missed the caveats in the react docs: https://react.dev/reference/react/useContext#caveats

👍 2