Merge pull request #119 from luismanez/react-application-grouplinks-v2

Sample updated with Yammer and Teams direct links (showed during Community call)
pnp · Apr 4, 2018 · d5a909a · d5a909a
2 parents d57c0b1 + b437be5
commit d5a909a
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 45 deletions.
diff --git a/.gitignore b/.gitignore
@@ -63,3 +63,6 @@ typings/
 .vscode
 bin
 obj
+samples/react-application-grouplinks/src/restQueries/group.http
+samples/react-application-grouplinks/src/restQueries/teamsGroup.http
+samples/react-application-grouplinks/src/restQueries/yammerGroup.http
diff --git a/...ation-grouplinks/src/extensions/groupDirectLinks/GroupDirectLinksApplicationCustomizer.ts b/...ation-grouplinks/src/extensions/groupDirectLinks/GroupDirectLinksApplicationCustomizer.ts
@@ -29,47 +29,55 @@ export interface IGroupDirectLinksApplicationCustomizerProperties {
 export default class GroupDirectLinksApplicationCustomizer
   extends BaseApplicationCustomizer<IGroupDirectLinksApplicationCustomizerProperties> {
 
-    private _headerPlaceholder: PlaceholderContent;
-
-    @override
-    public onInit(): Promise<void> {
-      Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
-
-      // Added to handle possible changes on the existence of placeholders
-      this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
-
-      // Call render method for generating the needed html elements
-      this._renderPlaceHolders();
-
-      return Promise.resolve();
-    }
-
-    private _renderPlaceHolders(): void {
-      // Check if the header placeholder is already set and if the header placeholder is available
-      if (!this._headerPlaceholder && this.context.placeholderProvider.placeholderNames.indexOf(PlaceholderName.Top) !== -1) {
-        this._headerPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top, {
-          onDispose: this._onDispose
-        });
-
-        // The extension should not assume that the expected placeholder is available.
-        if (!this._headerPlaceholder) {
-          console.error('The expected placeholder (PageHeader) was not found.');
-          return;
-        }
-
-        if (this._headerPlaceholder.domElement) {
-          const element: React.ReactElement<IGroupDirectLinksProps> = React.createElement(
-            GroupDirectLinkInfo,
-            {
-              context: this.context
-            }
-          );
-          ReactDom.render(element, this._headerPlaceholder.domElement);
-        }
+  private _headerPlaceholder: PlaceholderContent;
+
+  @override
+  public onInit(): Promise<void> {
+    console.log(`${LOG_SOURCE} Initialized ${strings.Title}. Property value: ${this.properties.testMessage}`);
+
+    // Added to handle possible changes on the existence of placeholders
+    this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
+
+    // Call render method for generating the needed html elements
+    this._renderPlaceHolders();
+
+    return Promise.resolve();
+  }
+
+  private _renderPlaceHolders(): void {    
+    if (this._headerPlaceholderAvailableAndNotCreatedYet()) {
+
+      this._headerPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top, {
+        onDispose: this._onDispose
+      });
+
+      // The extension should not assume that the expected placeholder is available.
+      if (!this._headerPlaceholder) {
+        console.error(`${LOG_SOURCE} The expected placeholder (PageHeader) was not found.`);
+        return;
       }
+
+      if (this._headerPlaceholder.domElement) {
+        const element: React.ReactElement<IGroupDirectLinksProps> = React.createElement(
+          GroupDirectLinkInfo,
+          {
+            context: this.context
+          }
+        );
+        ReactDom.render(element, this._headerPlaceholder.domElement);
+      }
+
     }
-
-    private _onDispose(): void {
-      console.log('[Breadcrumb._onDispose] Disposed breadcrumb.');
-    }
+  }
+
+  private _headerPlaceholderAvailableAndNotCreatedYet(): boolean
+  {
+    // Check if the header placeholder is already set and if the header placeholder is available
+    return !this._headerPlaceholder 
+      && this.context.placeholderProvider.placeholderNames.indexOf(PlaceholderName.Top) !== -1;
+  }
+
+  private _onDispose(): void {
+    console.log(`${LOG_SOURCE} Dispossed`);
+  }
 }
diff --git a/...ct-application-grouplinks/src/extensions/groupDirectLinks/components/GroupDirectLinks.tsx b/...ct-application-grouplinks/src/extensions/groupDirectLinks/components/GroupDirectLinks.tsx
@@ -13,8 +13,6 @@ import { Guid } from "@microsoft/sp-core-library";
 
 export default class GroupDirectLinks extends React.Component<IGroupDirectLinksProps, IGroupDirectLinksState> {
 
-    private _menuButtonElement: HTMLElement | null;
-
     constructor(props: IGroupDirectLinksProps) {
         super(props);
 
@@ -36,6 +34,20 @@ export default class GroupDirectLinks extends React.Component<IGroupDirectLinksP
             return <p>...</p>;
         }
 
+        let yammerButton = null;
+        if (this.state.groupDirectLinksInfo.yammerUrl) {
+            yammerButton =  <ActionButton
+                iconProps={{ iconName: 'YammerLogo' }}
+                href={this.state.groupDirectLinksInfo.yammerUrl}>Yammer</ActionButton>;
+        } 
+
+        let teamsButton = null;
+        if (this.state.groupDirectLinksInfo.teamsUrl) {
+            teamsButton =  <ActionButton
+                iconProps={{ iconName: 'TeamsLogo' }}
+                href={this.state.groupDirectLinksInfo.teamsUrl}>Teams</ActionButton>; 
+        } 
+
         return (
             <div className={styles.usefulLinks}>
                 <div className={styles.itemsContainer}>
@@ -51,7 +63,8 @@ export default class GroupDirectLinks extends React.Component<IGroupDirectLinksP
                 </ActionButton>
                     <ActionButton
                         iconProps={{ iconName: 'Inbox' }}
-                        href={this.state.groupDirectLinksInfo.inboxUrl} >
+                        href={this.state.groupDirectLinksInfo.inboxUrl} 
+                        disabled={this.state.groupDirectLinksInfo.inboxUrl == undefined} >
                         Inbox
                 </ActionButton>
                     <ActionButton
@@ -64,6 +77,8 @@ export default class GroupDirectLinks extends React.Component<IGroupDirectLinksP
                         href={this.state.groupDirectLinksInfo.peopleUrl} >
                         People
                 </ActionButton>  
+                {yammerButton}
+                {teamsButton}
                 </div>         
             </div>
         );
@@ -72,7 +87,7 @@ export default class GroupDirectLinks extends React.Component<IGroupDirectLinksP
     private async _getGroupDirectLinksInfo(): Promise<IGroupDirectLinksInfo> {
         const groupId: Guid = this.props.context.pageContext.site.group.id;
         const siteCollectionUrl = this.props.context.pageContext.web.absoluteUrl;
-        const restQuery = `${siteCollectionUrl}/_api/SP.Directory.DirectorySession/Group('${groupId}')`;
+        const restQuery = `${siteCollectionUrl}/_api/SP.Directory.DirectorySession/Group('${groupId}')?$select=PrincipalName,Id,DisplayName,Alias,Description,InboxUrl,CalendarUrl,DocumentsUrl,SiteUrl,EditGroupUrl,PictureUrl,PeopleUrl,NotebookUrl,Mail,IsPublic,CreationTime,Classification,yammerResources,teamsResources,allowToAddGuests,isDynamic`;
         const httpClientOptions: ISPHttpClientOptions = {};
         const response: SPHttpClientResponse = await this.props.context.spHttpClient.fetch(restQuery, SPHttpClient.configurations.v1, httpClientOptions);
         const responseJson: any = await response.json();
@@ -88,6 +103,16 @@ export default class GroupDirectLinks extends React.Component<IGroupDirectLinksP
             peopleUrl: responseJson.peopleUrl
         };
 
+        if (responseJson.yammerResources && responseJson.yammerResources.length > 0) {
+            data.yammerUrl = responseJson.yammerResources[0].Value;
+        }
+
+        if (responseJson.teamsResources && responseJson.teamsResources.length > 0) {
+            data.teamsUrl = responseJson.teamsResources[0].Value;
+        }
+
+        console.log("GroupDirectLinksApplicationCustomizer", data);
+
         return data;
     }
 }
diff --git a/...ct-application-grouplinks/src/extensions/groupDirectLinks/components/IGroupDirectLinks.ts b/...ct-application-grouplinks/src/extensions/groupDirectLinks/components/IGroupDirectLinks.ts
@@ -17,4 +17,6 @@ export interface IGroupDirectLinksInfo {
   isPublic?: boolean;
   notebookUrl?: string;
   peopleUrl?: string;
+  yammerUrl?: string;
+  teamsUrl?: string;
 }