import { override } from '@microsoft/decorators' ; import { Log } from '@microsoft/sp-core-library' ; import { BaseApplicationCustomizer , PlaceholderContent , PlaceholderName } from '@microsoft/sp-application-base' ; import { AadHttpClient , HttpClientResponse } from '@microsoft/sp-http' ; import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import GroupsNavigation , { IGroupsNavigationProps , IGroup } from './components/GroupsNavigation' ; import * as strings from 'OfficeGroupsNavApplicationCustomizerStrings' ; const LOG_SOURCE = 'OfficeGroupsNavApplicationCustomizer' ; /**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */ export interface IOfficeGroupsNavApplicationCustomizerProperties { testMessage : string ; } /** A Custom Action which can be run during execution of a Client Side Application */ export default class OfficeGroupsNavApplicationCustomizer extends BaseApplicationCustomizer < IOfficeGroupsNavApplicationCustomizerProperties > { private _topPlaceholder : PlaceholderContent | undefined ; private _groups : IGroup [ ] = null ; @ override public onInit ( ) { return new Promise < void > ( ( resolve ) => { const aadClient = new AadHttpClient ( this . context . serviceScope , "https://graph.microsoft.com" ) ; aadClient . get ( `https://graph.microsoft.com/v1.0/me/memberOf/$/microsoft.graph.group?$filter=groupTypes/any(a:a eq 'unified')` , AadHttpClient . configurations . v1 ) . then ( response => { return response . json ( ) ; } ) . then ( json => { const groupsRequestsUrls = [ ] ; const groups = json . value ; for ( let i = 0 , len = groups . length ; i < len ; i ++ ) { groupsRequestsUrls . push ( `https://graph.microsoft.com/v1.0/groups/${ groups [ i ] . id }/sites/root?$select=webUrl,displayName` ) ; } Promise . all ( groupsRequestsUrls . map ( url => aadClient . fetch ( url , AadHttpClient . configurations . v1 , { method : 'GET' } ) ) ) . then ( ( responses ) => { return Promise . all ( responses . map ( r => r . json ( ) ) ) ; } ) . then ( groupsProps => { this . _groups = groupsProps . map ( gr => { return < IGroup > { name : gr . displayName , url : gr . webUrl } ; } ) ; this . context . placeholderProvider . changedEvent . add ( this , this . _renderPlaceHolders ) ; this . _renderPlaceHolders ( ) ; } ) ; } ) ; } ) ; } private _renderPlaceHolders ( ) { if ( ! this . _topPlaceholder ) { this . _topPlaceholder = this . context . placeholderProvider . tryCreateContent ( PlaceholderName . Top , { onDispose : this . _onDispose } ) ; if ( ! this . _topPlaceholder ) { return ; } if ( this . _topPlaceholder . domElement ) { const component = React . createElement ( GroupsNavigation , { groups : this . _groups } ) ; ReactDOM . render ( component , this . _topPlaceholder . domElement ) ; } } } private _onDispose ( ) { } }