Skip to content

Commit 7a44ecd

Browse files
brok3turtl3brok3turtl3
authored
Merge pull request #6 from oslabs-beta/branchTest
Branch test
2 parents 626b30b + a8f9892 commit 7a44ecd

File tree

4 files changed

+145
-36
lines changed

4 files changed

+145
-36
lines changed

‎src/app/containers/ButtonsContainer.tsx‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ function importHandler(dispatch: (a: unknown) => void): void {
4747
// accepts data from user
4848
const fileUpload = document.createElement('input');
4949
// file is a type attribute on the input element, allows users to select a file
50+
console.log('fileUpload element:', fileUpload)
5051
fileUpload.setAttribute('type', 'file');
5152

5253
// onChange is when value of HTML element is changed
@@ -56,26 +57,39 @@ function importHandler(dispatch: (a: unknown) => void): void {
5657
// reads contents of local files in async
5758
// can use file or blob objects
5859
const reader = new FileReader();
60+
console.log('on change triggered')
61+
//console.log('reader :', reader);
62+
63+
const eventFiles = e.target as HTMLInputElement;
64+
// console.log('e.target:', e.target)
65+
// console.log('event files:', eventFiles.files[0]);
66+
67+
if (eventFiles) {
68+
reader.readAsText(eventFiles.files[0]);
69+
}
70+
5971
reader.onload = () => {
6072
// once the local file has been loaded, result property on FileReader object returns the file's contents
6173
// then take contents and convert to a string
74+
console.log('on load triggered:')
6275
const test = reader.result.toString();
6376
// dispatch sends the result of calling importSnapshots on the json parsed data from the file contents from the new FileReader object
6477
// importSnapshots defined in actions/actions.ts/line 71, it returns an action object with a type and payload, payload is newSnaps parameter
6578
// dispatch function is being called with that action object which gets sent to the reducer in reducers/mainReducer.js/line 203
6679
// this updates the current tab
6780
return dispatch(importSnapshots(JSON.parse(test)));
6881
};
69-
const eventFiles = e.target as HTMLInputElement;
70-
if (eventFiles?.hasOwnProperty('files')) {
71-
// const eventFiles = target as HTMLInputElement;
72-
if (eventFiles) {
73-
reader.readAsText(eventFiles.files[0]);
74-
}
75-
}
82+
// const eventFiles = e.target as HTMLInputElement;
83+
// if (eventFiles?.hasOwnProperty('files')) {
84+
// // const eventFiles = target as HTMLInputElement;
85+
// if (eventFiles) {
86+
// reader.readAsText(eventFiles.files[0]);
87+
// }
88+
// }
7689
};
7790

7891
fileUpload.click();
92+
//console.log('dispatch importSnapshots successful')
7993
}
8094

