Feat/report button graphql #1471

YongChenSu · 2025-01-04T16:16:57Z

Close #1380
Close #1379

這個 PR 是？

更新「面試頁面 / 評價頁面 (experience) 」回報數量顯示。
更新「公司薪資列表頁面 (companies)」回報數量顯示。
新增「面試頁面 / 評價頁面 (experience)」回報功能。

Screenshots

有什麼背景知識是我需要知道的？

PRD:
https://goodjoblife.atlassian.net/wiki/spaces/GJ/pages/81133569/PRD

我應該如何手動測試？

第一次檢舉後理應成功，重複檢舉相同文章會出現「已檢舉」等相關提示。

TODOs

職稱薪資列表頁面 (job-titles) 待確認是否成功顯示。
公司薪資列表頁面 / 職稱薪資列表頁面，回報功能待實作。

…opTypes

YongChenSu · 2025-01-04T16:33:31Z

import 路徑有問題導致 CI fail，但我 local run 起來挺正常的，我再檢查一下。

mark86092 · 2025-01-04T17:04:01Z

src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.js

+import styles from './ReportDialog.module.css';
+import cn from 'classnames';
+
+const ReportDialog = ({ reportCount, isHighlighted }) => {


consider using ({ reportCount = 0, isHighlighted = false })

不過我該支檔案的最下方有寫 defaultProps，這樣也需要在參數中加上 parameter 中加上 default 值嗎?

ReportDialog.defaultProps = { isHighlighted: false, reportCount: 0, };

react 給出這樣：https://react.dev/learn/passing-props-to-a-component#specifying-a-default-value-for-a-prop （用參數的預設值來處理）

defaultProps 他是沒有說不能用，但也沒建議用

src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.js

mark86092 · 2025-01-04T17:07:02Z

src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.js

+
+ReportDialog.propTypes = {
+  isHighlighted: PropTypes.bool,
+  reportCount: PropTypes.number,


The graph api has reportCount: Int!, is there any cases reportCount is null, undefined?

mark86092 · 2025-01-04T17:08:12Z

src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.js

ReportDialog 看起來會給 Experience, SalaryWorkTime 使用，建議放在共用的地方，而不是 TimeAndSalary 資料夾

mark86092 · 2025-01-04T17:09:09Z

src/components/ExperienceDetail/Article/ArticleInfo.js

@@ -127,6 +135,12 @@ const WorkInfoBlocks = ({ experience, hideContent }) => {
  const expInYearText = formatExperienceInYear(experience.experience_in_year);
  return (
    <Fragment>
+      <div className={styles.reportDialogContainer}>
+        <ReportDialog reportCount={experience.report_count} />
+        {Boolean(experience.report_count) && (


Boolean(experience.report_count) 是？這邊是想實作 > 0 的意思嗎？

是為了解決這件事：當 experience.report_count 為 0 時，會顯示 0。因為使用 && 且 0 為 falsy，故顯示 0。

我改成 experience.report_count > 0 ，這樣比較好理解

mark86092 · 2025-01-04T17:11:27Z

src/components/ExperienceDetail/Article/ArticleInfo.js

@@ -195,6 +209,7 @@ WorkInfoBlocks.propTypes = {
    originalCompanyName: PropTypes.string.isRequired,
    recommend_to_others: PropTypes.string,
    region: PropTypes.string,
+    report_count: PropTypes.number,


根據 Graphql api, report_count 應該是 PropTypes.number.isRequired

https://github.com/goodjoblife/WorkTimeSurvey-backend/blob/master/schema.graphql#L204-L206

interface Experience { report_count: Int! }

喔喔，謝謝，我會再注意 schema 有無帶驚嘆號這件事，謝謝

peteranny · 2025-01-05T08:37:53Z

src/components/ExperienceDetail/ReportModal.js

+    fetchPermission();
+  }, [experienceId, fetchPermission]);
+
+  const renderModalChildren = useCallback(


Suggestion: We can make it a pure functional component.

const ModalContent = ({ modalState ... }) => { ... }

so as to avoid nested components in useCallback.

I made it to a pure func component. Thanks for suggestion.

mark86092 · 2025-01-10T07:10:26Z

src/apis/reports.js

+export const getReports = ({ id }) =>
+  fetchUtil(`/experiences/${id}/reports`)
+    .get()
+    .then(R.prop('reports'));


可以改用 graphql api

query { experience(id: $id) { reports { id reasonCategory reason createdAt } } }

ref: https://github.com/goodjoblife/WorkTimeSurvey-backend/blob/master/schema.graphql#L269-L271

mark86092 · 2025-01-10T07:11:52Z

src/graphql/jobTitle.js

@@ -79,6 +79,9 @@ export const queryJobTitleOverviewGql = /* GraphQL */ `
      salaryWorkTimesResult(start: 0, limit: $salaryWorkTimesLimit) {
        count
        salaryWorkTimes {
+          reports {
+            id
+          }


如果是為了拿到數量，最近我有實作給 salaryWorkTime 的 reportCount 可以拿

https://github.com/goodjoblife/WorkTimeSurvey-backend/blob/master/schema.graphql#L729C3-L730

mark86092 · 2025-01-10T07:11:57Z

src/graphql/jobTitle.js

@@ -139,6 +142,9 @@ export const getJobTitleTimeAndSalaryQuery = /* GraphQL */ `
      ) {
        count
        salaryWorkTimes {
+          reports {
+            id
+          }


如果是為了拿到數量，最近我有實作 reportCount 可以拿

https://github.com/goodjoblife/WorkTimeSurvey-backend/blob/master/schema.graphql#L729C3-L730

barry800414 · 2025-01-11T03:54:11Z

@YongChenSu

是我 spec 沒有寫清楚。沒有任何回報的時候，experience 單篇右上角的 icon 不用顯示。因為顯示卻不能按有點怪。
手機版這三顆按鈕會跑版
薪資列表的回報按鈕無法按
單篇有人回報的情況下，沒有辦法看到內文。預期的行為是可以點進去先看別人的回報，要回報再進行回報

YongChenSu · 2025-01-12T16:09:39Z

@YongChenSu

是我 spec 沒有寫清楚。沒有任何回報的時候，experience 單篇右上角的 icon 不用顯示。因為顯示卻不能按有點怪。

手機版這三顆按鈕會跑版

薪資列表的回報按鈕無法按

單篇有人回報的情況下，沒有辦法看到內文。預期的行為是可以點進去先看別人的回報，要回報再進行回報

謝謝韋銘拉會議說明，經討論後只有 1. 彼此認知不一樣，3. 4. 點彼此理解一樣，是我 PR 描述不夠清楚，我會於該 PR 更新並修正。

YongChenSu added 20 commits November 17, 2024 22:53

feat: add ReportDialog

629fc32

refactor: remove unnecessary usage of Boolean()

bfd215f

fix: set the default value of salaryWorkTimeReports to []

72d5a95

refactor: make props of Icon optional

c2cc351

Merge branch 'dev' into feat/report-button

b462da3

fix: update Icon component props to optional

1c92ec4

feat: add graphQL query parameter

955d0a8

feat: add CreateExperienceReport

3e8a6d0

fix: update createExperienceReport default value

efca268

feat: update to get reports on WorkingHourTable

ac89339

feat: update to get reportCount on experience page

7e86f59

feat: add useReportModal hook

7e4eff3

feat: add ReportDialog component to InterviewInfoBlocks and define pr…

feb6dde

…opTypes

feat: update formCheck validation and key of stateToApiParams

aa39e94

feat: update Heading margin bottom

ab79e68

feat: add report form constants

112d475

feat: add ReportModal

d8b5ca8

feat: update ReportForm

e36c6cd

feat: update to use ReportModal and useReportModal

d93f427

fix: correct import path

4aaadbe

YongChenSu requested review from mark86092 and peteranny January 4, 2025 16:17

YongChenSu mentioned this pull request Jan 4, 2025

feat: add ReportDialog #1453

Open

fix: compose to Boolean

591a159

mark86092 reviewed Jan 4, 2025

View reviewed changes

src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.js Outdated Show resolved Hide resolved

mark86092 reviewed Jan 4, 2025

View reviewed changes

src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.js Outdated Show resolved Hide resolved

mark86092 reviewed Jan 4, 2025

View reviewed changes

peteranny reviewed Jan 5, 2025

View reviewed changes

YongChenSu added 5 commits January 8, 2025 14:27

fix: add isShowReportCount

fe9425b

fix: mark report_count as a required prop (PropTypes.number.isRequired)

5d652f1

refactor: update to experience.report_count > 0

bc65ba5

fix: file path name

558039b

fix: file path name

055c401

mark86092 reviewed Jan 10, 2025

View reviewed changes

YongChenSu added 4 commits January 12, 2025 21:52

refactor: add pure function ModalContent

4009260

refactor: use useReportModal in ReportModal

b9be1ab

refactor: update ReportDialog

99e6b36

feat: can see modal when click <ReportDialog /> has reportCount

fc48ff1

YongChenSu marked this pull request as draft January 12, 2025 16:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/report button graphql #1471

Feat/report button graphql #1471

YongChenSu commented Jan 4, 2025

YongChenSu commented Jan 4, 2025 •

edited

Loading

mark86092 Jan 4, 2025

YongChenSu Jan 8, 2025

mark86092 Jan 10, 2025

mark86092 Jan 4, 2025

mark86092 Jan 4, 2025 •

edited

Loading

mark86092 Jan 4, 2025 •

edited

Loading

YongChenSu Jan 8, 2025

mark86092 Jan 4, 2025

YongChenSu Jan 8, 2025

peteranny Jan 5, 2025

YongChenSu Jan 12, 2025

mark86092 Jan 10, 2025

mark86092 Jan 10, 2025 •

edited

Loading

mark86092 Jan 10, 2025 •

edited

Loading

barry800414 commented Jan 11, 2025 •

edited

Loading

YongChenSu commented Jan 12, 2025

Feat/report button graphql #1471

Are you sure you want to change the base?

Feat/report button graphql #1471

Conversation

YongChenSu commented Jan 4, 2025

這個 PR 是？

Screenshots

有什麼背景知識是我需要知道的？

我應該如何手動測試？

TODOs

YongChenSu commented Jan 4, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mark86092 Jan 4, 2025 • edited Loading

Choose a reason for hiding this comment

mark86092 Jan 4, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mark86092 Jan 10, 2025 • edited Loading

Choose a reason for hiding this comment

mark86092 Jan 10, 2025 • edited Loading

Choose a reason for hiding this comment

barry800414 commented Jan 11, 2025 • edited Loading

YongChenSu commented Jan 12, 2025

YongChenSu commented Jan 4, 2025 •

edited

Loading

mark86092 Jan 4, 2025 •

edited

Loading

mark86092 Jan 4, 2025 •

edited

Loading

mark86092 Jan 10, 2025 •

edited

Loading

mark86092 Jan 10, 2025 •

edited

Loading

barry800414 commented Jan 11, 2025 •

edited

Loading