add Redux Starter Kit

app/actions/actionTypes.tsx

@@ -59,10 +59,6 @@ export enum ACTION_TYPES {
   GLOBAL_DIALOG_FAILED_TO_GET_CITATION_TEXT = 'GLOBAL_DIALOG_FAILED_TO_GET_CITATION_TEXT',
   GLOBAL_DIALOG_FAILED_TO_GET_AUTHOR_LIST = 'GLOBAL_DIALOG_FAILED_TO_GET_AUTHOR_LIST',
 
-  SET_DEVICE_TO_DESKTOP = 'SET_DEVICE_TO_DESKTOP',
-  SET_DEVICE_TO_TABLET = 'SET_DEVICE_TO_TABLET',
-  SET_DEVICE_TO_MOBILE = 'SET_DEVICE_TO_MOBILE',
-
   SIGN_IN_SUCCEEDED_TO_SIGN_IN = 'SIGN_IN_SUCCEEDED_TO_SIGN_IN',
 
   EMAIL_VERIFICATION_START_TO_VERIFY_TOKEN = 'EMAIL_VERIFICATION_START_TO_VERIFY_TOKEN',

app/components/articleSearch/components/pagination/index.tsx

@@ -3,9 +3,9 @@ import { Location } from 'history';
 import SearchQueryManager from '../../../../helpers/searchQueryManager';
 import DesktopPagination from '../../../common/desktopPagination';
 import MobilePagination from '../../../common/mobilePagination';
-import { UserDevice } from '../../../layouts/records';
 import { getUrlDecodedQueryParamsObject } from '../../../../helpers/makeNewFilterLink';
 import { withStyles } from '../../../../helpers/withStylesHelper';
+import { UserDevice } from '../../../layouts/reducer';
 const styles = require('../../articleSearch.scss');
 
 interface PaginationProps {

app/components/authorShowHeader/index.tsx

@@ -8,7 +8,7 @@ import Icon from '../../icons';
 import formatNumber from '../../helpers/formatNumber';
 import UploadableProfileImage from './uploadableProfileImage';
 import { CurrentUser } from '../../model/currentUser';
-import { UserDevice } from '../layouts/records';
+import { UserDevice } from '../layouts/reducer';
 const styles = require('./authorShowHeader.scss');
 
 interface AuthorShowHeaderProps {

app/components/collectionShow/pagination.tsx

@@ -3,10 +3,11 @@ import axios, { CancelTokenSource } from 'axios';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 import { CollectionShowState } from '../../containers/collectionShow/reducer';
-import { LayoutState, UserDevice } from '../layouts/records';
+import { LayoutState } from '../layouts/reducer';
 import { getPapers } from '../../containers/collectionShow/actions';
 import MobilePagination from '../common/mobilePagination';
 import DesktopPagination from '../common/desktopPagination';
+import { UserDevice } from '../layouts/reducer';
 
 const Pagination: React.FC<{
   dispatch: Dispatch<any>;

app/components/common/InputWithSuggestionList/searchQueryInput.tsx

@@ -20,11 +20,11 @@ import PapersQueryFormatter, { FilterObject } from '../../../helpers/searchQuery
 import ActionTicketManager from '../../../helpers/actionTicketManager';
 import { ACTION_TYPES } from '../../../actions/actionTypes';
 import { AppState } from '../../../reducers';
-import { UserDevice } from '../../layouts/records';
 import { getCurrentPageType } from '../../locationListener';
 import { handleInputKeydown } from './helpers/handleInputKeydown';
 import { checkBlockSignUpConversion } from '../../../helpers/checkSignUpCount';
 import { changeSearchQuery } from '../../../actions/searchQuery';
+import { UserDevice } from '../../layouts/reducer';
 const s = require('./searchQueryInput.scss');
 
 type SearchQueryInputProps = React.InputHTMLAttributes<HTMLInputElement> &

app/components/common/paperFigureDetail/paperFigureDetail.tsx

@@ -3,11 +3,11 @@ import { connect } from 'react-redux';
 import { AppState } from '../../../reducers';
 import { withStyles } from '../../../helpers/withStylesHelper';
 import Icon from '../../../icons';
-import { UserDevice } from '../../layouts/records';
 import SliderButtons from './sliderButtons';
 import { FIGURE_PREFIX } from '../../../constants/paperFigure';
 import ActionTicketManager from '../../../helpers/actionTicketManager';
 import { getCurrentPageType } from '../../locationListener';
+import { UserDevice } from '../../layouts/reducer';
 const styles = require('./paperFigureDetail.scss');
 
 const MAX_LENGTH_OF_MOBILE_CAPTION = 250;

app/components/common/paperItem/paperActionButtons.tsx

@@ -18,7 +18,8 @@ import formatNumber from '../../../helpers/formatNumber';
 import { addPaperToRecommendation } from '../../../actions/recommendation';
 import { PaperSource } from '../../../api/paper';
 import { AppState } from '../../../reducers';
-import { LayoutState, UserDevice } from '../../layouts/records';
+import { LayoutState } from '../../layouts/reducer';
+import { UserDevice } from '../../layouts/reducer';
 const styles = require('./paperActionButtons.scss');
 
 interface HandleClickClaim {

app/components/deviceDetector/index.tsx

@@ -1,78 +1,52 @@
 import * as React from 'react';
-import { throttle, Cancelable } from 'lodash';
-import { connect, DispatchProp } from 'react-redux';
+import { throttle } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
 import EnvChecker from '../../helpers/envChecker';
 import UserAgentHelper from '../../helpers/userAgentHelper';
+import { UserDevice, setDeviceType, LayoutState } from '../layouts/reducer';
 import { AppState } from '../../reducers';
-import { LayoutState, UserDevice } from '../layouts/records';
-import { setDeviceToMobile, setDeviceToDesktop, setDeviceToTablet } from '../layouts/actions';
 
 const MOBILE_WIDTH = 768;
 const TABLET_WIDTH = 1024;
 
-function mapStateToProps(state: AppState) {
-  return {
-    layout: state.layout,
-  };
-}
+const DeviceDetector: React.FC = () => {
+  const dispatch = useDispatch();
+  const layout = useSelector<AppState, LayoutState>(state => state.layout);
 
-interface DeviceDetectorProps extends DispatchProp {
-  layout: LayoutState;
-}
+  React.useEffect(() => {
+    if (EnvChecker.isOnServer()) return;
 
-class DeviceDetector extends React.PureComponent<DeviceDetectorProps, {}> {
-  private throttledHandlingWindowSizeChange: (() => void) & Cancelable;
-
-  public constructor(props: DeviceDetectorProps) {
-    super(props);
-
-    this.throttledHandlingWindowSizeChange = throttle(this.handleWindowSizeChange, 300);
-  }
-
-  public componentDidMount() {
-    if (!EnvChecker.isOnServer()) {
-      const { dispatch } = this.props;
-      const device = UserAgentHelper.getDevice();
-
-      if (device && device.type === 'mobile') {
-        dispatch!(setDeviceToMobile());
-      }
-
-      window.addEventListener('resize', this.throttledHandlingWindowSizeChange);
+    const device = UserAgentHelper.getDevice();
+    if (device && device.type === 'mobile') {
+      dispatch(setDeviceType({ userDevice: UserDevice.MOBILE }));
     }
-  }
 
-  public componentWillUnmount() {
-    if (!EnvChecker.isOnServer()) {
-      window.removeEventListener('resize', this.throttledHandlingWindowSizeChange);
-    }
-  }
-
-  public render() {
-    return <span />;
-  }
-
-  private handleWindowSizeChange = () => {
-    const { dispatch, layout } = this.props;
-
-    if (!EnvChecker.isOnServer()) {
+    const handleWindowSizeChange = () => {
       if (document.documentElement) {
         const currentWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
 
         if (currentWidth < MOBILE_WIDTH && layout.userDevice !== UserDevice.MOBILE) {
-          dispatch!(setDeviceToMobile());
+          dispatch(setDeviceType({ userDevice: UserDevice.MOBILE }));
         } else if (
           currentWidth >= MOBILE_WIDTH &&
           currentWidth < TABLET_WIDTH &&
           layout.userDevice !== UserDevice.TABLET
         ) {
-          dispatch!(setDeviceToTablet());
+          dispatch(setDeviceType({ userDevice: UserDevice.TABLET }));
         } else if (currentWidth >= TABLET_WIDTH && layout.userDevice !== UserDevice.DESKTOP) {
-          dispatch!(setDeviceToDesktop());
+          dispatch(setDeviceType({ userDevice: UserDevice.DESKTOP }));
         }
       }
-    }
-  };
-}
-
-export default connect(mapStateToProps)(DeviceDetector);
+    };
+    const throttledHandlingWindowSizeChange = throttle(handleWindowSizeChange, 300);
+    window.addEventListener('resize', throttledHandlingWindowSizeChange);
+    return () => {
+      if (EnvChecker.isOnServer()) return;
+      window.removeEventListener('resize', throttledHandlingWindowSizeChange);
+    };
+  });
+
+  return null;
+};
+
+export default DeviceDetector;

app/components/dialog/index.tsx

@@ -34,7 +34,7 @@ import EnvChecker from '../../helpers/envChecker';
 import SurveyForm from '../auth/signUp/components/surveyForm';
 import { addPaperToRecommendation } from '../../actions/recommendation';
 import PaperFigureDetail from '../common/paperFigureDetail/paperFigureDetail';
-import { UserDevice } from '../layouts/records';
+import { UserDevice } from '../layouts/reducer';
 const styles = require('./dialog.scss');
 
 function mapStateToProps(state: AppState) {

app/components/dialog/types/index.tsx

@@ -3,7 +3,7 @@ import { Dispatch } from 'redux';
 import { DialogState } from '../reducer';
 import { CurrentUser } from '../../../model/currentUser';
 import { Collection } from '../../../model/collection';
-import { LayoutState } from '../../layouts/records';
+import { LayoutState } from '../../layouts/reducer';
 
 export interface DialogContainerProps
   extends Readonly<{

app/components/improvedHome/index.tsx

@@ -7,7 +7,7 @@ import { withRouter, RouteComponentProps } from 'react-router';
 import Helmet from 'react-helmet';
 import ReactCountUp from 'react-countup';
 import { AppState } from '../../reducers';
-import { LayoutState, UserDevice } from '../layouts/records';
+import { LayoutState } from '../layouts/reducer';
 import { withStyles } from '../../helpers/withStylesHelper';
 import SearchQueryInput from '../common/InputWithSuggestionList/searchQueryInput';
 import TrendingPaper from './components/trendingPaper';
@@ -19,6 +19,7 @@ import RecommendationAPI, { BasedOnCollectionPapersParams } from '../../api/reco
 import ImprovedFooter from '../layouts/improvedFooter';
 import RecommendedPapers from './components/recommendedPapers';
 import { Paper } from '../../model/paper';
+import { UserDevice } from '../layouts/reducer';
 const styles = require('./improvedHome.scss');
 
 const MAX_KEYWORD_SUGGESTION_LIST_COUNT = 5;

app/components/journalShow/index.tsx

@@ -20,7 +20,7 @@ import { paperSchema, Paper } from '../../model/paper';
 import { journalSchema, Journal } from '../../model/journal';
 import { JournalShowState } from './reducer';
 import Icon from '../../icons';
-import { LayoutState, UserDevice } from '../layouts/records';
+import { LayoutState } from '../layouts/reducer';
 import formatNumber from '../../helpers/formatNumber';
 import SortBox, { PAPER_LIST_SORT_TYPES } from '../common/sortBox';
 import SafeURIStringHandler from '../../helpers/safeURIStringHandler';
@@ -30,6 +30,7 @@ import restoreScroll from '../../helpers/scrollRestoration';
 import ErrorPage from '../error/errorPage';
 import { JournalShowMatchParams } from './types';
 import ImprovedFooter from '../layouts/improvedFooter';
+import { UserDevice } from '../layouts/reducer';
 const styles = require('./journalShow.scss');
 
 function mapStateToProps(state: AppState) {