Added styling to groups and function to get group thumbnails

package-lock.json

@@ -6519,8 +6519,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "delegates": "1.0.0",
+            "delegates": "^1.0.0",
-            "readable-stream": "2.3.6"
+            "readable-stream": "^2.0.6"
           }
         },
         "balanced-match": {
@@ -6535,7 +6535,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "balanced-match": "1.0.0",
+            "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
           }
         },
@@ -6575,7 +6575,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "ms": "2.1.1"
+            "ms": "^2.1.1"
           }
         },
         "deep-extend": {
@@ -6602,7 +6602,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "minipass": "2.3.5"
+            "minipass": "^2.2.1"
           }
         },
         "fs.realpath": {
@@ -6617,14 +6617,14 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "aproba": "1.2.0",
+            "aproba": "^1.0.3",
-            "console-control-strings": "1.1.0",
+            "console-control-strings": "^1.0.0",
-            "has-unicode": "2.0.1",
+            "has-unicode": "^2.0.0",
-            "object-assign": "4.1.1",
+            "object-assign": "^4.1.0",
-            "signal-exit": "3.0.2",
+            "signal-exit": "^3.0.0",
-            "string-width": "1.0.2",
+            "string-width": "^1.0.1",
-            "strip-ansi": "3.0.1",
+            "strip-ansi": "^3.0.1",
-            "wide-align": "1.1.3"
+            "wide-align": "^1.1.0"
           }
         },
         "glob": {
@@ -6633,12 +6633,12 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "fs.realpath": "1.0.0",
+            "fs.realpath": "^1.0.0",
-            "inflight": "1.0.6",
+            "inflight": "^1.0.4",
-            "inherits": "2.0.3",
+            "inherits": "2",
-            "minimatch": "3.0.4",
+            "minimatch": "^3.0.4",
-            "once": "1.4.0",
+            "once": "^1.3.0",
-            "path-is-absolute": "1.0.1"
+            "path-is-absolute": "^1.0.0"
           }
         },
         "has-unicode": {
@@ -6653,7 +6653,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "safer-buffer": "2.1.2"
+            "safer-buffer": ">= 2.1.2 < 3"
           }
         },
         "ignore-walk": {
@@ -6662,7 +6662,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "minimatch": "3.0.4"
+            "minimatch": "^3.0.4"
           }
         },
         "inflight": {
@@ -6671,8 +6671,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "once": "1.4.0",
+            "once": "^1.3.0",
-            "wrappy": "1.0.2"
+            "wrappy": "1"
           }
         },
         "inherits": {
@@ -6693,7 +6693,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "number-is-nan": "1.0.1"
+            "number-is-nan": "^1.0.0"
           }
         },
         "isarray": {
@@ -6708,7 +6708,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "brace-expansion": "1.1.11"
+            "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
@@ -6723,8 +6723,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "safe-buffer": "5.1.2",
+            "safe-buffer": "^5.1.2",
-            "yallist": "3.0.3"
+            "yallist": "^3.0.0"
           }
         },
         "minizlib": {
@@ -6733,7 +6733,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "minipass": "2.3.5"
+            "minipass": "^2.2.1"
           }
         },
         "mkdirp": {
@@ -6757,9 +6757,9 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "debug": "4.1.1",
+            "debug": "^4.1.0",
-            "iconv-lite": "0.4.24",
+            "iconv-lite": "^0.4.4",
-            "sax": "1.2.4"
+            "sax": "^1.2.4"
           }
         },
         "node-pre-gyp": {
@@ -6768,16 +6768,16 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "detect-libc": "1.0.3",
+            "detect-libc": "^1.0.2",
-            "mkdirp": "0.5.1",
+            "mkdirp": "^0.5.1",
-            "needle": "2.3.0",
+            "needle": "^2.2.1",
-            "nopt": "4.0.1",
+            "nopt": "^4.0.1",
-            "npm-packlist": "1.4.1",
+            "npm-packlist": "^1.1.6",
-            "npmlog": "4.1.2",
+            "npmlog": "^4.0.2",
-            "rc": "1.2.8",
+            "rc": "^1.2.7",
-            "rimraf": "2.6.3",
+            "rimraf": "^2.6.1",
-            "semver": "5.7.0",
+            "semver": "^5.3.0",
-            "tar": "4.4.8"
+            "tar": "^4"
           }
         },
         "nopt": {
@@ -6786,8 +6786,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "abbrev": "1.1.1",
+            "abbrev": "1",
-            "osenv": "0.1.5"
+            "osenv": "^0.1.4"
           }
         },
         "npm-bundled": {
@@ -6802,8 +6802,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "ignore-walk": "3.0.1",
+            "ignore-walk": "^3.0.1",
-            "npm-bundled": "1.0.6"
+            "npm-bundled": "^1.0.1"
           }
         },
         "npmlog": {
@@ -6812,10 +6812,10 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "are-we-there-yet": "1.1.5",
+            "are-we-there-yet": "~1.1.2",
-            "console-control-strings": "1.1.0",
+            "console-control-strings": "~1.1.0",
-            "gauge": "2.7.4",
+            "gauge": "~2.7.3",
-            "set-blocking": "2.0.0"
+            "set-blocking": "~2.0.0"
           }
         },
         "number-is-nan": {
@@ -6836,7 +6836,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "wrappy": "1.0.2"
+            "wrappy": "1"
           }
         },
         "os-homedir": {
@@ -6857,8 +6857,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "os-homedir": "1.0.2",
+            "os-homedir": "^1.0.0",
-            "os-tmpdir": "1.0.2"
+            "os-tmpdir": "^1.0.0"
           }
         },
         "path-is-absolute": {
@@ -6879,10 +6879,10 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "deep-extend": "0.6.0",
+            "deep-extend": "^0.6.0",
-            "ini": "1.3.5",
+            "ini": "~1.3.0",
-            "minimist": "1.2.0",
+            "minimist": "^1.2.0",
-            "strip-json-comments": "2.0.1"
+            "strip-json-comments": "~2.0.1"
           },
           "dependencies": {
             "minimist": {
@@ -6899,13 +6899,13 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "core-util-is": "1.0.2",
+            "core-util-is": "~1.0.0",
-            "inherits": "2.0.3",
+            "inherits": "~2.0.3",
-            "isarray": "1.0.0",
+            "isarray": "~1.0.0",
-            "process-nextick-args": "2.0.0",
+            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "5.1.2",
+            "safe-buffer": "~5.1.1",
-            "string_decoder": "1.1.1",
+            "string_decoder": "~1.1.1",
-            "util-deprecate": "1.0.2"
+            "util-deprecate": "~1.0.1"
           }
         },
         "rimraf": {
@@ -6914,7 +6914,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "glob": "7.1.3"
+            "glob": "^7.1.3"
           }
         },
         "safe-buffer": {
@@ -6959,9 +6959,9 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "code-point-at": "1.1.0",
+            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "3.0.1"
+            "strip-ansi": "^3.0.0"
           }
         },
         "string_decoder": {
@@ -6970,7 +6970,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "safe-buffer": "5.1.2"
+            "safe-buffer": "~5.1.0"
           }
         },
         "strip-ansi": {
@@ -6979,7 +6979,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "ansi-regex": "2.1.1"
+            "ansi-regex": "^2.0.0"
           }
         },
         "strip-json-comments": {
@@ -6994,13 +6994,13 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "chownr": "1.1.1",
+            "chownr": "^1.1.1",
-            "fs-minipass": "1.2.5",
+            "fs-minipass": "^1.2.5",
-            "minipass": "2.3.5",
+            "minipass": "^2.3.4",
-            "minizlib": "1.2.1",
+            "minizlib": "^1.1.1",
-            "mkdirp": "0.5.1",
+            "mkdirp": "^0.5.0",
-            "safe-buffer": "5.1.2",
+            "safe-buffer": "^5.1.2",
-            "yallist": "3.0.3"
+            "yallist": "^3.0.2"
           }
         },
         "util-deprecate": {
@@ -7015,7 +7015,7 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "string-width": "1.0.2"
+            "string-width": "^1.0.2 || 2"
           }
         },
         "wrappy": {

src/services/GroupService.ts

@@ -2,6 +2,8 @@ import { MSGraphClient } from "@microsoft/sp-http";
 import * as MicrosoftGraph from "@microsoft/microsoft-graph-types";
 import { WebPartContext } from "@microsoft/sp-webpart-base";
 import { IGroup, IGroupCollection } from "../models";
+import { GraphRequest } from "@microsoft/microsoft-graph-client";
+
 
 export class GroupServiceManager {
   public context: WebPartContext;
@@ -46,6 +48,25 @@ export class GroupServiceManager {
     });
   }
 
