[公司職稱頁面] 讓搜尋框不受分頁影響

src/actions/company.js

@@ -10,6 +10,7 @@ import {
   companyIndexesBoxSelectorAtPage,
   companyOverviewBoxSelectorByName,
   companyTimeAndSalaryBoxSelectorByName,
+  companyTimeAndSalaryStatisticsBoxSelectorByName,
   companyInterviewExperiencesBoxSelectorByName,
   companyWorkExperiencesBoxSelectorByName,
 } from 'selectors/companyAndJobTitle';
@@ -19,10 +20,13 @@ import {
   getCompanyInterviewExperiences,
   getCompanyWorkExperiences,
   queryCompaniesApi,
+  getCompanyTimeAndSalaryStatistics,
 } from 'apis/company';
 
 export const SET_OVERVIEW = '@@COMPANY/SET_OVERVIEW';
 export const SET_TIME_AND_SALARY = '@@COMPANY/SET_TIME_AND_SALARY';
+export const SET_TIME_AND_SALARY_STATISTICS =
+  '@@COMPANY/SET_TIME_AND_SALARY_STATISTICS';
 export const SET_INTERVIEW_EXPERIENCES = '@@COMPANY/SET_INTERVIEW_EXPERIENCES';
 export const SET_WORK_EXPERIENCES = '@@COMPANY/SET_WORK_EXPERIENCES';
 export const SET_INDEX = '@@COMPANY/SET_INDEX';
