Feat/work experience average section rating api

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

@@ -37,7 +37,8 @@
 
   > .salaryRatingWrapper {
     display: flex;
-    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
     margin: 12px 0;
 
     @media (min-width: above-small) {

src/components/CompanyAndJobTitle/WorkExperiences/ExperienceEntry.js

@@ -21,8 +21,6 @@ const createLinkTo = ({ pageType, id }) => ({
 
 const SNIPPET_SIZE = 30;
 
-const averageSectionRating = 3.8; // for temporary use
-
 const ExperienceEntry = ({
   pageType,
   data: {
@@ -34,6 +32,7 @@ const ExperienceEntry = ({
     week_work_time: weekWorkTime,
     salary,
     recommend_to_others: recommendToOthers,
+    averageSectionRating,
   },
   size,
   canView,
@@ -46,41 +45,44 @@ const ExperienceEntry = ({
             評價 · {formatCreatedAt(createdAt)}
           </P>
           <div className={styles.salaryRecommendWrapper}>
-            {weekWorkTime && canView && (
-              <div className={styles.weekWorkTime}>
-                <Clock />
-                {formatWeekWorkTime(weekWorkTime)}
-              </div>
-            )}
-            {salary && (
-              <div
-                className={cn(styles.salary, {
-                  [styles.locked]: !canView,
-                })}
-              >
-                {canView ? (
-                  <React.Fragment>
-                    <Coin />
-                    {formatSalary(salary)}
-                  </React.Fragment>
-                ) : (
-                  <React.Fragment>
-                    <FontAwesomeIcon icon={faLock} />
-                    {formatSalaryRange(salary)}
-                  </React.Fragment>
-                )}
-              </div>
-            )}
-            {averageSectionRating !== null ? (
-              <div className={styles.overallRatingWrapper}>
-                <OverallRating rating={averageSectionRating} />
-              </div>
-            ) : (
-              <div className={styles.recommendToOthers}>
-                {recommendToOthers === 'yes' ? <Good /> : <Bad />}
-                {recommendToOthers === 'yes' ? '推' : '不推'}
-              </div>
-            )}
+            <div className={styles.rowWrapper}>
+              {weekWorkTime && canView && (
+                <div className={styles.weekWorkTime}>
+                  <Clock />
+                  {formatWeekWorkTime(weekWorkTime)}
+                </div>
+              )}
+              {salary && (
+                <div
+                  className={cn(styles.salary, {
+                    [styles.locked]: !canView,
+                  })}
+                >
+                  {canView ? (
+                    <React.Fragment>
+                      <Coin />
+                      {formatSalary(salary)}
+                    </React.Fragment>
+                  ) : (
+                    <React.Fragment>
+                      <FontAwesomeIcon icon={faLock} />
+                      {formatSalaryRange(salary)}
+                    </React.Fragment>
+                  )}
+                </div>
+              )}
+
+              {averageSectionRating ? (
+                <div className={styles.overallRatingWrapper}>
+                  <OverallRating rating={averageSectionRating} />
+                </div>
+              ) : (
+                <div className={styles.recommendToOthers}>
+                  {recommendToOthers === 'yes' ? <Good /> : <Bad />}
+                  {recommendToOthers === 'yes' ? '推' : '不推'}
+                </div>
+              )}
+            </div>
           </div>
         </div>
 
@@ -112,6 +114,7 @@ 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 })

src/components/CompanyAndJobTitle/WorkExperiences/WorkExperiences.module.css

@@ -42,13 +42,8 @@
 
   > .salaryRecommendWrapper {
     display: flex;
-    justify-content: space-between;
     margin: 12px 0;
-
-    @media (min-width: above-small) {
-      margin: 0;
-      justify-content: flex-start;
-    }
+    flex-direction: column;
 
     .weekWorkTime,
     .salary,
@@ -57,12 +52,6 @@
       align-items: center;
       font-size: 15px;
       color: #424242;
-    }
-
-    .salary,
-    .weekWorkTime,
-    .recommendToOthers {
-      margin-left: 35px;
 
       svg {
         margin-right: 7px;
@@ -77,6 +66,22 @@
         color: #ed0d5e;
       }
     }
+
+    .rowWrapper {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      justify-content: flex-start;
+    }
+
+    @media (min-width: above-small) {
+      margin: 0;
+      justify-content: flex-start;
+
+      .rowWrapper {
+        gap: 2.5rem;
+      }
+    }
   }
 }
 
@@ -154,5 +159,5 @@
 }
 
 .overallRatingWrapper {
-  margin-left: 1.5rem;
+  margin: 0;
 }

src/components/ExperienceDetail/Article/ArticleInfo.js

@@ -123,7 +123,6 @@ InterviewInfoBlocks.propTypes = {
 
 const WorkInfoBlocks = ({ experience, hideContent }) => {
   const expInYearText = formatExperienceInYear(experience.experience_in_year);
-  const averageSectionRating = 3.62; // for temporary use
   return (
     <Fragment>
       <InfoBlock
@@ -167,7 +166,7 @@ const WorkInfoBlocks = ({ experience, hideContent }) => {
         </InfoBlock>
       ) : null}
       <RatingInfo
-        rating={averageSectionRating}
+        rating={experience.averageSectionRating}
         recommend={experience.recommend_to_others}
       />
     </Fragment>
@@ -176,6 +175,7 @@ const WorkInfoBlocks = ({ experience, hideContent }) => {
 
 WorkInfoBlocks.propTypes = {
   experience: PropTypes.shape({
+    averageSectionRating: PropTypes.number,
     company: PropTypes.shape({
       name: PropTypes.string,
     }),

src/components/ExperienceDetail/Article/InfoBlock.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import cn from 'classnames';
 import PropTypes from 'prop-types';
 import { P } from 'common/base';
 import styles from './InfoBlock.module.css';
 
-const InfoBlock = ({ label, to, children }) => (
-  <li className={styles.block}>
+const InfoBlock = ({ label, to, children, noMargin }) => (
+  <li className={`${styles.block}`}>
     <P size="m" className={styles.label}>
       {label}：
     </P>
-    <P size="m" className={styles.content}>
+    <P size="m" className={cn(styles.content, { [styles.noMargin]: noMargin })}>
       {to ? <Link to={to}>{children}</Link> : children}
     </P>
   </li>
@@ -18,6 +19,7 @@ const InfoBlock = ({ label, to, children }) => (
 InfoBlock.propTypes = {
   children: PropTypes.node,
   label: PropTypes.string.isRequired,
+  noMargin: PropTypes.bool,
   to: PropTypes.string,
 };
 

src/components/ExperienceDetail/Article/InfoBlock.module.css

@@ -1,4 +1,4 @@
-@value gray-dark from "../../common/variables.module.css";
+@value above-mobile, gray-dark from "../../common/variables.module.css";
 
 .block {
   display: flex;
@@ -30,3 +30,9 @@
     }
   }
 }
+
+.content.noMargin {
+  @media (max-width: above-mobile) {
+    margin-left: 0px;
+  }
+}

src/components/ExperienceDetail/Article/RatingInfo.js

@@ -27,7 +27,7 @@ RecommendationIcon.propTypes = {
 const RatingInfo = ({ rating, recommend }) => {
   if (rating > 0) {
     return (
-      <InfoBlock label="整體評價">
+      <InfoBlock label="整體評價" noMargin>
         <OverallRating rating={rating} hasRatingLabel />
       </InfoBlock>
     );

src/components/common/OverallRating/Rating.js

@@ -10,7 +10,7 @@ const Rating = ({ rating, textYellow }) => (
       [styles.textYellow]: !textYellow,
     })}
   >
-    {rating} 分
+    {rating.toFixed(1)} 分
   </div>
 );
 

src/components/common/OverallRating/Rating.module.css

@@ -1,4 +1,4 @@
-@value main-yellow, yellow-light from "../../common/variables.module.css";
+@value below-mobile, main-yellow, yellow-light from "../../common/variables.module.css";
 
 .overallRating {
   display: flex;
@@ -11,15 +11,15 @@
 }
 
 .rating {
-  margin: 0 1rem 0 0;
+  margin: 0 0.5rem 0 0;
 }
 
 .textYellow {
   color: main-yellow;
 }
 
 .ratingLabel {
-  margin-left: 10px;
+  margin-left: 1.5rem;
   display: inline-block;
   padding: 4px 16px;
   background-color: yellow-light;
@@ -48,13 +48,11 @@
   border-right-color: yellow-light;
 }
 
-@media (max-width: 430px) {
+@media (max-width: below-mobile) {
   .overallRating {
-    flex-direction: column;
-    align-items: flex-start;
+    flex-direction: row;
   }
-
-  .rating {
-    margin: 0 0 2px 0;
+  .ratingLabel {
+    margin-left: 0.5rem;
   }
 }

src/components/common/OverallRating/Thumbs.module.css

@@ -1,14 +1,15 @@
+@value below-mobile, main-yellow, yellow-light from "../../common/variables.module.css";
+
 .thumbsContainer {
   display: flex;
   align-items: center;
-  width: 9rem;
+  width: 120px;
   justify-content: space-between;
-  margin-right: 1.5rem;
 }
 
 .thumb {
-  width: 18px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
 }
 
 .thumbContainer {
@@ -28,7 +29,7 @@
   clip-path: polygon(0 0, var(--clip-x) 0, var(--clip-x) 100%, 0 100%);
 }
 
-@media (max-width: 430px) {
+@media (max-width: below-mobile) {
   .thumbsContainer {
     width: 8rem;
     margin-right: 0.5rem;

src/components/common/OverallRating/index.js

@@ -5,17 +5,15 @@ import Thumbs from './Thumbs';
 import { Rating, RatingLabel } from './Rating';
 import styles from './Rating.module.css';
 
-const OverallRating = ({ rating, hasRatingLabel }) => {
-  return (
-    <div className={cn(styles.overallRating)}>
-      <Rating rating={rating} textYellow={hasRatingLabel} />
-      <div className={styles.ratingInfo}>
-        <Thumbs rating={rating} />
-        {hasRatingLabel && <RatingLabel rating={rating} />}
-      </div>
+const OverallRating = ({ rating, hasRatingLabel }) => (
+  <div className={cn(styles.overallRating)}>
+    <Rating rating={rating} textYellow={hasRatingLabel} />
+    <div className={styles.ratingInfo}>
+      <Thumbs rating={rating} />
+      {hasRatingLabel && <RatingLabel rating={rating} />}
     </div>
-  );
-};
+  </div>
+);
 
 OverallRating.propTypes = {
   hasRatingLabel: PropTypes.bool,

src/graphql/company.js

@@ -55,6 +55,7 @@ export const getCompanyQuery = /* GraphQL */ `
         reply_count
         like_count
         recommend_to_others
+        averageSectionRating
       }
       salary_work_times {
         id

src/graphql/experience.js

@@ -69,6 +69,7 @@ export const queryExperienceGql = /* GraphQL */ `
         }
         week_work_time
         recommend_to_others
+        averageSectionRating
       }
     }
   }
@@ -151,6 +152,7 @@ export const queryRelatedExperiencesGql = /* GraphQL */ `
           }
           week_work_time
           recommend_to_others
+          averageSectionRating
         }
       }
     }