Changed to show averages with stars.

samples/react-star-ratings/README.md

@@ -44,6 +44,7 @@ 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

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 value = await getRating();
+        if (value) {
+          setValue(value);
+          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
-            : error
-              ? (
+          (() => {
+            if (loading) {
+              return null;
+            }
+            if (error) {
+              return (
                 <MessageBar messageBarType={MessageBarType.error}>
                   {error}
                 </MessageBar>
-              )
-              : (
-                <div className={styles.flex}>
-                  <span>{strings.RateThisPageLabel}: </span>
-                  <TooltipHost content={`${strings.AverageLabel}: ${value.average}, ${strings.CountLabel}: ${value.count}`}>
-                    <Rating
-                      allowZeroStars
-                      rating={value.rating}
-                      size={RatingSize.Small}
-                      styles={ratingStyles}
-                      onChange={handleOnChange} />
-                  </TooltipHost>
-                </div>
-              )
+              );
+            }
+            return (
+              <div className={styles.flex}>
+                <div>{strings.RateThisPageLabel}: </div>
+                <TooltipHost content={`${strings.YourRatingLabel}: ${value.rating}`}>
+                  <Rating
+                    allowZeroStars
+                    rating={value.average}
+                    size={RatingSize.Small}
+                    styles={ratingStyles}
+                    onChange={handleOnChange} />
+                </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",
-    "CountLabel": "Count"
+    "YourRatingLabel": "Your rating"
   }
 });

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

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

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;
-  CountLabel: string;
+  YourRatingLabel: string;
 }
 
 declare module 'RatingsWebPartStrings' {