Merge pull request #2650 from karamem0/react-star-ratings

react-star-ratings - Updated to show averages with stars instead of user ratings

samples/react-star-ratings/README.md

@@ -2,7 +2,7 @@
 
 ## Summary
 
-This web part demonstrates *Star Ratings* capablities to SharePoint News. The "Ratings" site collection feature provides *Likes* and *Star Ratings*, but SharePoint News provides only provides *Likes*. This web part can get or set ratings of the current page.
+This web part demonstrates *Star Ratings* capabilities to SharePoint News. The "Ratings" site collection feature provides *Likes* and *Star Ratings*, but SharePoint News provides only provides *Likes*. This web part can get or set ratings of the current page.
 
 ![react-star-ratings](./assets/react-star-ratings.png)
 
@@ -36,19 +36,6 @@ Enable-PnPFeature -Identity 915c240e-a6cc-49b8-8b2c-0bff8b553ed3
 
 ## Minimal Path to Awesome
 
-<!-- 
-PRO TIP:
-
-For commands, use the `code syntax`
-
-For button labels, page names, dialog names, etc. as they appear on the screen, use **Bold**
-
-Don't use "click", use "select" or "use"
-
-As tempting as it may be, don't just use images to describe the steps. Let's be as inclusive as possible and think about accessibility.
-
--->
-
 * Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-star-ratings) then unzip it)
 * From your command line, change your current directory to the directory containing this sample (`react-star-ratings`, located under `samples`)
 * in the command line run:
@@ -67,13 +54,13 @@ react-star-ratings|[Takashi Shinohara](https://github.com/karamem0) ([@karamem0]
 
 Version|Date|Comments
 -------|----|--------
+1.3|April 27, 2022|Changed to show averages with stars instead of user ratings.
 1.2|March 28, 2022|Upgraded to SPFx v1.14
 1.1|January 12, 2022|Updated to retrieve values from API
 1.0|October 7, 2021|Initial release
 
 ## Help
 
-
 We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for  community members to volunteer their time and help resolve issues.
 
 If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.

samples/react-star-ratings/config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "ratings",
     "id": "1fac5bb8-6a05-4c52-aee3-496f6921ac1a",
-    "version": "1.2.0.0",
+    "version": "1.3.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,

samples/react-star-ratings/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ratings",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "main": "lib/index.js",
   "scripts": {
@@ -14,7 +14,7 @@
     "@microsoft/sp-office-ui-fabric-core": "1.14.0",
     "@microsoft/sp-property-pane": "1.14.0",
     "@microsoft/sp-webpart-base": "1.14.0",
-    "office-ui-fabric-react": "7.183.1",
+    "office-ui-fabric-react": "^7.185.3",
     "react": "16.13.1",
     "react-dom": "16.13.1"
   },

samples/react-star-ratings/src/webparts/ratings/components/Ratings.tsx

@@ -73,21 +73,33 @@ export const Ratings = ({ context, properties }: IRatingsProps) => {
   const [value, setValue] = React.useState<IRatings>();
 
   const getRating = React.useCallback(async (): Promise<IRatings> => {
+    if (!context.pageContext.list) {
+      return;
+    }
+    if (!context.pageContext.listItem) {
+      return;
+    }
     const service = new SPHttpClientService(context);
     await service.ensureFeatureEnabled();
     const user = await service.getCurrentUser();
-    const [ average, count, rating ] = await service.getRating(user.LoginName);
+    const [average, count, rating] = await service.getRating(user.LoginName);
     return {
       rating: rating,
       count: count,
       average: average
     };
-  }, []);
+  }, [context]);
 
   const setRating = React.useCallback(async (rating: number): Promise<void> => {
+    if (!context.pageContext.list) {
+      return;
+    }
+    if (!context.pageContext.listItem) {
+      return;
+    }
     const service = new SPHttpClientService(context);
     await service.setRating(rating);
-  }, []);
+  }, [context]);
 
   const handleOnChange = React.useCallback((_, rating?: number) => {
     if (!rating) {
@@ -99,48 +111,57 @@ export const Ratings = ({ context, properties }: IRatingsProps) => {
         setValue(await getRating());
       } catch (error) {
         setError(error.toString());
-        throw error;
+        console.error(error);
       }
     })();
-  }, [context]);
+  }, []);
 
   React.useEffect(() => {
     (async () => {
       try {
-        setValue(await getRating());
+        const rating = await getRating();
+        if (rating) {
+          setValue(rating);
+          setLoading(false);
+        }
       } catch (error) {
         setError(error.toString());
-      } finally {
+        console.error(error);
         setLoading(false);
       }
     })();
-  }, [context]);
+  }, []);
 
   return (
     <div className={styles.root}>
       <div className={styles.container}>
         {
-          loading
+          (() => {
-            ? null
+            if (loading) {
-            : error
+              return null;
-              ? (
+            }
+            if (error) {
+              return (
                 <MessageBar messageBarType={MessageBarType.error}>
                   {error}
                 </MessageBar>
-              )
+              );
-              : (
+            }
-                <div className={styles.flex}>
+            return (
-                  <span>{strings.RateThisPageLabel}: </span>
+              <div className={styles.flex}>
-                  <TooltipHost content={`${strings.AverageLabel}: ${value.average}, ${strings.CountLabel}: ${value.count}`}>
+                <div>{strings.RateThisPageLabel}: </div>
-                    <Rating
+                <TooltipHost content={`${strings.YourRatingLabel}: ${value.rating}`}>
-                      allowZeroStars
+                  <Rating
-                      rating={value.rating}
+                    allowZeroStars
-                      size={RatingSize.Small}
+                    rating={value.average}
-                      styles={ratingStyles}
+                    size={RatingSize.Small}
-                      onChange={handleOnChange} />
+                    styles={ratingStyles}
-                  </TooltipHost>
+                    onChange={handleOnChange} />
-                </div>
+                </TooltipHost>
-              )
+                <div>{value.count}</div>
+              </div>
+            );
+          })()
         }
       </div>
     </div>

samples/react-star-ratings/src/webparts/ratings/loc/en-us.js

@@ -4,7 +4,6 @@ define([], function() {
     "ActiveColorLabel": "Active Color",
     "InactiveColorLabel": "Inactive Color",
     "RateThisPageLabel": "Rate this page",
-    "AverageLabel": "Average",
+    "YourRatingLabel": "Your rating"
-    "CountLabel": "Count"
   }
 });

samples/react-star-ratings/src/webparts/ratings/loc/ja-jp.js

@@ -4,7 +4,6 @@ define([], function() {
     "ActiveColorLabel": "アクティブな色",
     "InactiveColorLabel": "非アクティブな色",
     "RateThisPageLabel": "このページの評価",
-    "AverageLabel": "平均",
+    "YourRatingLabel": "あなたの評価"
-    "CountLabel": "件数"
   }
 });

samples/react-star-ratings/src/webparts/ratings/loc/mystrings.d.ts

@@ -3,8 +3,7 @@ declare interface IRatingsWebPartStrings {
   ActiveColorLabel: string;
   InactiveColorLabel: string;
   RateThisPageLabel: string;
-  AverageLabel: string;
+  YourRatingLabel: string;
-  CountLabel: string;
 }
 
 declare module 'RatingsWebPartStrings' {