Rewrite apis, and remove unnecessary action

.eslintrc.js

@@ -45,6 +45,7 @@ module.exports = {
               hooks: path.resolve('./src/hooks'),
               contexts: path.resolve('./src/contexts'),
               constants: path.resolve('./src/constants'),
+              apis: path.resolve('./src/apis'),
             },
           },
         },

jsconfig.json

@@ -7,7 +7,8 @@
             "graphql/*": ["src/graphql/*"],
             "hooks/*": ["src/hooks/*"],
             "contexts/*": ["src/contexts/*"],
-            "constants/*": ["src/constants/*"]
+            "constants/*": ["src/constants/*"],
+            "apis/*": ["src/apis/*"]
         }
     },
     "exclude": ["node_modules", "dist"]

package.json

@@ -35,7 +35,8 @@
       "^graphql(.*)": "<rootDir>/src/graphql$1",
       "^hooks(.*)": "<rootDir>/src/hooks$1",
       "^contexts(.*)": "<rootDir>/src/contexts$1",
-      "^constants(.*)": "<rootDir>/src/constants$1"
+      "^constants(.*)": "<rootDir>/src/constants$1",
+      "^apis(.*)": "<rootDir>/src/apis$1"
     }
   },
   "devDependencies": {

src/components/CompanyAndJobTitle/TimeAndSalary/ViewLog.js

@@ -1,54 +1,25 @@
-import { Component } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { useViewSalaryWorkTimes } from 'hooks/viewLog';
 
-import { viewSalaryWorkTimes } from '../../../actions/viewLog';
-
-class ViewLog extends Component {
-  componentDidMount() {
-    const { contentIds } = this.props;
+const ViewLog = ({ pageName, page, contentIds }) => {
+  // Send view to backend
+  const viewSalaryWorkTimes = useViewSalaryWorkTimes();
+  useEffect(() => {
     const referrer = window.location.href;
+    viewSalaryWorkTimes({ contentIds, referrer });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageName, page, viewSalaryWorkTimes]);
 
-    this.props.viewSalaryWorkTimes({ contentIds, referrer });
-  }
-
-  componentDidUpdate(prevProps) {
-    const prevPageName = prevProps.pageName;
-    const prevPage = prevProps.page;
-    const pageName = this.props.pageName;
-    const page = this.props.page;
-
-    if (prevPageName !== pageName || prevPage !== page) {
-      const { contentIds } = this.props;
-      const referrer = window.location.href;
-
-      this.props.viewSalaryWorkTimes({ contentIds, referrer });
-    }
-  }
-
-  render() {
-    return null;
-  }
-}
+  return null;
+};
 
 ViewLog.propTypes = {
   // key
   pageName: PropTypes.string.isRequired,
   page: PropTypes.number.isRequired,
 
   contentIds: PropTypes.arrayOf(PropTypes.string).isRequired,
-
-  // method
-  viewSalaryWorkTimes: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = state => ({});
-
-const mapDispatchToProps = dispatch =>
-  bindActionCreators({ viewSalaryWorkTimes }, dispatch);
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(ViewLog);
+export default ViewLog;

src/components/ExperienceDetail/ReactionZone/ReportInspectModal.js

@@ -4,12 +4,12 @@ import { useAsyncFn } from 'react-use';
 import Modal from 'common/Modal';
 import Loader from 'common/Loader';
 import { Heading, P } from 'common/base';
-import api from '../../../apis';
+import reportApi from 'apis/reportApi';
 import styles from './ReportInspectModal.module.css';
 
 const useGetReports = experienceId => {
   return useAsyncFn(async () => {
-    return await api.report.getReports({ id: experienceId });
+    return await reportApi.getReports({ id: experienceId });
   }, [experienceId]);
 };
 

src/components/ExperienceDetail/hooks/useToggleLike.js

@@ -1,18 +1,18 @@
 import { useCallback } from 'react';
 import { useToken } from 'hooks/auth';
-import api from '../../../apis';
+import experiencesApi from 'apis/experiencesApi';
 
 const useToggleLike = experienceId => {
   const token = useToken();
   return useCallback(
     liked => {
       if (liked) {
-        return api.experiences.deleteExperienceLikes({
+        return experiencesApi.deleteExperienceLikes({
           id: experienceId,
           token,
         });
       } else {
-        return api.experiences.postExperienceLikes({
+        return experiencesApi.postExperienceLikes({
           id: experienceId,
           token,
         });

src/components/ExperienceDetail/hooks/useTrace.js

@@ -1,29 +1,16 @@
-import { useEffect, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import { useEffect } from 'react';
 import ReactPixel from 'react-facebook-pixel';
 import PIXEL_CONTENT_CATEGORY from '../../../constants/pixelConstants';
-import { viewExperiences as viewExperiencesAction } from '../../../actions/viewLog';
-
-const useView = experienceId => {
-  const dispatch = useDispatch();
-  const viewExperiences = useCallback(
-    ({ contentIds, referrer }) => {
-      dispatch(viewExperiencesAction({ contentIds, referrer }));
-    },
-    [dispatch],
-  );
+import { useViewExperiences } from 'hooks/viewLog';
 
+const useTrace = experienceId => {
+  // Send view to backend
+  const viewExperiences = useViewExperiences();
   useEffect(() => {
     const contentIds = [experienceId];
     const referrer = window.location.href;
-    console.log({ contentIds, referrer });
     viewExperiences({ contentIds, referrer });
   }, [experienceId, viewExperiences]);
-};
-
-const useTrace = experienceId => {
-  // Send view to backend
-  useView(experienceId);
 
   // send Facebook Pixel 'ViewContent' event
   useEffect(() => {

src/components/Me/useQuery.js

@@ -1,12 +1,14 @@
 import { useCallback } from 'react';
 import { useAsyncFn } from 'react-use';
 import { useToken } from 'hooks/auth';
-import api from '../../apis';
+import meApi from 'apis/me';
+import experiencesApi from 'apis/experiencesApi';
+import timeAndSalaryApi from 'apis/timeAndSalaryApi';
 
 export const useFetchMyPublishes = () => {
   const token = useToken();
 
-  const [state, callback] = useAsyncFn(() => api.me.getMyPublishes({ token }), [
+  const [state, callback] = useAsyncFn(() => meApi.getMyPublishes({ token }), [
     token,
   ]);
 
@@ -17,7 +19,7 @@ export const useToggleExperienceStatus = () => {
   const token = useToken();
   return useCallback(
     o => {
-      return api.experiences.patchExperience({
+      return experiencesApi.patchExperience({
         id: o.id,
         status: o.status === 'published' ? 'hidden' : 'published',
         token,
@@ -31,7 +33,7 @@ export const useToggleSalaryWorkTimeStatus = () => {
   const token = useToken();
   return useCallback(
     o => {
-      return api.timeAndSalary.patchWorking({
+      return timeAndSalaryApi.patchWorking({
         id: o.id,
         status: o.status === 'published' ? 'hidden' : 'published',
         token,
@@ -45,7 +47,7 @@ export const useToggleReplyStatus = () => {
   const token = useToken();
   return useCallback(
     o => {
-      return api.experiences.patchReply({
+      return experiencesApi.patchReply({
         id: o.id,
         status: o.status === 'published' ? 'hidden' : 'published',
         token,

src/components/ShareExperience/InterviewForm/TypeForm/index.js

@@ -29,8 +29,8 @@ import FormBuilder from 'common/FormBuilder';
 import ConfirmModal from 'common/FormBuilder/Modals/ConfirmModal';
 import Header, { CompanyJobTitleHeader } from '../../common/TypeFormHeader';
 import Footer from '../../common/TypeFormFooter';
-import { getCompaniesSearch } from '../../../../apis/companySearchApi';
-import { getJobTitlesSearch } from '../../../../apis/jobTitleSearchApi';
+import { getCompaniesSearch } from 'apis/companySearchApi';
+import { getJobTitlesSearch } from 'apis/jobTitleSearchApi';
 import {
   experienceCountSelector,
   timeAndSalaryCountSelector,

src/components/ShareExperience/common/CompanyQuery.js

@@ -2,11 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import AutoCompleteTextInput from 'common/form/AutoCompleteTextInput';
-
 import { debounce } from 'utils/streamUtils';
+import companySearchApi from 'apis/companySearchApi';
 
 import InputTitle from './InputTitle';
-import { getCompaniesSearch } from '../../../apis/companySearchApi';
 
 const getItemValue = item => item.label;
 
@@ -26,7 +25,8 @@ class CompanyQuery extends React.Component {
 
   search = debounce((e, value) => {
     if (value) {
-      return getCompaniesSearch({ key: value })
+      return companySearchApi
+        .getCompaniesSearch({ key: value })
         .then(r =>
           Array.isArray(r)
             ? this.handleAutocompleteItems(r.map(mapToAutocompleteList))

src/components/ShareExperience/common/JobTitle.js

@@ -2,11 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import AutoCompleteTextInput from 'common/form/AutoCompleteTextInput';
-
 import { debounce } from 'utils/streamUtils';
+import jobTitleSearchApi from 'apis/jobTitleSearchApi';
 
 import InputTitle from './InputTitle';
-import { getJobTitlesSearch } from '../../../apis/jobTitleSearchApi';
 
 const getItemValue = item => item.label;
 
@@ -26,7 +25,8 @@ class JobTitle extends React.Component {
 
   search = debounce((e, value) => {
     if (value) {
-      return getJobTitlesSearch({ key: value })
+      return jobTitleSearchApi
+        .getJobTitlesSearch({ key: value })
         .then(r =>
           Array.isArray(r)
             ? this.handleAutocompleteItems(r.map(mapToAutocompleteList))

src/components/common/facebook/FacebookWrapper.js

@@ -1,42 +1,22 @@
-import React, { Component } from 'react';
+import React, { useContext, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import withFB from './withFB';
+import FacebookContext from 'contexts/FacebookContext';
 
-class FacebookWrapper extends Component {
-  constructor(props) {
-    super(props);
-    this.container = null;
-    this.handleContainer = this.handleContainer.bind(this);
-  }
+const FacebookWrapper = ({ children }) => {
+  const FB = useContext(FacebookContext);
+  const container = useRef(null);
 
-  componentDidMount() {
-    if (this.props.FB && this.container) {
-      this.props.FB.XFBML.parse(this.container);
+  useEffect(() => {
+    if (FB && container) {
+      FB.XFBML.parse(container.current);
     }
-  }
+  });
 
-  // 讓 FB 重新 parse children
-  componentDidUpdate() {
-    // if FB instance
-    if (this.props.FB && this.container) {
-      this.props.FB.XFBML.parse(this.container);
-    }
-  }
-
-  handleContainer(container) {
-    this.container = container;
-  }
-
-  render() {
-    const { children } = this.props;
-
-    return <div ref={this.handleContainer}>{children}</div>;
-  }
-}
+  return <div ref={container}>{children}</div>;
+};
 
 FacebookWrapper.propTypes = {
   children: PropTypes.node,
-  FB: PropTypes.object,
 };
 
-export default withFB(FacebookWrapper);
+export default FacebookWrapper;

src/components/common/form/TextInput/SearchTextInput.js

@@ -3,25 +3,21 @@ import PropTypes from 'prop-types';
 import R from 'ramda';
 
 import { debounce } from 'utils/streamUtils';
+import timeAndSalaryApi from 'apis/timeAndSalaryApi';
 import TextInput from '.';
 
-import {
-  fetchCompanyCandidates,
-  fetchJobTitleCandidates,
-} from '../../../../apis/timeAndSalaryApi';
-
 const take5 = R.take(5);
 
 const SearchTextInput = ({ value, onChange, onSelected, ...restProps }) => {
   const [candidates, setCandidates] = useState([]);
   const eleRef = useRef(null);
 
   const searchCompanyNames = useCallback(
-    value => fetchCompanyCandidates({ key: value }),
+    value => timeAndSalaryApi.fetchCompanyCandidates({ key: value }),
     [],
   );
   const searchJobTitles = useCallback(
-    value => fetchJobTitleCandidates({ key: value }),
+    value => timeAndSalaryApi.fetchJobTitleCandidates({ key: value }),
     [],
   );
 

src/hooks/usePermission.js

@@ -1,7 +1,7 @@
 import { useContext, useCallback } from 'react';
 import PermissionContext from 'common/permission-context/PermissionContext';
 import { useToken } from 'hooks/auth';
-import { getHasSearchPermission } from '../apis/me';
+import { getHasSearchPermission } from 'apis/me';
 
 export default () => {
   const token = useToken();