{
+ return (
+
+
My Office 365 Groups
+ this._onRenderItem(item, index)}/>
+
+ );
+ }
+
+ public componentDidMount (): void {
+ this._getGroups();
+ }
+
+ public _getGroups = (): void => {
+ GroupService.getGroups().then(groups => {
+ // console.log(groups);
+ this.setState({
+ groups: groups
+ });
+ this._getGroupLinks(groups);
+ });
+ }
+
+ public _getGroupLinks = (groups: any): void => {
+ groups.map(groupItem => (
+ GroupService.getGroupLinks(groupItem).then(groupurl => {
+ // 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 (
+
+ );
+ }
+
+}
diff --git a/samples/react-my-groups/src/webparts/reactMyGroups/components/reactMyGroups/index.ts b/samples/react-my-groups/src/webparts/reactMyGroups/components/reactMyGroups/index.ts
new file mode 100644
index 000000000..9e49b9ab6
--- /dev/null
+++ b/samples/react-my-groups/src/webparts/reactMyGroups/components/reactMyGroups/index.ts
@@ -0,0 +1,3 @@
+export * from './IReactMyGroupsProps';
+export * from './ReactMyGroups';
+export * from './IReactMyGroupsState';
diff --git a/samples/react-my-groups/src/webparts/reactMyGroups/loc/en-us.js b/samples/react-my-groups/src/webparts/reactMyGroups/loc/en-us.js
new file mode 100644
index 000000000..89f98bc1e
--- /dev/null
+++ b/samples/react-my-groups/src/webparts/reactMyGroups/loc/en-us.js
@@ -0,0 +1,7 @@
+define([], function() {
+ return {
+ "PropertyPaneDescription": "Description",
+ "BasicGroupName": "Group Name",
+ "DescriptionFieldLabel": "Description Field"
+ }
+});
\ No newline at end of file
diff --git a/samples/react-my-groups/src/webparts/reactMyGroups/loc/mystrings.d.ts b/samples/react-my-groups/src/webparts/reactMyGroups/loc/mystrings.d.ts
new file mode 100644
index 000000000..ad3622d50
--- /dev/null
+++ b/samples/react-my-groups/src/webparts/reactMyGroups/loc/mystrings.d.ts
@@ -0,0 +1,10 @@
+declare interface IReactMyGroupsWebPartStrings {
+ PropertyPaneDescription: string;
+ BasicGroupName: string;
+ DescriptionFieldLabel: string;
+}
+
+declare module 'ReactMyGroupsWebPartStrings' {
+ const strings: IReactMyGroupsWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-my-groups/teams/1b857fd9-5268-4112-8241-da46dd8d9d53_color.png b/samples/react-my-groups/teams/1b857fd9-5268-4112-8241-da46dd8d9d53_color.png
new file mode 100644
index 000000000..a8d279707
Binary files /dev/null and b/samples/react-my-groups/teams/1b857fd9-5268-4112-8241-da46dd8d9d53_color.png differ
diff --git a/samples/react-my-groups/teams/1b857fd9-5268-4112-8241-da46dd8d9d53_outline.png b/samples/react-my-groups/teams/1b857fd9-5268-4112-8241-da46dd8d9d53_outline.png
new file mode 100644
index 000000000..6df4a038d
Binary files /dev/null and b/samples/react-my-groups/teams/1b857fd9-5268-4112-8241-da46dd8d9d53_outline.png differ
diff --git a/samples/react-my-groups/tsconfig.json b/samples/react-my-groups/tsconfig.json
new file mode 100644
index 000000000..131c5bb80
--- /dev/null
+++ b/samples/react-my-groups/tsconfig.json
@@ -0,0 +1,38 @@
+{
+ "extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json",
+ "compilerOptions": {
+ "target": "es5",
+ "forceConsistentCasingInFileNames": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "jsx": "react",
+ "declaration": true,
+ "sourceMap": true,
+ "experimentalDecorators": true,
+ "skipLibCheck": true,
+ "outDir": "lib",
+ "inlineSources": false,
+ "strictNullChecks": false,
+ "noUnusedLocals": false,
+ "typeRoots": [
+ "./node_modules/@types",
+ "./node_modules/@microsoft"
+ ],
+ "types": [
+ "es6-promise",
+ "webpack-env"
+ ],
+ "lib": [
+ "es5",
+ "dom",
+ "es2015.collection"
+ ]
+ },
+ "include": [
+ "src/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules",
+ "lib"
+ ]
+}
diff --git a/samples/react-my-groups/tslint.json b/samples/react-my-groups/tslint.json
new file mode 100644
index 000000000..23fa2aa43
--- /dev/null
+++ b/samples/react-my-groups/tslint.json
@@ -0,0 +1,30 @@
+{
+ "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+ "rules": {
+ "class-name": false,
+ "export-name": false,
+ "forin": false,
+ "label-position": false,
+ "member-access": true,
+ "no-arg": false,
+ "no-console": false,
+ "no-construct": false,
+ "no-duplicate-variable": true,
+ "no-eval": false,
+ "no-function-expression": true,
+ "no-internal-module": true,
+ "no-shadowed-variable": true,
+ "no-switch-case-fall-through": true,
+ "no-unnecessary-semicolons": true,
+ "no-unused-expression": true,
+ "no-use-before-declare": true,
+ "no-with-statement": true,
+ "semicolon": true,
+ "trailing-comma": false,
+ "typedef": false,
+ "typedef-whitespace": false,
+ "use-named-parameter": true,
+ "variable-name": false,
+ "whitespace": false
+ }
+}
\ No newline at end of file