converted codebase into hooks

Author: rydang

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
-    "test": "jest --verbose --coverage --watchAll"
+    "test": "jest --verbose --coverage --watchAll",
+    "lint": "eslint --ext .js --ext .jsx src"
   },
   "keywords": [
     "react",

src/app/actions/actions.js

@@ -0,0 +1,82 @@
+import * as types from '../constants/actionTypes';
+
+export const togglePause = () => ({
+  type: types.TOGGLE_MODE,
+  payload: 'setPause',
+});
+
+export const toggleLock = () => ({
+  type: types.TOGGLE_MODE,
+  payload: 'setLock',
+});
+
+export const togglePersist = () => ({
+  type: types.TOGGLE_MODE,
+  payload: 'setPersist',
+});
+
+export const addNewSnapshots = snapshots => ({
+  type: types.NEW_SNAPSHOTS,
+  payload: {
+    snapshots,
+    sliderIndex: snapshots.length - 1,
+  },
+});
+
+export const initialConnect = (snapshots, mode) => ({
+  type: types.INITIAL_CONNECT,
+  payload: {
+    snapshots,
+    mode,
+    sliderIndex: 0,
+    viewIndex: -1,
+  },
+});
+
+export const setPort = port => ({
+  type: types.SET_PORT,
+  payload: port,
+});
+
+export const emptySnapshots = () => ({
+  type: types.EMPTY,
+});
+
+export const changeView = index => ({
+  type: types.CHANGE_VIEW,
+  payload: index,
+});
+
+export const changeSlider = index => ({
+  type: types.CHANGE_SLIDER,
+  payload: index,
+});
+
+export const moveBackward = () => ({
+  type: types.MOVE_BACKWARD,
+  payload: false,
+});
+
+export const moveForward = () => ({
+  type: types.MOVE_FORWARD,
+  payload: false,
+});
+
+export const playForward = () => ({
+  type: types.MOVE_FORWARD,
+  payload: true,
+});
+
+export const pause = () => ({
+  type: types.PAUSE,
+});
+
+export const startPlaying = intervalId => ({
+  type: types.PLAY,
+  payload: intervalId,
+});
+
+export const importSnapshots = newSnaps => ({
+  type: types.IMPORT,
+  payload: newSnaps,
+});

src/app/components/Action.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { changeView, changeSlider } from '../actions/actions';
+
 const Action = (props) => {
   const {
     selected, index, sliderIndex, dispatch,
@@ -9,10 +11,7 @@ const Action = (props) => {
   return (
     <div
       className={selected ? 'action-component selected' : 'action-component'}
-      onClick={() => dispatch({
-        type: 'changeView',
-        payload: index,
-      })}
+      onClick={() => dispatch(changeView(index))}
       role="presentation"
       style={index > sliderIndex ? { color: '#5f6369' } : {}}
     >
@@ -21,10 +20,7 @@ const Action = (props) => {
         className="jump-button"
         onClick={(e) => {
           e.stopPropagation();
-          dispatch({
-            type: 'changeSlider',
-            payload: index,
-          });
+          dispatch(changeSlider(index));
         }}
         tabIndex={index}
         type="button"

src/app/components/Chart.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import '../styles/components/_d3Tree.scss';
 import * as d3 from 'd3';
 
@@ -8,12 +9,14 @@ let duration = 750;
 
 class Chart extends Component {
   componentDidMount() {
-    root = JSON.parse(JSON.stringify(this.props.snapshot));
+    const { snapshot } = this.props;
+    root = JSON.parse(JSON.stringify(snapshot));
     this.maked3Tree();
   }
 
   componentDidUpdate() {
-    root = JSON.parse(JSON.stringify(this.props.snapshot));
+    const { snapshot } = this.props;
+    root = JSON.parse(JSON.stringify(snapshot));
     this.maked3Tree();
   }
 
@@ -28,8 +31,10 @@ class Chart extends Component {
     this.removed3Tree();
     duration = 0;
 
-    const margin = { top: 20, right: 120, bottom: 20, left: 120 };
-    const width = 600 - margin.right - margin.left;
+    const margin = {
+      top: 20, right: 120, bottom: 20, left: 120,
+    };
+    // const width = 600 - margin.right - margin.left;
     const height = 600 - margin.top - margin.bottom;
 
     let i = 0;
@@ -219,4 +224,10 @@ class Chart extends Component {
   }
 }
 
+Chart.propTypes = {
+  snapshot: PropTypes.arrayOf(
+    PropTypes.object,
+  ).isRequired,
+};
+
 export default Chart;

src/app/components/MainSlider.jsx

@@ -1,8 +1,12 @@
+/* eslint-disable react/prop-types */
+
 import React from 'react';
 import Slider from 'rc-slider';
 import Tooltip from 'rc-tooltip';
 import PropTypes from 'prop-types';
 
+import { changeSlider, pause } from '../actions/actions';
+
 const { Handle } = Slider;
 
 const handle = (props) => {
@@ -23,24 +27,21 @@ const handle = (props) => {
   );
 };
 
-const MainSlider = ({
-  snapshotsLength,
-  sliderIndex,
-  dispatch,
-}) =>
-  (
+function MainSlider({ snapshotsLength, sliderIndex, dispatch }) {
+  return (
     <Slider
       min={0}
       max={snapshotsLength - 1}
       value={sliderIndex}
       onChange={(index) => {
         const newIndex = index === -1 ? 0 : index;
-        dispatch({ type: 'changeSlider', payload: newIndex });
-        dispatch({ type: 'pause' });
+        dispatch(changeSlider(newIndex));
+        dispatch(pause());
       }}
       handle={handle}
     />
   );
+}
 
 MainSlider.propTypes = {
   snapshotsLength: PropTypes.number.isRequired,

src/app/constants/actionTypes.js

@@ -0,0 +1,12 @@
+export const TOGGLE_MODE = 'TOGGLE_MODE';
+export const MOVE_BACKWARD = 'MOVE_BACKWARD';
+export const MOVE_FORWARD = 'MOVEFORWARD';
+export const IMPORT = 'IMPORT';
+export const EMPTY = 'EMPTY';
+export const CHANGE_VIEW = 'CHANGE_VIEW';
+export const CHANGE_SLIDER = 'CHANGE_SLIDER';
+export const SET_PORT = 'SET_PORT';
+export const PAUSE = 'PAUSE';
+export const PLAY = 'PLAY';
+export const INITIAL_CONNECT = 'INITIAL_CONNECT';
+export const NEW_SNAPSHOTS = 'NEW_SNAPSHOTS';

src/app/containers/ActionContainer.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Action from '../components/Action';
 
+import { emptySnapshots } from '../actions/actions';
+
 const ActionContainer = ({
   snapshots,
   sliderIndex,
@@ -26,7 +28,7 @@ const ActionContainer = ({
   return (
     <div className="action-container">
       <div className="action-component exclude">
-        <button className="empty-button" onClick={() => dispatch({ type: 'empty' })} type="button">
+        <button className="empty-button" onClick={() => dispatch(emptySnapshots())} type="button">
           emptySnapshot
         </button>
       </div>

src/app/containers/ButtonsContainer.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  importSnapshots, toggleLock, togglePause, togglePersist,
+} from '../actions/actions';
 
-function exportSnapshots(snapshots) {
+function exportHandler(snapshots) {
   // create invisible download anchor link
   const fileDownload = document.createElement('a');
 
@@ -19,15 +22,13 @@ function exportSnapshots(snapshots) {
   URL.revokeObjectURL(fileDownload.href);
 }
 
-function importSnapshots(dispatch) {
+function importHandler(dispatch) {
   const fileUpload = document.createElement('input');
   fileUpload.setAttribute('type', 'file');
 
   fileUpload.onchange = (event) => {
     const reader = new FileReader();
-    reader.onload = () => {
-      dispatch({ type: 'import', payload: JSON.parse(reader.result) });
-    };
+    reader.onload = () => dispatch(importSnapshots(JSON.parse(reader.result)));
     reader.readAsText(event.target.files[0]);
   };
 
@@ -41,19 +42,19 @@ const ButtonsContainer = ({
 }) =>
   (
     <div className="buttons-container">
-      <button className="pause-button" type="button" onClick={() => dispatch({ type: 'toggleMode', payload: 'paused' })}>
+      <button className="pause-button" type="button" onClick={() => dispatch(togglePause())}>
         {paused ? 'Resume' : 'Pause'}
       </button>
-      <button className="lock-button" type="button" onClick={() => dispatch({ type: 'toggleMode', payload: 'locked' })}>
+      <button className="lock-button" type="button" onClick={() => dispatch(toggleLock())}>
         {locked ? 'Unlock' : 'Lock'}
       </button>
-      <button className="persist-button" type="button" onClick={() => dispatch({ type: 'toggleMode', payload: 'persist' })}>
+      <button className="persist-button" type="button" onClick={() => dispatch(togglePersist())}>
         {persist ? 'Unpersist' : 'Persist'}
       </button>
-      <button className="export-button" type="button" onClick={() => exportSnapshots(snapshots)}>
+      <button className="export-button" type="button" onClick={() => exportHandler(snapshots)}>
         Export
       </button>
-      <button className="import-button" type="button" onClick={() => importSnapshots(dispatch)}>
+      <button className="import-button" type="button" onClick={() => importHandler(dispatch)}>
         Import
       </button>
     </div>