@@ -173,7 +177,6 @@ export const queryCompanyTimeAndSalary = ({
       limit,
       salary_work_times: data.salaryWorkTimesResult.salaryWorkTimes,
       salary_work_times_count: data.salaryWorkTimesResult.count,
-      salary_work_time_statistics: data.salary_work_time_statistics,
     };
 
     dispatch(setTimeAndSalary(companyName, getFetched(timeAndSalaryData)));
@@ -182,6 +185,53 @@ export const queryCompanyTimeAndSalary = ({
   }
 };
 
+const setTimeAndSalaryStatistics = (companyName, box) => ({
+  type: SET_TIME_AND_SALARY_STATISTICS,
+  companyName,
+  box,
+});
+
+export const queryCompanyTimeAndSalaryStatistics = ({ companyName }) => async (
+  dispatch,
+  getState,
+) => {
+  const box = companyTimeAndSalaryStatisticsBoxSelectorByName(companyName)(
+    getState(),
+  );
+  if (isFetching(box) || (isFetched(box) && box.data.name === companyName)) {
+    return;
+  }
+
+  dispatch(setTimeAndSalaryStatistics(companyName, toFetching()));
+
+  try {
+    const data = await getCompanyTimeAndSalaryStatistics({
+      companyName,
+    });
+
+    // Not found case
+    if (data == null) {
+      return dispatch(
+        setTimeAndSalaryStatistics(companyName, getFetched(data)),
+      );
+    }
+
+    const timeAndSalaryStatisticsData = {
+      name: data.name,
+      salary_work_time_statistics: data.salary_work_time_statistics,
+    };
+
+    dispatch(
+      setTimeAndSalaryStatistics(
+        companyName,
+        getFetched(timeAndSalaryStatisticsData),
+      ),
+    );
+  } catch (error) {
+    dispatch(setTimeAndSalaryStatistics(companyName, getError(error)));
+  }
+};
+
 export const queryCompanyInterviewExperiences = ({
   companyName,
   jobTitle,

src/actions/jobTitle.js

@@ -10,19 +10,23 @@ import {
   jobTitleIndexesBoxSelectorAtPage,
   jobTitleOverviewBoxSelectorByName,
   jobTitleTimeAndSalaryBoxSelectorByName,
+  jobTitleTimeAndSalaryStatisticsBoxSelectorByName,
   jobTitleInterviewExperiencesBoxSelectorByName,
   jobTitleWorkExperiencesBoxSelectorByName,
 } from 'selectors/companyAndJobTitle';
 import {
   queryJobTitleOverview as queryJobTitleOverviewApi,
   getJobTitleTimeAndSalary,
+  getJobTitleTimeAndSalaryStatistics,
   getJobTitleInterviewExperiences,
   getJobTitleWorkExperiences,
   queryJobTitlesApi,
 } from 'apis/jobTitle';
 
 export const SET_OVERVIEW = '@@JOB_TITLE/SET_OVERVIEW';
 export const SET_TIME_AND_SALARY = '@@JOB_TITLE/SET_TIME_AND_SALARY';
+export const SET_TIME_AND_SALARY_STATISTICS =
+  '@@JOB_TITLE/SET_TIME_AND_SALARY_STATISTICS';
 export const SET_INTERVIEW_EXPERIENCES =
   '@@JOB_TITLE/SET_INTERVIEW_EXPERIENCES';
 export const SET_WORK_EXPERIENCES = '@@JOB_TITLE/SET_WORK_EXPERIENCES';
@@ -166,7 +170,6 @@ export const queryJobTitleTimeAndSalary = ({
       limit,
       salary_work_times: data.salaryWorkTimesResult.salaryWorkTimes,
       salary_work_times_count: data.salaryWorkTimesResult.count,
-      salary_work_time_statistics: data.salary_work_time_statistics,
     };
 
     dispatch(setTimeAndSalary(jobTitle, getFetched(timeAndSalaryData)));
@@ -175,6 +178,51 @@ export const queryJobTitleTimeAndSalary = ({
   }
 };
 
+const setTimeAndSalaryStatistics = (jobTitle, box) => ({
+  type: SET_TIME_AND_SALARY_STATISTICS,
+  jobTitle,
+  box,
+});
+
+export const queryJobTitleTimeAndSalaryStatistics = ({ jobTitle }) => async (
+  dispatch,
+  getState,
+) => {
+  const box = jobTitleTimeAndSalaryStatisticsBoxSelectorByName(jobTitle)(
+    getState(),
+  );
+  if (isFetching(box) || (isFetched(box) && box.data.name === jobTitle)) {
+    return;
+  }
+
+  dispatch(setTimeAndSalaryStatistics(jobTitle, toFetching()));
+
+  try {
+    const data = await getJobTitleTimeAndSalaryStatistics({
+      jobTitle,
+    });
+
+    // Not found case
+    if (data == null) {
+      return dispatch(setTimeAndSalaryStatistics(jobTitle, getFetched(data)));
+    }
+
+    const timeAndSalaryStatisticsData = {
+      name: data.name,
+      salary_work_time_statistics: data.salary_work_time_statistics,
+    };
+
+    dispatch(
+      setTimeAndSalaryStatistics(
+        jobTitle,
+        getFetched(timeAndSalaryStatisticsData),
+      ),
+    );
+  } catch (error) {
+    dispatch(setTimeAndSalaryStatistics(jobTitle, getError(error)));
+  }
+};
+
 const setInterviewExperiences = (jobTitle, box) => ({
   type: SET_INTERVIEW_EXPERIENCES,
   jobTitle,

src/apis/company.js

@@ -6,6 +6,7 @@ import {
   getCompanyInterviewExperiencesQuery,
   getCompanyWorkExperiencesQuery,
   queryCompaniesHavingDataGql,
+  getCompanyTimeAndSalaryStatisticsQuery,
 } from 'graphql/company';
 
 export const queryCompanyOverview = ({
@@ -35,6 +36,12 @@ export const getCompanyTimeAndSalary = ({
     variables: { companyName, jobTitle, start, limit },
   }).then(R.prop('company'));
 
+export const getCompanyTimeAndSalaryStatistics = ({ companyName }) =>
+  graphqlClient({
+    query: getCompanyTimeAndSalaryStatisticsQuery,
+    variables: { companyName },
+  }).then(R.prop('company'));
+
 export const getCompanyInterviewExperiences = ({
   companyName,
   jobTitle,

src/apis/jobTitle.js

@@ -6,6 +6,7 @@ import {
   getJobTitleTimeAndSalaryQuery,
   getJobTitleWorkExperiencesQuery,
   queryJobTitlesHavingDataGql,
+  getJobTitleTimeAndSalaryStatisticsQuery,
 } from 'graphql/jobTitle';
 
 export const queryJobTitleOverview = ({
@@ -35,6 +36,12 @@ export const getJobTitleTimeAndSalary = ({
     variables: { jobTitle, companyName, start, limit },
   }).then(R.prop('job_title'));
 
+export const getJobTitleTimeAndSalaryStatistics = ({ jobTitle }) =>
+  graphqlClient({
+    query: getJobTitleTimeAndSalaryStatisticsQuery,
+    variables: { jobTitle },
+  }).then(R.prop('job_title'));
+
 export const getJobTitleInterviewExperiences = ({
   jobTitle,
   companyName,

src/components/Company/CompanyInterviewExperiencesProvider.js

@@ -16,7 +16,7 @@ import { usePageName, pageNameSelector } from './usePageName';
 import {
   searchTextFromQuerySelector,
   useSearchTextFromQuery,
-} from 'components/CompanyAndJobTitle/useSearchbar';
+} from 'components/CompanyAndJobTitle/Searchbar';
 import { pageFromQuerySelector } from 'selectors/routing/page';
 
 const useInterviewExperiencesBox = pageName => {

src/components/Company/CompanyTimeAndSalaryProvider.js

@@ -4,21 +4,36 @@ import TimeAndSalary from '../CompanyAndJobTitle/TimeAndSalary';
 import usePermission from 'hooks/usePermission';
 import { usePage } from 'hooks/routing/page';
 import { tabType, pageType as PAGE_TYPE } from 'constants/companyJobTitle';
-import { queryCompanyTimeAndSalary } from 'actions/company';
+import {
+  queryCompanyTimeAndSalary,
+  queryCompanyTimeAndSalaryStatistics,
+} from 'actions/company';
 import {
   salaryWorkTimes as salaryWorkTimesSelector,
   salaryWorkTimesCount as salaryWorkTimesCountSelector,
   salaryWorkTimeStatistics as salaryWorkTimeStatisticsSelector,
   status as statusSelector,
   companyTimeAndSalaryBoxSelectorByName as timeAndSalaryBoxSelectorByName,
+  companyTimeAndSalaryStatisticsBoxSelectorByName as timeAndSalaryStatisticsBoxSelectorByName,
 } from 'selectors/companyAndJobTitle';
 import { paramsSelector, querySelector } from 'common/routing/selectors';
 import { usePageName, pageNameSelector } from './usePageName';
 import { pageFromQuerySelector } from 'selectors/routing/page';
 import {
   searchTextFromQuerySelector,
   useSearchTextFromQuery,
-} from 'components/CompanyAndJobTitle/useSearchbar';
+} from 'components/CompanyAndJobTitle/Searchbar';
+
+const useTimeAndSalaryStatisticsBox = pageName => {
+  const selector = useCallback(
+    state => {
+      const company = timeAndSalaryStatisticsBoxSelectorByName(pageName)(state);
+      return salaryWorkTimeStatisticsSelector(company);
+    },
+    [pageName],
+  );
+  return useSelector(selector);
+};
 
 const useTimeAndSalaryBox = pageName => {
   const selector = useCallback(
@@ -28,7 +43,6 @@ const useTimeAndSalaryBox = pageName => {
         status: statusSelector(company),
         salaryWorkTimes: salaryWorkTimesSelector(company),
         salaryWorkTimesCount: salaryWorkTimesCountSelector(company),
-        salaryWorkTimeStatistics: salaryWorkTimeStatisticsSelector(company),
       };
     },
     [pageName],
@@ -48,6 +62,14 @@ const CompanyTimeAndSalaryProvider = () => {
   const start = (page - 1) * PAGE_SIZE;
   const limit = PAGE_SIZE;
 
+  useEffect(() => {
+    dispatch(
+      queryCompanyTimeAndSalaryStatistics({
+        companyName: pageName,
+      }),
+    );
+  }, [dispatch, pageName]);
+
   useEffect(() => {
     dispatch(
       queryCompanyTimeAndSalary({
@@ -64,12 +86,11 @@ const CompanyTimeAndSalaryProvider = () => {
     fetchPermission();
   }, [pageType, pageName, fetchPermission]);
 
-  const {
-    status,
-    salaryWorkTimes,
-    salaryWorkTimesCount,
-    salaryWorkTimeStatistics,
-  } = useTimeAndSalaryBox(pageName);
+  const salaryWorkTimeStatistics = useTimeAndSalaryStatisticsBox(pageName);
+
+  const { status, salaryWorkTimes, salaryWorkTimesCount } = useTimeAndSalaryBox(
+    pageName,
+  );
 
   return (
     <TimeAndSalary
@@ -97,14 +118,20 @@ CompanyTimeAndSalaryProvider.fetchData = ({
   const jobTitle = searchTextFromQuerySelector(query) || undefined;
   const start = (page - 1) * PAGE_SIZE;
   const limit = PAGE_SIZE;
-  return dispatch(
+  const dispatchTimeAndSalaryStatistics = dispatch(
+    queryCompanyTimeAndSalaryStatistics({
+      companyName: pageName,
+    }),
+  );
+  const dispatchTimeAndSalary = dispatch(
     queryCompanyTimeAndSalary({
       companyName: pageName,
       jobTitle,
       start,
       limit,
     }),
   );
+  return Promise.all([dispatchTimeAndSalary, dispatchTimeAndSalaryStatistics]);
 };
 
 export default CompanyTimeAndSalaryProvider;

src/components/Company/CompanyWorkExperiencesProvider.js

@@ -20,7 +20,7 @@ import { pageFromQuerySelector } from 'selectors/routing/page';
 import {
   searchTextFromQuerySelector,
   useSearchTextFromQuery,
-} from 'components/CompanyAndJobTitle/useSearchbar';
+} from 'components/CompanyAndJobTitle/Searchbar';
 
 const useWorkExperiencesBox = pageName => {
   const selector = useCallback(

src/components/CompanyAndJobTitle/InterviewExperiences/InterviewExperiences.js

@@ -8,7 +8,6 @@ import { Section } from 'common/base';
 import EmptyView from '../EmptyView';
 import ExperienceEntry from './ExperienceEntry';
 
-import useSearchbar from '../useSearchbar';
 import { useQuery } from 'hooks/routing';
 
 const InterviewExperiences = ({
@@ -22,22 +21,16 @@ const InterviewExperiences = ({
   canView,
 }) => {
   const queryParams = useQuery();
-  const { Searchbar } = useSearchbar({
-    pageType,
-    tabType,
-  });
 
   if (data.length === 0) {
     return (
       <Section Tag="main" paddingBottom>
-        <Searchbar />
         <EmptyView pageName={pageName} tabType={tabType} />
       </Section>
     );
   }
   return (
     <Section Tag="main" paddingBottom>
-      <Searchbar />
       {data.map(d => (
         <ExperienceEntry
           key={d.id}

src/components/CompanyAndJobTitle/InterviewExperiences/index.js

@@ -4,6 +4,7 @@ import CompanyAndJobTitleWrapper from '../CompanyAndJobTitleWrapper';
 import StatusRenderer from '../StatusRenderer';
 import InterviewExperiencesSection from './InterviewExperiences';
 import InterviewExperienceHelmet from './Helmet';
+import Searchbar from '../Searchbar';
 
 const InterviewExperiences = ({
   pageType,
@@ -21,13 +22,14 @@ const InterviewExperiences = ({
     pageName={pageName}
     tabType={tabType}
   >
+    <InterviewExperienceHelmet
+      pageType={pageType}
+      pageName={pageName}
+      interviewExperiences={interviewExperiences}
+      page={page}
+    />
+    <Searchbar pageType={pageType} tabType={tabType} />
     <StatusRenderer status={status}>
-      <InterviewExperienceHelmet
-        pageType={pageType}
-        pageName={pageName}
-        interviewExperiences={interviewExperiences}
-        page={page}
-      />
       <InterviewExperiencesSection
         pageType={pageType}
         pageName={pageName}