\r\n );\r\n};\r\n","import { useEffect, useState } from \"react\";\r\n\r\nimport { MsalAuthenticationTemplate, useMsal } from \"@azure/msal-react\";\r\nimport { InteractionStatus, InteractionType } from \"@azure/msal-browser\";\r\n\r\nimport { loginRequest } from \"../authConfig\";\r\nimport { getGroups, getNextPage } from \"../fetch\";\r\n\r\nimport { GraphQuery } from '../components/GraphQuery';\r\n\r\nconst OverageContent = () => {\r\n /**\r\n * useMsal is hook that returns the PublicClientApplication instance, \r\n * an array of all accounts currently signed in and an inProgress value \r\n * that tells you what msal is currently doing. For more, visit: \r\n * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md\r\n */\r\n const { inProgress } = useMsal();\r\n const [groupsData, setGroupsData] = useState([]);\r\n\r\n const handleNextPage = (nextPage) => {\r\n getNextPage(nextPage).then((response) => {\r\n response.value.map((v) => {\r\n if (!groupsData.includes(v.id)) {\r\n setGroupsData((gr) => [...gr, v.id]);\r\n }\r\n });\r\n\r\n if (response['@odata.nextLink']) {\r\n handleNextPage(response['@odata.nextLink'])\r\n }\r\n })\r\n }\r\n\r\n useEffect(() => {\r\n if (groupsData.length === 0 && inProgress === InteractionStatus.None) {\r\n getGroups().then(response => {\r\n response.value.map((v) => {\r\n if (!groupsData.includes(v.id)) {\r\n setGroupsData((gr) => [...gr, v.id]);\r\n }\r\n });\r\n\r\n /**\r\n * Some queries against Microsoft Graph return multiple pages of data either due to server-side paging \r\n * or due to the use of the $top query parameter to specifically limit the page size in a request. \r\n * When a result set spans multiple pages, Microsoft Graph returns an @odata.nextLink property in \r\n * the response that contains a URL to the next page of results. Learn more at https://docs.microsoft.com/graph/paging\r\n */\r\n if (response['@odata.nextLink']) {\r\n handleNextPage(response['@odata.nextLink']);\r\n }\r\n });\r\n }\r\n }, [inProgress]);\r\n\r\n return (\r\n <>\r\n { groupsData ? : null}\r\n \r\n );\r\n};\r\n\r\n/**\r\n * The `MsalAuthenticationTemplate` component will render its children if a user is authenticated \r\n * or attempt to sign a user in. Just provide it with the interaction type you would like to use \r\n * (redirect or popup) and optionally a request object to be passed to the login API, a component \r\n * to display while authentication is in progress or a component to display if an error occurs. For more, visit:\r\n * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md\r\n */\r\nexport const Overage = () => {\r\n\r\n const authRequest = {\r\n ...loginRequest\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n )\r\n};","import React, { useState, useEffect } from \"react\";\r\nimport { Route, Redirect } from \"react-router-dom\";\r\nimport { useMsal } from \"@azure/msal-react\";\r\n\r\nexport const RouteGuard = ({ Component, ...props }) => {\r\n const { instance } = useMsal();\r\n const [isAuthorized, setIsAuthorized] = useState(false);\r\n const [isOveraged, setIsOveraged] = useState(false);\r\n\r\n const onLoad = async () => {\r\n if (props.location.state) {\r\n let intersection = props.groups.filter((group) =>\r\n props.location.state.groupsData.includes(group)\r\n );\r\n\r\n if (intersection.length > 0) {\r\n setIsAuthorized(true);\r\n }\r\n } else {\r\n const currentAccount = instance.getActiveAccount();\r\n\r\n if (currentAccount && currentAccount.idTokenClaims[\"groups\"]) {\r\n let intersection = props.groups.filter((group) =>\r\n currentAccount.idTokenClaims[\"groups\"].includes(group)\r\n );\r\n\r\n if (intersection.length > 0) {\r\n setIsAuthorized(true);\r\n }\r\n } else if (\r\n currentAccount &&\r\n (currentAccount.idTokenClaims[\"_claim_names\"] ||\r\n currentAccount.idTokenClaims[\"_claim_sources\"])\r\n ) {\r\n window.alert(\r\n \"You have too many group memberships. The application will now query Microsoft Graph to get the full list of groups that you are a member of.\"\r\n );\r\n setIsOveraged(true);\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n onLoad();\r\n }, [instance]);\r\n\r\n return (\r\n <>\r\n {isAuthorized ? (\r\n }\r\n />\r\n ) : isOveraged ? (\r\n \r\n ) : (\r\n