feat: add ReportDialog

src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ReportDialog.module.css';
+import cn from 'classnames';
+
+const ReportDialog = ({ reportCount, isHighlighted }) => {
+  return (
+    <div
+      className={cn(styles.dialogWrapper, {
+        [styles.highlighted]: isHighlighted,
+        [styles.enabled]: reportCount,
+      })}
+    >
+      <div className={styles.dialogBox}>{reportCount ? reportCount : '!'}</div>
+      <div className={styles.dialogTriangle}></div>
+    </div>
+  );
+};
+
+ReportDialog.propTypes = {
+  isHighlighted: PropTypes.bool,
+  reportCount: PropTypes.number,
+};
+ReportDialog.defaultProps = {
+  isHighlighted: false,
+  reportCount: 0,
+};
+
+export default ReportDialog;

src/components/CompanyAndJobTitle/TimeAndSalary/ReportDialog.module.css

@@ -0,0 +1,43 @@
+@value gray-dark, main-yellow from "../../common/variables.module.css";
+
+.dialogBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  color: white;
+  z-index: 1;
+  min-width: 25px;
+  width: fit-content;
+  font-size: 13px;
+  height: 20px;
+  padding: 3px 6px;
+  background-color: var(--dialog-color);
+}
+
+.dialogTriangle {
+  position: absolute;
+  bottom: -5px;
+  left: 2px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 10px solid var(--dialog-color);
+  z-index: 0;
+}
+
+.dialogWrapper {
+  --dialog-color: gray-dark;
+  position: relative;
+  width: fit-content;
+}
+
+.enabled {
+  --dialog-color: #333;
+}
+
+.enabled.highlighted:hover {
+  --dialog-color: main-yellow;
+}

src/components/CompanyAndJobTitle/TimeAndSalary/WorkingHourTable.js

@@ -17,9 +17,11 @@ import {
   getWeekWorkTime,
   formatWage,
   formatDate,
+  getReportCount,
 } from '../../TimeAndSalary/common/formatter';
 import injectHideContentBlock from '../../TimeAndSalary/common/injectHideContentBlock';
 import usePermission from 'hooks/usePermission';
+import ReportDialog from './ReportDialog';
 
 const SalaryHeader = ({ isInfoSalaryModalOpen, toggleInfoSalaryModal }) => (
   <React.Fragment>
@@ -126,6 +128,17 @@ const columnProps = [
     ),
     Children: TimeHeader,
   },
+  {
+    className: styles.colDataTime,
+    title: '回報',
+    dataField: R.compose(
+      reportCount => <ReportDialog reportCount={reportCount} />,
+      getReportCount,
+      // TODO: 暫時給 10 筆資料，屆時要換成 R.prop('salary_work_times'), or report_count
+      () => Array(10).fill(0),
+    ),
+    Children: () => '回報',
+  },
 ];
 
 const WorkingHourTable = ({ data, pageType }) => {

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

@@ -1,4 +1,4 @@
-@value white-light, border-gray, main-yellow, yellow-light from "../../common/variables.module.css";
+@value white-light, border-gray, main-yellow, yellow-light, below-mobile from "../../common/variables.module.css";
 
 $padding: 40px;
 $paddingS: 16px;
@@ -88,3 +88,23 @@ $paddingS: 16px;
   justify-content: center;
   margin-bottom: 30px;
 }
+
+.reportDialogContainer {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 20px;
+}
+
+.reportText {
+  margin-left: 2.5px;
+}
+
+@media (max-width: below-mobile) {
+  .reportDialogContainer {
+    position: relative;
+    justify-content: flex-end;
+    margin-bottom: 8px;
+    right: 0px;
+  }
+}

src/components/ExperienceDetail/Article/ArticleInfo.js

@@ -12,6 +12,7 @@ import {
 } from 'constants/companyJobTitle';
 import { originalCompanyNameSelector } from '../experienceSelector';
 import RatingInfo from './RatingInfo';
+import ReportDialog from 'components/CompanyAndJobTitle/TimeAndSalary/ReportDialog';
 
 const formatDate = date => `${date.getFullYear()} 年 ${date.getMonth() + 1} 月`;
 const formatExperienceInYear = year => {
@@ -123,10 +124,17 @@ InterviewInfoBlocks.propTypes = {
   hideContent: PropTypes.bool,
 };
 
+const reportCount = 90; // for temp
+
 const WorkInfoBlocks = ({ experience, hideContent }) => {
+  // TODO: 有 report count 後，要看 console.log({ experience });
   const expInYearText = formatExperienceInYear(experience.experience_in_year);
   return (
     <Fragment>
+      <div className={styles.reportDialogContainer}>
+        <ReportDialog reportCount={reportCount} />
+        {reportCount && <div className={styles.reportText}>有使用者回報</div>}
+      </div>
       <InfoBlock
         label="公司"
         to={generatePageURL({

src/components/ExperienceDetail/Article/ReactionZone.js

@@ -7,6 +7,7 @@ import styles from './ReactionZone.module.css';
 import useQueryLike from '../hooks/useQueryLike';
 import useToggleLike from '../hooks/useToggleLike';
 import useLoginFlow from '../hooks/useLoginFlow';
+import ReportDialog from 'components/CompanyAndJobTitle/TimeAndSalary/ReportDialog';
 
 const ReactionButton = ({ className, Icon, active, children, ...props }) => (
   <button
@@ -17,12 +18,13 @@ const ReactionButton = ({ className, Icon, active, children, ...props }) => (
     )}
     {...props}
   >
-    <Icon className={cn(styles.icon)} /> {children}
+    {Icon && <Icon className={cn(styles.icon)} />}
+    {children}
   </button>
 );
 
 ReactionButton.propTypes = {
-  Icon: PropTypes.func.isRequired,
+  Icon: PropTypes.func,
   active: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
@@ -53,6 +55,8 @@ const ReactionZone = ({ experienceId, onClickMsgButton }) => {
     }
   }, [likeState.loading, likeState.value]);
 
+  const reportCount = 10; // TODO: 待拿 report count
+
   return (
     <div className={styles.reactionZone}>
       <ReactionButton
@@ -70,6 +74,13 @@ const ReactionZone = ({ experienceId, onClickMsgButton }) => {
       >
         留言
       </ReactionButton>
+      <ReactionButton className={styles.report}>
+        <ReportDialog
+          reportCount={reportCount}
+          isHighlighted={Boolean(reportCount)}
+        />
+        <div className={styles.reportText}>回報</div>
+      </ReactionButton>
     </div>
   );
 };

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

@@ -2,10 +2,24 @@
 
 .reactionZone {
   border-top: 1px solid border-gray;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 
   .reactionButton {
     border-right: 1px solid border-gray;
   }
+
+  .report {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    border-right: none;
+  }
+
+  .reportText {
+    margin-left: 0.5rem;
+  }
 }
 
 .reactionButton {

src/components/TimeAndSalary/common/formatter.js

@@ -110,3 +110,7 @@ export const formatWage = wage => {
 
 export const formatDate = ({ year, month }) =>
   `${year}.${month >= 10 ? '' : 0}${month}`;
+
+export const getReportCount = (salaryWorkTimeReports = []) => {
+  return salaryWorkTimeReports.length;
+};