Updated sample.json and fixed linting issues

samples/react-groups-teams/README.md

@@ -1,6 +1,7 @@
 # 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
@@ -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>;
 }
 }