Updated sample.json and fixed linting issues

samples/react-groups-teams/README.md

@@ -1,19 +1,20 @@
 # All Microsoft 365 Groups and Teams with SPFx
 
 ## Summary
+
 Web part pulls all Microsoft 365 Groups and Teams that the logged in user has access to view.
 
- - Toggle- View groups signed in user is a member of or all groups 
- - Group Name (hover for group description)
- - Link to Group email
- - Link to SharePoint site
- - Link to calendar
- - Link to Planner plan (if available) 
- - Group privacy filter (Private/Public/All)
- - Microsoft Teams team link for the Group
- - Pagination (breaks results into pages and displays page numbers)
- - Style toggle (Card/Table)
- - Group display selection 
+- Toggle- View groups signed in user is a member of or all groups
+- Group Name (hover for group description)
+- Link to Group email
+- Link to SharePoint site
+- Link to calendar
+- Link to Planner plan (if available)
+- Group privacy filter (Private/Public/All)
+- Microsoft Teams team link for the Group
+- Pagination (breaks results into pages and displays page numbers)
+- Style toggle (Card/Table)
+- Group display selection
     1. Select 5, 10, or 15 groups to display per page for the Table display style
     2. Select 6, 9, and 12 groups to display per page for the Card display style
 
@@ -34,14 +35,12 @@ Web part pulls all Microsoft 365 Groups and Teams that the logged in user has ac
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+- [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+- [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
 
-## Solution
+## Contributors
 
-Solution|Author(s)
---------|---------
-React-Groups-Teams | [Alison Collins](https://github.com/ReactIntern) ([Blog](https://graphgod.dev), [LinkedIn](https://www.linkedin.com/in/alison-collins-53192b219/))  |
+* [Alison Collins](https://github.com/ReactIntern) ([Blog](https://graphgod.dev), [LinkedIn](https://www.linkedin.com/in/alison-collins-53192b219/))
 
 ## Version history
 
@@ -82,7 +81,7 @@ React-Groups-Teams | [Alison Collins](https://github.com/ReactIntern) ([Blog](ht
 - Open hosted workbench, i.e. `https://<tenant>.sharepoint.com/sites/<your site>/_layouts/15/workbench.aspx`
 - Search and add `O365 Groups Manager` web part to see it in action
 
->  This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
+> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit <https://aka.ms/spfx-devcontainer> for further instructions.
 
 ## Features
 
@@ -116,10 +115,8 @@ For questions regarding this sample, [create a new question](https://github.com/
 
 Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-groups-teams&template=question.yml&sample=react-groups-teams&authors=@ReactIntern&title=react-groups-teams%20-%20).
 
-
 ## 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.**
 
-
 <img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-groups-teams" />

samples/react-groups-teams/assets/sample.json

@@ -9,7 +9,7 @@
       "Web part pulls all Microsoft 365 Groups and Teams that the logged in user has access to view."
     ],
     "creationDateTime": "2021-05-06",
-    "updateDateTime": "2021-10-08",
+    "updateDateTime": "2023-02-26",
     "products": [
       "SharePoint"
     ],

samples/react-groups-teams/src/webparts/microsoftGroups/components/CardStyle.tsx

@@ -68,10 +68,10 @@ export default class MicrosoftGroups extends React.Component<IGraphConsumerProps
         SwitchedValue = this.props.Allgroups.filter(item => item.Visibility === Switch);
       }
       this.setState({ GroupResultsFiltered: SwitchedValue});
-    };
+    }
     var nextVariable;
     if(this.state.GroupDisplay != undefined) {
-      if(!(this.props.GroupDisplay === undefined)) {nextVariable = this.props.GroupDisplay} else {nextVariable = 5;}
+      if(!(this.props.GroupDisplay === undefined)) {nextVariable = this.props.GroupDisplay;} else {nextVariable = 5;}
       this.setState({ mode: Switch,  Next:nextVariable, Min: 0});
     }
     else {
@@ -81,10 +81,10 @@ export default class MicrosoftGroups extends React.Component<IGraphConsumerProps
   public componentDidMount() {
     if (!(this.props.GroupDisplay === undefined || this.props.GroupDisplay ===null)){
       this.SwitchGroupList2(this.state.mode, this.state.title);
-      this.setState({GroupDisplay: this.props.GroupDisplay, Min:0, Next: this.props.GroupDisplay}) }
+      this.setState({GroupDisplay: this.props.GroupDisplay, Min:0, Next: this.props.GroupDisplay}); }
       else {
       this.SwitchGroupList2(this.state.mode, this.state.title);
-      this.setState({GroupDisplay: 5, Min: 0, Next: 5})
+      this.setState({GroupDisplay: 5, Min: 0, Next: 5});
     }
   }
 
@@ -124,7 +124,7 @@ That means if I were to go to the last page, my Next would be 15 and this statem
   }
   else {
    // for when it's not the last page we're going back from
-    max = this.state.Next - this.state.GroupDisplay 
+    max = this.state.Next - this.state.GroupDisplay;
     min = max - this.state.GroupDisplay;
   }
   GroupsFiltered.map(Group => {
@@ -203,7 +203,7 @@ public render(): React.ReactElement<IGraphConsumerProps> {
       <Icon className={iconClass} style={{ color: '#424AB5', margin:'2px', marginTop:'10px' }} iconName="TeamsLogo"></Icon>
     </a>}</>
       </div></DocumentCardDetails>
-        </DocumentCard>
+        </DocumentCard>;
 
         }})}
       </div>

