@@ -9,6 +9,7 @@ class MainContainer extends Component {
9
9
super ( ) ;
10
10
this . state = {
11
11
snapshots : [ ] ,
12
+ snapshotsTree : null ,
12
13
snapshotIndex : 0 ,
13
14
currentIndex : null ,
14
15
port : null ,
@@ -20,13 +21,12 @@ class MainContainer extends Component {
20
21
}
21
22
22
23
componentDidMount ( ) {
24
+ console . log ( 'componentDidMount' ) ;
23
25
// open connection with background script
24
26
const port = chrome . runtime . connect ( ) ;
25
27
26
28
// listen for a message containing snapshots from the background script
27
29
port . onMessage . addListener ( ( snapshots ) => {
28
- console . log ( 'message from background script' , snapshots ) ;
29
- console . log ( 'snapshots' , this . state . snapshots ) ;
30
30
const snapshotIndex = snapshots . length - 1 ;
31
31
32
32
// set state with the information received from the background script
@@ -49,9 +49,11 @@ class MainContainer extends Component {
49
49
}
50
50
51
51
// change the snapshot index
52
- // --> 1. affects the action that is highlighted
53
- // --> 2. moves the slider
52
+ // this will change the state shown in the state container but won't change the DOM
54
53
handleChangeSnapshot ( snapshotIndex ) {
54
+ // snapshotIndex
55
+ // --> 1. affects the action that is highlighted
56
+ // --> 2. moves the slider
55
57
this . setState ( { snapshotIndex } ) ;
56
58
}
57
59
@@ -61,23 +63,27 @@ class MainContainer extends Component {
61
63
let { currentIndex } = this . state ;
62
64
const payload = [ ] ;
63
65
66
+ // currentIndex is initialized to null
67
+ // currentIndex = null means that the user hasn't jumped yet
64
68
currentIndex = currentIndex === null ? snapshots . length - 1 : currentIndex ;
65
69
70
+ // if the user wants to jump backward
66
71
if ( currentIndex > snapshotIndex ) {
67
72
for ( let i = currentIndex - 1 ; i >= snapshotIndex ; i -= 1 ) {
68
73
payload . push ( snapshots [ i ] ) ;
69
74
}
70
75
} else {
76
+ // if the user wants to jump forward
71
77
for ( let i = currentIndex + 1 ; i <= snapshotIndex ; i += 1 ) {
72
78
payload . push ( snapshots [ i ] ) ;
73
79
}
74
80
}
75
81
82
+ // currentIndex should be changed to index the user jumped to
76
83
this . setState ( { currentIndex : snapshotIndex } ) ;
77
84
78
- console . log ( 'payload' , payload ) ;
85
+ // send the arrays of snapshots to background script
79
86
port . postMessage ( { action : 'stepToSnap' , payload } ) ;
80
- // port.postMessage({ action: 'jumpToSnap', payload: snapshots[snapshotIndex] });
81
87
}
82
88
83
89
render ( ) {
0 commit comments