Code version different than Video and code complexity

[garthoid]

Hi,

I notice the code in the video (https://docs.microsoft.com/en-us/graph/tutorials/react) is quite different than what I am seeing in the repo. I notice as a new react developer that the code in the repo is much more advanced.

Is there a version of code that is less complex than the one in the repo?

Thanks in advance

[garthoid]

OF course the solution here is to go back in time in github and try to piece together things that work from that point in time. At least I can understand the code as I learn react.

[jasonjoh]

Thanks for reporting this...the video is indeed outdated at this point. I'm working on re-recording but don't have a solid timeline.

[garthoid]

Hi,

Thanks for the quick response.

As a nerd, presenter, and educator, I would like to suggest that the code used to introduce topic (which are new to many of us) should be as simple as possible. Using mind flexing complex constructs will only make leaning the topic harder....and then you have lost your audience.

Perhaps there could be two versions? Light simple code and the super mega delux stand-back-and-watch-this version. Both achieves the same result but one is easier for people new to react/msal/graph-api to digest.

[jasonjoh]

Appreciate the feedback. Are you referring to the React stuff itself, or the Graph stuff (or both)? I tried to keep the React components simple yet functional. It would help me if you could give a specific example of something that's too complex.

[garthoid]

The React part. The original code was at a react level I could understand. Adding what looked like wrappers or templates was a level of obfuscation that hid the intent of the graph work from me. In the end I went back in time to look at the version of code that was in the repo when the original video was published. This helped and I could proceed with the authN process.

While I am on the subject I am actually trying to use the Resource Manager API. Same authentication front end that this tutorial uses but instead uses the resource manager - or what is referred to in the Azure App Assignment API Permissions screen as "Azure Service Manager". My PoC goal is to list resource groups in a subscription. If you can point me to anything or any react based samples using the API I would appreciate it as right now I am having an issue with getting an "approval required" message popup and I have clearly set those in App Registration.

[jasonjoh]

Appreciate it. Is there a specific commit ID you're looking at that's simpler? I want to do a comparison and see what we can do here.

I'm aware of two major changes made since the video was made: convert to TypeScript and add ability to create an event. If we've over-abstracted some of the React stuff maybe we can revert that :D.

I'm sorry but I'm not familiar with the RM API. Just from looking at it though you may need to be an admin or have some specific role assigned to your user account.

[garthoid]

I was looking at c5e8636931 which is the same day that the video was published. I am new to react, but could follow this better. Clearly I need to improve my React.js so it depends what audience you are looking at. I think the Wrappering was what took me the most time to get my head around. I don't think your goal is to teach React, but the AuthN and the Graph API.

I am having a hard time finding docs to do access token requests to RM. I either get hit with invalid_token "could not find identity for access token" or if I add the Service Manager scope ("https://management.azure.com//user_impersonation", or https://management.core.windows.net//user_impersonation) then I get a "Request Access" Popup. I know I am close but I am really suffering without consistent documentation that uses the same names for things across doc sets.

[garthoid]

This is probably a better view: https://github.com/microsoftgraph/msgraph-training-reactspa/tree/c5e8636931d78e62cfa416c641f324006ccaa780