samples/react-groups-teams/src/webparts/microsoftGroups/components/Microsoft365Groups.tsx

@@ -66,10 +66,10 @@ export default class MicrosoftGroups extends React.Component<IGraphConsumerProps
         SwitchedValue = this.props.Allgroups.filter(item => item.Visibility === Switch);
       }
       this.setState({ GroupResultsFiltered: SwitchedValue});
-    };
+    }
     var nextVariable;
     if(this.state.GroupDisplay != undefined) {
-      if(!(this.props.GroupDisplay === undefined)) {nextVariable = this.props.GroupDisplay} else {nextVariable = 5;}
+      if(!(this.props.GroupDisplay === undefined)) {nextVariable = this.props.GroupDisplay;} else {nextVariable = 5;}
       this.setState({ mode: Switch,  Next:nextVariable, Min: 0});
     }
     else {
@@ -79,10 +79,10 @@ export default class MicrosoftGroups extends React.Component<IGraphConsumerProps
   public componentDidMount() {
     if (!(this.props.GroupDisplay === undefined || this.props.GroupDisplay ===null)){
       this.SwitchGroupList2(this.state.mode, this.state.title);
-      this.setState({GroupDisplay: this.props.GroupDisplay, Min:0, Next: this.props.GroupDisplay}) }
+      this.setState({GroupDisplay: this.props.GroupDisplay, Min:0, Next: this.props.GroupDisplay}); }
       else {
       this.SwitchGroupList2(this.state.mode, this.state.title);
-      this.setState({GroupDisplay: 5, Min: 0, Next: 5})
+      this.setState({GroupDisplay: 5, Min: 0, Next: 5});
     }
   }
 
@@ -122,7 +122,7 @@ That means if I were to go to the last page, my Next would be 15 and this statem
   }
   else {
    // for when it's not the last page we're going back from
-    max = this.state.Next - this.state.GroupDisplay 
+    max = this.state.Next - this.state.GroupDisplay;
     min = max - this.state.GroupDisplay;
   }
   GroupsFiltered.map(Group => {
@@ -202,7 +202,7 @@ public render(): React.ReactElement<IGraphConsumerProps> {debugger;
       <Icon className={iconClass} style={{ color: '#424AB5' }} iconName="TeamsLogo"></Icon>
     </a>}</div>
         <div className={styles.Center} style={{ borderRight: 'none' }}>{Group.Visibility}</div>
-      </div>}})}
+      </div>;}})}
       </div>
       {this.state.GroupResultsFiltered.length === 0 ? <div>There are no items with the selected filters</div>:<></>}
       <div className={styles.tableStyle}>

samples/react-groups-teams/src/webparts/microsoftGroups/components/MicrosoftGroupsTeams.tsx

@@ -190,7 +190,7 @@ public componentDidUpdate(prevProps: Readonly<IMicrosoftGroupsProps>): void {
     this.setState({GroupDisplayCard: this.props.GroupDisplayCard});
   }
   if (prevProps.StyleToggle !== this.props.StyleToggle && this.props.StyleToggle!== undefined){
-    this.setState({StyleToggle: this.props.StyleToggle})
+    this.setState({StyleToggle: this.props.StyleToggle});
   }
 
 }
@@ -209,6 +209,6 @@ return <div>
       Mygroups={this.state.MyGroupResults}
       Allgroups={this.state.AllGroupsresults}/>
   }
-</div>
+</div>;
 }
 }