Merge pull request #2706 from Maya-Mostafa/modifications

Modifications

samples/react-follow-document/README.md

@@ -79,6 +79,7 @@ Version|Date|Comments
 1.0|June 22, 2021|Initial release
 2.0|November 25, 2021|Change to use Microsoft Graph Follow
 3.0|January 13, 2022|Graph fixes
+3.1|May 17, 2022|Fixed issue when no items are returned
 
 ## Minimal Path to Awesome
 

samples/react-follow-document/assets/sample.json

@@ -9,7 +9,7 @@
       "identify/follow user key documents from all Tenant and easily access them in Modern Pages and Microsoft Teams"
     ],
     "creationDateTime": "2021-06-21",
-    "updateDateTime": "2022-01-13",
+    "updateDateTime": "2022-05-17",
     "products": [
       "SharePoint"
     ],
@@ -42,6 +42,11 @@
         "gitHubAccount": "aaclage",
         "pictureUrl": "https://github.com/aaclage.png",
         "name": "André Lage"
+      },
+      {
+        "gitHubAccount": "Maya-Mostafa",
+        "pictureUrl": "https://github.com/Maya-Mostafa.png",
+        "name": "Mai Mostafa"
       }
     ],
     "references": [

samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.module.scss

@@ -37,3 +37,31 @@
 .DocumentCardActionsPadding{
   padding: 4px 4px;
 }
+
+// No Items message
+.emptyStateControl{
+  position: relative;
+  width: 50%;
+  text-align: center;
+  padding-bottom: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  .emptyStateImage{
+    margin-top: 56px;
+  }
+  .emptyStateTextWrapper{
+    margin-top: 32px;
+    .title{
+      color: #424242;
+      font-size: 20px;
+      font-weight: 600;
+      text-align: center;
+    }
+    .subtitle{
+      color: #424242;
+      font-size: 14px;
+      font-weight: 400;
+      text-align: center;
+    }
+  }
+}

samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.tsx

@@ -65,22 +65,29 @@ export default class FollowDocumentWebPart extends React.Component<IFollowDocume
     }
     let followDocuments: FollowDocument[] = [];
     this.getFollowDocuments(followDocuments).then((Items: FollowDocument[]) => {
-      //Order by Date
+
-      Items = Items.sort((a, b) => {
-        return b.followedDateTime.getTime() - a.followedDateTime.getTime();
-      });
-      let uniq = {};
       let group: Array<IDropdownOption> = new Array<IDropdownOption>();
-      //Remove duplicated from array
-      let uniqueArray = [];
-      uniqueArray = Items.filter(obj => !uniq[obj.WebUrl] && (uniq[obj.WebUrl] = true));
       group.push({ key: '0', text: 'All Sites' });
-      uniqueArray.forEach(Item => {
+
-        group.push({
+      if(Items){ //checking if there are items before performing sort & filter to fix the error of running those functions on undefined
-          key: Item.WebUrl,
+        //Order by Date
-          text: "Site: " + Item.WebName,
+        Items = Items.sort((a, b) => {
+          return b.followedDateTime.getTime() - a.followedDateTime.getTime();
         });
-      });
+
+        let uniq = {};
+        //Remove duplicated from array
+        let uniqueArray = [];
+        uniqueArray = Items.filter(obj => !uniq[obj.WebUrl] && (uniq[obj.WebUrl] = true));
+        
+        uniqueArray.forEach(Item => {
+          group.push({
+            key: Item.WebUrl,
+            text: "Site: " + Item.WebName,
+          });
+        });
+      }
+
       this.setState({
         Items: Items,
         ItemsSearch: Items,
@@ -441,6 +448,18 @@ export default class FollowDocumentWebPart extends React.Component<IFollowDocume
             onRenderGridItem={(item, finalSize: ISize, isCompact: boolean) => this._onRenderGridItem(item, finalSize, isCompact)}
           />
         </div>
+        {/* No Items message */}
+        {!this.state.visible && !this.state.ItemsSearch &&
+          <div className={styles.emptyStateControl}>
+            <div className={styles.emptyStateImage}>
+              <img src="https://res.cdn.office.net/officehub/officestartresources/favorites_light_and_dark.svg" alt="Empty state icon" />
+            </div>
+            <div className={styles.emptyStateTextWrapper}>
+              <div className={styles.title} role="status" aria-live="polite">No favorites yet</div>
+              <div className={styles.subtitle} role="status" aria-live="polite">See something you love? Favorite it and we'll put it here.</div>
+            </div>
+          </div>
+        }
       </>
     );
   }