Commit First Release

2020-08-06 17:27:46 +01:00 · 2020-08-06 17:27:46 +01:00 · e67d2fd6b1
parent 726bf8a47a
commit e67d2fd6b1
50 changed files with 22664 additions and 1 deletions
--- a/samples/js-workbench-customizer/package-lock.json
+++ b/samples/js-workbench-customizer/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "workbench-customizer",
-  "version": "1.3.0",
+  "version": "1.4.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/samples/react-directory/src/SPServices/._spservices.ts
+++ b/samples/react-directory/src/SPServices/._spservices.ts
--- a/samples/react-my-sites/.editorconfig
+++ b/samples/react-my-sites/.editorconfig
@ -0,0 +1,25 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# we recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{package,bower}.json]
+indent_style = space
+indent_size = 2
--- a/samples/react-my-sites/.gitignore
+++ b/samples/react-my-sites/.gitignore
@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+solution
+temp
+*.sppkg
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts
--- a/samples/react-my-sites/.yo-rc.json
+++ b/samples/react-my-sites/.yo-rc.json
@ -0,0 +1,34 @@
+{
+  "@pnp/generator-spfx": {
+    "framework": "react",
+    "pnpFramework": "reactjs.plus",
+    "pnp-libraries": [
+      "jquery@3",
+      "msgraph",
+      "@pnp/pnpjs",
+      "@pnp/spfx-property-controls",
+      "spfx-uifabric-themes",
+      "lodash",
+      "@pnp/spfx-controls-react",
+      "ouifr@7",
+      "rush@3.7"
+    ],
+    "pnp-ci": "azure-preview",
+    "pnp-vetting": [],
+    "spfxenv": "spo",
+    "pnp-testing": [
+      "jest"
+    ]
+  },
+  "@microsoft/generator-sharepoint": {
+    "environment": "spo",
+    "framework": "react",
+    "isCreatingSolution": true,
+    "version": "1.11.0",
+    "libraryName": "react-my-sites",
+    "libraryId": "ad28b382-886b-4b2a-9646-92de8a0b1d13",
+    "packageManager": "npm",
+    "isDomainIsolated": false,
+    "componentType": "webpart"
+  }
+}
--- a/samples/react-my-sites/README.md
+++ b/samples/react-my-sites/README.md
@ -0,0 +1,80 @@
+---
+page_type: sample
+products:
+- office-sp
+languages:
+- javascript
+- typescript
+extensions:
+  contentType: samples
+  technologies:
+  - SharePoint Framework
+  - Microsoft Graph
+  platforms:
+  - React
+  createdDate: 4/9/2020 12:00:00 AM
+---
+
+# React My Sites
+
+## Summary
+
+This web part shows sites that user has permissions to access. It includes Office 365 Groups, OneDrive Sites, SharePoint Sites and  App Sites created by SharePoint Add-ins.
+
+Each Site has a symbol indicate if it is SharePoint Site, Group, Group and OnDrive.
+If the Group has a microsoft team associated and user has permissions to access the symbol of teams will be displayed.
+  
+
+![MySites](./assets/MySites.gif)
+
+![MySites](./assets/Screenshot%202020-08-06%20at%2013.50.51.png)
+
+![Birthdays Web Part](./assets/Screenshot%202020-08-06%20at%2013.52.58.png)
+
+![PersonalApps](./assets/Screenshot%202020-08-06%20at%2014.17.35.png)
+
+
+
+## Used SharePoint Framework Version
+
+![1.11.0](https://img.shields.io/badge/version-1.11.0-green.svg)
+
+## Applies to
+
+* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+react-my-sites|João Mendes
+
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0.0|August 6, 2020|Initial release
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+---
+
+## Minimal Path to Awesome
+
+Please follow all the steps:
+
+- Clone this repository
+- in the command line run:
+  - `npm install`
+  - `gulp build`
+  - `gulp bundle --ship`
+  - `gulp package-solution --ship`
+- Add and deploy package to your tenant's App Catalog
+- Go to **API Access** - from **SharePoint Admin Center** new experience, and **Approve** the permission to use Microsoft Graph scope **Group.Read.All** and **Directory.Read.All**
+
+
+<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-my-sites" />
--- a/samples/react-my-sites/assets/MySites.gif
+++ b/samples/react-my-sites/assets/MySites.gif
--- a/samples/react-my-sites/assets/Screenshot
+++ b/samples/react-my-sites/assets/Screenshot
--- a/samples/react-my-sites/assets/Screenshot
+++ b/samples/react-my-sites/assets/Screenshot
--- a/samples/react-my-sites/assets/Screenshot
+++ b/samples/react-my-sites/assets/Screenshot
--- a/samples/react-my-sites/azure-pipelines-build-template.yml
+++ b/samples/react-my-sites/azure-pipelines-build-template.yml
@ -0,0 +1,67 @@
+parameters:
+  name: ''
+jobs:
+  - job: ${{ parameters.name }}
+    pool:
+      vmImage: 'ubuntu-latest'
+      demands:
+      - npm
+      - node.js
+      - java
+    variables:
+      npm_config_cache: $(Pipeline.Workspace)/.npm
+
+    steps:
+      - checkout: self
+
+      - task: NodeTool@0
+        displayName: 'Use Node 10.x'
+        inputs:
+          versionSpec: 10.x
+          checkLatest: true
+
+      - task: CacheBeta@1
+        inputs:
+          key: npm | $(Agent.OS) | package-lock.json
+          path: $(npm_config_cache)
+          cacheHitVar: CACHE_RESTORED
+      - script: npm ci
+        displayName: 'npm ci'
+
+      - task: Gulp@0
+        displayName: 'Bundle project'
+        inputs:
+          targets: bundle
+          arguments: '--ship'
+
+      - script: npm test
+        displayName: 'npm test'
+
+      - task: PublishTestResults@2
+        displayName: Publish test results
+        inputs:
+          testResultsFormat: JUnit
+          testResultsFiles: '**/junit.xml'
+          #failTaskOnFailedTests: true #if we want to fail the build on failed unit tests
+
+      - task: PublishCodeCoverageResults@1
+        displayName: 'Publish code coverage results'
+        inputs:
+          codeCoverageTool: Cobertura
+          summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'
+
+      - task: Gulp@0
+        displayName: 'Package Solution'
+        inputs:
+          targets: 'package-solution'
+          arguments: '--ship'
+
+      - task: CopyFiles@2
+        displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
+        inputs:
+          Contents: |
+            sharepoint/**/*.sppkg
+          TargetFolder: '$(Build.ArtifactStagingDirectory)'
+
+      - task: PublishBuildArtifacts@1
+        displayName: 'Publish Artifact: drop'
--- a/samples/react-my-sites/azure-pipelines-deploy-template.yml
+++ b/samples/react-my-sites/azure-pipelines-deploy-template.yml
@ -0,0 +1,39 @@
+parameters:
+  # unique name of the job
+  job_name: deploy_sppkg
+  # friendly name of the job
+  display_name: Upload & deploy *.sppkg to SharePoint app catalog
+  # name of target enviroment deploying to
+  target_environment: ''
+  # app catalog scope (tenant|sitecollection)
+  o365cli_app_catalog_scope: 'tenant'
+  variable_group_name: ''
+jobs:
+- deployment: ${{ parameters.job_name }}
+  displayName: ${{ parameters.display_name }}
+  pool:
+    vmImage: 'ubuntu-latest'
+  environment: ${{ parameters.target_environment }}
+  variables:
+  - group: ${{parameters.variable_group_name}} #o365_user_login, o365_user_password, o365_app_catalog_site_url
+  strategy:
+    runOnce:
+      deploy:
+        steps:
+        - checkout: none
+        - download: current
+          artifact: drop
+          patterns: '**/*.sppkg'
+        - script: sudo npm install --global @pnp/office365-cli
+          displayName: Install Office365 CLI
+        - script: o365 login $(o365_app_catalog_site_url) --authType password --userName $(o365_user_login) --password $(o365_user_password)
+          displayName: Login to Office365
+        - script: |
+            CMD_GET_SPPKG_NAME=$(find $(Pipeline.Workspace)/drop -name '*.sppkg' -exec basename {} \;)
+            echo "##vso[task.setvariable variable=SpPkgFileName;isOutput=true]${CMD_GET_SPPKG_NAME}"
+          displayName: Get generated *.sppkg filename
+          name: GetSharePointPackage
+        - script: o365 spo app add --filePath "$(Pipeline.Workspace)/drop/sharepoint/solution/$(GetSharePointPackage.SpPkgFileName)" --appCatalogUrl $(o365_app_catalog_site_url) --scope ${{ parameters.o365cli_app_catalog_scope }} --overwrite
+          displayName: Upload SharePoint package to Site Collection App Catalog
+        - script: o365 spo app deploy --name $(GetSharePointPackage.SpPkgFileName) --appCatalogUrl $(o365_app_catalog_site_url) --scope ${{ parameters.o365cli_app_catalog_scope }}
+          displayName: Deploy SharePoint package
--- a/samples/react-my-sites/azure-pipelines.yml
+++ b/samples/react-my-sites/azure-pipelines.yml
@ -0,0 +1,26 @@
+name: $(TeamProject)_$(BuildDefinitionName)_$(SourceBranchName)_$(Date:yyyyMMdd)$(Rev:.r)
+resources:
+- repo: self
+
+trigger:
+  branches:
+    include:
+    - master
+    - develop
+
+stages:
+- stage: build
+  displayName: build
+  jobs:
+    - template: ./azure-pipelines-build-template.yml
+      parameters:
+        name: 'buildsolution'
+- stage: 'deployqa'
+  # uncomment if you want deployments to occur only for a specific branch
+  #condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/develop'))
+  jobs:
+    - template: ./azure-pipelines-deploy-template.yml
+      parameters:
+        job_name: deploy_solution
+        target_environment: 'qa'
+        variable_group_name: qa_configuration
--- a/samples/react-my-sites/config/config.json
+++ b/samples/react-my-sites/config/config.json
@ -0,0 +1,20 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "my-sites-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/mySites/MySitesWebPart.js",
+          "manifest": "./src/webparts/mySites/MySitesWebPart.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "MySitesWebPartStrings": "lib/webparts/mySites/loc/{locale}.js",
+    "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js",
+    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+  }
+}
--- a/samples/react-my-sites/config/copy-assets.json
+++ b/samples/react-my-sites/config/copy-assets.json
@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
+  "deployCdnPath": "temp/deploy"
+}
--- a/samples/react-my-sites/config/deploy-azure-storage.json
+++ b/samples/react-my-sites/config/deploy-azure-storage.json
@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./temp/deploy/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "react-my-sites",
+  "accessKey": "<!-- ACCESS KEY -->"
+}
--- a/samples/react-my-sites/config/jest.config.json
+++ b/samples/react-my-sites/config/jest.config.json
@ -0,0 +1 @@
+{"preset":"@voitanos/jest-preset-spfx-react16","rootDir":"../src","collectCoverageFrom":["<rootDir>/**/*.{ts,tsx}","!<rootDir>/**/*.scss.*","!<rootDir>/loc/**/*.*"],"coverageReporters":["text","json","lcov","text-summary","cobertura"],"reporters":["default",["jest-junit",{"suiteName":"jest tests","outputDirectory":"temp/test/junit","outputName":"junit.xml"}]]}
--- a/samples/react-my-sites/config/package-solution.json
+++ b/samples/react-my-sites/config/package-solution.json
@ -0,0 +1,31 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "react-my-sites-client-side-solution",
+    "id": "ad28b382-886b-4b2a-9646-92de8a0b1d13",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": ""
+    },
+    "webApiPermissionRequests": [{
+      "resource": "Microsoft Graph",
+      "scope": "Group.Read.All"
+
+    },
+    {
+      "resource": "Microsoft Graph",
+      "scope": "Directory.Read.All"
+    }
+  ]
+  },
+  "paths": {
+    "zippedPackage": "solution/react-my-sites.sppkg"
+  }
+}
--- a/samples/react-my-sites/config/serve.json
+++ b/samples/react-my-sites/config/serve.json
@ -0,0 +1,10 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+  "port": 4321,
+  "https": true,
+  "initialPage": "https://localhost:5432/workbench",
+  "api": {
+    "port": 5432,
+    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
+  }
+}
--- a/samples/react-my-sites/config/write-manifests.json
+++ b/samples/react-my-sites/config/write-manifests.json
@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}
--- a/samples/react-my-sites/gulpfile.js
+++ b/samples/react-my-sites/gulpfile.js
@ -0,0 +1,29 @@
+'use strict';
+
+// check if gulp dist was called
+if (process.argv.indexOf('dist') !== -1) {
+    // add ship options to command call
+    process.argv.push('--ship');
+}
+
+const path = require('path');
+const gulp = require('gulp');
+const build = require('@microsoft/sp-build-web');
+const gulpSequence = require('gulp-sequence');
+
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+
+// Create clean distrubution package
+gulp.task('dist', gulpSequence('clean', 'bundle', 'package-solution'));
+// Create clean development package
+gulp.task('dev', gulpSequence('clean', 'bundle', 'package-solution'));
+
+
+
+
+/**
+ * Custom Framework Specific gulp tasks
+ */
+
+
+build.initialize(gulp);
--- a/samples/react-my-sites/package-lock.json
+++ b/samples/react-my-sites/package-lock.json
--- a/samples/react-my-sites/package.json
+++ b/samples/react-my-sites/package.json
@ -0,0 +1,61 @@
+{
+  "name": "react-my-sites",
+  "version": "0.0.1",
+  "private": true,
+  "main": "lib/index.js",
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "preversion": "node ./tools/pre-version.js",
+    "postversion": "gulp dist",
+    "test": "./node_modules/.bin/jest --config ./config/jest.config.json",
+    "test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@microsoft/sp-core-library": "1.11.0",
+    "@microsoft/sp-lodash-subset": "1.11.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
+    "@microsoft/sp-property-pane": "1.11.0",
+    "@microsoft/sp-webpart-base": "1.11.0",
+    "@pnp/pnpjs": "^2.0.6",
+    "@pnp/spfx-controls-react": "1.19.0",
+    "@pnp/spfx-property-controls": "1.19.0",
+    "@types/jquery": "^3.5.0",
+    "jquery": "^3.5.1",
+    "office-ui-fabric-react": "^7.123.1",
+    "react": "16.8.5",
+    "react-dom": "16.8.5"
+  },
+  "devDependencies": {
+    "@microsoft/microsoft-graph-types": "^1.12.0",
+    "@microsoft/rush-stack-compiler-3.7": "^0.6.x",
+    "@microsoft/sp-build-web": "1.11.0",
+    "@microsoft/sp-module-interfaces": "1.11.0",
+    "@microsoft/sp-tslint-rules": "1.11.0",
+    "@microsoft/sp-webpart-workbench": "1.11.0",
+    "@types/chai": "3.4.34",
+    "@types/es6-promise": "0.0.33",
+    "@types/mocha": "2.2.38",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "16.8.3",
+    "@types/webpack-env": "1.13.1",
+    "@voitanos/jest-preset-spfx-react16": "^1.3.2",
+    "ajv": "~5.2.2",
+    "gulp": "~3.9.1",
+    "gulp-sequence": "1.0.0",
+    "jest": "^23.6.0",
+    "jest-junit": "^10.0.0",
+    "lodash": "^4.17.15",
+    "spfx-uifabric-themes": "^0.8.0",
+    "typescript": "~3.7.x"
+  },
+  "jest-junit": {
+    "output": "temp/test/junit/junit.xml",
+    "usePathForSuiteName": "true"
+  }
+}
--- a/samples/react-my-sites/src/Common/TeamsContrastTheme.json
+++ b/samples/react-my-sites/src/Common/TeamsContrastTheme.json
@ -0,0 +1,24 @@
+{
+  "themePrimary": "#6264a7",
+  "themeLighterAlt": "#f7f7fb",
+  "themeLighter": "#e1e1f1",
+  "themeLight": "#c8c9e4",
+  "themeTertiary": "#989ac9",
+  "themeSecondary": "#7173b0",
+  "themeDarkAlt": "#585a95",
+  "themeDark": "#4a4c7e",
+  "themeDarker": "#37385d",
+  "neutralLighterAlt": "#0b0b0b",
+  "neutralLighter": "#151515",
+  "neutralLight": "#252525",
+  "neutralQuaternaryAlt": "#2f2f2f",
+  "neutralQuaternary": "#373737",
+  "neutralTertiaryAlt": "#595959",
+  "neutralTertiary": "#c8c8c8",
+  "neutralSecondary": "#d0d0d0",
+  "neutralPrimaryAlt": "#dadada",
+  "neutralPrimary": "#ffffff",
+  "neutralDark": "#f4f4f4",
+  "black": "#f8f8f8",
+  "white": "#000000"
+}
--- a/samples/react-my-sites/src/Common/TeamsDarkTheme.json
+++ b/samples/react-my-sites/src/Common/TeamsDarkTheme.json
@ -0,0 +1,24 @@
+{
+  "themePrimary": "#6264a7",
+  "themeLighterAlt": "#f7f7fb",
+  "themeLighter": "#e1e1f1",
+  "themeLight": "#c8c9e4",
+  "themeTertiary": "#989ac9",
+  "themeSecondary": "#7173b0",
+  "themeDarkAlt": "#585a95",
+  "themeDark": "#4a4c7e",
+  "themeDarker": "#37385d",
+  "neutralLighterAlt": "#2d2c2c",
+  "neutralLighter": "#2c2b2b",
+  "neutralLight": "#2a2929",
+  "neutralQuaternaryAlt": "#272626",
+  "neutralQuaternary": "#252525",
+  "neutralTertiaryAlt": "#242323",
+  "neutralTertiary": "#c8c8c8",
+  "neutralSecondary": "#d0d0d0",
+  "neutralPrimaryAlt": "#dadada",
+  "neutralPrimary": "#ffffff",
+  "neutralDark": "#f4f4f4",
+  "black": "#f8f8f8",
+  "white": "#2d2c2c"
+}
--- a/samples/react-my-sites/src/Common/TeamsDefaultTheme.json
+++ b/samples/react-my-sites/src/Common/TeamsDefaultTheme.json
@ -0,0 +1,24 @@
+{
+  "themePrimary": "#6264a7",
+  "themeLighterAlt": "#f7f7fb",
+  "themeLighter": "#e1e1f1",
+  "themeLight": "#c8c9e4",
+  "themeTertiary": "#989ac9",
+  "themeSecondary": "#7173b0",
+  "themeDarkAlt": "#585a95",
+  "themeDark": "#4a4c7e",
+  "themeDarker": "#37385d",
+  "neutralLighterAlt": "#ecebe9",
+  "neutralLighter": "#e8e7e6",
+  "neutralLight": "#dedddc",
+  "neutralQuaternaryAlt": "#cfcecd",
+  "neutralQuaternary": "#c6c5c4",
+  "neutralTertiaryAlt": "#bebdbc",
+  "neutralTertiary": "#b5b4b2",
+  "neutralSecondary": "#9d9c9a",
+  "neutralPrimaryAlt": "#868482",
+  "neutralPrimary": "#252423",
+  "neutralDark": "#565453",
+  "black": "#3e3d3b",
+  "white": "#f3f2f1"
+}
--- a/samples/react-my-sites/src/Common/themeColors.module.scss
+++ b/samples/react-my-sites/src/Common/themeColors.module.scss
@ -0,0 +1,16 @@
+$default-background: #f3f2f1;
+$default-color: #252423;
+$default-button-background: #6264a7;
+$default-Button-color: #f3f2f1;
+
+// dark theme
+$dark-background: #2d2c2c;
+$dark-color: #ffffff;
+$dark-button-background: #6264a7;
+$dark-button-color: #2d2c2c;
+
+// contrast theme
+$contrast-background: #000000;
+$contrast-color: #ffffff;
+$contrast-button-background: #b5c01c;
+$contrast-Button-color: #000000;
--- a/samples/react-my-sites/src/Entities/EnumFilters.ts
+++ b/samples/react-my-sites/src/Entities/EnumFilters.ts
@ -0,0 +1,6 @@
+export enum Filters {
+  "SharePoint",
+  "Group",
+  "OneDrive",
+  "All",
+}
--- a/samples/react-my-sites/src/Entities/ITitleData.ts
+++ b/samples/react-my-sites/src/Entities/ITitleData.ts
@ -0,0 +1,8 @@
+export interface ITitleData
+  {
+    activityUserEmail:string;
+    activityUser:string;
+    activityDate:string;
+    activityMessage:string;
+    userPhoto:string;
+  }
--- a/samples/react-my-sites/src/Hooks/useUserSites.ts
+++ b/samples/react-my-sites/src/Hooks/useUserSites.ts
@ -0,0 +1,107 @@
+import { MSGraphClient, AadTokenProvider } from "@microsoft/sp-http";
+import { Filters } from "../Entities/EnumFilters";
+import { sp } from "@pnp/sp";
+import { graph } from "@pnp/graph";
+import { dateAdd, PnPClientStorage } from "@pnp/common";
+
+import "@pnp/graph/groups";
+import "@pnp/sp/search";
+import {
+  SearchResults,
+  SearchQueryBuilder,
+  SortDirection,
+} from "@pnp/sp/search";
+
+
+const storage = new PnPClientStorage();
+
+export const useUserSites = () => {
+  // Check if group has team
+
+  const checkGroupHasTeam = async (
+    groupId: string,
+    msGraphClient: MSGraphClient
+  ): Promise<boolean> => {
+    // Check if value alreqdy cached
+    const cachedValue:string = storage.local.get(groupId);
+    if (!cachedValue) {
+      try {
+        const _teamInfo: any = await msGraphClient
+          .api(`/groups/${groupId}/team`)
+          .version("V1.0")
+          .get();
+          // put a value into storage with an expiration
+        storage.local.put(groupId, "true", dateAdd(new Date(), "day", 1));
+        return true;
+
+      } catch (error) {
+        // Team don't exists or user don' have acess
+          // put a value into storage with an expiration
+        storage.local.put(groupId, "false", dateAdd(new Date(), "day", 1));
+        return false;
+      }
+    }else{
+      // return cached value
+      return cachedValue == 'true' ? true : false;
+    }
+  };
+  // Get User Sites
+  const getUserSites = async (
+    searchString?: string,
+    itemsPerPage?: number,
+    filter?: Filters
+  ): Promise<SearchResults> => {
+    let searchResults: SearchResults = null;
+    let _filter: string = "";
+    let _searchString: string = searchString ? `Title:${searchString}*` : "";
+    switch (filter) {
+      case Filters.All:
+        _filter = "";
+        break;
+      case Filters.Group:
+        _filter = ` GroupId:a* OR GroupId:b* OR GroupId:c* OR GroupId:d* OR GroupId:e* OR GroupId:f* OR GroupId:g* OR GroupId:h* OR GroupId:i* OR GroupId:j* OR GroupId:k* OR GroupId:l* OR GroupId:m* OR GroupId:n* OR GroupId:o* OR GroupId:p* OR GroupId:q* OR GroupId:r* OR GroupId:s* OR GroupId:t* OR GroupId:u* OR GroupId:v* OR GroupId:w* OR GroupId:x* OR GroupId:y* OR GroupId:z* OR GroupId:1* OR GroupId:2* OR GroupId:3* OR GroupId:4* OR GroupId:5* OR GroupId:6* OR GroupId:7* OR GroupId:8* OR GroupId:9* OR GroupId:0*`;
+        break;
+      case Filters.OneDrive:
+        _filter = " SiteGroup:Onedrive";
+        break;
+      case Filters.SharePoint:
+        _filter =
+          " SiteGroup:SharePoint AND NOT(GroupId:b* OR GroupId:c* OR GroupId:d* OR GroupId:e* OR GroupId:f* OR GroupId:g* OR GroupId:h* OR GroupId:i* OR GroupId:j* OR GroupId:k* OR GroupId:l* OR GroupId:m* OR GroupId:n* OR GroupId:o* OR GroupId:p* OR GroupId:q* OR GroupId:r* OR GroupId:s* OR GroupId:t* OR GroupId:u* OR GroupId:v* OR GroupId:w* OR GroupId:x* OR GroupId:y* OR GroupId:z* OR GroupId:1* OR GroupId:2* OR GroupId:3* OR GroupId:4* OR GroupId:5* OR GroupId:6* OR GroupId:7* OR GroupId:8* OR GroupId:9* OR GroupId:0*)";
+        break;
+    }
+
+    const q = SearchQueryBuilder(
+      `(contentclass:STS_Site OR contentclass:STS_Web) ${_filter} ${_searchString}`
+    )
+      .rowLimit(itemsPerPage ? itemsPerPage : 20)
+      .enableSorting.sortList({
+        Property: "LastModifiedTime",
+        Direction: SortDirection.Descending,
+      })
+      .selectProperties(
+        "SiteLogo",
+        "SiteClosed",
+        "RelatedHubSites",
+        "IsHubSite",
+        "GroupId",
+        "RelatedGroupId",
+        "SiteGroup",
+        "Author",
+        "CreatedBy",
+        "CreatedById",
+        "AccountName",
+        "ModifiedBy",
+        "ModifiedById",
+        "LastModifiedTime",
+        "OriginalPath",
+        "Title",
+        "Created"
+      );
+    const results = await sp.search(q);
+    searchResults = results; // set the current results
+    console.log(searchResults);
+    return searchResults;
+  };
+
+  return { getUserSites, checkGroupHasTeam };
+};
--- a/samples/react-my-sites/src/Utils/Utils.ts
+++ b/samples/react-my-sites/src/Utils/Utils.ts
@ -0,0 +1,84 @@
+import { SPComponentLoader } from '@microsoft/sp-loader';
+
+const DEFAULT_PERSONA_IMG_HASH: string = '7ad602295f8386b7615b582d87bcc294';
+const DEFAULT_IMAGE_PLACEHOLDER_HASH: string = '4a48f26592f4e1498d7a478a4c48609c';
+const MD5_MODULE_ID: string = '8494e7d7-6b99-47b2-a741-59873e42f16f';
+const PROFILE_IMAGE_URL: string = '/_layouts/15/userphoto.aspx?size=M&accountname=';
+
+  /**
+   * Gets user photo
+   * @param userId
+   * @returns user photo
+   */
+  export const getUserPhoto = async (userId): Promise<string> =>  {
+    const personaImgUrl = PROFILE_IMAGE_URL + userId;
+    console.log(personaImgUrl);
+    // tslint:disable-next-line: no-use-before-declare
+    const url: string = await getImageBase64(personaImgUrl);
+    // tslint:disable-next-line: no-use-before-declare
+    const newHash = await getMd5HashForUrl(url);
+
+    if (newHash !== DEFAULT_PERSONA_IMG_HASH && newHash !== DEFAULT_IMAGE_PLACEHOLDER_HASH) {
+      return 'data:image/png;base64,' + url;
+    } else {
+      return 'undefined';
+    }
+  };
+
+  /**
+   * Get MD5Hash for the image url to verify whether user has default image or custom image
+   * @param url
+   */
+  export const  getMd5HashForUrl = async (url: string) => {
+    return new Promise(async (resolve, reject) => {
+      // tslint:disable-next-line: no-use-before-declare
+      const library: any = await loadSPComponentById(MD5_MODULE_ID);
+      try {
+        const md5Hash = library.Md5Hash;
+        if (md5Hash) {
+          const convertedHash = md5Hash(url);
+          resolve(convertedHash);
+        }
+      } catch (error) {
+        resolve(url);
+      }
+    });
+  };
+
+  /**
+   * Load SPFx component by id, SPComponentLoader is used to load the SPFx components
+   * @param componentId - componentId, guid of the component library
+   */
+  export const loadSPComponentById = async (componentId: string) => {
+    return new Promise((resolve, reject) => {
+      SPComponentLoader.loadComponentById(componentId)
+        .then((component: any) => {
+          resolve(component);
+        })
+        .catch(error => {});
+    });
+  };
+  /**
+   * Gets image base64
+   * @param pictureUrl
+   * @returns image base64
+   */
+  export const getImageBase64 =  async (pictureUrl: string): Promise<string> => {
+    console.log(pictureUrl);
+    return new Promise((resolve, reject) => {
+      let image = new Image();
+      image.addEventListener('load', () => {
+        let tempCanvas = document.createElement('canvas');
+        (tempCanvas.width = image.width), (tempCanvas.height = image.height), tempCanvas.getContext('2d').drawImage(image, 0, 0);
+        let base64Str;
+        try {
+          base64Str = tempCanvas.toDataURL('image/png');
+        } catch (e) {
+          return '';
+        }
+        base64Str = base64Str.replace(/^data:image\/png;base64,/, '');
+        resolve(base64Str);
+      });
+      image.src = pictureUrl;
+    });
+  };
--- a/samples/react-my-sites/src/index.ts
+++ b/samples/react-my-sites/src/index.ts
@ -0,0 +1 @@
+// A file is required to be in the root of the /src directory by the TypeScript compiler
--- a/samples/react-my-sites/src/webparts/mySites/MySitesWebPart.manifest.json
+++ b/samples/react-my-sites/src/webparts/mySites/MySitesWebPart.manifest.json
@ -0,0 +1,29 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "07c6a242-bf1b-4ba4-bf1b-7d0533cd65fd",
+  "alias": "MySitesWebPart",
+  "componentType": "WebPart",
+  "supportsThemeVariants": true,
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false,
+  "supportedHosts": ["SharePointWebPart", "SharePointFullPage","TeamsPersonalApp","TeamsTab"],
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "Other" },
+    "title": { "default": "My Sites" },
+    "description": { "default": "List sites user has permissions, Include SharePoint Sites, Office365 Groups, OneDrive, Add-Ins App Sites" },
+    "officeFabricIconFontName": "SharepointLogo",
+    "properties": {
+      "title": "My Sites",
+      "itemsPerPage": 20
+    }
+  }]
+}
--- a/samples/react-my-sites/src/webparts/mySites/MySitesWebPart.ts
+++ b/samples/react-my-sites/src/webparts/mySites/MySitesWebPart.ts
@ -0,0 +1,162 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { Version } from '@microsoft/sp-core-library';
+import {
+  IPropertyPaneConfiguration,
+  PropertyPaneTextField,
+  PropertyPaneSlider
+} from '@microsoft/sp-property-pane';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+
+import * as strings from 'MySitesWebPartStrings';
+import { MySites } from './components/MySites/MySites';
+import { IMySitesProps } from './components/MySites/IMySitesProps';
+import { loadTheme } from "office-ui-fabric-react";
+import { DisplayMode } from '@microsoft/sp-core-library';
+import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base';
+import { sp } from "@pnp/sp";
+import { graph } from "@pnp/graph";
+const teamsDefaultTheme = require("../../common/TeamsDefaultTheme.json");
+const teamsDarkTheme = require("../../common/TeamsDarkTheme.json");
+const teamsContrastTheme = require("../../common/TeamsContrastTheme.json");
+
+
+export interface IMySitesWebPartProps {
+  title: string;
+  displayMode: DisplayMode;
+  updateProperty: (value: string) => void;
+  itemsPerPage: number;
+}
+
+export default class MySitesWebPart extends BaseClientSideWebPart<IMySitesWebPartProps> {
+  private _themeProvider: ThemeProvider;
+  private _themeVariant: IReadonlyTheme | undefined;
+  protected async onInit(): Promise<void> {
+
+    sp.setup({
+      spfxContext: this.context
+    });
+
+    graph.setup({
+      spfxContext: this.context
+    });
+
+    this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey);
+    // If it exists, get the theme variant
+    this._themeVariant = this._themeProvider.tryGetTheme();
+    // Register a handler to be notified if the theme variant changes
+    this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent);
+
+    if (this.context.sdks.microsoftTeams) {
+      // in teams ?
+      const context = this.context.sdks.microsoftTeams!.context;
+
+      console.log('theme', this._themeVariant);
+      this._applyTheme(context.theme || "default");
+      this.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler(
+        this._applyTheme
+      );
+    }
+    return Promise.resolve();
+  }
+
+  /**
+   * Update the current theme variant reference and re-render.
+   *
+   * @param args The new theme
+   */
+  private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
+    this._themeVariant = args.theme;
+    console.log('theme', this._themeVariant);
+    this.render();
+  }
+
+// Apply btheme id in Teams
+  private _applyTheme = (theme: string): void => {
+    this.context.domElement.setAttribute("data-theme", theme);
+    document.body.setAttribute("data-theme", theme);
+
+    if (theme == "dark") {
+      loadTheme({
+        palette: teamsDarkTheme
+      });
+    }
+
+   if (theme == "default") {
+      loadTheme({
+        palette: teamsDefaultTheme
+      });
+    }
+
+    if (theme == "contrast") {
+      loadTheme({
+        palette: teamsContrastTheme
+      });
+    }
+  }
+
+
+
+
+
+
+  public render(): void {
+    const element: React.ReactElement<IMySitesProps> = React.createElement(
+      MySites,
+      {
+        title: this.properties.title,
+        context: this.context,
+        themeVariant: this._themeVariant,
+        displayMode: this.displayMode,
+        itemsPerPage: this.properties.itemsPerPage,
+        updateProperty: (value: string) => {
+          this.properties.title = value;
+      }
+      }
+    );
+
+    ReactDom.render(element, this.domElement);
+  }
+
+  protected onDispose(): void {
+    ReactDom.unmountComponentAtNode(this.domElement);
+  }
+
+  protected get dataVersion(): Version {
+    return Version.parse('1.0');
+  }
+
+  protected get disableReactivePropertyChanges():boolean {
+    return true;
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    return {
+      pages: [
+        {
+          header: {
+            description: strings.PropertyPaneDescription
+          },
+          groups: [
+            {
+              groupName: strings.BasicGroupName,
+              groupFields: [
+                PropertyPaneTextField('title', {
+                  label: strings.TitleFieldLabel,
+                  value: this.properties.title
+                }),
+                PropertyPaneSlider('itemsPerPage', {
+                  min: 1,
+                  max: 100,
+                  value: this.properties.itemsPerPage,
+                  step: 1,
+                  label: strings.ItemsPerPageLabel,
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    };
+  }
+}
--- a/samples/react-my-sites/src/webparts/mySites/components/MySites/IMySitesProps.ts
+++ b/samples/react-my-sites/src/webparts/mySites/components/MySites/IMySitesProps.ts
@ -0,0 +1,12 @@
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+import { WebPartContext } from "@microsoft/sp-webpart-base";
+import { DisplayMode } from "@microsoft/sp-core-library";
+export interface IMySitesProps {
+  title: string;
+  context: WebPartContext;
+  themeVariant: IReadonlyTheme | undefined;
+  displayMode: DisplayMode;
+  updateProperty: (value: string) => void;
+  itemsPerPage:number;
+}
+
--- a/samples/react-my-sites/src/webparts/mySites/components/MySites/IMySitesState.ts
+++ b/samples/react-my-sites/src/webparts/mySites/components/MySites/IMySitesState.ts
@ -0,0 +1,12 @@
+
+export interface IMySitesState {
+  sites: any[];
+  isLoading: boolean;
+  errorMessage: string;
+  hasError:boolean;
+  title:string;
+  currentPage:number;
+  totalPages:number;
+  searchValue:string;
+  currentFilter?:number;
+}
--- a/samples/react-my-sites/src/webparts/mySites/components/MySites/MySites.module.scss
+++ b/samples/react-my-sites/src/webparts/mySites/components/MySites/MySites.module.scss
@ -0,0 +1,74 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
+
+.mySites {
+  .container {
+    max-width: 700px;
+    margin: 0px auto;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .row {
+    @include ms-Grid-row;
+    @include ms-fontColor-white;
+    background-color: $ms-color-themeDark;
+    padding: 20px;
+  }
+
+  .column {
+    @include ms-Grid-col;
+    @include ms-lg10;
+    @include ms-xl8;
+    @include ms-xlPush2;
+    @include ms-lgPush1;
+  }
+
+  .title {
+    @include ms-font-xl;
+    @include ms-fontColor-white;
+  }
+
+  .subTitle {
+    @include ms-font-l;
+    @include ms-fontColor-white;
+  }
+
+  .description {
+    @include ms-font-l;
+    @include ms-fontColor-white;
+  }
+
+  .button {
+    // Our button
+    text-decoration: none;
+    height: 32px;
+
+    // Primary Button
+    min-width: 80px;
+    background-color: $ms-color-themePrimary;
+    border-color: $ms-color-themePrimary;
+    color: $ms-color-white;
+
+    // Basic Button
+    outline: transparent;
+    position: relative;
+    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+    -webkit-font-smoothing: antialiased;
+    font-size: $ms-font-size-m;
+    font-weight: $ms-font-weight-regular;
+    border-width: 0;
+    text-align: center;
+    cursor: pointer;
+    display: inline-block;
+    padding: 0 16px;
+
+    .label {
+      font-weight: $ms-font-weight-semibold;
+      font-size: $ms-font-size-m;
+      height: 32px;
+      line-height: 32px;
+      margin: 0 4px;
+      vertical-align: top;
+      display: inline-block;
+    }
+  }
+}
--- a/samples/react-my-sites/src/webparts/mySites/components/MySites/MySites.tsx
+++ b/samples/react-my-sites/src/webparts/mySites/components/MySites/MySites.tsx
@ -0,0 +1,317 @@
+import * as React from "react";
+import { Filters} from '../../../../Entities/EnumFilters';
+import "./paginationOverride.module.scss";
+import { IMySitesProps } from "./IMySitesProps";
+import { escape } from "@microsoft/sp-lodash-subset";
+import {
+  mergeStyleSets,
+  Customizer,
+  MessageBar,
+  MessageBarType,
+  Spinner,
+  SpinnerSize,
+  SearchBox,
+  CommandButton,
+  Stack,
+  IContextualMenuProps,
+  IIconProps,
+  IContextualMenuItem,
+  FontIcon,
+  Label,
+} from "office-ui-fabric-react";
+import { WebPartTitle } from "@pnp/spfx-controls-react";
+import { useUserSites } from "../../../../Hooks/useUserSites";
+import { IMySitesState } from "./IMySitesState";
+import { SiteTile } from "../SiteTile/SiteTile";
+import { SearchResults } from "@pnp/sp/search";
+import { toInteger } from "lodash";
+import Pagination from "@material-ui/lab/Pagination";
+import strings from "MySitesWebPartStrings";
+import _ from "lodash";
+import { MSGraphClient } from "@microsoft/sp-http";
+
+let _searchResults: SearchResults = null;
+let _msGraphClient:MSGraphClient = undefined;
+
+export const MySites: React.FunctionComponent<IMySitesProps> = (
+  props: IMySitesProps
+) => {
+  // Global Compoment Styles
+  const stylesComponent = mergeStyleSets({
+    containerTiles: {
+      marginTop: 25,
+      display: "grid",
+      marginBottom: 10,
+      gridTemplateColumns: "repeat( auto-fit, minmax(300px, 1fr) )",
+      gridTemplateRows: "auto",
+    },
+    webPartTile: {
+      fontWeight: 500,
+      marginBottom: 20
+    },
+  });
+  // Document Card Styles
+
+
+  // state
+  const [state, setState] = React.useState<IMySitesState>({
+    errorMessage: "",
+    isLoading: true,
+    sites: [],
+    hasError: false,
+    title: props.title,
+    currentPage: 1,
+    totalPages: 50,
+    searchValue: "",
+    currentFilter: Filters.All,
+  });
+
+  const filterIcon: IIconProps = { iconName: "Filter" };
+
+  // Get Hook functions
+  const { getUserSites } = useUserSites();
+
+  // get User Sites
+  const _getUserSites = async (
+    searchString?: string,
+    currentFilter?:  Filters
+  ) => {
+    try {
+      console.log('tiles var', props.themeVariant);
+      setState({ ...state, isLoading: true });
+      const { itemsPerPage } = props;
+      const searchResults = await getUserSites(searchString, itemsPerPage, currentFilter);
+      _searchResults = searchResults;
+      let _totalPages: number = searchResults.TotalRows / itemsPerPage;
+      const _modulus: number = searchResults.TotalRows % itemsPerPage;
+      _totalPages =
+        _modulus > 0 ? toInteger(_totalPages) + 1 : toInteger(_totalPages);
+      setState({
+        searchValue: "",
+        currentPage: 1,
+        totalPages: _totalPages,
+        title: props.title,
+        isLoading: false,
+        hasError: false,
+        errorMessage: "",
+        sites: _searchResults.PrimarySearchResults,
+        currentFilter: currentFilter
+      });
+    } catch (error) {
+      console.log(error);
+      setState({
+        ...state,
+        hasError: true,
+        isLoading: false,
+        errorMessage: error.message,
+      });
+    }
+  };
+
+  const _Filtersites = async (filter: string) => {
+    setState({ ...state, isLoading: true });
+    let _filteredSites: any[] = [];
+
+    switch (filter) {
+      case "All":
+        setState({...state,currentFilter: Filters.All});
+        await  _getUserSites('', Filters.All);
+        break;
+      case "Groups":
+        setState({...state,currentFilter: Filters.Group});
+        await  _getUserSites('', Filters.Group);
+        break;
+      case "OneDrive":
+        setState({...state,currentFilter: Filters.OneDrive});
+        await  _getUserSites('', Filters.OneDrive);
+        break;
+      case "SharePoint":
+        setState({...state,currentFilter: Filters.SharePoint});
+        await  _getUserSites('', Filters.SharePoint);
+        break;
+      default:
+        setState({ ...state, isLoading: false });
+        break;
+    }
+  };
+
+  const filterMenuProps: IContextualMenuProps = {
+    items: [
+      {
+        key: "0",
+        text: "All",
+        iconProps: { iconName: "ThumbnailView" },
+        onClick: (
+          ev:
+            | React.MouseEvent<HTMLElement, MouseEvent>
+            | React.KeyboardEvent<HTMLElement>,
+          item: IContextualMenuItem
+        ) => {
+          _Filtersites(item.text);
+        },
+      },
+      {
+        key: "1",
+        text: "SharePoint",
+        iconProps: { iconName: "SharepointAppIcon16" },
+        onClick: (
+          ev:
+            | React.MouseEvent<HTMLElement, MouseEvent>
+            | React.KeyboardEvent<HTMLElement>,
+          item: IContextualMenuItem
+        ) => {
+          _Filtersites(item.text);
+        },
+      },
+      {
+        key: "2",
+        text: "Groups",
+        iconProps: { iconName: "Group" },
+        onClick: (
+          ev:
+            | React.MouseEvent<HTMLElement, MouseEvent>
+            | React.KeyboardEvent<HTMLElement>,
+          item: IContextualMenuItem
+        ) => {
+          _Filtersites(item.text);
+        },
+      },
+      {
+        key: "3",
+        text: "OneDrive",
+        iconProps: { iconName: "onedrive" },
+        onClick: (
+          ev:
+            | React.MouseEvent<HTMLElement, MouseEvent>
+            | React.KeyboardEvent<HTMLElement>,
+          item: IContextualMenuItem
+        ) => {
+          _Filtersites(item.text);
+        },
+      },
+    ],
+  };
+  // useEffect component did mount or modified
+  React.useEffect(() => {
+    (async () => {
+      _msGraphClient = await props.context.msGraphClientFactory.getClient();
+      await _getUserSites("",state.currentFilter);
+    })();
+  }, [props.title, props.itemsPerPage]);
+
+  // On Search Sites
+  const _onSearch = async (value: string) => {
+    await _getUserSites(value,state.currentFilter);
+  };
+
+  // On Search Sites
+  const _onClear = async (ev: any) => {
+    await _getUserSites("",state.currentFilter);
+  };
+
+
+// Render component
+  if (state.hasError) { // render message error
+    return (
+      <MessageBar messageBarType={MessageBarType.error}>
+        {state.errorMessage}
+      </MessageBar>
+    );
+  }
+
+  // Render list of tiles
+  return (
+    <>
+      <Customizer settings={{ theme: props.themeVariant }}>
+        <WebPartTitle
+          displayMode={props.displayMode}
+          title={state.title}
+          themeVariant={props.themeVariant}
+          updateProperty={props.updateProperty}
+          className={stylesComponent.webPartTile}
+
+        />
+        <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 10 }}>
+          <SearchBox
+            placeholder="Search my sites"
+            underlined={true}
+            value={state.searchValue}
+            onSearch={_onSearch}
+            onClear={_onClear}
+          />
+          <CommandButton
+            iconProps={{ iconName: "refresh" }}
+            onClick={_onClear}
+            title={strings.RefreshLabel}
+          />
+          <CommandButton
+            iconProps={filterIcon}
+            text={Filters[state.currentFilter]}
+            menuProps={filterMenuProps}
+            disabled={false}
+            checked={true}
+          />
+        </Stack>
+        {state.isLoading ? (
+          <Spinner
+            size={SpinnerSize.medium}
+            label={strings.LoadingLabel}
+          ></Spinner>
+        ) : (
+          <>
+           { // has sites ?
+
+             state.sites.length > 0 ?
+             <div className={stylesComponent.containerTiles}>
+             {state.sites.map((site:any, i: number) => {
+               return (
+                 <SiteTile
+                   site={site}
+                   msGraphClient={_msGraphClient}
+                   themeVariant={props.themeVariant}
+                 ></SiteTile>
+               );
+             })}
+           </div>
+           :
+           <>
+           <Stack horizontal verticalAlign="center" horizontalAlign="center" tokens={{childrenGap: 20}} styles={{root: {marginTop: 50}}}>
+             <FontIcon iconName="Tiles" style={{fontSize: 48}}></FontIcon>
+             <Label styles={{root:{fontSize: 26}}}>No Sites Found </Label>
+           </Stack>
+           </>
+
+          }
+
+            {state.totalPages > 1 && (
+              <>
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "center",
+                    marginTop: 30,
+                  }}
+                >
+                  <Pagination
+                    color="primary"
+                    count={state.totalPages}
+                    page={state.currentPage}
+                    onChange={async (event:any, page:number) => {
+                      const rs = await _searchResults.getPage(page);
+                      _searchResults = rs;
+                      setState({
+                        ...state,
+                        currentPage: page,
+                        sites: _searchResults.PrimarySearchResults,
+                      });
+                    }}
+                  />
+                </div>
+              </>
+            )}
+          </>
+        )}
+      </Customizer>
+    </>
+  );
+};
--- a/samples/react-my-sites/src/webparts/mySites/components/MySites/paginationOverride.module.scss
+++ b/samples/react-my-sites/src/webparts/mySites/components/MySites/paginationOverride.module.scss
@ -0,0 +1,127 @@
+@import "~office-ui-fabric-react/dist/sass/References.scss";
+@import "./node_modules/spfx-uifabric-themes/office.theme";
+@import "~office-ui-fabric-react/dist/sass/semanticSlots";
+
+
+/*}*/
+:global {
+  // default theme
+  $default-background: #f3f2f1;
+  $default-color: #252423;
+  $default-button-background: #6264a7;
+  $default-Button-color: #f3f2f1;
+
+  // dark theme
+  $dark-background: #2d2c2c;
+  $dark-color: #ffffff;
+  $dark-button-background: #6264a7;
+  $dark-button-color: #2d2c2c;
+
+  // contrast theme
+  $contrast-background: #000000;
+  $contrast-color: #ffffff;
+  $contrast-button-background: #b5c01c;
+  $contrast-Button-color: #000000;
+
+  .MuiPaginationItem-root {
+    /*  color: rgba(0, 0, 0, 0.87); */
+    color: $ms-color-neutralPrimary !important;
+  }
+
+  .MuiButtonBase-root {
+    /*  color: inherit; */
+    color: $ms-color-neutralPrimary !important;
+  }
+
+  .MuiPaginationItem-textPrimary.Mui-selected {
+    color: $ms-color-white !important;
+    background-color: $ms-themePrimary !important;
+  }
+
+  .MuiPaginationItem-page:hover {
+    background-color: $ms-themePrimary !important;
+  }
+
+  [data-theme="dark"] {
+    .MuiPaginationItem-root {
+      /*  color: rgba(0, 0, 0, 0.87); */
+      color: $dark-color !important;
+    }
+
+    .MuiButtonBase-root {
+      /*  color: inherit; */
+      color: $dark-color !important;
+    }
+
+    .MuiPaginationItem-textPrimary.Mui-selected {
+      color: $dark-color !important;
+      background-color: $dark-button-background !important;
+    }
+
+    .MuiPaginationItem-page:hover {
+      background-color: $dark-button-background !important;
+    }
+
+    .ms-Dropdown-optionText {
+      color: $ms-color-white !important;
+    }
+
+    [class^="propertyPaneFooter_"] {
+      background-color: $dark-background;
+    }
+  }
+
+  [data-theme="default"] {
+    .MuiPaginationItem-root {
+      /*  color: rgba(0, 0, 0, 0.87); */
+      color: $default-color !important;
+    }
+
+    .MuiButtonBase-root {
+      /*  color: inherit; */
+      color: $default-color !important;
+    }
+
+    .MuiPaginationItem-textPrimary.Mui-selected {
+      color: $ms-color-white !important;
+      background-color: $default-button-background !important;
+    }
+
+    .MuiPaginationItem-page:hover {
+      background-color: $default-button-background !important;
+    }
+
+    [class^="propertyPaneFooter_"] {
+      background-color: $default-background;
+    }
+  }
+
+  [data-theme="contrast"] {
+    .MuiPaginationItem-root {
+      /*  color: rgba(0, 0, 0, 0.87); */
+      color: $contrast-color !important;
+    }
+
+    .MuiButtonBase-root {
+      /*  color: inherit; */
+      color: $contrast-color !important;
+    }
+
+    .MuiPaginationItem-textPrimary.Mui-selected {
+      color: $contrast-color !important;
+      background-color: $contrast-button-background !important;
+    }
+
+    .MuiPaginationItem-page:hover {
+      background-color: $contrast-button-background !important;
+    }
+
+    .ms-Dropdown-optionText {
+      color: $ms-color-white !important;
+    }
+
+    [class^="propertyPaneFooter_"] {
+      background-color: $contrast-background;
+    }
+  }
+}
--- a/samples/react-my-sites/src/webparts/mySites/components/SiteTile/ISiteTileProps.ts
+++ b/samples/react-my-sites/src/webparts/mySites/components/SiteTile/ISiteTileProps.ts
@ -0,0 +1,8 @@
+
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+import { MSGraphClient, AadTokenProvider } from "@microsoft/sp-http";
+export interface ISiteTileProps {
+  msGraphClient:MSGraphClient;
+  site:any;
+  themeVariant: IReadonlyTheme | undefined;
+}
--- a/samples/react-my-sites/src/webparts/mySites/components/SiteTile/ISiteTileState.ts
+++ b/samples/react-my-sites/src/webparts/mySites/components/SiteTile/ISiteTileState.ts
@ -0,0 +1,10 @@
+export interface ISiteTileState {
+hasTeam:boolean;
+tileData: {
+  activityUserEmail:string ,
+  activityUser:string,
+  activityDate:string,
+  activityMessage:string,
+  userPhoto:string
+};
+}
--- a/samples/react-my-sites/src/webparts/mySites/components/SiteTile/SiteTile.module.scss
+++ b/samples/react-my-sites/src/webparts/mySites/components/SiteTile/SiteTile.module.scss
@ -0,0 +1 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
--- a/samples/react-my-sites/src/webparts/mySites/components/SiteTile/SiteTile.tsx
+++ b/samples/react-my-sites/src/webparts/mySites/components/SiteTile/SiteTile.tsx
@ -0,0 +1,266 @@
+import * as React from "react";
+import { getUserPhoto } from "../../../../Utils/Utils";
+import { ISiteTileProps } from "./ISiteTileProps";
+import { ISiteTileState } from "./ISiteTileState";
+import { escape } from "@microsoft/sp-lodash-subset";
+import { ITitleData } from "../../../../Entities/ITitleData";
+import strings from "MySitesWebPartStrings";
+import styles from './SiteTile.module.scss';
+import { useUserSites } from '../../../../Hooks/useUserSites';
+import {
+  mergeStyleSets,
+  IDocumentCardStyles,
+  DocumentCardTitle,
+  DocumentCardPreview,
+  DocumentCardDetails,
+  DocumentCardActivity,
+  ImageFit,
+  Label,
+  Icon,
+  IIconStyles,
+  DocumentCard,
+  DocumentCardType,
+  FontSizes,
+  IDocumentCardActivityStyles,
+  IDocumentCardActivityStyleProps,
+  FontIcon,
+  ImageIcon,
+  css,
+  TooltipHost,
+} from "office-ui-fabric-react";
+
+
+const _siteLogoSP: string =
+    "https://static2.sharepointonline.com/files/fabric-cdn-prod_20200430.002/assets/brand-icons/product/svg/sharepoint_48x1.svg";
+
+const _siteLogoOndrive: string =
+    "https://static2.sharepointonline.com/files/fabric-cdn-prod_20200430.002/assets/brand-icons/product/svg/onedrive_48x1.svg";
+
+const _teamsLogo:string = "https://static2.sharepointonline.com/files/fabric-cdn-prod_20200430.002/assets/brand-icons/product/svg/teams_48x1.svg";
+
+export const SiteTile: React.FunctionComponent<ISiteTileProps> = (
+  props: ISiteTileProps
+) => {
+  const [state, setState] = React.useState<ISiteTileState>({
+    hasTeam: false,
+    tileData: {} as ITitleData,
+  });
+
+  const { checkGroupHasTeam } = useUserSites();
+  // Global Compoment Styles
+  const stylesTile = mergeStyleSets({
+    imageContainer: {
+      display: "flex",
+      width: 104,
+      height: "100%",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize:  props.themeVariant ? props.themeVariant.fonts.superLarge.fontSize: 24,
+      color: props.themeVariant ? props.themeVariant.palette.themePrimary: '',
+      backgroundColor: props.themeVariant ? props.themeVariant.palette.neutralLighterAlt: '',
+    },
+    webPartTile: {
+      paddingLeft: 30,
+      paddingTop: 20,
+    },
+    titleContainer: {
+      width: "100%",
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "start",
+    },
+   imageClass: {
+      marginTop: 8,
+      fontSize: 20,
+      height: 20,
+      width: 20,
+      marginRight: 7,
+      color: props.themeVariant ? props.themeVariant.palette.themePrimary: '',
+   }
+  });
+
+  const documentCardStyles: Partial<IDocumentCardStyles> = {
+    root: {
+      maxWidth: "100%",
+      maxHeight: 106,
+      marginTop: 10,
+      marginLeft: 7,
+      marginRight: 7,
+    },
+  };
+
+  const groupIconStyles: Partial<IIconStyles> = {
+    root: {
+      fontSize: 20,
+      color: props.themeVariant ? props.themeVariant.palette.themePrimary: 'white',
+      marginTop: 8,
+      marginRight: 16,
+    },
+  };
+
+  const DocumentCardActivityStyles: Partial<IDocumentCardActivityStyles> = {
+    root: { paddingBottom: 0 },
+  };
+
+  const DocumentCardDetailsStyles: Partial<IDocumentCardActivityStyles> = {
+    root: { justifyContent: "flex-start" },
+
+  };
+
+
+  let _activityUserEmail: string = "N/A";
+  let _activityUser: string = "N/A";
+  let _activityDate: string = "N/A";
+  let _activityMessage: string = "No Information";
+  let _userPhoto: string = undefined;
+
+  const {
+    SiteLogo,
+    Title,
+    GroupId,
+    LastModifiedTime,
+    ModifiedById,
+    SiteGroup,
+    OriginalPath,
+    CreatedBy,
+    Created,
+
+  } = props.site;
+
+  // Use Effect on Mounting
+  React.useEffect(() => {
+    (async () => {
+      if (ModifiedById) {
+        const _modifiedBySplit = ModifiedById.split("|");
+        _activityUserEmail = _modifiedBySplit[0].trim();
+        _activityUser = _modifiedBySplit[1].trim();
+        _activityDate = new Date(LastModifiedTime).toLocaleString();
+        _activityMessage = `${strings.ChangedOnLabel}${_activityDate}`;
+        try {
+          if (_activityUserEmail) {
+            console.log(_activityUserEmail);
+            _userPhoto = await getUserPhoto(_activityUserEmail);
+          }
+        } catch (error) {
+          console.log(error);
+        }
+        //  _userPhoto =  `/_layouts/15/userphoto.aspx?size=M&accountname=${_activityUserEmail}`;
+      } else {
+        _activityUserEmail = undefined;
+        _activityUser = CreatedBy;
+        _activityDate = new Date(Created).toLocaleString();
+        _activityMessage = `${strings.CreatedOnLabel}${_activityDate}`;
+        _userPhoto = undefined;
+      }
+
+      // If is a group check if has a team
+      let _hasTeam:boolean = false;
+      if (GroupId){
+        _hasTeam = await checkGroupHasTeam(GroupId, props.msGraphClient);
+      }
+      // Update State
+      setState({
+        hasTeam: _hasTeam,
+        tileData: {
+          activityDate: _activityDate,
+          activityUser: _activityUser,
+          activityMessage: _activityMessage,
+          activityUserEmail: _activityUserEmail,
+          userPhoto: _userPhoto
+        }
+      });
+    })();
+  }, []);
+
+  // destrectur TileData Activity
+  const {
+    activityDate,
+    activityMessage,
+    activityUser,
+    activityUserEmail,
+    userPhoto,
+  } = state.tileData;
+
+  const { hasTeam } = state;
+  // Render Component
+  return (
+    <>
+      <DocumentCard
+        styles={documentCardStyles}
+        type={DocumentCardType.compact}
+        onClickHref={OriginalPath}
+      >
+        {props.site.SiteLogo ? (
+          <DocumentCardPreview
+            className={stylesTile.imageContainer}
+            previewImages={[
+              {
+                previewImageSrc: SiteLogo,
+                width: 104,
+                height: 104,
+                imageFit: ImageFit.cover,
+              },
+            ]}
+          ></DocumentCardPreview>
+        ) : (
+          <DocumentCardPreview
+            className={stylesTile.imageContainer}
+            previewImages={[
+              {
+                previewImageSrc:
+                  SiteGroup == "OneDrive" ? _siteLogoOndrive : _siteLogoSP,
+                width: 68,
+                height: 68,
+                imageFit: ImageFit.cover,
+              },
+            ]}
+          ></DocumentCardPreview>
+        )}
+        <DocumentCardDetails styles={DocumentCardDetailsStyles}>
+          <div className={stylesTile.titleContainer}>
+            <DocumentCardTitle title={Title} shouldTruncate styles={{root:{flexGrow:2}}}></DocumentCardTitle>
+            {GroupId && hasTeam && (
+              <ImageIcon
+              title="Group has a Team"
+              imageProps={{
+                src: _teamsLogo,
+                className: stylesTile.imageClass,
+              }}
+            />
+
+            )}
+            {GroupId && (
+              <Icon
+                styles={groupIconStyles}
+                iconName="Group"
+                title="Office 365 Group"
+              ></Icon>
+            )}
+
+            {SiteGroup == "OneDrive" && (
+              <Icon
+                styles={groupIconStyles}
+                iconName="onedrive"
+                title="User OneDrive"
+              ></Icon>
+            )}
+            {SiteGroup == "SharePoint" && !GroupId && (
+              <Icon
+                styles={groupIconStyles}
+                iconName="SharepointAppIcon16"
+                title="SharePoint Site"
+              ></Icon>
+            )}
+          </div>
+          <TooltipHost content={activityMessage} calloutProps={{gapSpace:5}}>
+          <DocumentCardActivity
+            styles={DocumentCardActivityStyles}
+            activity={activityMessage}
+            people={[{ name: activityUser, profileImageSrc: userPhoto }]}
+          />
+          </TooltipHost>
+        </DocumentCardDetails>
+      </DocumentCard>
+    </>
+  );
+};
--- a/samples/react-my-sites/src/webparts/mySites/loc/en-us.js
+++ b/samples/react-my-sites/src/webparts/mySites/loc/en-us.js
@ -0,0 +1,12 @@
+define([], function() {
+  return {
+    CreatedOnLabel: "Created on ",
+    ChangedOnLabel: "Changed on ",
+    RefreshLabel: "Refresh",
+    LoadingLabel: "Loading...",
+    "PropertyPaneDescription": "List sites user has permissions, Include SharePoint Sites, Office365 Groups, OneDrive, Add-Ins App Sites",
+    "BasicGroupName": "Properties",
+    "TitleFieldLabel": "Title",
+    "ItemsPerPageLabel": "Number items per page"
+  }
+});
--- a/samples/react-my-sites/src/webparts/mySites/loc/mystrings.d.ts
+++ b/samples/react-my-sites/src/webparts/mySites/loc/mystrings.d.ts
@ -0,0 +1,15 @@
+declare interface IMySitesWebPartStrings {
+  CreatedOnLabel: string;
+  ChangedOnLabel: string;
+  RefreshLabel: string;
+  LoadingLabel: string;
+  PropertyPaneDescription: string;
+  BasicGroupName: string;
+  TitleFieldLabel: string;
+  ItemsPerPageLabel: string;
+}
+
+declare module 'MySitesWebPartStrings' {
+  const strings: IMySitesWebPartStrings;
+  export = strings;
+}
--- a/samples/react-my-sites/teams/07c6a242-bf1b-4ba4-bf1b-7d0533cd65fd_color.png
+++ b/samples/react-my-sites/teams/07c6a242-bf1b-4ba4-bf1b-7d0533cd65fd_color.png
--- a/samples/react-my-sites/teams/07c6a242-bf1b-4ba4-bf1b-7d0533cd65fd_outline.png
+++ b/samples/react-my-sites/teams/07c6a242-bf1b-4ba4-bf1b-7d0533cd65fd_outline.png
--- a/samples/react-my-sites/tools/pre-version.js
+++ b/samples/react-my-sites/tools/pre-version.js
@ -0,0 +1,64 @@
+/**
+ * This script updates the package-solution version analogue to the
+ * the package.json file.
+ */
+
+if (process.env.npm_package_version === undefined) {
+
+    throw 'Package version cannot be evaluated';
+
+}
+
+// define path to package-solution file
+const solution = './config/package-solution.json',
+    teams = './teams/manifest.json';
+
+// require filesystem instance
+const fs = require('fs');
+
+// get next automated package version from process variable
+const nextPkgVersion = process.env.npm_package_version;
+
+// make sure next build version match
+const nextVersion = nextPkgVersion.indexOf('-') === -1 ?
+    nextPkgVersion : nextPkgVersion.split('-')[0];
+
+// Update version in SPFx package-solution if exists
+if (fs.existsSync(solution)) {
+
+    // read package-solution file
+    const solutionFileContent = fs.readFileSync(solution, 'UTF-8');
+    // parse file as json
+    const solutionContents = JSON.parse(solutionFileContent);
+
+    // set property of version to next version
+    solutionContents.solution.version = nextVersion + '.0';
+
+    // save file
+    fs.writeFileSync(
+        solution,
+        // convert file back to proper json
+        JSON.stringify(solutionContents, null, 2),
+        'UTF-8');
+
+}
+
+// Update version in teams manifest if exists
+if (fs.existsSync(teams)) {
+
+    // read package-solution file
+    const teamsManifestContent = fs.readFileSync(teams, 'UTF-8');
+    // parse file as json
+    const teamsContent = JSON.parse(teamsManifestContent);
+
+    // set property of version to next version
+    teamsContent.version = nextVersion;
+
+    // save file
+    fs.writeFileSync(
+        teams,
+        // convert file back to proper json
+        JSON.stringify(teamsContent, null, 2),
+        'UTF-8');
+
+}
--- a/samples/react-my-sites/tsconfig.json
+++ b/samples/react-my-sites/tsconfig.json
@ -0,0 +1,41 @@
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/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"
+    ],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}
--- a/samples/react-my-sites/tslint.json
+++ b/samples/react-my-sites/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
+  }
+}
				`@ -0,0 +1 @@`
				`{"preset":"@voitanos/jest-preset-spfx-react16","rootDir":"../src","collectCoverageFrom":["<rootDir>/*/.{ts,tsx}","!<rootDir>/*/.scss.","!<rootDir>/loc//.*"],"coverageReporters":["text","json","lcov","text-summary","cobertura"],"reporters":["default",["jest-junit",{"suiteName":"jest tests","outputDirectory":"temp/test/junit","outputName":"junit.xml"}]]}`
				`@ -0,0 +1 @@`
				`// A file is required to be in the root of the /src directory by the TypeScript compiler`
				`@ -0,0 +1 @@`
				`@import '~office-ui-fabric-react/dist/sass/References.scss';`