completely converted stateful components into functional components with hooks

Author: rydang

src/app/components/Action.jsx

@@ -3,13 +3,16 @@ import PropTypes from 'prop-types';
 
 const Action = (props) => {
   const {
-    selected, handleChangeSnapshot, handleJumpSnapshot, index, sliderIndex,
+    selected, index, sliderIndex, dispatch,
   } = props;
 
   return (
     <div
       className={selected ? 'action-component selected' : 'action-component'}
-      onClick={() => handleChangeSnapshot(index)}
+      onClick={() => dispatch({
+        type: 'changeView',
+        payload: index,
+      })}
       role="presentation"
       style={index > sliderIndex ? { color: '#5f6369' } : {}}
     >
@@ -18,7 +21,10 @@ const Action = (props) => {
         className="jump-button"
         onClick={(e) => {
           e.stopPropagation();
-          handleJumpSnapshot(index);
+          dispatch({
+            type: 'changeSlider',
+            payload: index,
+          });
         }}
         tabIndex={index}
         type="button"
@@ -30,10 +36,10 @@ const Action = (props) => {
 };
 
 Action.propTypes = {
+  sliderIndex: PropTypes.number.isRequired,
   selected: PropTypes.bool.isRequired,
   index: PropTypes.number.isRequired,
-  handleChangeSnapshot: PropTypes.func.isRequired,
-  handleJumpSnapshot: PropTypes.func.isRequired,
+  dispatch: PropTypes.func.isRequired,
 };
 
 export default Action;

src/app/components/MainSlider.jsx

@@ -24,30 +24,28 @@ const handle = (props) => {
 };
 
 const MainSlider = ({
-  snapshotLength,
+  snapshotsLength,
   sliderIndex,
-  handleJumpSnapshot,
-  pause,
+  dispatch,
 }) =>
   (
     <Slider
       min={0}
-      max={snapshotLength - 1}
+      max={snapshotsLength - 1}
       value={sliderIndex}
       onChange={(index) => {
         const newIndex = index === -1 ? 0 : index;
-        handleJumpSnapshot(newIndex);
-        pause();
+        dispatch({ type: 'changeSlider', payload: newIndex });
+        dispatch({ type: 'pause' });
       }}
       handle={handle}
     />
   );
 
 MainSlider.propTypes = {
-  snapshotLength: PropTypes.number.isRequired,
+  snapshotsLength: PropTypes.number.isRequired,
   sliderIndex: PropTypes.number.isRequired,
-  handleJumpSnapshot: PropTypes.func.isRequired,
-  pause: PropTypes.func.isRequired,
+  dispatch: PropTypes.func.isRequired,
 };
 
 export default MainSlider;

src/app/containers/ActionContainer.jsx

@@ -4,11 +4,9 @@ import Action from '../components/Action';
 
 const ActionContainer = ({
   snapshots,
-  viewIndex,
-  handleChangeSnapshot,
-  handleJumpSnapshot,
-  emptySnapshot,
   sliderIndex,
+  viewIndex,
+  dispatch,
 }) => {
   let actionsArr = [];
   if (snapshots.length > 0) {
@@ -18,19 +16,17 @@ const ActionContainer = ({
         <Action
           key={`action${index}`}
           index={index}
-          snapshot={snapshot}
           selected={selected}
+          dispatch={dispatch}
           sliderIndex={sliderIndex}
-          handleChangeSnapshot={handleChangeSnapshot}
-          handleJumpSnapshot={handleJumpSnapshot}
         />
       );
     });
   }
   return (
     <div className="action-container">
       <div className="action-component exclude">
-        <button className="empty-button" onClick={emptySnapshot} type="button">
+        <button className="empty-button" onClick={() => dispatch({ type: 'empty' })} type="button">
           emptySnapshot
         </button>
       </div>
@@ -41,11 +37,9 @@ const ActionContainer = ({
 
 ActionContainer.propTypes = {
   snapshots: PropTypes.arrayOf(PropTypes.object).isRequired,
-  viewIndex: PropTypes.number.isRequired,
+  dispatch: PropTypes.func.isRequired,
   sliderIndex: PropTypes.number.isRequired,
-  handleChangeSnapshot: PropTypes.func.isRequired,
-  handleJumpSnapshot: PropTypes.func.isRequired,
-  emptySnapshot: PropTypes.func.isRequired,
+  viewIndex: PropTypes.number.isRequired,
 };
 
 export default ActionContainer;

src/app/containers/ButtonsContainer.jsx

@@ -1,35 +1,69 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+
+function exportSnapshots(snapshots) {
+  // create invisible download anchor link
+  const fileDownload = document.createElement('a');
+
+  // set file in anchor link
+  fileDownload.href = URL.createObjectURL(
+    new Blob([JSON.stringify(snapshots)], { type: 'application/json' }),
+  );
+
+  // set anchor as file download and click it
+  fileDownload.setAttribute('download', 'snapshot.json');
+  fileDownload.click();
+
+  // remove file url
+  URL.revokeObjectURL(fileDownload.href);
+}
+
+function importSnapshots(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.readAsText(event.target.files[0]);
+  };
+
+  fileUpload.click();
+}
+
 const ButtonsContainer = ({
   mode: { paused, locked, persist },
-  toggleMode,
-  importSnapshots,
-  exportSnapshots,
-}) => (
-  <div className="buttons-container">
-    <button className="pause-button" type="button" onClick={() => toggleMode('paused')}>
-      {paused ? 'Resume' : 'Pause'}
-    </button>
-    <button className="lock-button" type="button" onClick={() => toggleMode('locked')}>
-      {locked ? 'Unlock' : 'Lock'}
-    </button>
-    <button className="persist-button" type="button" onClick={() => toggleMode('persist')}>
-      {persist ? 'Unpersist' : 'Persist'}
-    </button>
-    <button className="import-button" type="button" onClick={importSnapshots}>
-      Import
-    </button>
-    <button className="export-button" type="button" onClick={exportSnapshots}>
-      Export
-    </button>
-  </div>
-);
+  dispatch,
+  snapshots,
+}) =>
+  (
+    <div className="buttons-container">
+      <button className="pause-button" type="button" onClick={() => dispatch({ type: 'toggleMode', payload: 'paused' })}>
+        {paused ? 'Resume' : 'Pause'}
+      </button>
+      <button className="lock-button" type="button" onClick={() => dispatch({ type: 'toggleLocked', payload: 'locked' })}>
+        {locked ? 'Unlock' : 'Lock'}
+      </button>
+      <button className="persist-button" type="button" onClick={() => dispatch({ type: 'togglePersist', payload: 'persist' })}>
+        {persist ? 'Unpersist' : 'Persist'}
+      </button>
+      <button className="export-button" type="button" onClick={() => exportSnapshots(snapshots)}>
+        Export
+      </button>
+      <button className="import-button" type="button" onClick={() => importSnapshots(dispatch)}>
+        Import
+      </button>
+    </div>
+  );
 
 ButtonsContainer.propTypes = {
-  toggleMode: PropTypes.func.isRequired,
-  importSnapshots: PropTypes.func.isRequired,
-  exportSnapshots: PropTypes.func.isRequired,
+  dispatch: PropTypes.func.isRequired,
+  snapshots: PropTypes.arrayOf(
+    PropTypes.object,
+  ).isRequired,
   mode: PropTypes.shape({
     paused: PropTypes.bool,
     locked: PropTypes.bool,