Merge pull request #6 from oslabs-beta/branchTest

Branch test

Author: brok3turtl3

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: {

src/extension/background.js

@@ -132,15 +132,44 @@ function changeCurrLocation(tabObj, rootNode, index, name) {
   }
 }
 
+/*
+  The 'chrome.runtime' API allows a connection to the background service worker (background.js).
+  This allows us to set up listener's for when we connect, message, and disconnect the script.
+*/
+
 // Establishing incoming connection with Reactime.
 chrome.runtime.onConnect.addListener((port) => {
-  // port is one end of the connection - an object
-  // push every port connected to the ports array
-  portsArr.push(port);
+  /*
+    On initial connection, there is an onConnect event emitted. The 'addlistener' method provides a communication channel object ('port') when we connect to the service worker ('background.js') and applies it as the argument to it's 1st callback parameter.
+
+    the 'port' (type: communication channel object) is the communication channel between different components within our Chrome extension, not to a port on the Chrome browser tab or the extension's port on the Chrome browser.
+  
+    The port object facilitates communication between the Reactime front-end and this 'background.js' script. This allows you to: 
+    1. send messages and data
+      (look for 'onMessage'/'postMessage' methods within this page)
+    2. receive messages and data
+      (look for 'addListener' methods within this page)
+    between the front-end and the background.
+  
+    To establish communication between different parts of your extension:
+      for the connecting end: use chrome.runtime.connect() 
+      for the listening end: use chrome.runtime.onConnect. 
+    Once the connection is established, a port object is passed to the addListener callback function, allowing you to start exchanging data.
+  
+    Again, this port object is used for communication within your extension, not for communication with external ports or tabs in the Chrome browser. If you need to interact with specific tabs or external ports, you would use other APIs or methods, such as chrome.tabs or other Chrome Extension APIs.
+  */
+ 
+  portsArr.push(port); // push each Reactime communication channel object to the portsArr
+
+  console.log('console logging port on initial connection')
+  console.log(port)
+  console.log('console logging portArray on initial connection')
+  console.log(portsArr)
+
   // On Reactime launch: make sure RT's active tab is correct
   if (portsArr.length > 0) {
-    portsArr.forEach((bg) =>
-      bg.postMessage({
+    portsArr.forEach((bg) => // go through each port object (each Reactime instance)
+      bg.postMessage({  // send passed in action object as a message to the current port
         action: 'changeTab',
         payload: { tabId: activeTab.id, title: activeTab.title },
       }),
@@ -182,39 +211,48 @@ chrome.runtime.onConnect.addListener((port) => {
     switch (action) {
       case 'import': // create a snapshot property on tabId and set equal to tabs object
         // may need do something like filter payload from stateless
-        tabsObj[tabId].snapshots = payload;
-        return true;
+        tabsObj[tabId].snapshots = payload.snapshots; // reset snapshots to page last state recorded
+        // tabsObj[tabId].hierarchy = savedSnapshot.hierarchy; // why don't we just use hierarchy? Because it breaks everything...
+        tabsObj[tabId].hierarchy.children = payload.hierarchy.children; // resets hierarchy to last state recorded
+        tabsObj[tabId].hierarchy.stateSnapshot = payload.hierarchy.stateSnapshot; // resets hierarchy to last state recorded
+        tabsObj[tabId].currLocation = payload.currLocation; // resets currLocation to last state recorded
+        tabsObj[tabId].index = payload.index; //reset index to last state recorded
+        tabsObj[tabId].currParent = payload.currParent; // reset currParent to last state recorded
+        tabsObj[tabId].currBranch = payload.currBranch; // reset currBranch to last state recorded
+
+        return true; // return true so that port remains open
+
       case 'emptySnap':
-        // reset snapshots to page last state recorded
-        tabsObj[tabId].snapshots = [tabsObj[tabId].snapshots[tabsObj[tabId].snapshots.length - 1]];
-        // resets hierarchy
-        tabsObj[tabId].hierarchy.children = [];
-        // resets hierarchy to page last state recorded
-        tabsObj[tabId].hierarchy.stateSnapshot = {
+        tabsObj[tabId].snapshots = [tabsObj[tabId].snapshots[tabsObj[tabId].snapshots.length - 1]]; // reset snapshots to page last state recorded
+        tabsObj[tabId].hierarchy.children = []; // resets hierarchy
+        tabsObj[tabId].hierarchy.stateSnapshot = { // resets hierarchy to page last state recorded
           ...tabsObj[tabId].snapshots[0],
         };
-        // resets currLocation to page last state recorded
-        tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
-        tabsObj[tabId].index = 1;
-        tabsObj[tabId].currParent = 0;
-        tabsObj[tabId].currBranch = 1;
-        return true;
-      // Pause = lock on tab
-      case 'setPause':
+        tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy; // resets currLocation to page last state recorded
+        tabsObj[tabId].index = 1; //reset index
+        tabsObj[tabId].currParent = 0; // reset currParent
+        tabsObj[tabId].currBranch = 1; // reset currBranch
+        return true; // return true so that port remains open
+      
+      case 'setPause': // Pause = lock on tab
         tabsObj[tabId].mode.paused = payload;
-        return true;
+        return true; // return true so that port remains open
+
       case 'launchContentScript':
         chrome.scripting.executeScript({
           target: { tabId },
           files: ['bundles/content.bundle.js'],
         });
         return true;
+
       case 'jumpToSnap':
         chrome.tabs.sendMessage(tabId, msg);
         return true; // attempt to fix message port closing error, consider return Promise
+
       case 'toggleRecord':
         chrome.tabs.sendMessage(tabId, msg);
         return true;
+
       default:
         return true;
     }