reuse component

src/components/CompanyAndJobTitle/InterviewExperiences/ExperienceEntry.js

@@ -10,6 +10,7 @@ import Coin from 'common/icons/Coin';
 import styles from './InterviewExperiences.module.css';
 import { formatCreatedAt, formatSalary, formatSalaryRange } from './helper';
 import Rating from './Rating';
+import OverallRating from 'common/OverallRating';
 
 const createLinkTo = ({ id, pageType }) => ({
   pathname: `/experiences/${id}`,
@@ -27,6 +28,7 @@ const ExperienceEntry = ({
     created_at: createdAt,
     salary,
     overall_rating: overallRating,
+    averageSectionRating,
     sections: [section],
   },
   size,
@@ -60,12 +62,13 @@ const ExperienceEntry = ({
                 )}
               </div>
             )}
-            <div className={styles.rating}>
-              <div className={styles.label}>
-                評分：{overallRating.toFixed(1)} 分
+            {typeof averageSectionRating !== 'undefined' ? (
+              <OverallRating rating={averageSectionRating} hasRatingNumber />
+            ) : (
+              <div className={styles.rating}>
+                <Rating rate={overallRating} />
               </div>
-              <Rating rate={overallRating} />
-            </div>
+            )}
           </div>
         </div>
 
@@ -97,12 +100,13 @@ const ExperienceEntry = ({
 ExperienceEntry.propTypes = {
   canView: PropTypes.bool.isRequired,
   data: PropTypes.shape({
+    averageSectionRating: PropTypes.number,
     created_at: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
     job_title: PropTypes.shape({ name: PropTypes.string.isRequired })
       .isRequired,
     originalCompanyName: PropTypes.string,
-    overall_rating: PropTypes.number.isRequired,
+    overall_rating: PropTypes.number,
     salary: PropTypes.shape({
       amount: PropTypes.number.isRequired,
       type: PropTypes.string.isRequired,

src/components/CompanyAndJobTitle/InterviewExperiences/InterviewExperiences.module.css

@@ -70,10 +70,6 @@
     }
 
     .rating {
-      .label {
-        margin-right: 1em;
-      }
-
       svg {
         cursor: auto;
         width: 24px;