graph and sp calls

package-lock.json

@@ -744,6 +744,11 @@
         "isomorphic-fetch": "^2.2.1"
       }
     },
+    "@microsoft/microsoft-graph-types": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-types/-/microsoft-graph-types-1.7.0.tgz",
+      "integrity": "sha512-Mxu5H+69F8T5NzV4+U8FkTvpIYYWHsmRZzfAuOlIO0zJJGlVyRIVqpq4NmOdUXGC00vZ73ONgCuzuaksxqDm/Q=="
+    },
     "@microsoft/node-core-library": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/@microsoft/node-core-library/-/node-core-library-3.4.0.tgz",
@@ -1573,6 +1578,88 @@
       "integrity": "sha512-bdozNnQXIKZgT3fjCcOYSZSpH7zuh+Turv8uQxzXTj5G8AzgTJ/X3GnrYDbliXKgefL8LJeIj4vwdrOnt1J+Ng==",
       "dev": true
     },
+    "@pnp/common": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@pnp/common/-/common-1.3.6.tgz",
+      "integrity": "sha512-o81CC685vdcwTbLkNe89y2pc3xqyq0dMqhI5F0dJhZE0D7NNhyYAPhVjpS+yRLwALDgMTMpkghKAOCrtHGXcOw==",
+      "requires": {
+        "adal-angular": "1.0.17",
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "adal-angular": {
+          "version": "1.0.17",
+          "resolved": "https://registry.npmjs.org/adal-angular/-/adal-angular-1.0.17.tgz",
+          "integrity": "sha1-bpNuDkH5HTsqiOf/ypwvb29WLMQ="
+        },
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
+      }
+    },
+    "@pnp/graph": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@pnp/graph/-/graph-1.3.6.tgz",
+      "integrity": "sha512-23dDwV9XpbweDshW8e5AprMxVwXnNvIq+MWdslHKRp8HsnBacKL/4QRSprB1SLwVkXRIMr5Th1Kw3IVOUNYk1w==",
+      "requires": {
+        "@microsoft/microsoft-graph-types": "1.7.0",
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
+      }
+    },
+    "@pnp/logging": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@pnp/logging/-/logging-1.3.6.tgz",
+      "integrity": "sha512-LM/WYAd4YjhBub4C6PkNKc1r1F+lqr6lSTYokTOg4srJsvcyhXiJ++cB80YrOEqDvifbzR9WZWWm480+IzD9cA==",
+      "requires": {
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
+      }
+    },
+    "@pnp/odata": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@pnp/odata/-/odata-1.3.6.tgz",
+      "integrity": "sha512-5WM8GQQ3C+wOzBXFcEZKZM9P1G4tWu+aL0CXuk6tTSs8rojs73hXB7QyOWA+HSF72iXyBdPaaaJ47js9Q+nD1g==",
+      "requires": {
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
+      }
+    },
+    "@pnp/sp": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@pnp/sp/-/sp-1.3.6.tgz",
+      "integrity": "sha512-JGFefu/r0Y9UcG5Vah7cK0VoH/o/9MnoAGZLb3gYbUSAxaqlOuz1QaD5WT9BLJhKCwqa4yeiS1T2rJceJzBI0w==",
+      "requires": {
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
+      }
+    },
     "@pnpm/link-bins": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@pnpm/link-bins/-/link-bins-1.0.3.tgz",

package.json

@@ -11,16 +11,21 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "react": "16.3.2",
-    "react-dom": "16.3.2",
-    "@types/react": "16.4.2",
-    "@types/react-dom": "16.0.5",
     "@microsoft/sp-core-library": "1.7.1",
-    "@microsoft/sp-webpart-base": "1.7.1",
     "@microsoft/sp-lodash-subset": "1.7.1",
     "@microsoft/sp-office-ui-fabric-core": "1.7.1",
+    "@microsoft/sp-webpart-base": "1.7.1",
+    "@pnp/common": "^1.3.6",
+    "@pnp/graph": "^1.3.6",
+    "@pnp/logging": "^1.3.6",
+    "@pnp/odata": "^1.3.6",
+    "@pnp/sp": "^1.3.6",
+    "@types/es6-promise": "0.0.33",
+    "@types/react": "16.4.2",
+    "@types/react-dom": "16.0.5",
     "@types/webpack-env": "1.13.1",
