From f2193b10a2e3916cc72211d4db59233f2f2e5411 Mon Sep 17 00:00:00 2001 From: Maya-Mostafa Date: Tue, 17 May 2022 11:28:28 -0400 Subject: [PATCH 1/3] issue fix- checking if items are defined before performing sort & filter --- .../components/FollowDocumentWebPart.tsx | 33 +++++++++++-------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.tsx b/samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.tsx index 2f1ab9dab..132af11e6 100644 --- a/samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.tsx +++ b/samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.tsx @@ -65,22 +65,29 @@ export default class FollowDocumentWebPart extends React.Component { - //Order by Date - Items = Items.sort((a, b) => { - return b.followedDateTime.getTime() - a.followedDateTime.getTime(); - }); - let uniq = {}; + let group: Array = new Array(); - //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({ - key: Item.WebUrl, - text: "Site: " + Item.WebName, + + if(Items){ //checking if there are items before performing sort & filter to fix the error of running those functions on undefined + //Order by Date + 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, From d50b0c915fb3d764b7d9b9f96b6886a48a7183d5 Mon Sep 17 00:00:00 2001 From: Maya-Mostafa Date: Tue, 17 May 2022 11:33:46 -0400 Subject: [PATCH 2/3] Adding a message when there are no items returned. Using MS office look & feel --- .../FollowDocumentWebPart.module.scss | 28 +++++++++++++++++++ .../components/FollowDocumentWebPart.tsx | 12 ++++++++ 2 files changed, 40 insertions(+) diff --git a/samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.module.scss b/samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.module.scss index d958d913e..c1a6c2f5d 100644 --- a/samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.module.scss +++ b/samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.module.scss @@ -36,4 +36,32 @@ .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; + } + } } \ No newline at end of file diff --git a/samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.tsx b/samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.tsx index 132af11e6..fa0dab2ca 100644 --- a/samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.tsx +++ b/samples/react-follow-document/src/webparts/followDocumentWebPart/components/FollowDocumentWebPart.tsx @@ -448,6 +448,18 @@ export default class FollowDocumentWebPart extends React.Component this._onRenderGridItem(item, finalSize, isCompact)} /> + {/* No Items message */} + {!this.state.visible && !this.state.ItemsSearch && +
+
+ Empty state icon +
+
+
No favorites yet
+
See something you love? Favorite it and we'll put it here.
+
+
+ } ); } From 9d65e08a774bee5feda31ece2eeebb450731ce68 Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Thu, 2 Jun 2022 01:04:55 -0400 Subject: [PATCH 3/3] Updated readme and sample --- samples/react-follow-document/README.md | 1 + samples/react-follow-document/assets/sample.json | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/samples/react-follow-document/README.md b/samples/react-follow-document/README.md index 3ca33a9c3..9df848b4d 100644 --- a/samples/react-follow-document/README.md +++ b/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 diff --git a/samples/react-follow-document/assets/sample.json b/samples/react-follow-document/assets/sample.json index 8c61f2215..957dbf567 100644 --- a/samples/react-follow-document/assets/sample.json +++ b/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": [