[經驗單篇] 允許觀看自己的文章

src/actions/experiences.js

@@ -7,6 +7,7 @@ import {
   postWorkExperience as postWorkExperienceApi,
   postWorkExperienceWithRating as postWorkExperienceWithRatingApi,
 } from 'apis/workExperiencesApi';
+import { queryMyPublishIds } from './me';
 
 export const SET_COUNT = '@@EXPERIENCES/SET_COUNT';
 
@@ -34,35 +35,53 @@ export const queryExperienceCountIfUnfetched = () => async (
   }
 };
 
-export const createInterviewExperience = ({ body }) => (dispatch, getState) => {
+export const createInterviewExperience = ({ body }) => async (
+  dispatch,
+  getState,
+) => {
   const state = getState();
   const token = tokenSelector(state);
 
-  return postInterviewExperienceApi({
+  const result = await postInterviewExperienceApi({
     body,
     token,
   });
+
+  await dispatch(queryMyPublishIds());
+
+  return result;
 };
 
-export const createWorkExperience = ({ body }) => (dispatch, getState) => {
+export const createWorkExperience = ({ body }) => async (
+  dispatch,
+  getState,
+) => {
   const state = getState();
   const token = tokenSelector(state);
 
-  return postWorkExperienceApi({
+  const result = await postWorkExperienceApi({
     body,
     token,
   });
+
+  await dispatch(queryMyPublishIds());
+
+  return result;
 };
 
-export const createWorkExperienceWithRating = ({ body }) => (
+export const createWorkExperienceWithRating = ({ body }) => async (
   dispatch,
   getState,
 ) => {
   const state = getState();
   const token = tokenSelector(state);
 
-  return postWorkExperienceWithRatingApi({
+  const result = await postWorkExperienceWithRatingApi({
     body,
     token,
   });
+
+  await dispatch(queryMyPublishIds());
+
+  return result;
 };

src/actions/me.js

@@ -0,0 +1,43 @@
+import { queryMyPublishIdsApi } from 'apis/me';
+import { tokenSelector } from 'selectors/authSelector';
+import { myPublishIdsSelector } from 'selectors/me';
+import {
+  isUnfetched,
+  isError,
+  getError,
+  getFetched,
+  toFetching,
+} from 'utils/fetchBox';
+
+export const SET_MY_PUBLISH_IDS = '@@me/SET_MY_PUBLISH_IDS';
+
+const setMyPublishIds = box => ({
+  type: SET_MY_PUBLISH_IDS,
+  box,
+});
+
+export const queryMyPublishIdsIfNeeded = () => async (dispatch, getState) => {
+  const myPublishIdsBox = myPublishIdsSelector(getState());
+
+  if (isUnfetched(myPublishIdsBox) || isError(myPublishIdsBox)) {
+    dispatch(queryMyPublishIds());
+  }
+};
+
+export const queryMyPublishIds = () => async (dispatch, getState) => {
+  const token = tokenSelector(getState());
+
+  if (!token) {
+    // If user has not logged in, it's assumed to have no publishes.
+    dispatch(setMyPublishIds(getFetched([])));
+    return;
+  }
+
+  dispatch(setMyPublishIds(toFetching()));
+  try {
+    const myPublishIds = await queryMyPublishIdsApi({ token });
+    dispatch(setMyPublishIds(getFetched(myPublishIds)));
+  } catch (error) {
+    dispatch(setMyPublishIds(getError(error)));
+  }
+};

src/actions/timeAndSalary.js

@@ -3,6 +3,7 @@ import { tokenSelector } from 'selectors/authSelector';
 import { salaryWorkTimeCountBoxSelector } from 'selectors/countSelector';
 import { postWorkings as postWorkingsApi } from 'apis/timeAndSalaryApi';
 import { querySalaryWorkTimeCountApi } from 'apis/salaryWorkTimeApi';
+import { queryMyPublishIds } from './me';
 
 export const SET_COUNT = '@@SALARY_WORK_TIME/SET_COUNT';
 
@@ -30,12 +31,19 @@ export const querySalaryWorkTimeCountIfUnfetched = () => async (
   }
 };
 
-export const createSalaryWorkTime = ({ body }) => (dispatch, getState) => {
+export const createSalaryWorkTime = ({ body }) => async (
+  dispatch,
+  getState,
+) => {
   const state = getState();
   const token = tokenSelector(state);
 
-  return postWorkingsApi({
+  const result = await postWorkingsApi({
     body,
     token,
   });
+
+  await dispatch(queryMyPublishIds());
+
+  return result;
 };

src/apis/me.js

@@ -2,6 +2,7 @@ import graphqlClient from 'utils/graphqlClient';
 
 import {
   queryMeGql,
+  queryMyPublishIdsGql,
   queryMyPublishesGql,
   queryMyPermissionGql,
 } from 'graphql/me';
@@ -18,5 +19,11 @@ export const queryHasSearchPermissionApi = ({ token }) =>
 export const queryMeApi = ({ token }) =>
   graphqlClient({ query: queryMeGql, token }).then(data => data.me);
 
+export const queryMyPublishIdsApi = ({ token }) =>
+  graphqlClient({ query: queryMyPublishIdsGql, token }).then(data => [
+    ...data.me.experiences.map(({ id }) => id),
+    ...data.me.salary_work_times.map(({ id }) => id),
+  ]);
+
 export const queryMyPublishesApi = ({ token }) =>
   graphqlClient({ query: queryMyPublishesGql, token });

src/components/CompanyAndJobTitle/InterviewExperiences/InterviewExperiences.js

@@ -10,6 +10,7 @@ import EmptyView from '../EmptyView';
 import ExperienceEntry from './ExperienceEntry';
 
 import { useQuery } from 'hooks/routing';
+import usePermission from 'hooks/usePermission';
 
 const InterviewExperiences = ({
   pageType,
@@ -19,9 +20,9 @@ const InterviewExperiences = ({
   page,
   pageSize,
   totalCount,
-  canView,
 }) => {
   const queryParams = useQuery();
+  const [, , canViewPublishId] = usePermission();
 
   if (data.length === 0) {
     return (
@@ -39,7 +40,7 @@ const InterviewExperiences = ({
           key={d.id}
           pageType={pageType}
           data={d}
-          canView={canView}
+          canView={canViewPublishId(d.id)}
         />
       ))}
       <Pagination
@@ -55,7 +56,6 @@ const InterviewExperiences = ({
 };
 
 InterviewExperiences.propTypes = {
-  canView: PropTypes.bool.isRequired,
   data: PropTypes.arrayOf(PropTypes.object),
   page: PropTypes.number.isRequired,
   pageName: PropTypes.string.isRequired,

src/components/CompanyAndJobTitle/InterviewExperiences/index.js

@@ -14,7 +14,6 @@ const InterviewExperiences = ({
   page,
   pageSize,
   totalCount,
-  canView,
 }) => (
   <CompanyAndJobTitleWrapper
     pageType={pageType}
@@ -43,7 +42,6 @@ const InterviewExperiences = ({
               page={page}
               pageSize={pageSize}
               totalCount={totalCount}
-              canView={canView}
             />
           </Fragment>
         );
@@ -53,7 +51,6 @@ const InterviewExperiences = ({
 );
 
 InterviewExperiences.propTypes = {
-  canView: PropTypes.bool.isRequired,
   interviewExperiences: PropTypes.arrayOf(PropTypes.object),
   page: PropTypes.number.isRequired,
   pageName: PropTypes.string.isRequired,

src/components/CompanyAndJobTitle/Overview/Overview.js

@@ -9,6 +9,7 @@ import WorkExperienceEntry from '../WorkExperiences/ExperienceEntry';
 import InterviewExperienceEntry from '../InterviewExperiences/ExperienceEntry';
 import { tabType as TAB_TYPE, generateTabURL } from 'constants/companyJobTitle';
 import SummaryBlock from './SummaryBlock';
+import usePermission from 'hooks/usePermission';
 
 const Overview = ({
   pageType,
@@ -23,8 +24,9 @@ const Overview = ({
   jobAverageSalaries,
   averageWeekWorkTime,
   overtimeFrequencyCount,
-  canView,
 }) => {
+  const [, , canViewPublishId] = usePermission();
+
   return (
     <Section Tag="main" paddingBottom>
       <SnippetBlock
@@ -46,11 +48,7 @@ const Overview = ({
           averageWeekWorkTime={averageWeekWorkTime}
           overtimeFrequencyCount={overtimeFrequencyCount}
         />
-        <WorkingHourTable
-          data={salaryWorkTimes}
-          hideContent={!canView}
-          pageType={pageType}
-        />
+        <WorkingHourTable data={salaryWorkTimes} pageType={pageType} />
       </SnippetBlock>
       <SnippetBlock
         title="評價"
@@ -70,7 +68,7 @@ const Overview = ({
             key={d.id}
             pageType={pageType}
             data={d}
-            canView={canView}
+            canView={canViewPublishId(d.id)}
           />
         ))}
       </SnippetBlock>
@@ -92,7 +90,7 @@ const Overview = ({
             key={d.id}
             pageType={pageType}
             data={d}
-            canView={canView}
+            canView={canViewPublishId(d.id)}
           />
         ))}
       </SnippetBlock>
@@ -102,7 +100,6 @@ const Overview = ({
 
 Overview.propTypes = {
   averageWeekWorkTime: PropTypes.number.isRequired,
-  canView: PropTypes.bool.isRequired,
   interviewExperiences: PropTypes.arrayOf(PropTypes.object),
   interviewExperiencesCount: PropTypes.number.isRequired,
   jobAverageSalaries: PropTypes.array,

src/components/CompanyAndJobTitle/Overview/index.js

@@ -5,14 +5,7 @@ import { BoxStatusRenderer } from '../StatusRenderer';
 import OverviewSection from './Overview';
 import Helmet from './Helmet';
 
-const Overview = ({
-  pageType,
-  pageName,
-  tabType,
-  overviewBox,
-  page,
-  canView,
-}) => (
+const Overview = ({ pageType, pageName, tabType, overviewBox, page }) => (
   <CompanyAndJobTitleWrapper
     pageType={pageType}
     pageName={pageName}
@@ -48,7 +41,6 @@ const Overview = ({
               averageWeekWorkTime={data.averageWeekWorkTime}
               overtimeFrequencyCount={data.overtimeFrequencyCount}
               page={page}
-              canView={canView}
             />
           </Fragment>
         );
@@ -58,7 +50,6 @@ const Overview = ({
 );
 
 Overview.propTypes = {
-  canView: PropTypes.bool.isRequired,
   overviewBox: PropTypes.shape({
     data: PropTypes.shape({
       averageWeekWorkTime: PropTypes.number.isRequired,

src/components/CompanyAndJobTitle/TimeAndSalary/TimeAndSalary.js

@@ -20,7 +20,7 @@ const TimeAndSalary = ({
   pageSize,
   totalCount,
 }) => {
-  const [, fetchPermission, canView] = usePermission();
+  const [, fetchPermission] = usePermission();
   useEffect(() => {
     fetchPermission();
   }, [fetchPermission]);
@@ -31,12 +31,7 @@ const TimeAndSalary = ({
     <Section Tag="main" paddingBottom>
       {(salaryWorkTimes.length > 0 && (
         <React.Fragment>
-          <WorkingHourBlock
-            data={salaryWorkTimes}
-            pageType={pageType}
-            pageName={pageName}
-            hideContent={!canView}
-          />
+          <WorkingHourBlock data={salaryWorkTimes} pageType={pageType} />
           <Pagination
             totalCount={totalCount}
             unit={pageSize}

src/components/CompanyAndJobTitle/TimeAndSalary/WorkingHourBlock.js

@@ -5,23 +5,18 @@ import WorkingHourTable from './WorkingHourTable';
 
 import styles from '../../TimeAndSalary/common/WorkingHourBlock.module.css';
 
-const WorkingHourBlock = ({ data, hideContent, pageType }) => {
+const WorkingHourBlock = ({ data, pageType }) => {
   return (
     <section className={styles.container}>
       <div className={cn(styles.content, styles.expanded)}>
-        <WorkingHourTable
-          data={data}
-          hideContent={hideContent}
-          pageType={pageType}
-        />
+        <WorkingHourTable data={data} pageType={pageType} />
       </div>
     </section>
   );
 };
 
 WorkingHourBlock.propTypes = {
   data: PropTypes.array,
-  hideContent: PropTypes.bool.isRequired,
   pageType: PropTypes.string,
 };