Fork me on GitHub
#reagent
<
2020-12-17
>
greensponge14:12:34

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>
        );
}

p-himik14:12:30

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

greensponge15:12:17

Thank you for pointing me in the right direction @U2FRKM4TW, I will check it out. šŸ‘

šŸ‘ 3
clyfe16:12:29

This new "fun comp" thing allows use of hooks

Wilson Velez20:12:55

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?

Wilson Velez20:12:51

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

p-himik21:12:07

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.

skykanin21:12:32

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.

p-himik21:12:26

Don't use (widget ...), use [widget ...]. Apart from that, wrap it in a call to reagent.core/as-element.

skykanin21:12:51

Thanks that worked, also what's the difference between calling the component with parnes vs brackets?

juhoteperi21:12:10

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