refactor: remove withRouter, refactor routing components (#1340)

src/components/App/Header/Searchbar.js

@@ -1,20 +1,17 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import { withRouter } from 'react-router-dom';
-import qs from 'qs';
-
+import { useHistory } from 'react-router-dom';
 import SearchTextInput from 'common/form/TextInput/SearchTextInput';
 import Magnifiner from 'common/icons/Magnifiner';
+import { keywordFromQuerySelector } from 'selectors/routing/keyword';
+import { useQuery } from 'hooks/routing';
 import styles from './Searchbar.module.css';
 
-const getInitialSearchTextFromLocation = location =>
-  qs.parse(location.search, { ignoreQueryPrefix: true }).q || '';
-
-const Searchbar = ({ className, placeholder, history, location }) => {
-  const [searchText, setSearchText] = useState(
-    getInitialSearchTextFromLocation(location),
-  );
+const Searchbar = ({ className, placeholder }) => {
+  const history = useHistory();
+  const query = useQuery();
+  const [searchText, setSearchText] = useState(keywordFromQuerySelector(query));
   const [isActive, setActive] = useState(false);
 
   const handleFormFocus = useCallback(() => {
@@ -63,9 +60,7 @@ const Searchbar = ({ className, placeholder, history, location }) => {
 
 Searchbar.propTypes = {
   className: PropTypes.string.isRequired,
-  history: PropTypes.object.isRequired,
-  location: PropTypes.object.isRequired,
   placeholder: PropTypes.string,
 };
 
-export default withRouter(Searchbar);
+export default Searchbar;

src/components/Buy/index.js

@@ -1,14 +1,13 @@
 import React, { useState, useMemo, useEffect } from 'react';
-import { useLocation } from 'react-router';
 import { useDispatch } from 'react-redux';
-import qs from 'qs';
 import { contains, head, prop } from 'ramda';
 import { Section, Wrapper } from 'common/base';
 import SubscriptionsSection from './SubscriptionsSection';
 import PaymentSection from './PaymentSection';
 import TitleSection from './TitleSection';
 import styles from './Buy.module.css';
 import { useSubscriptionPlans } from 'hooks/payment/usePayment';
+import { useQuery } from 'hooks/routing';
 import { isFetched } from 'utils/fetchBox';
 import Loading from 'common/Loader';
 import { subscriptionType } from 'constants/subscription';
@@ -23,11 +22,7 @@ const sanitizeSkuId = plans => skuId => {
 };
 
 const Buy = () => {
-  const location = useLocation();
-  const query = useMemo(
-    () => qs.parse(location.search, { ignoreQueryPrefix: true }),
-    [location.search],
-  );
+  const query = useQuery();
   const plansBox = useSubscriptionPlans();
   const ready = isFetched(plansBox);
   const plans = useMemo(() => {

src/components/Company/CompanyIndexProvider.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { querySelector } from 'common/routing/selectors';
-import { pageFromQuerySelector } from 'common/routing/page';
+import { pageFromQuerySelector } from 'selectors/routing/page';
 import CompanyAndJobTitleIndexPage from '../CompanyAndJobTitle/IndexPage';
 import usePagination from '../CompanyAndJobTitle/IndexPage/usePagination';
 import { pageType } from 'constants/companyJobTitle';

src/components/EmailVerification/VerifyEmailForm.js

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import { withRouter } from 'react-router';
+import { useLocation } from 'react-router-dom';
 
 import Heading from 'common/base/Heading';
 import P from 'common/base/P';
@@ -19,12 +19,10 @@ const stageMap = {
   LOADING: 'LOADING',
 };
 
-const VerifyEmailForm = ({
-  userEmail,
-  onSubmit,
-  closeModal,
-  location: { pathname },
-}) => {
+const VerifyEmailForm = ({ userEmail, onSubmit, closeModal }) => {
+  const location = useLocation();
+  const pathname = location.pathname;
+
   const [emailValue, setEmailValue] = useState(userEmail || '');
   const [stage, setStage] = useState(stageMap.FORM);
   const [emailValueFormatValid, setEmailValueFormatValid] = useState(true);
@@ -193,11 +191,8 @@ const VerifyEmailForm = ({
 
 VerifyEmailForm.propTypes = {
   closeModal: PropTypes.func,
-  location: PropTypes.shape({
-    pathname: PropTypes.string,
-  }),
   onSubmit: PropTypes.func,
   userEmail: PropTypes.string,
 };
 
-export default withRouter(VerifyEmailForm);
+export default VerifyEmailForm;

src/components/JobTitle/JobTitleIndexProvider.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { querySelector } from 'common/routing/selectors';
-import { pageFromQuerySelector } from 'common/routing/page';
+import { pageFromQuerySelector } from 'selectors/routing/page';
 import CompanyAndJobTitleIndexPage from '../CompanyAndJobTitle/IndexPage';
 import usePagination from '../CompanyAndJobTitle/IndexPage/usePagination';
 import { pageType } from 'constants/companyJobTitle';

src/components/LandingPage/CallToActionBlock.js

@@ -1,15 +1,14 @@
 import React, { useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { Heading } from 'common/base';
-
 import SearchTextInput from 'common/form/TextInput/SearchTextInput';
 import Button from 'common/button/ButtonRect';
 import { useShareLink } from 'hooks/experiments';
 import styles from './CallToActionBlock.module.css';
 import textInputStyle from 'common/form/TextInput/TextInput.module.css';
 
-const CallToActionBlock = ({ history }) => {
+const CallToActionBlock = () => {
+  const history = useHistory();
   const [companyName, setCompanyName] = useState('');
   const shareLink = useShareLink(companyName);
 
@@ -46,8 +45,4 @@ const CallToActionBlock = ({ history }) => {
   );
 };
 
-CallToActionBlock.propTypes = {
-  history: PropTypes.object.isRequired,
-};
-
-export default withRouter(CallToActionBlock);
+export default CallToActionBlock;

src/components/ShareExperience/Entry.js

@@ -1,13 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withRouter } from 'react-router';
+import { useHistory } from 'react-router';
 import { Wrapper } from 'common/base';
 import ShareExpSection from 'common/ShareExpSection';
 import X from 'common/icons/X';
 import styles from './Entry.module.css';
 import StaticHelmet from 'common/StaticHelmet';
 
-const Entry = ({ history }) => {
+const Entry = () => {
+  const history = useHistory();
+
   return (
     <div>
       <StaticHelmet.Share />
@@ -21,8 +22,4 @@ const Entry = ({ history }) => {
   );
 };
 
-Entry.propTypes = {
-  history: PropTypes.object.isRequired,
-};
-
-export default withRouter(Entry);
+export default Entry;

src/components/TimeAndSalary/SearchBar.js

@@ -1,24 +1,16 @@
 import React, { useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
 import cn from 'classnames';
-import R from 'ramda';
-import { withRouter } from 'react-router-dom';
-
+import { useHistory } from 'react-router-dom';
 import SearchTextInput from 'common/form/TextInput/SearchTextInput';
 import Magnifiner from 'common/icons/Magnifiner';
-
+import { useQuery } from 'hooks/routing';
 import styles from './SearchBar.module.css';
-import { searchKeywordSelector } from './common/selectors';
-
-const getInitialSearchTextFromLocation = R.compose(
-  R.defaultTo(''),
-  searchKeywordSelector,
-);
+import { keywordFromQuerySelector } from 'selectors/routing/keyword';
 
-const SearchBar = ({ history, location }) => {
-  const [searchText, setSearchText] = useState(
-    getInitialSearchTextFromLocation({ location }),
-  );
+const SearchBar = () => {
+  const history = useHistory();
+  const query = useQuery();
+  const [searchText, setSearchText] = useState(keywordFromQuerySelector(query));
 
   const gotoSearchResult = useCallback(
     searchText => {
@@ -63,9 +55,4 @@ const SearchBar = ({ history, location }) => {
   );
 };
 
-SearchBar.propTypes = {
-  history: PropTypes.object.isRequired,
-  location: PropTypes.object.isRequired,
-};
-
-export default withRouter(SearchBar);
+export default SearchBar;

src/components/TimeAndSalary/SearchScreen/SearchScreen.js

@@ -11,13 +11,10 @@ import Pagination from 'common/Pagination';
 import { isFetching, isFetched, isUnfetched } from 'constants/status';
 import { pageType } from 'constants/companyJobTitle';
 import { useQuery } from 'hooks/routing';
+import { usePage } from 'hooks/routing/page';
 import { queryKeyword, keywordMinLength } from 'actions/timeAndSalarySearch';
-import {
-  keywordSelector,
-  pageSelector,
-  dataSelector,
-  statusSelector,
-} from './selectors';
+import { keywordFromQuerySelector } from 'selectors/routing/keyword';
+import { dataSelector, statusSelector } from './selectors';
 import * as urlBuilder from './urlBuilder';
 import WorkingHourBlock from './WorkingHourBlock';
 import Helmet from './Helmet';
@@ -48,8 +45,8 @@ const SearchScreen = () => {
   const history = useHistory();
   const dispath = useDispatch();
   const query = useQuery();
-  const keyword = useMemo(() => keywordSelector(query), [query]);
-  const page = useMemo(() => pageSelector(query), [query]);
+  const keyword = useMemo(() => keywordFromQuerySelector(query), [query]);
+  const page = usePage();
   const data = useSelector(dataSelector(keyword));
   const status = useSelector(statusSelector(keyword));
 
@@ -104,7 +101,7 @@ const SearchScreen = () => {
 
 SearchScreen.fetchData = ({ store: { dispatch }, ...props }) => {
   const query = querySelector(props);
-  const keyword = keywordSelector(query);
+  const keyword = keywordFromQuerySelector(query);
   return dispatch(queryKeyword({ keyword }));
 };
 

src/components/TimeAndSalary/SearchScreen/selectors.js

@@ -1,20 +1,4 @@
-import { compose } from 'recompose';
 import fetchingStatus from 'constants/status';
-import { validatePage, validateSearchKeyword } from '../common/validators';
-import {
-  keywordFromQuerySelector,
-  pageFromQuerySelector,
-} from '../common/selectors';
-
-export const keywordSelector = compose(
-  validateSearchKeyword,
-  keywordFromQuerySelector,
-);
-
-export const pageSelector = compose(
-  validatePage,
-  pageFromQuerySelector,
-);
 
 // 當 state 狀態跟目前要查詢的 key 不合，回傳預設值
 export const dataSelector = keyword => state => {