merge with currentDev branch

Author: EivindDelFierro

src/app/containers/ButtonsContainer.tsx

@@ -47,6 +47,7 @@ function importHandler(dispatch: (a: unknown) => void): void {
   // accepts data from user
   const fileUpload = document.createElement('input');
   // file is a type attribute on the input element, allows users to select a file
+  console.log('fileUpload element:', fileUpload)
   fileUpload.setAttribute('type', 'file');
 
   // onChange is when value of HTML element is changed
@@ -56,26 +57,39 @@ function importHandler(dispatch: (a: unknown) => void): void {
     // reads contents of local files in async
     // can use file or blob objects
     const reader = new FileReader();
+    console.log('on change triggered')
+    //console.log('reader :', reader);
+
+    const eventFiles = e.target as HTMLInputElement;
+    // console.log('e.target:', e.target)
+    // console.log('event files:', eventFiles.files[0]);
+   
+    if (eventFiles) {
+      reader.readAsText(eventFiles.files[0]);
+    }
+
     reader.onload = () => {
       // once the local file has been loaded, result property on FileReader object returns the file's contents
       // then take contents and convert to a string
+      console.log('on load triggered:')
       const test = reader.result.toString();
       // dispatch sends the result of calling importSnapshots on the json parsed data from the file contents from the new FileReader object
       // importSnapshots defined in actions/actions.ts/line 71, it returns an action object with a type and payload, payload is newSnaps parameter
       // dispatch function is being called with that action object which gets sent to the reducer in reducers/mainReducer.js/line 203
       // this updates the current tab
       return dispatch(importSnapshots(JSON.parse(test)));
     };
-    const eventFiles = e.target as HTMLInputElement;
-    if (eventFiles?.hasOwnProperty('files')) {
-      // const eventFiles = target as HTMLInputElement;
-      if (eventFiles) {
-        reader.readAsText(eventFiles.files[0]);
-      }
-    }
+    // const eventFiles = e.target as HTMLInputElement;
+    // if (eventFiles?.hasOwnProperty('files')) {
+    //   // const eventFiles = target as HTMLInputElement;
+    //   if (eventFiles) {
+    //     reader.readAsText(eventFiles.files[0]);
+    //   }
+    // }
   };
 
   fileUpload.click();
+  //console.log('dispatch importSnapshots successful')
 }
 
 function ButtonsContainer(): JSX.Element {
@@ -85,13 +99,15 @@ function ButtonsContainer(): JSX.Element {
     mode: { paused },
   } = tabs[currentTab];
 
+  console.log('----state after any change----', tabs[currentTab])
+
   return (
     <div className='buttons-container'>
       <button className='pause-button' type='button' onClick={() => dispatch(toggleMode('paused'))}>
         {paused ? <FontAwesomeIcon icon={faLock} /> : <FontAwesomeIcon icon={faUnlock} />}
         {paused ? 'Locked' : 'Unlocked'}
       </button>
-      <button className='export-button' type='button' onClick={() => exportHandler(snapshots)}>
+      <button className='export-button' type='button' onClick={() => exportHandler(tabs[currentTab])}>
         <FontAwesomeIcon icon={faDownload} />
         Download
       </button>

src/app/containers/MainContainer.tsx

@@ -54,12 +54,13 @@ function MainContainer(): JSX.Element {
 
     // listen for a message containing snapshots from the /extension/build/background.js service worker
     currentPort.onMessage.addListener(
-      (message: { // parameter message is an object with following type script properties
+      // parameter message is an object with following type script properties
+      (message: { 
         action: string; 
         payload: Record<string, unknown>; 
         sourceTab: number 
       }) => {
-        const { action, payload, sourceTab } = message; // we destructure message into action, payload, sourceTab
+        const { action, payload, sourceTab } = message;
         let maxTab: number;
 
         if (!sourceTab) { // if the sourceTab doesn't exist or is 0

src/app/reducers/mainReducer.js

@@ -1,13 +1,21 @@
 import { produce } from 'immer';
 import _, { values } from 'lodash';
 import * as types from '../constants/actionTypes.ts';
+// import { current } from 'immer';
 
 export default (state, action) =>
   produce(state, (draft) => {
     const { port, currentTab, tabs } = draft;
     const { hierarchy, snapshots, mode, intervalId, viewIndex, sliderIndex } =
       tabs[currentTab] || {};
 
+    // console.log('----consoles before reducer funcs!-----')
+    // console.log('state:', state)
+    //console.log(tabs[currentTab]);
+    //console.log('properties of tabs[currentTab]:', hierarchy, snapshots, mode, intervalId, viewIndex, sliderIndex)
+
+    //console.log('reducer file!', 'hierarchy:', hierarchy, 'tabs:', tabs)
+
     // eslint-disable-next-line max-len
     // function that finds the index in the hierarchy and extracts the name of the equivalent index to add to the post message
     // eslint-disable-next-line consistent-return
@@ -36,6 +44,7 @@ export default (state, action) =>
     switch (action.type) {
       // This saves the series user wants to save to chrome local storage
       case types.SAVE: {
+        console.log('save action reducer!', 'payload:', action.payload);
         const { newSeries, newSeriesName } = action.payload;
         if (!tabs[currentTab].seriesSavedStatus) {
           tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'inputBoxOpen' };
@@ -176,18 +185,28 @@ export default (state, action) =>
         break;
       }
       case types.EMPTY: {
+        console.log('-----clear snapshots reducer----');
+        console.log('state before:', state.tabs[currentTab]);
+
         // send msg to background script
-        port.postMessage({ action: 'emptySnap', tabId: currentTab });
+        port.postMessage({ action: 'emptySnap', tabId: currentTab }); //communicate with background.js
+
+        // properties associated with timetravel + seek bar
         tabs[currentTab].sliderIndex = 0;
         tabs[currentTab].viewIndex = 0;
         tabs[currentTab].playing = false;
-        const lastSnapshot = tabs[currentTab].snapshots[tabs[currentTab].snapshots.length - 1];
+
+        const lastSnapshot = tabs[currentTab].snapshots[tabs[currentTab].snapshots.length - 1]; // first snapshot?
+
         // resets hierarchy to page last state recorded
         tabs[currentTab].hierarchy.stateSnapshot = { ...lastSnapshot };
+
         // resets hierarchy
         tabs[currentTab].hierarchy.children = [];
+
         // resets snapshots to page last state recorded
         tabs[currentTab].snapshots = [lastSnapshot];
+
         // resets currLocation to page last state recorded
         tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
         tabs[currentTab].index = 1;
@@ -201,12 +220,47 @@ export default (state, action) =>
         break;
       }
       case types.IMPORT: {
+        // Log the value of tabs[currentTab].snapshots before the update
+        console.log('-----import snapshots reducer----');
+        console.log('state before:', state.tabs[currentTab]);
+        console.log('action payload:', action.payload);
+
         port.postMessage({
           action: 'import',
-          payload: action.payload,
+          payload: action.payload, //.snapshots,
           tabId: currentTab,
         });
-        tabs[currentTab].snapshots = action.payload;
+
+        //============
+        const savedSnapshot = action.payload;
+
+        tabs[currentTab].sliderIndex = savedSnapshot.sliderIndex;
+        tabs[currentTab].viewIndex = savedSnapshot.viewIndex;
+        tabs[currentTab].playing = false;
+
+        // resets hierarchy to page last state recorded
+        tabs[currentTab].hierarchy.stateSnapshot = savedSnapshot.hierarchy.stateSnapshot;
+
+        // resets hierarchy
+        tabs[currentTab].hierarchy.children = savedSnapshot.hierarchy.children;
+
+        // resets snapshots to page last state recorded
+        tabs[currentTab].snapshots = savedSnapshot.snapshots;
+
+        // resets currLocation to page last state recorded
+        tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
+        tabs[currentTab].index = savedSnapshot.index;
+        tabs[currentTab].currParent = savedSnapshot.currParent;
+        tabs[currentTab].currBranch = savedSnapshot.Branch;
+        tabs[currentTab].seriesSavedStatus = false;
+
+        //============
+        //tabs[currentTab].snapshots = action.payload.snapshots;
+
+        // console.log('New snapshots:', action.payload);
+        // console.log('updated tabs[CurrentTab].snapshots:', tabs[currentTab].snapshots)
+        //console.log('state after:', state)
+
         break;
       }
       case types.TOGGLE_MODE: {