console logs in button container maincontainer main reducer

Author: yididiaketema

src/app/containers/ButtonsContainer.tsx

@@ -32,24 +32,38 @@ function exportHandler(snapshots: []): void {
 
 function importHandler(dispatch: (a: unknown) => void): void {
   const fileUpload = document.createElement('input');
+  console.log('fileUpload element:', fileUpload)
   fileUpload.setAttribute('type', 'file');
 
   fileUpload.onchange = (e: Event) => {
     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 = () => {
+      console.log('on load triggered:')
       const test = reader.result.toString();
       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 {
@@ -59,6 +73,8 @@ 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'))}>

src/app/containers/MainContainer.tsx

@@ -45,7 +45,11 @@ function MainContainer(): JSX.Element {
     // listen for a message containing snapshots from the background script
     currentPort.onMessage.addListener(
       // parameter message is an object with following type script properties
-      (message: { action: string; payload: Record<string, unknown>; sourceTab: number }) => {
+      (message: { 
+        action: string; 
+        payload: Record<string, unknown>; 
+        sourceTab: number 
+      }) => {
         const { action, payload, sourceTab } = message;
         let maxTab: number;
         if (!sourceTab) {

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' };
@@ -177,6 +186,9 @@ export default (state, action) =>
       }
       case types.EMPTY: {
         // send msg to background script
+        console.log('-----clear snapshots reducer----')
+        console.log('state before:', state.tabs[currentTab])
+
         port.postMessage({ action: 'emptySnap', tabId: currentTab });
         tabs[currentTab].sliderIndex = 0;
         tabs[currentTab].viewIndex = 0;
@@ -201,12 +213,26 @@ 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])
+        
+
         port.postMessage({
           action: 'import',
           payload: action.payload,
           tabId: currentTab,
         });
+      
+    
         tabs[currentTab].snapshots = action.payload;
+        
+
+
+        // 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: {