Fixed bugs for react-star-ratings

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
   "solution": {
-    "name": "ratings-client-side-solution",
+    "name": "ratings",
     "id": "1fac5bb8-6a05-4c52-aee3-496f6921ac1a",
     "version": "1.0.0.0",
     "includeClientSideAssets": true,

samples/react-star-ratings/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ratings",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

samples/react-star-ratings/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ratings",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "private": true,
   "main": "lib/index.js",
   "scripts": {

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

@@ -9,6 +9,7 @@ import {
   TooltipHost
 } from '@fluentui/react';
 import styles from './Ratings.module.scss';
+import * as strings from 'RatingsWebPartStrings';
 import { IRatingsProps } from './IRatingsProps';
 import SPHttpClientService from '../services/SPHttpClientService';
 import '../extensions/Map';
@@ -21,8 +22,6 @@ interface IRatings {
 
 export const Ratings = ({ context, properties }: IRatingsProps) => {
 
-  console.log(properties);
-
   const ratingStyles = React.useMemo(() => (props: IRatingStyleProps): Partial<IRatingStyles> => ({
     root: {
       selectors: {
@@ -81,11 +80,11 @@ export const Ratings = ({ context, properties }: IRatingsProps) => {
     const ratings = await service.getRatings();
     const rating = ratings.get(user.LoginName);
     const count = ratings.size;
-    const sum = ratings.values().reduce((current, prev) => prev + current);
+    const sum = ratings.values().reduce((current, prev) => prev + current, 0);
     return {
       rating: rating,
       count: count,
-      average: sum / count
+      average: count ? sum / count : 0
     };
   }, []);
 
@@ -134,8 +133,8 @@ export const Ratings = ({ context, properties }: IRatingsProps) => {
               )
               : (
                 <div className={styles.flex}>
-                  <span>Rate this page: </span>
+                  <span>{strings.RateThisPageLabel}: </span>
-                  <TooltipHost content={`Average: ${value.average}, Count: ${value.count}`}>
+                  <TooltipHost content={`${strings.AverageLabel}: ${value.average}, ${strings.CountLabel}: ${value.count}`}>
                     <Rating
                       allowZeroStars
                       rating={value.rating}

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

@@ -1,7 +1,10 @@
 define([], function() {
   return {
-    "PropertyPaneDescription": "Youn can rate site pages.",
+    "PropertyPaneDescription": "You can rate site pages.",
     "ActiveColorLabel": "Active Color",
-    "InactiveColorLabel": "Inactive Color"
+    "InactiveColorLabel": "Inactive Color",
+    "RateThisPageLabel": "Rate this page",
+    "AverageLabel": "Average",
+    "CountLabel": "Count"
   }
 });

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

@@ -0,0 +1,10 @@
+define([], function() {
+  return {
+    "PropertyPaneDescription": "サイトのページを評価することができます。",
+    "ActiveColorLabel": "アクティブな色",
+    "InactiveColorLabel": "非アクティブな色",
+    "RateThisPageLabel": "このページの評価",
+    "AverageLabel": "平均",
+    "CountLabel": "件数"
+  }
+});

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

@@ -2,6 +2,9 @@ declare interface IRatingsWebPartStrings {
   PropertyPaneDescription: string;
   ActiveColorLabel: string;
   InactiveColorLabel: string;
+  RateThisPageLabel: string;
+  AverageLabel: string;
+  CountLabel: string;
 }
 
 declare module 'RatingsWebPartStrings' {