Fixup in react followed drag and drop grid. fixes #5365

samples/react-followed-drag-and-drop-grid/config/package-solution.json

@@ -17,11 +17,11 @@
     "webApiPermissionRequests": [
       {
         "resource": "Microsoft Graph",
-        "scope": "Sites.ReadWrite.All"
+        "scope": "Files.ReadWrite.All"
       }
     ]
   },
   "paths": {
     "zippedPackage": "solution/react-followed-drag-and-drop-grid.sppkg"
   }
-}
+}

samples/react-followed-drag-and-drop-grid/src/webparts/dragAndDropFollowedSites/components/dragAndDropFollowedSites/DragAndDropFollowedSites.tsx

@@ -37,7 +37,7 @@ export default class DragAndDropFollowedSites extends React.Component<IDragAndDr
     this.props.context.msGraphClientFactory
       .getClient()
       .then((client: MSGraphClient): void => {
-        const followedSitesService: FollowedSitesService = new FollowedSitesService(client);
+        const followedSitesService: FollowedSitesService = new FollowedSitesService(this.props.context.spHttpClient, this.props.context.pageContext.web.absoluteUrl);
         const myDataServiceInput: IMyDataServiceInput = {
           mSGraphClient: client,
           httpClient: this.props.context.httpClient,
@@ -141,7 +141,7 @@ export default class DragAndDropFollowedSites extends React.Component<IDragAndDr
           return;
         }
         this.state.followedSitesService.getMyFollowedSites().then(followedSites => {
-          const followedUrls: IFollowedSite[] = followedSites.value.map(element => {
+          const followedUrls: IFollowedSite[] = followedSites.map(element => {
             return {
               name: element[Constants.nameFollowedSites],
               url: element[Constants.urlFollowedSites]

samples/react-followed-drag-and-drop-grid/src/webparts/dragAndDropFollowedSites/services/FollowedSites/FollowedSitesService.ts

@@ -1,24 +1,27 @@
-import { MSGraphClient } from '@microsoft/sp-http';
+import { SPHttpClient } from '@microsoft/sp-http';
 
 export default class FollowedSitesService {
 
-    private graphClient: MSGraphClient = null;
+    private client: SPHttpClient = null;
+    private url: string = '';
 
-    constructor(graphClient: MSGraphClient) {
-        this.graphClient = graphClient;
+    constructor(client: SPHttpClient, url: string) {
+        this.client = client;
+        this.url = url;
     }
 
     public async getMyFollowedSites(): Promise<any> {
         return new Promise<any>((resolve, reject) =>
-            this.graphClient
-                .api('/me/followedSites?$top=1000')
-                .version('v1.0')
-                .get((error, response: any, rawResponse?: any) => {
-                    if (error) {
-                        resolve(error);
+            this.client
+                .get(`${this.url}/_api/social.following/my/followed(types=4)`, SPHttpClient.configurations.v1)
+                .then((response) => {
+                    if (response.ok) {
+                        response.json().then((data) => {
+                            if (data && data.value) {
+                                resolve(data.value);
+                            }
+                        });
                     }
-
-                    resolve(response);
                 }));
     }
 }

samples/react-followed-drag-and-drop-grid/src/webparts/model/Constants.ts

@@ -1,6 +1,6 @@
 export default class Constants {
     public static appDataFolderName: string = 'followedSitesData';
     public static appDataJsonFileName: string = 'followedSitesSavedData.json';
-    public static urlFollowedSites: string = 'webUrl';
-    public static nameFollowedSites: string = 'displayName';
+    public static urlFollowedSites: string = 'ContentUri';
+    public static nameFollowedSites: string = 'Name';
 }