Merge remote-tracking branch 'upstream/dev' (#1370)

工作心得改版 M1
goodjoblife · Aug 31, 2024 · e82850f · e82850f
2 parents 93fee74 + ac23a82
commit e82850f
Show file tree

Hide file tree

Showing 76 changed files with 1,518 additions and 247 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ GoodJob 職場透明化運動 官網
 我們相信，當職場資訊變得足夠透明，在市場機制的運作下，好的公司更容易找到好人才，變得更有競爭力；條件相對差一點的公司將會提升薪資及福利，以招募更好的人才。台灣的產業整體而言向上提升，進入正向循環。
 
 ### 解決方案
-* [職場透明化運動官網](https://www.goodjob.life)：讓所有勞工可以分享自己的薪資、工時、面試經驗、工作經驗，以及實習經驗。
+* [職場透明化運動官網](https://www.goodjob.life)：讓所有勞工可以分享自己的薪資、工時、面試經驗、評價，以及實習經驗。
 * [勞動知識小教室](https://www.goodjob.life/labor-rights)：一系列實用的勞動權益懶人包
 * [百工寫真](https://media.goodjob.life)：採訪並報導勞工最真實的一面
 

diff --git a/src/actions/experiences.js b/src/actions/experiences.js
@@ -3,7 +3,10 @@ import { tokenSelector } from 'selectors/authSelector';
 import { experienceCountBoxSelector } from 'selectors/countSelector';
 import { queryExperienceCountApi } from 'apis/experiencesApi';
 import { postInterviewExperience as postInterviewExperienceApi } from 'apis/interviewExperiencesApi';
-import { postWorkExperience as postWorkExperienceApi } from 'apis/workExperiencesApi';
+import {
+  postWorkExperience as postWorkExperienceApi,
+  postWorkExperienceWithRating as postWorkExperienceWithRatingApi,
+} from 'apis/workExperiencesApi';
 
 export const SET_COUNT = '@@EXPERIENCES/SET_COUNT';
 
@@ -50,3 +53,16 @@ export const createWorkExperience = ({ body }) => (dispatch, getState) => {
     token,
   });
 };
+
+export const createWorkExperienceWithRating = ({ body }) => (
+  dispatch,
+  getState,
+) => {
+  const state = getState();
+  const token = tokenSelector(state);
+
+  return postWorkExperienceWithRatingApi({
+    body,
+    token,
+  });
+};
diff --git a/src/apis/interviewExperiencesApi.js b/src/apis/interviewExperiencesApi.js
@@ -8,4 +8,4 @@ export const postInterviewExperience = ({ body, token }) =>
     variables: {
       input: body,
     },
-  });
+  }).then(({ createInterviewExperience }) => createInterviewExperience);
diff --git a/src/apis/workExperiencesApi.js b/src/apis/workExperiencesApi.js
@@ -1,5 +1,8 @@
 import graphqlClient from 'utils/graphqlClient';
-import { createWorkExperience as createWorkExperienceGql } from 'graphql/experience';
+import {
+  createWorkExperience as createWorkExperienceGql,
+  createWorkExperienceWithRating as createWorkExperienceWithRatingGql,
+} from 'graphql/experience';
 
 export const postWorkExperience = ({ body, token }) =>
   graphqlClient({
@@ -8,4 +11,15 @@ export const postWorkExperience = ({ body, token }) =>
     variables: {
       input: body,
     },
-  });
+  }).then(({ createWorkExperience }) => createWorkExperience);
+
+export const postWorkExperienceWithRating = ({ body, token }) =>
+  graphqlClient({
+    query: createWorkExperienceWithRatingGql,
+    token,
+    variables: {
+      input: body,
+    },
+  }).then(
+    ({ createWorkExperienceWithRating }) => createWorkExperienceWithRating,
+  );
diff --git a/src/components/About/index.js b/src/components/About/index.js
@@ -77,7 +77,7 @@ const data2017 = [
   },
   {
     month: 8,
-    Content: () => <div>工作經驗、面試經驗分享上線</div>,
+    Content: () => <div>評價、面試經驗分享上線</div>,
   },
 ];
 

diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -14,6 +14,7 @@ import styles from './App.module.css';
 import Header from './Header';
 import Footer from './Footer';
 import ShareInterviewModal from '../ShareExperience/InterviewForm/TypeForm';