8195
function ButtonsContainer(): JSX.Element {
@@ -85,13 +99,15 @@ function ButtonsContainer(): JSX.Element {
8599
mode: { paused },
86100
} = tabs[currentTab];
87101

102+
console.log('----state after any change----', tabs[currentTab])
103+
88104
return (
89105
<div className='buttons-container'>
90106
<button className='pause-button' type='button' onClick={() => dispatch(toggleMode('paused'))}>
91107
{paused ? <FontAwesomeIcon icon={faLock} /> : <FontAwesomeIcon icon={faUnlock} />}
92108
{paused ? 'Locked' : 'Unlocked'}
93109
</button>
94-
<button className='export-button' type='button' onClick={() => exportHandler(snapshots)}>
110+
<button className='export-button' type='button' onClick={() => exportHandler(tabs[currentTab])}>
95111
<FontAwesomeIcon icon={faDownload} />
96112
Download
97113
</button>

‎src/app/containers/MainContainer.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,13 @@ function MainContainer(): JSX.Element {
5454

5555
// listen for a message containing snapshots from the /extension/build/background.js service worker
5656
currentPort.onMessage.addListener(
57-
(message: { // parameter message is an object with following type script properties
57+
// parameter message is an object with following type script properties
58+
(message: {
5859
action: string;
5960
payload: Record<string, unknown>;
6061
sourceTab: number
6162
}) => {
62-
const { action, payload, sourceTab } = message; // we destructure message into action, payload, sourceTab
63+
const { action, payload, sourceTab } = message;
6364
let maxTab: number;
6465

6566
if (!sourceTab) { // if the sourceTab doesn't exist or is 0

‎src/app/reducers/mainReducer.js‎

Lines changed: 58 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
import { produce } from 'immer';
22
import _, { values } from 'lodash';
33
import * as types from '../constants/actionTypes.ts';
4+
// import { current } from 'immer';
45

56
export default (state, action) =>
67
produce(state, (draft) => {
78
const { port, currentTab, tabs } = draft;
89
const { hierarchy, snapshots, mode, intervalId, viewIndex, sliderIndex } =
910
tabs[currentTab] || {};
1011

12+
// console.log('----consoles before reducer funcs!-----')
13+
// console.log('state:', state)
14+
//console.log(tabs[currentTab]);
15+
//console.log('properties of tabs[currentTab]:', hierarchy, snapshots, mode, intervalId, viewIndex, sliderIndex)
16+
17+
//console.log('reducer file!', 'hierarchy:', hierarchy, 'tabs:', tabs)
18+
1119
// eslint-disable-next-line max-len
1220
// function that finds the index in the hierarchy and extracts the name of the equivalent index to add to the post message
1321
// eslint-disable-next-line consistent-return
@@ -36,6 +44,7 @@ export default (state, action) =>
3644
switch (action.type) {
3745
// This saves the series user wants to save to chrome local storage
3846
case types.SAVE: {
47+
console.log('save action reducer!', 'payload:', action.payload);
3948
const { newSeries, newSeriesName } = action.payload;
4049
if (!tabs[currentTab].seriesSavedStatus) {
4150
tabs[currentTab] = { ...tabs[currentTab], seriesSavedStatus: 'inputBoxOpen' };
@@ -176,18 +185,28 @@ export default (state, action) =>
176185
break;
177186
}
178187
case types.EMPTY: {
188+
console.log('-----clear snapshots reducer----');
189+
console.log('state before:', state.tabs[currentTab]);
190+
179191
// send msg to background script
180-
port.postMessage({ action: 'emptySnap', tabId: currentTab });
192+
port.postMessage({ action: 'emptySnap', tabId: currentTab }); //communicate with background.js
193+
194+
// properties associated with timetravel + seek bar
181195
tabs[currentTab].sliderIndex = 0;
182196
tabs[currentTab].viewIndex = 0;
183197
tabs[currentTab].playing = false;
184-
const lastSnapshot = tabs[currentTab].snapshots[tabs[currentTab].snapshots.length - 1];
198+
199+
const lastSnapshot = tabs[currentTab].snapshots[tabs[currentTab].snapshots.length - 1]; // first snapshot?
200+
185201
// resets hierarchy to page last state recorded
186202
tabs[currentTab].hierarchy.stateSnapshot = { ...lastSnapshot };
203+
187204
// resets hierarchy
188205
tabs[currentTab].hierarchy.children = [];
206+
189207
// resets snapshots to page last state recorded
190208
tabs[currentTab].snapshots = [lastSnapshot];
209+
191210
// resets currLocation to page last state recorded
192211
tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
193212
tabs[currentTab].index = 1;
@@ -201,12 +220,47 @@ export default (state, action) =>
201220
break;
202221
}
203222
case types.IMPORT: {
223+
// Log the value of tabs[currentTab].snapshots before the update
224+
console.log('-----import snapshots reducer----');
225+
console.log('state before:', state.tabs[currentTab]);
226+
console.log('action payload:', action.payload);
227+
204228
port.postMessage({
205229
action: 'import',
206-
payload: action.payload,
230+
payload: action.payload, //.snapshots,
207231
tabId: currentTab,
208232
});
209-
tabs[currentTab].snapshots = action.payload;
233+
234+
//============
235+
const savedSnapshot = action.payload;
236+
237+
tabs[currentTab].sliderIndex = savedSnapshot.sliderIndex;
238+
tabs[currentTab].viewIndex = savedSnapshot.viewIndex;
239+
tabs[currentTab].playing = false;
240+
241+
// resets hierarchy to page last state recorded
242+
tabs[currentTab].hierarchy.stateSnapshot = savedSnapshot.hierarchy.stateSnapshot;
243+
244+
// resets hierarchy
245+
tabs[currentTab].hierarchy.children = savedSnapshot.hierarchy.children;
246+
247+
// resets snapshots to page last state recorded
248+
tabs[currentTab].snapshots = savedSnapshot.snapshots;
249+
250+
// resets currLocation to page last state recorded
251+
tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
252+
tabs[currentTab].index = savedSnapshot.index;
253+
tabs[currentTab].currParent = savedSnapshot.currParent;
254+
tabs[currentTab].currBranch = savedSnapshot.Branch;
255+
tabs[currentTab].seriesSavedStatus = false;
256+
257+
//============
258+
//tabs[currentTab].snapshots = action.payload.snapshots;
259+
260+
// console.log('New snapshots:', action.payload);
261+
// console.log('updated tabs[CurrentTab].snapshots:', tabs[currentTab].snapshots)
262+
//console.log('state after:', state)
263+
210264
break;
211265
}
212266
case types.TOGGLE_MODE: {

‎src/extension/background.js‎

Lines changed: 60 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -132,15 +132,44 @@ function changeCurrLocation(tabObj, rootNode, index, name) {
132132
}
133133
}
134134

135+
/*
136+
The 'chrome.runtime' API allows a connection to the background service worker (background.js).
137+
This allows us to set up listener's for when we connect, message, and disconnect the script.
138+
*/
139+
135140
// Establishing incoming connection with Reactime.
136141
chrome.runtime.onConnect.addListener((port) => {
137-
// port is one end of the connection - an object
138-
// push every port connected to the ports array
139-
portsArr.push(port);
142+
/*
143+
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.
144+
145+
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.
146+
147+
The port object facilitates communication between the Reactime front-end and this 'background.js' script. This allows you to:
148+
1. send messages and data
149+
(look for 'onMessage'/'postMessage' methods within this page)
150+
2. receive messages and data
151+
(look for 'addListener' methods within this page)
152+
between the front-end and the background.
153+
154+
To establish communication between different parts of your extension:
155+
for the connecting end: use chrome.runtime.connect()
156+
for the listening end: use chrome.runtime.onConnect.
157+
Once the connection is established, a port object is passed to the addListener callback function, allowing you to start exchanging data.
158+
159+
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.
160+
*/
161+
162+
portsArr.push(port); // push each Reactime communication channel object to the portsArr
163+
164+
console.log('console logging port on initial connection')
165+
console.log(port)
166+
console.log('console logging portArray on initial connection')
167+
console.log(portsArr)
168+
140169
// On Reactime launch: make sure RT's active tab is correct
141170
if (portsArr.length > 0) {
142-
portsArr.forEach((bg) =>
143-
bg.postMessage({
171+
portsArr.forEach((bg) => // go through each port object (each Reactime instance)
172+
bg.postMessage({ // send passed in action object as a message to the current port
144173
action: 'changeTab',
145174
payload: { tabId: activeTab.id, title: activeTab.title },
146175
}),
@@ -182,39 +211,48 @@ chrome.runtime.onConnect.addListener((port) => {
182211
switch (action) {
183212
case 'import': // create a snapshot property on tabId and set equal to tabs object
184213
// may need do something like filter payload from stateless
185-
tabsObj[tabId].snapshots = payload;
186-
return true;
214+
tabsObj[tabId].snapshots = payload.snapshots; // reset snapshots to page last state recorded
215+
// tabsObj[tabId].hierarchy = savedSnapshot.hierarchy; // why don't we just use hierarchy? Because it breaks everything...
216+
tabsObj[tabId].hierarchy.children = payload.hierarchy.children; // resets hierarchy to last state recorded
217+
tabsObj[tabId].hierarchy.stateSnapshot = payload.hierarchy.stateSnapshot; // resets hierarchy to last state recorded
218+
tabsObj[tabId].currLocation = payload.currLocation; // resets currLocation to last state recorded
219+
tabsObj[tabId].index = payload.index; //reset index to last state recorded
220+
tabsObj[tabId].currParent = payload.currParent; // reset currParent to last state recorded
221+
tabsObj[tabId].currBranch = payload.currBranch; // reset currBranch to last state recorded
222+
223+
return true; // return true so that port remains open
224+
187225
case 'emptySnap':
188-
// reset snapshots to page last state recorded
189-
tabsObj[tabId].snapshots = [tabsObj[tabId].snapshots[tabsObj[tabId].snapshots.length - 1]];
190-
// resets hierarchy
191-
tabsObj[tabId].hierarchy.children = [];
192-
// resets hierarchy to page last state recorded
193-
tabsObj[tabId].hierarchy.stateSnapshot = {
226+
tabsObj[tabId].snapshots = [tabsObj[tabId].snapshots[tabsObj[tabId].snapshots.length - 1]]; // reset snapshots to page last state recorded
227+
tabsObj[tabId].hierarchy.children = []; // resets hierarchy
228+
tabsObj[tabId].hierarchy.stateSnapshot = { // resets hierarchy to page last state recorded
194229
...tabsObj[tabId].snapshots[0],
195230
};
196-
// resets currLocation to page last state recorded
197-
tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
198-
tabsObj[tabId].index = 1;
199-
tabsObj[tabId].currParent = 0;
200-
tabsObj[tabId].currBranch = 1;
201-
return true;
202-
// Pause = lock on tab
203-
case 'setPause':
231+
tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy; // resets currLocation to page last state recorded
232+
tabsObj[tabId].index = 1; //reset index
233+
tabsObj[tabId].currParent = 0; // reset currParent
234+
tabsObj[tabId].currBranch = 1; // reset currBranch
235+
return true; // return true so that port remains open
236+
237+
case 'setPause': // Pause = lock on tab
204238
tabsObj[tabId].mode.paused = payload;
205-
return true;
239+
return true; // return true so that port remains open
240+
206241
case 'launchContentScript':
207242
chrome.scripting.executeScript({
208243
target: { tabId },
209244
files: ['bundles/content.bundle.js'],
210245
});
211246
return true;
247+
212248
case 'jumpToSnap':
213249
chrome.tabs.sendMessage(tabId, msg);
214250
return true; // attempt to fix message port closing error, consider return Promise
251+
215252
case 'toggleRecord':
216253
chrome.tabs.sendMessage(tabId, msg);
217254
return true;
255+
218256
default:
219257
return true;
220258
}

0 commit comments

Comments
 (0)