+  public getGroupThumbnails(groups: IGroup): Promise<any> {
+    return new Promise<any>((resolve, reject) => {
+      try {
+        this.context.msGraphClientFactory
+        .getClient()
+        .then((client: MSGraphClient) => {
+          client
+          .api(`/groups/${groups.id}/photos/48x48/$value`)
+          .responseType('blob')
+          .get((error: any, group: any, rawResponse: any) => {
+            resolve(window.URL.createObjectURL(group));
+          });
+        });
+      } catch(error) {
+        console.error(error);
+      }
+    });
+  }
+
 }
 
 const GroupService = new GroupServiceManager();

src/webparts/reactMyGroups/components/GroupList/GroupList.module.scss

@@ -0,0 +1,49 @@
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
+
+:export {
+  padding: 20;
+  minWidth: 210;
+  maxWidth: 320;
+  rowsPerPage: 3;
+}
+
+.compactLayout {
+  overflow: hidden;
+  font-size: 0;
+  position: relative;
+  background-color: transparent;
+
+  :global(.ms-DocumentCard) {
+    position: relative;
+    background-color: $ms-color-white;
+    height: 100%;
+
+    &:global(.ms-DocumentCard--compact), &:global(.ms-DocumentCard--actionable) {
+      border: none;
+
+      :global(.ms-DocumentCardPreview) {
+        -ms-flex-negative: 0;
+        flex-shrink: 0;
+        width: 48px;
+      }
+
+      :global(.ms-DocumentCardTitle) {
+        font-weight: 400;
+      }
+
+      &:hover {
+        border: none;
+
+        &::after {
+          border:none;
+        }
+      }
+    }
+  }
+
+  :global(.ms-List-cell) {
+    vertical-align: top;
+    display: inline-block;
+    margin-bottom: 20px;
+  }
+}

