Removed non-functional split feature

Co-authored-by: Jasmine Noor <jasnoo@users.noreply.github.com>
Co-authored-by: Minzo Kim <minzo-kim@users.noreply.github.com>
Co-authored-by: Jackie Yuan <yuanjackie1@users.noreply.github.com>

Author: 4 people

src/app/actions/actions.ts

@@ -5,9 +5,11 @@ export const save = (newSeries, newSeriesName) => ({
   type: types.SAVE,
   payload: { newSeries, newSeriesName },
 });
+
 export const deleteSeries = () => ({
   type: types.DELETE_SERIES,
 });
+
 export const toggleMode = (mode) => ({
   type: types.TOGGLE_MODE,
   payload: mode,
@@ -86,10 +88,6 @@ export const noDev = (tab) => ({
   payload: tab,
 });
 
-export const toggleSplit = () => ({
-  type: types.TOGGLE_SPLIT,
-});
-
 export const toggleExpanded = (node) => ({
   type: types.TOGGLE_EXPANDED,
   payload: node,

src/app/components/App.tsx

@@ -13,14 +13,12 @@ const initialState: {
   port: null | number;
   currentTab: null | number;
   currentTitle: null | string;
-  split: null | boolean;
   tabs: unknown;
   currentTabInApp: null | string;
 } = {
   port: null,
   currentTab: null,
   currentTitle: 'No Target',
-  split: false,
   tabs: {},
   currentTabInApp: null,
 };

src/app/components/Tutorial.tsx

@@ -134,13 +134,6 @@ export default class Tutorial extends React.Component<tutorialProps, tutorialSta
               "<ul><li>Use button to lock Reactime to the target application's tab in the Chrome Browser</li></ul>",
             position: 'top',
           },
-          {
-            title: 'Split Button',
-            element: '.split-button',
-            intro:
-              '<ul> <li>Use button to split Reactime into two windows in order to view multiple tabs simultaneously</li> </ul>',
-            position: 'top',
-          },
           {
             title: 'Download Button',
             element: '.export-button',
@@ -281,7 +274,7 @@ export default class Tutorial extends React.Component<tutorialProps, tutorialSta
           ref={(steps) => (this.steps = steps)}
         />
         <button className='howToUse-button' type='button' onClick={() => startIntro()}>
-          <FontAwesomeIcon icon={faQuestion} /> How to use
+          <FontAwesomeIcon icon={faQuestion} /> Tutorial
         </button>
       </>
     );

src/app/constants/actionTypes.ts

@@ -13,7 +13,6 @@ export const NEW_SNAPSHOTS = 'NEW_SNAPSHOTS';
 export const SET_TAB = 'SET_TAB';
 export const DELETE_TAB = 'DELETE_TAB';
 export const NO_DEV = 'NO_DEV';
-export const TOGGLE_SPLIT = 'TOGGLE_SPLIT';
 export const TOGGLE_EXPANDED = 'TOGGLE_EXPANDED';
 export const LAUNCH_CONTENT = 'LAUNCH_CONTENT';
 export const SLIDER_ZERO = 'SLIDER_ZERO';

src/app/containers/ButtonsContainer.tsx

@@ -8,7 +8,7 @@ import {
   faUnlock,
   faLock,
 } from '@fortawesome/free-solid-svg-icons';
-import { importSnapshots, toggleMode, toggleSplit } from '../actions/actions';
+import { importSnapshots, toggleMode } from '../actions/actions';
 import { useStoreContext } from '../store';
 
 import Tutorial from '../components/Tutorial';
@@ -53,7 +53,7 @@ function importHandler(dispatch: (a: unknown) => void) {
 }
 
 function ButtonsContainer(): JSX.Element {
-  const [{ tabs, currentTab, split, currentTabInApp }, dispatch] = useStoreContext();
+  const [{ tabs, currentTab, currentTabInApp }, dispatch] = useStoreContext();
   const {
     snapshots,
     mode: { paused },
@@ -62,15 +62,9 @@ function ButtonsContainer(): JSX.Element {
   return (
     <div className='buttons-container'>
       <button className='pause-button' type='button' onClick={() => dispatch(toggleMode('paused'))}>
-        {paused ? <FontAwesomeIcon icon={faUnlock} /> : <FontAwesomeIcon icon={faLock} />}
-        {paused ? 'Unlock' : 'Lock'}
+        {paused ? <FontAwesomeIcon icon={faLock} /> : <FontAwesomeIcon icon={faUnlock} />}
+        {paused ? 'Locked' : 'Unlocked'}
       </button>
-
-      <button className='split-button' type='button' onClick={() => dispatch(toggleSplit())}>
-        {split ? <FontAwesomeIcon icon={faSquare} /> : <FontAwesomeIcon icon={faColumns} />}
-        {split ? 'Unsplit' : 'Split'}
-      </button>
-
       <button className='export-button' type='button' onClick={() => exportHandler(snapshots)}>
         <FontAwesomeIcon icon={faDownload} />
         Download

src/app/containers/MainContainer.tsx

@@ -17,12 +17,10 @@ import {
 } from '../actions/actions';
 import { useStoreContext } from '../store';
 
-//Must be required in. This enables compatibility with TS. If imported in, throws ts error of not rendering steps as a class component correctly.
-const Split = require('react-split');
 
 function MainContainer(): JSX.Element {
   const [store, dispatch] = useStoreContext();
-  const { tabs, currentTab, port, split } = store;
+  const { tabs, currentTab, port } = store;
   const [actionView, setActionView] = useState(true);
   // this function handles Time Jump sidebar view
   const toggleActionContainer = () => {
@@ -148,54 +146,6 @@ function MainContainer(): JSX.Element {
   const snapshotDisplay = statelessCleaning(snapshotView);
   const hierarchyDisplay = statelessCleaning(hierarchy);
 
-  function handleSplit(currentSplitMode: boolean): JSX.Element {
-    if (!currentSplitMode) {
-      return (
-        <div className='state-container-container'>
-          <StateContainer
-            webMetrics={webMetrics}
-            viewIndex={viewIndex}
-            snapshot={snapshotDisplay}
-            hierarchy={hierarchyDisplay}
-            snapshots={snapshots}
-            currLocation={currLocation}
-          />
-        </div>
-      );
-    }
-    return (
-      <Split
-        sizes={[50, 50]}
-        minSize={200}
-        snapOffset={1}
-        className='split'
-        gutterStyle={function () {
-          return {
-            backgroundColor: 'dimgrey',
-            width: '8px',
-          };
-        }}
-      >
-        <StateContainer
-          webMetrics={webMetrics}
-          viewIndex={viewIndex}
-          snapshot={snapshotDisplay}
-          hierarchy={hierarchyDisplay}
-          snapshots={snapshots}
-          currLocation={currLocation}
-        />
-        <StateContainer
-          webMetrics={webMetrics}
-          viewIndex={viewIndex}
-          snapshot={snapshotDisplay}
-          hierarchy={hierarchyDisplay}
-          snapshots={snapshots}
-          currLocation={currLocation}
-        />
-      </Split>
-    );
-  }
-
   return (
     <div className='main-container'>
       <div id='bodyContainer' className='body-container'>
@@ -204,7 +154,17 @@ function MainContainer(): JSX.Element {
           setActionView={setActionView}
           toggleActionContainer={toggleActionContainer}
         />
-        {snapshots.length ? handleSplit(split) : null}
+        {snapshots.length ?
+          <div className='state-container-container'>
+          <StateContainer
+            webMetrics={webMetrics}
+            viewIndex={viewIndex}
+            snapshot={snapshotDisplay}
+            hierarchy={hierarchyDisplay}
+            snapshots={snapshots}
+            currLocation={currLocation}
+          />
+        </div> : null}
         <TravelContainer snapshotsLength={snapshots.length} />
         <ButtonsContainer />
       </div>

src/app/reducers/mainReducer.js

@@ -328,10 +328,6 @@ export default (state, action) =>
         }
         break;
       }
-      case types.TOGGLE_SPLIT: {
-        draft.split = !draft.split;
-        break;
-      }
       case types.TOGGLE_EXPANDED: {
         // find correct node from currLocation and toggle isExpanded
         const checkChildren = (node) => {