Skip to content

Commit f34552e

Browse files
jimmallyjimmally
authored
Merge pull request #9 from oslabs-beta/TravelContainerComponents
Travel container components
2 parents e76fcd6 + 649896c commit f34552e

File tree

2 files changed

+94
-31
lines changed

2 files changed

+94
-31
lines changed

‎src/app/RTKslices.tsx

Lines changed: 85 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ export const mainSlice = createSlice({
3838
//we removed the action parameter because we kept getting an error within actionContainer file on line 204
3939
//as it expected an argument or payload to be passed in
4040
emptySnapshots: (state) => {
41+
console.log('emptySnapshots: ', current(state));
42+
4143
const { tabs, currentTab } = state;
4244
const { port } = tabs[currentTab] || {};
4345

@@ -58,6 +60,9 @@ export const mainSlice = createSlice({
5860
tabs[currentTab].currParent = 0;
5961
tabs[currentTab].currBranch = 1;
6062
tabs[currentTab].seriesSavedStatus = false;
63+
64+
console.log('emptySnapshots state end: ', current(state));
65+
6166
},
6267
addNewSnapshots: (state, action) => {
6368
console.log('addNewSnapshots: ', state);
@@ -89,6 +94,8 @@ export const mainSlice = createSlice({
8994
};
9095
}
9196
});
97+
console.log('addNewSnapshots: state end ', state);
98+
9299
},
93100
initialConnect: (state, action) => {
94101
console.log('initialConnect: ', current(state));
@@ -111,13 +118,17 @@ export const mainSlice = createSlice({
111118
// only set first tab if current tab is non existent
112119
const firstTab = parseInt(Object.keys(payload)[0], 10);
113120
if (currentTab === undefined || currentTab === null) state.currentTab = firstTab;
114-
121+
console.log('initialConnect: state end', current(state));
122+
115123
},
116124
setPort: (state, action) => {
117125
console.log('setPort: ', current(state));
118126
console.log('ACTION', action);
119127

120128
state.port = action.payload;
129+
130+
console.log('setPort: state end', current(state));
131+
121132
},
122133
setTab: (state, action) => {
123134
console.log('setTab: ', current(state));
@@ -133,10 +144,14 @@ export const mainSlice = createSlice({
133144
state.currentTitle = action.payload.title;
134145
};
135146
}
147+
console.log('setTab: state end', current(state));
148+
136149
},
137150
deleteTab : (state, action) => {
138151
console.log('deleteTab: ', current(state));
139152
delete state.tabs[action.payload];
153+
console.log('deleteTab: state end', current(state));
154+
140155
},
141156
noDev: (state, action) => {
142157
console.log('noDev: ', current(state));
@@ -146,6 +161,8 @@ export const mainSlice = createSlice({
146161
const { reactDevToolsInstalled } = payload[currentTab].status;
147162
tabs[currentTab].status.reactDevToolsInstalled = reactDevToolsInstalled
148163
}
164+
console.log('noDev: state end', current(state));
165+
149166
},
150167
setCurrentLocation: (state, action) => {
151168
console.log('setCurrentLocation: ', current(state));
@@ -164,15 +181,21 @@ export const mainSlice = createSlice({
164181
tabs[currentTab].currLocation.stateSnapshot,
165182
);
166183
tabs[currentTab].currLocation = payload[currentTab].currLocation;
184+
console.log('setCurrentLocation: state end', current(state));
185+
167186
},
168187
changeView: (state, action) => {
188+
console.log('changeView: ', current(state));
189+
169190
const {tabs, currentTab} = state;
170191
const {viewIndex} = tabs[currentTab] || {};
171192

172193
tabs[currentTab].viewIndex = viewIndex === action.payload ? -1 : action.payload;
194+
console.log('changeView: state end', current(state));
195+
173196
},
174197
changeSlider: (state, action) => {
175-
console.log('CHANGE SLIDER');
198+
console.log('changeSlider: ', current(state));
176199
const { port, currentTab, tabs } = state;
177200
const { hierarchy, snapshots } = tabs[currentTab] || {};
178201

@@ -187,10 +210,14 @@ export const mainSlice = createSlice({
187210
});
188211

189212
tabs[currentTab].sliderIndex = action.payload;
213+
console.log('changeSlider: state end', current(state));
214+
190215
},
191216
setCurrentTabInApp: (state, action) => {
192-
console.log('SET CURRENT TAB IN APP');
217+
console.log('setCurrentTabInApp: ', current(state));
193218
state.currentTabInApp = action.payload;
219+
console.log('setCurrentTabInApp: state end', current(state));
220+
194221
},
195222
pause: (state) => {
196223
console.log('pause: ', current(state));
@@ -201,6 +228,8 @@ export const mainSlice = createSlice({
201228
clearInterval(intervalId);
202229
tabs[currentTab].playing = false;
203230
tabs[currentTab].intervalId = null;
231+
console.log('pause: state end', current(state));
232+
204233
},
205234
launchContentScript: (state, action) => {
206235
console.log('launchContentScript: ', current(state));
@@ -214,8 +243,12 @@ export const mainSlice = createSlice({
214243
payload: action.payload,
215244
tabId: currentTab,
216245
});
246+
console.log('launchContentScript: state end', current(state));
247+
217248
},
218249
playForward: (state, action) => {
250+
console.log('playForward: ', current(state));
251+
219252
const {port, tabs, currentTab} = state
220253
const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
221254

@@ -241,14 +274,21 @@ export const mainSlice = createSlice({
241274
tabs[currentTab].playing = false;
242275
}
243276
}
277+
console.log('playForward: state end', current(state));
278+
244279
},
245280
startPlaying : (state, action) => {
246-
const {tabs, currentTab} = state
281+
console.log('startPlaying: ', current(state));
247282

283+
const {tabs, currentTab} = state
248284
tabs[currentTab].playing = true;
249285
tabs[currentTab].intervalId = action.payload;
286+
console.log('startPlaying: state end', current(state));
287+
250288
},
251289
moveForward: (state, action) => {
290+
console.log('moveForward: ', current(state));
291+
252292
const {port, tabs, currentTab} = state
253293
const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
254294

@@ -274,8 +314,12 @@ export const mainSlice = createSlice({
274314
tabs[currentTab].playing = false;
275315
}
276316
}
317+
console.log('moveForward: state end', current(state));
318+
277319
},
278320
moveBackward : (state, action) => {
321+
console.log('moveBackward: ', current(state));
322+
279323
const {port, tabs, currentTab} = state
280324
const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
281325

@@ -298,46 +342,58 @@ export const mainSlice = createSlice({
298342
tabs[currentTab].sliderIndex = newIndex;
299343
tabs[currentTab].playing = false;
300344
}
345+
console.log('moveBackward: state end', current(state));
346+
301347
},
302348

303349
resetSlider: (state) => {
350+
console.log('resetSlider: ', current(state));
351+
304352
const {port, tabs, currentTab} = state
305353
const { snapshots, sliderIndex} = tabs[currentTab] || {};
306354

307355
// eslint-disable-next-line max-len
308-
// resets name to 0 to send to background.js the current name in the jump action
309-
port.postMessage({
310-
action: 'jumpToSnap',
311-
index: 0,
312-
name: 0,
313-
payload: snapshots[0],
314-
tabId: currentTab,
315-
});
316-
tabs[currentTab].sliderIndex = 0;
356+
// resets name to 0 to send to background.js the current name in the jump action
357+
port.postMessage({
358+
action: 'jumpToSnap',
359+
index: 0,
360+
name: 0,
361+
payload: snapshots[0],
362+
tabId: currentTab,
363+
});
364+
tabs[currentTab].sliderIndex = 0;
365+
console.log('resetSlider: state end', current(state));
366+
367+
317368
},
318369

319370

320371

321372
toggleMode: (state, action)=>{
322-
console.log('Toggle Mode')
373+
console.log('Toggle Mode: ', current(state));
374+
323375
const { port, tabs, currentTab } = state;
324376
const {mode} = tabs[currentTab] || {};
325377
mode[action.payload] = !mode[action.payload];
326-
const newMode = mode[action.payload];
327-
let actionText;
328-
switch (action.payload) {
329-
case 'paused':
330-
actionText = 'setPause';
331-
default:
332-
}
333-
port.postMessage({
334-
action: actionText,
335-
payload: newMode,
336-
tabId: currentTab,
337-
});
378+
const newMode = mode[action.payload];
379+
let actionText;
380+
switch (action.payload) {
381+
case 'paused':
382+
actionText = 'setPause';
383+
default:
384+
}
385+
port.postMessage({
386+
action: actionText,
387+
payload: newMode,
388+
tabId: currentTab,
389+
});
390+
console.log('Toggle Mode: state end', current(state));
391+
392+
338393
},
339394
importSnapshots: (state, action) => {
340-
console.log('importSnapshots')
395+
console.log('importSnapshots: ', current(state));
396+
341397
const { port, tabs, currentTab } = state;
342398

343399
// Log the value of tabs[currentTab].snapshots before the update
@@ -368,6 +424,8 @@ export const mainSlice = createSlice({
368424
tabs[currentTab].currParent = savedSnapshot.currParent;
369425
tabs[currentTab].currBranch = savedSnapshot.Branch;
370426
tabs[currentTab].seriesSavedStatus = false;
427+
console.log('importSnapshots: state end', current(state));
428+
371429
},
372430
tutorialSaveSeriesToggle: (state, action) => {
373431
const { tabs, currentTab } = state;

‎src/app/components/MainSlider.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { useState, useEffect } from 'react';
22
import Slider from 'rc-slider';
33
import Tooltip from 'rc-tooltip';
4-
import { changeSlider, pause } from '../actions/actions';
5-
import { useStoreContext } from '../store';
4+
import { changeSlider, pause } from '../RTKslices';
5+
// import { useStoreContext } from '../store';
6+
import { useDispatch, useSelector } from 'react-redux';
67
import { HandleProps, MainSliderProps } from '../FrontendTypes';
78

89
const { Handle } = Slider; // component constructor of Slider that allows customization of the handle
@@ -28,11 +29,15 @@ const handle = (props: HandleProps): JSX.Element => {
2829

2930

3031
function MainSlider(props: MainSliderProps): JSX.Element {
32+
const dispatch = useDispatch();
3133
const { snapshotsLength } = props; // destructure props to get our total number of snapshots
32-
const [{ tabs, currentTab }, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function. Properties not found on the initialState object (dispatch) are from the useReducer function invocation in the App component
33-
const { currLocation } = tabs[currentTab]; // we destructure the currentTab object
34+
// const [{ tabs, currentTab }, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function. Properties not found on the initialState object (dispatch) are from the useReducer function invocation in the App component
3435
const [sliderIndex, setSliderIndex] = useState(0); // create a local state 'sliderIndex' and set it to 0.
36+
const { tabs, currentTab } = useSelector((state: any) => state.main);
37+
const { currLocation } = tabs[currentTab]; // we destructure the currentTab object
3538

39+
//10/04/2023 -> line 35 useState is local, should we change this to handle our global state.
40+
3641
useEffect(() => {
3742
if (currLocation) { // if we have a 'currLocation'
3843
setSliderIndex(currLocation.index); // set our slider thumb position to the 'currLocation.index'

0 commit comments

Comments
 (0)