src/webparts/reactMyGroups/components/GroupList/GroupList.tsx

@@ -1,16 +1,73 @@
 import * as React from 'react';
 import { IGroupListProps } from './IGroupListProps';
+import { List, FocusZone, FocusZoneDirection } from 'office-ui-fabric-react';
+import { IRectangle } from 'office-ui-fabric-react/lib/Utilities';
+import styles from './GroupList.module.scss';
+
+const ROWS_PER_PAGE: number = +styles.rowsPerPage;
+const MAX_ROW_HEIGHT: number = +styles.maxWidth;
+const PADDING: number = +styles.padding;
+const MIN_WIDTH: number = +styles.minWidth;
 
 export class GroupList extends React.Component<IGroupListProps, {}> {
 
+  private _columnCount: number;
+  private _columnWidth: number;
+  private _rowHeight: number;
+
   public render(): React.ReactElement<IGroupListProps> {
+
+
     return (
-      <div>
+      <div role="group">
-        <ul>
+        <FocusZone
-          {this.props.groups.map(group => (
+          direction={FocusZoneDirection.horizontal}
-            <li><a href={group.url}>{group.displayName}</a></li>
+          isCircularNavigation={false}
-          ))}
+        >
-        </ul>
+          <List
+            className={styles.compactLayout}
+            items={this.props.groups}
+            getItemCountForPage={this._getItemCountForPage}
+            getPageHeight={this._getPageHeight}
+            onRenderCell={this._onRenderCell}
+          />
+        </FocusZone>
+      </div>
+      // <div>
+      //   <ul>
+      //     {this.props.groups.map(group => (
+      //       <li><a href={group.url}>{group.displayName}</a></li>
+      //     ))}
+      //   </ul>
+      // </div>
+    );
+  }
+
+  private _getItemCountForPage = (itemIndex: number, surfaceRect: IRectangle): number => {
+    if (itemIndex === 0) {
+      this._columnCount = Math.ceil(surfaceRect.width / (MAX_ROW_HEIGHT));
+      this._columnWidth = Math.max(MIN_WIDTH, Math.floor(surfaceRect.width / this._columnCount) + Math.floor(PADDING / this._columnCount));
+      this._rowHeight = this._columnWidth;
+    }
+
+    return this._columnCount * ROWS_PER_PAGE;
+  }
+
+  private _getPageHeight = (): number => {
+    return this._rowHeight * ROWS_PER_PAGE;
+  }
+
+  private _onRenderCell = (item: any, index: number | undefined): JSX.Element => {
+    const cellPadding: number = index % this._columnCount !== this._columnCount - 1 &&  PADDING;
+    const cellWidth: number = this._columnWidth - PADDING;
+    return (
+      <div
+        style={{
+          width: `${cellWidth}px`,
+          marginRight: `${cellPadding}px`
+        }}
+      >
+        {this.props.onRenderItem(item, index)}
       </div>
     );
   }

src/webparts/reactMyGroups/components/GroupList/IGroupListProps.ts

@@ -1,3 +1,4 @@
 export interface IGroupListProps {
   groups?: any[];
+  onRenderItem: (item: any, index: number) => JSX.Element;
 }

src/webparts/reactMyGroups/components/reactMyGroups/ReactMyGroups.tsx

@@ -6,6 +6,7 @@ import GroupService from '../../../../services/GroupService';
 import { IReactMyGroupsState } from './IReactMyGroupsState';
 import { GroupList } from '../GroupList';
 import { IGroup } from '../../../../models';
+import { DocumentCard, DocumentCardType, DocumentCardDetails, DocumentCardTitle, IDocumentCardPreviewProps, ImageFit, DocumentCardPreview } from 'office-ui-fabric-react';
 
 export class ReactMyGroups extends React.Component<IReactMyGroupsProps, IReactMyGroupsState> {
 
@@ -22,7 +23,7 @@ export class ReactMyGroups extends React.Component<IReactMyGroupsProps, IReactMy
     return (
       <div className={ styles.reactMyGroups }>
         <h1>My Office 365 Groups</h1>
-          <GroupList groups={this.state.groups} />
+          <GroupList groups={this.state.groups} onRenderItem={(item: any, index: number) => this._onRenderItem(item, index)}/>
       </div>
     );
   }
@@ -33,7 +34,7 @@ export class ReactMyGroups extends React.Component<IReactMyGroupsProps, IReactMy
 
   public _getGroups = (): void => {
     GroupService.getGroups().then(groups => {
-      console.log(groups);
+      // console.log(groups);
       this.setState({
         groups: groups
       });
@@ -44,12 +45,51 @@ export class ReactMyGroups extends React.Component<IReactMyGroupsProps, IReactMy
   public _getGroupLinks = (groups: any): void => {
     groups.map(groupItem => (
       GroupService.getGroupLinks(groupItem).then(groupurl => {
-        console.log(groupurl.value);
+        // console.log(groupurl.value);
         this.setState(prevState => ({
           groups: prevState.groups.map(group => group.id === groupItem.id ? {...group, url: groupurl.value} : group)
         }));
       })
     ));
+    this._getGroupThumbnails(groups);
+  }
+
+  public _getGroupThumbnails = (groups: any): void => {
+    groups.map(groupItem => (
+      GroupService.getGroupThumbnails(groupItem).then(grouptb => {
+        console.log(grouptb);
+        this.setState(prevState => ({
+          groups: prevState.groups.map(group => group.id === groupItem.id ? {...group, thumbnail: grouptb} : group)
+        }));
+      })
+    ));
+  }
+
+  private _onRenderItem = (item: any, index: number): JSX.Element => {
+    const previewProps: IDocumentCardPreviewProps = {
+      previewImages: [
+        {
+          previewImageSrc: item.thumbnail,
+          imageFit: ImageFit.center,
+          height: 48,
+          width: 48
+        }
+      ]
+    };
+    return (
+      <div>
+        <DocumentCard
+          type={DocumentCardType.compact}
+        >
+          <DocumentCardPreview {...previewProps} />
+          <DocumentCardDetails>
+            <DocumentCardTitle 
+              title={item.displayName}
+            />
+          </DocumentCardDetails>
+        </DocumentCard>
+      </div>
+    );
   }
 
 }