This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-12-17
Channels
- # adventofcode (56)
- # announcements (1)
- # aws (6)
- # beginners (127)
- # bristol-clojurians (1)
- # calva (29)
- # cider (7)
- # clj-kondo (37)
- # cljdoc (20)
- # cljsrn (7)
- # clojure (159)
- # clojure-europe (67)
- # clojure-italy (23)
- # clojure-nl (4)
- # clojure-provo (3)
- # clojure-uk (18)
- # clojurescript (19)
- # code-reviews (59)
- # community-development (105)
- # conjure (6)
- # core-async (16)
- # core-logic (1)
- # cursive (21)
- # datomic (19)
- # defnpodcast (1)
- # emacs (8)
- # events (2)
- # fulcro (71)
- # graalvm (23)
- # jobs-discuss (1)
- # kaocha (5)
- # luminus (5)
- # meander (16)
- # nrepl (32)
- # off-topic (6)
- # pathom (159)
- # pedestal (3)
- # reagent (14)
- # reitit (8)
- # reveal (12)
- # rewrite-clj (9)
- # shadow-cljs (169)
- # spacemacs (16)
- # specter (2)
- # sql (19)
- # tools-deps (36)
- # vim (6)
Hello everyone, I'm trying to get https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md#signing-a-user-in (azure auth) to work with Reagent. How can I convert this React hook to something Reagent can understand? Is it possible? I think I have the initialization working correctly, and the Authenticated/Unauthenticated templates seem to render as expected, but I can't seem to grasp how to translate the code I have commented below into something Reagent understands (the raw React code is from the Github example I have linked above):
import React from 'react';
import { useMsalAuthentication, AuthenticatedTemplate, UnauthenticatedTemplate } from "@azure/msal-react";
export function App() {
const {login, result, error} = useMsalAuthentication("popup"); // <-- I can't seem to convert this into usable CLJS code
return (
<React.Fragment>
<p>Anyone can see this paragraph.</p>
<AuthenticatedTemplate>
<p>At least one account is signed in!</p>
</AuthenticatedTemplate>
<UnauthenticatedTemplate>
<p>No users are signed in!</p>
</UnauthenticatedTemplate>
</React.Fragment>
);
}
You will have to use a function component for that. Read this section and the next one: https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#function-components
Thank you for pointing me in the right direction @U2FRKM4TW, I will check it out. š
hi, suppose I have a super small application, it is a reagent component that shows a button and send an ajax request when clicked. The question is, can I have the same application multiple times included in the same html page?
Thanks @U2FRKM4TW, sorry, I forget to mention that reframe is also involved, my fears are because of the app-state, anyway Iām going to give it a try is not that hard, I just wanted to know before
You don't really need re-frame in a "super small application with a button that sends a request". And having re-frame there complicates things. You either have to dance around your state much more or straight up resolve to iframes.
So I have this widget
component which returns a function so that local state works, but when I want to problematically render several widget
components in my root
component I get an error "Functions are not valid as a React child" because obviously it's returning a function. I'm not sure how to fix this issue while preserving component local state in reagent.
Don't use (widget ...)
, use [widget ...]
.
Apart from that, wrap it in a call to reagent.core/as-element
.
Thanks that worked, also what's the difference between calling the component with parnes vs brackets?
It's all in the documentation: https://cljdoc.org/d/reagent/reagent/1.0.0-rc1/doc/tutorials/using-square-brackets-instead-of-parentheses-
@mikethompson Do you remember this Appendix 2 here on [] vs () docs: https://github.com/reagent-project/reagent/blob/master/doc/UsingSquareBracketsInsteadOfParens.md#appendix-2 This might be one of the docs copied from re-frame wiki. I think something is wrong in the example that should show some problem, it is perfectly valid code, no error there. I could just remove this, but if we can remember the original idea I could fix the example.