-    "@types/es6-promise": "0.0.33"
+    "react": "16.3.2",
+    "react-dom": "16.3.2"
   },
   "resolutions": {
     "@types/react": "16.4.2"

src/webparts/reactTeamsTabsPnpjs/ReactTeamsTabsPnpjsWebPart.ts

@@ -10,6 +10,10 @@ import {
 import * as strings from 'ReactTeamsTabsPnpjsWebPartStrings';
 import ReactTeamsTabsPnpjs from './components/ReactTeamsTabsPnpjs';
 import { IReactTeamsTabsPnpjsProps } from './components/IReactTeamsTabsPnpjsProps';
+import { graph } from "@pnp/graph";
+import { sp } from "@pnp/sp";
+
+
 
 export interface IReactTeamsTabsPnpjsWebPartProps {
   description: string;
@@ -17,6 +21,19 @@ export interface IReactTeamsTabsPnpjsWebPartProps {
 
 export default class ReactTeamsTabsPnpjsWebPart extends BaseClientSideWebPart<IReactTeamsTabsPnpjsWebPartProps> {
 
+  public onInit(): Promise<void> {
+
+    return super.onInit().then(_ => {
+      sp.setup({
+        spfxContext: this.context
+      });
+
+      graph.setup({
+        spfxContext: this.context
+      });
+    });
+  }
+
   public render(): void {
     const element: React.ReactElement<IReactTeamsTabsPnpjsProps > = React.createElement(
       ReactTeamsTabsPnpjs,

src/webparts/reactTeamsTabsPnpjs/components/ReactTeamsTabsHelper.ts

@@ -0,0 +1,48 @@
+import {
+  ClientSideText,
+  ClientSideWebpart,
+  sp,
+  ClientSidePage
+} from "@pnp/sp";
+import { graph, Channel, Channels } from "@pnp/graph";
+
+
+
+
+export class ReactTeamsTabsHelper {
+
+  public static async getGroupId(): Promise<string> {
+
+    var id: string = "";
+
+    var props: any = await sp.web.select("AllProperties")
+      .expand("AllProperties")
+      .get();
+
+    if (props.AllProperties["GroupId"] != null) {
+      id = props.AllProperties["GroupId"];
+    }
+    return id;
+  }
+
+  public static async getChannels(groupId: string): Promise<any[]> {
+
+    var channels: any[]= [];
+
+    channels = await graph.teams.getById(groupId).channels.get();
+
+    return channels;
+  }
+
+  public static async getTabsFromChannel(groupId: string, channelId: string): Promise<any[]> {
+
+    var tabs: any[] = [];
+
+    tabs = await graph.teams.getById(groupId).channels.getById(channelId)
+      .tabs
+      .get();
+
+    return  tabs;
+  }
+
+}

src/webparts/reactTeamsTabsPnpjs/components/ReactTeamsTabsPnpjs.module.scss

@@ -26,27 +26,35 @@
     box-sizing: 'border-box';
     //border: 1px solid;
     display: 'flex';
-    background : $ms-color-themeDarkAlt;
+    //background : $ms-color-themeDarkAlt;
+    background : rgb(196, 195, 195);
+
   }
 
   .itemCell:hover{
-    background : $ms-color-themeDarker;
+    background : rgb(160, 160, 160);
-  }
+    color : white;
-  .itemIndex {
-    font-size : initial;
-    //color : $ms-color-neutralTertiary;
-    margin-bottom : 10;
   }
 
+
   .tablink{
-    color : $ms-color-neutralTertiary;
+    //color : $ms-color-neutralTertiary;
+     margin-bottom : 10;
+     color : rgb(77, 77, 77);
+     font-weight: bold;
+  }
+
+  .tablink:hover{
+    //color : $ms-color-neutralTertiary;
+    text-decoration: underline;
     margin-bottom : 10;
+    color : white;
   }
 
   .row {
     @include ms-Grid-row;
-    @include ms-fontColor-white;
+    //@include ms-fontColor-white;
-    background-color: $ms-color-themeDark;
+    //background-color: $ms-color-themeDark;
     padding: 20px;
   }
 
@@ -60,17 +68,17 @@
 
   .title {
     @include ms-font-xl;
-    @include ms-fontColor-white;
+    //@include ms-fontColor-white;
   }
 
   .subTitle {
     @include ms-font-l;
-    @include ms-fontColor-white;
+    //@include ms-fontColor-white;
   }
 
   .description {
     @include ms-font-l;
-    @include ms-fontColor-white;
+    //@include ms-fontColor-white;
   }
 
 

src/webparts/reactTeamsTabsPnpjs/components/ReactTeamsTabsPnpjs.tsx

@@ -7,7 +7,8 @@ import { Pivot, PivotItem, IPivotProps, PivotLinkSize, PivotLinkFormat } from 'o
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import { List } from 'office-ui-fabric-react/lib/List';
 import { Link } from 'office-ui-fabric-react/lib/Link';
-import { ITheme, mergeStyleSets, getTheme, getFocusStyle } from 'office-ui-fabric-react/lib/Styling';
+import { sp } from "@pnp/sp";
+import { ReactTeamsTabsHelper } from './ReactTeamsTabsHelper';
 
 
 export interface IReactTeamsTabsPnpjsState {
@@ -20,20 +21,6 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
     this.state = {
       pivotArray: []
     };
-
-
-    // sp.web.lists.getByTitle("Site Pages").items.filter("Is_x0020_Model eq 1").select("Title,FileRef").getAll().then((items: any[]) => {
-    //   var tmpItems: any[] = new Array();
-    //
-    //   //DropDown initialization
-    //   items.forEach(element => {
-    //     var item = { key: element["FileRef"], text: element["Title"] };
-    //     tmpItems.push(item);
-    //   });
-    //
-    //   this.setState({ allItems: tmpItems });
-    // });
-
     this._onRenderTabItem = this._onRenderTabItem.bind(this);
 
   }
@@ -45,7 +32,7 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
           <div className={styles.row}>
             <div className={styles.column}>
               <div>
-                <Pivot linkSize={PivotLinkSize.large} linkFormat={PivotLinkFormat.tabs}>{this.state.pivotArray}</Pivot>
+                <Pivot linkSize={PivotLinkSize.large} >{this.state.pivotArray}</Pivot>
               </div>
             </div>
           </div>
@@ -54,23 +41,44 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
     );
   }
   public componentDidMount() {
-    var activeTasks: any[] = [];
-    var tmPpivotArray: any[] = [];
 
 
-    activeTasks.push({ name: 'a name', description: 'a desc' });
+    var groupId: Promise<string> = ReactTeamsTabsHelper.getGroupId();
-    activeTasks.push({ name: 'b name', description: 'b desc' });
-    activeTasks.push({ name: 'c name', description: 'c desc' });
 
-    tmPpivotArray.push(this._renderPivotItemList(activeTasks, "test1"));
+    groupId.then(group => {
-    tmPpivotArray.push(this._renderPivotItemList(activeTasks, "test2"));
+      console.log("GroupID: " + group);
-    tmPpivotArray.push(this._renderPivotItemList(activeTasks, "test3"));
+      var tmpChannels: any[] = [];
+      if (group != "") {
+        var channels: Promise<any[]> = ReactTeamsTabsHelper.getChannels(group);
+
+        channels.then(chans => {
+          console.log("Channels " + chans.length);
+          chans.forEach(channel => {
+            var tabs: Promise<any[]> = ReactTeamsTabsHelper.getTabsFromChannel(group, channel.id);
+            var tmpTabs: any[] = [];
+            tabs.then(itemTabs => {
+              console.log("Channel" + channel.displayName + "tabs " + itemTabs.length);
+              itemTabs.forEach(tab => {
+                tmpTabs.push({ name: tab.displayName, tabURL: tab.webUrl });
+              });
+              tmpChannels.push(this._renderPivotItemList(tmpTabs, channel.displayName));
+              this.setState({ pivotArray: tmpChannels });
+            });
+          });
+        });
+
+      } else {
+        //TODO show generic message, because there is not a team linked to current site
+      }
+
+
+
+    });
 
 
-    this.setState({ pivotArray: tmPpivotArray });
   }
 
-  private _renderPivotItemList(channels: any[], tabName: string){
+  private _renderPivotItemList(channels: any[], tabName: string) {
     return (
       <PivotItem headerText={`${tabName} (${channels.length})`}>
         <FocusZone direction={FocusZoneDirection.vertical} >
@@ -85,8 +93,7 @@ export default class ReactTeamsTabsPnpjs extends React.Component<IReactTeamsTabs
       <div className={styles.itemCell} data-is-focusable={true}>
         <div className={styles.itemContent}>
           <div className={styles.itemName}>{item.name}</div>
-          <Link className={styles.tablink} href="http://dev.office.com/fabric/components/link" target="_blank">it renders as an anchor tag.</Link>
+          <Link className={styles.tablink} href={item.tabURL} target="_blank">{item.name}</Link>
-          <div className={styles.subTitle}>{item.description}</div>
         </div>
       </div>
     );