+import ShareWorkExperienceModal from '../ShareExperience/WorkExperiencesForm/TypeForm';
 import ShareSalaryWorkTimesModal from '../ShareExperience/TimeSalaryForm/TypeForm';
 import routes from '../../routes';
 
@@ -54,6 +55,10 @@ const App = () => {
         open={share === STATE_SHARE.INTERVIEW}
         onClose={exitShare}
       />
+      <ShareWorkExperienceModal
+        open={share === STATE_SHARE.WORK_EXPERIENCE}
+        onClose={exitShare}
+      />
       <ShareSalaryWorkTimesModal
         open={
           share === STATE_SHARE.SALARY_WORK_TIME ||

diff --git a/src/components/Buy/SubscriptionsSection/Captain.js b/src/components/Buy/SubscriptionsSection/Captain.js
@@ -9,7 +9,7 @@ const Captain = ({ dataCount, endDateTime }) => (
   <Section className={styles.captain}>
     <P>
       解鎖範圍：全站 {formatCommaSeparatedNumber(dataCount || 0)}{' '}
-      筆面試經驗、工作心得、薪資工時資料，及期間內新增的資料
+      筆面試經驗、評價、薪資工時資料，及期間內新增的資料
     </P>
     <P>
       使用期間：現在 ~ {format(endDateTime || new Date(), 'yyyy-MM-dd hh:mm a')}

diff --git a/src/components/CompanyAndJobTitle/InterviewExperiences/InterviewExperiences.module.css b/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) {

diff --git a/src/components/CompanyAndJobTitle/Overview/Helmet.js b/src/components/CompanyAndJobTitle/Overview/Helmet.js
@@ -17,7 +17,7 @@ const formatDataCount = (dataCount, unit, defaultStr) => {
 };
 
 const formatKeyword = name =>
-  `${name}薪水, ${name}加班情況, ${name}工時, ${name}工作心得, ${name}面試心得`;
+  `${name}薪水, ${name}加班情況, ${name}工時, ${name}評價, ${name}面試心得`;
 
 const CompanyOverviewHelmet = ({
   companyName,
@@ -36,7 +36,7 @@ const CompanyOverviewHelmet = ({
     '',
   );
   const workExperiencesStr = formatDataCount(workExperiencesCount, '篇', '');
-  const description = `查看由${companyName}內部員工分享的${salaryWorkTimesStr}薪水及加班數據、${workExperiencesStr}工作心得，以及由面試者分享的${interviewExperiencesStr}面試經驗。`;
+  const description = `查看由${companyName}內部員工分享的${salaryWorkTimesStr}薪水及加班數據、${workExperiencesStr}評價，以及由面試者分享的${interviewExperiencesStr}面試經驗。`;
 
   const path = generatePath('/companies/:companyName', { companyName });
   const url = formatCanonicalPath(path);
@@ -80,7 +80,7 @@ const JobTitleOverviewHelmet = ({
     '',
   );
   const workExperiencesStr = formatDataCount(workExperiencesCount, '篇', '');
-  const description = `查看由${jobTitle}分享的${salaryWorkTimesStr}薪水及加班數據、${workExperiencesStr}工作心得，以及由面試者分享的${interviewExperiencesStr}面試經驗。`;
+  const description = `查看由${jobTitle}分享的${salaryWorkTimesStr}薪水及加班數據、${workExperiencesStr}評價，以及由面試者分享的${interviewExperiencesStr}面試經驗。`;
 
   const path = generatePath('/job-titles/:jobTitle', { jobTitle });
   const url = formatCanonicalPath(path);

diff --git a/src/components/CompanyAndJobTitle/Overview/Overview.js b/src/components/CompanyAndJobTitle/Overview/Overview.js
@@ -53,8 +53,8 @@ const Overview = ({
         />
       </SnippetBlock>
       <SnippetBlock
-        title="工作心得"
-        linkText={`查看 ${workExperiencesCount} 篇完整的工作心得 >>`}
+        title="評價"
+        linkText={`查看 ${workExperiencesCount} 篇完整的評價 >>`}
         linkTo={generateTabURL({
           pageType,
           pageName,

diff --git a/src/components/CompanyAndJobTitle/WorkExperiences/ExperienceEntry.js b/src/components/CompanyAndJobTitle/WorkExperiences/ExperienceEntry.js
@@ -12,6 +12,7 @@ import Bad from 'common/icons/Bad';
 import styles from './WorkExperiences.module.css';
 import { formatSalary, formatSalaryRange } from 'common/formatter';
 import { formatCreatedAt, formatWeekWorkTime } from './helper';
+import OverallRating from 'common/OverallRating';
 
 const createLinkTo = ({ pageType, id }) => ({
   pathname: `/experiences/${id}`,
@@ -31,6 +32,7 @@ const ExperienceEntry = ({
     week_work_time: weekWorkTime,
     salary,
     recommend_to_others: recommendToOthers,
+    averageSectionRating,
   },
   size,
   canView,
@@ -40,37 +42,49 @@ const ExperienceEntry = ({
       <section className={styles.contentWrapper}>
         <div className={styles.labels}>
           <P size="s" className={styles.date}>
-            工作經驗 · {formatCreatedAt(createdAt)}
+            評價 · {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>
-            )}
-            <div className={styles.recommendToOthers}>
-              {recommendToOthers === 'yes' ? <Good /> : <Bad />}
-              {recommendToOthers === 'yes' ? '推' : '不推'}
+            <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}
+                    hasRatingNumber
+                  />
+                </div>
+              ) : (
+                <div className={styles.recommendToOthers}>
+                  {recommendToOthers === 'yes' ? <Good /> : <Bad />}
+                  {recommendToOthers === 'yes' ? '推' : '不推'}
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -103,6 +117,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 })

diff --git a/src/components/CompanyAndJobTitle/WorkExperiences/Helmet.js b/src/components/CompanyAndJobTitle/WorkExperiences/Helmet.js
@@ -9,12 +9,12 @@ import { pageType as PAGE_TYPE } from 'constants/companyJobTitle';
 
 const CompanyWorkExperienceHelmet = ({ companyName, page, totalCount }) => {
   // title
-  const title = `${companyName} 工作心得列表 - 第${page}頁`;
+  const title = `${companyName} 評價列表 - 第${page}頁`;
 
   // description
-  let description = `目前還沒有${companyName}的工作心得。分享你的工作心得，一起讓職場更透明！`;
+  let description = `目前還沒有${companyName}的評價。分享你的評價，一起讓職場更透明！`;
   if (totalCount > 0) {
-    description = `查看${totalCount}篇${companyName}工作心得`;
+    description = `查看${totalCount}篇${companyName}評價`;
   }
 
   // canonical url
@@ -35,7 +35,7 @@ const CompanyWorkExperienceHelmet = ({ companyName, page, totalCount }) => {
       <meta property="og:description" content={description} />
       <meta
         name="keywords"
-        content={`${companyName}工作心得, ${companyName}內部實況, ${companyName}企業文化, ${companyName}職場甘苦談`}
+        content={`${companyName}評價, ${companyName}內部實況, ${companyName}企業文化, ${companyName}職場甘苦談`}
       />
       <meta property="og:url" content={url} />
       <link rel="canonical" href={url} />
@@ -51,12 +51,12 @@ CompanyWorkExperienceHelmet.propTypes = {
 
 const JobTitleWorkExperienceHelmet = ({ jobTitle, page, totalCount }) => {
   // title
-  const title = `${jobTitle} 工作心得列表 - 第${page}頁`;
+  const title = `${jobTitle} 評價列表 - 第${page}頁`;
 
   // description
-  let description = `目前還沒有${jobTitle}的工作心得。分享你的工作心得，一起讓職場更透明！`;
+  let description = `目前還沒有${jobTitle}的評價。分享你的評價，一起讓職場更透明！`;
   if (totalCount > 0) {
-    description = `查看${totalCount}篇${jobTitle}工作心得`;
+    description = `查看${totalCount}篇${jobTitle}評價`;
   }
 
   // canonical url
@@ -77,7 +77,7 @@ const JobTitleWorkExperienceHelmet = ({ jobTitle, page, totalCount }) => {
       <meta property="og:description" content={description} />
       <meta
         name="keywords"
-        content={`${jobTitle}工作心得, ${jobTitle}職場甘苦談`}
+        content={`${jobTitle}評價, ${jobTitle}職場甘苦談`}
       />
       <meta property="og:url" content={url} />
       <link rel="canonical" href={url} />

diff --git a/src/components/CompanyAndJobTitle/WorkExperiences/WorkExperiences.module.css b/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;
+      }
+    }
   }
 }
 
@@ -152,3 +157,7 @@
     }
   }
 }
+
+.overallRatingWrapper {
+  margin: 0;
+}