Skip to content

Commit fca1797

Browse files
Christopher StamperChristopher Stamper
Christopher Stamper
authored and
Christopher Stamper
committed
Finished ErrorContainer conversion to RTK
2 parents 8b46626 + ecdb5c1 commit fca1797

File tree

4 files changed

+200
-18
lines changed

4 files changed

+200
-18
lines changed

‎src/app/RTKslices.tsx

Lines changed: 161 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ export const mainSlice = createSlice({
192192
console.log('SET CURRENT TAB IN APP');
193193
state.currentTabInApp = action.payload;
194194
},
195-
pause: (state, action) => {
195+
pause: (state) => {
196196
console.log('pause: ', current(state));
197197

198198
const {tabs, currentTab} = state
@@ -215,7 +215,159 @@ export const mainSlice = createSlice({
215215
tabId: currentTab,
216216
});
217217
},
218-
218+
playForward: (state, action) => {
219+
const {port, tabs, currentTab} = state
220+
const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
221+
222+
if (sliderIndex < snapshots.length - 1) {
223+
const newIndex = sliderIndex + 1;
224+
// eslint-disable-next-line max-len
225+
// finds the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
226+
const nameFromIndex = findName(newIndex, hierarchy);
227+
228+
port.postMessage({
229+
action: 'jumpToSnap',
230+
payload: snapshots[newIndex],
231+
index: newIndex,
232+
name: nameFromIndex,
233+
tabId: currentTab,
234+
});
235+
236+
tabs[currentTab].sliderIndex = newIndex;
237+
238+
// message is coming from the user
239+
if (!action.payload) {
240+
clearInterval(intervalId);
241+
tabs[currentTab].playing = false;
242+
}
243+
}
244+
},
245+
startPlaying : (state, action) => {
246+
const {tabs, currentTab} = state
247+
248+
tabs[currentTab].playing = true;
249+
tabs[currentTab].intervalId = action.payload;
250+
},
251+
moveForward: (state, action) => {
252+
const {port, tabs, currentTab} = state
253+
const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
254+
255+
if (sliderIndex < snapshots.length - 1) {
256+
const newIndex = sliderIndex + 1;
257+
// eslint-disable-next-line max-len
258+
// finds the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
259+
const nameFromIndex = findName(newIndex, hierarchy);
260+
261+
port.postMessage({
262+
action: 'jumpToSnap',
263+
payload: snapshots[newIndex],
264+
index: newIndex,
265+
name: nameFromIndex,
266+
tabId: currentTab,
267+
});
268+
269+
tabs[currentTab].sliderIndex = newIndex;
270+
271+
// message is coming from the user
272+
if (!action.payload) {
273+
clearInterval(intervalId);
274+
tabs[currentTab].playing = false;
275+
}
276+
}
277+
},
278+
moveBackward : (state, action) => {
279+
const {port, tabs, currentTab} = state
280+
const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
281+
282+
if (sliderIndex > 0) {
283+
const newIndex = sliderIndex - 1;
284+
// eslint-disable-next-line max-len
285+
// finds the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
286+
const nameFromIndex = findName(newIndex, hierarchy);
287+
288+
port.postMessage({
289+
action: 'jumpToSnap',
290+
payload: snapshots[newIndex],
291+
index: newIndex,
292+
name: nameFromIndex,
293+
tabId: currentTab,
294+
newProp: 'newPropFromReducer',
295+
});
296+
clearInterval(intervalId);
297+
298+
tabs[currentTab].sliderIndex = newIndex;
299+
tabs[currentTab].playing = false;
300+
}
301+
},
302+
303+
resetSlider: (state) => {
304+
const {port, tabs, currentTab} = state
305+
const { snapshots, sliderIndex} = tabs[currentTab] || {};
306+
307+
// 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;
317+
},
318+
319+
320+
321+
toggleMode: (state, action)=>{
322+
console.log('Toggle Mode')
323+
const { port, tabs, currentTab } = state;
324+
const {mode} = tabs[currentTab] || {};
325+
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+
});
338+
},
339+
importSnapshots: (state, action) => {
340+
console.log('importSnapshots')
341+
const { port, tabs, currentTab } = state;
342+
// Log the value of tabs[currentTab].snapshots before the update
343+
port.postMessage({
344+
action: 'import',
345+
payload: action.payload,
346+
tabId: currentTab,
347+
});
348+
349+
const savedSnapshot = action.payload;
350+
351+
tabs[currentTab].sliderIndex = savedSnapshot.sliderIndex;
352+
tabs[currentTab].viewIndex = savedSnapshot.viewIndex;
353+
tabs[currentTab].playing = false;
354+
355+
// resets hierarchy to page last state recorded
356+
tabs[currentTab].hierarchy.stateSnapshot = savedSnapshot.hierarchy.stateSnapshot;
357+
358+
// resets hierarchy
359+
tabs[currentTab].hierarchy.children = savedSnapshot.hierarchy.children;
360+
361+
// resets snapshots to page last state recorded
362+
tabs[currentTab].snapshots = savedSnapshot.snapshots;
363+
364+
// resets currLocation to page last state recorded
365+
tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
366+
tabs[currentTab].index = savedSnapshot.index;
367+
tabs[currentTab].currParent = savedSnapshot.currParent;
368+
tabs[currentTab].currBranch = savedSnapshot.Branch;
369+
tabs[currentTab].seriesSavedStatus = false;
370+
}
219371
},
220372
})
221373

@@ -233,6 +385,13 @@ export const {
233385
setCurrentTabInApp,
234386
pause,
235387
launchContentScript,
388+
playForward,
389+
startPlaying,
390+
moveForward,
391+
moveBackward,
392+
resetSlider,
393+
toggleMode,
394+
importSnapshots
236395
} = mainSlice.actions
237396

238397

‎src/app/components/SwitchApp.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import React from 'react';
22
import Select from 'react-select';
3-
import { useStoreContext } from '../store';
4-
import { setTab } from '../actions/actions';
3+
//commented out for RTK
4+
// import { useStoreContext } from '../store';
5+
import { setTab } from '../RTKslices';
6+
//importing these methods for RTK
7+
import { useSelector, useDispatch } from 'react-redux';
58

69
/*
710
This is the dropdown menu on the left column above the 'clear' button and the state snapshots list. It allows us to switch between which website/application we are currently working on.
@@ -10,8 +13,13 @@ import { setTab } from '../actions/actions';
1013
*/
1114

1215
const SwitchAppDropdown = (): JSX.Element => {
13-
const [{ currentTab, tabs }, 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
14-
16+
//commented out to implement RTK
17+
// const [{ currentTab, tabs }, 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
18+
//here we are adding useSelector and useDispatch for RTK state conversion
19+
const dispatch = useDispatch();
20+
const currentTab = useSelector((state: any) => state.main.currentTab)
21+
const tabs = useSelector((state: any) => state.main.tabs)
22+
1523
const tabsArray: {}[] = []; // tabsArray is an empty array that will take objects as it's elements
1624

1725
Object.keys(tabs).forEach((tab) => { // We populate our 'tabsArray' with objects derived from the 'tab' that is currently being iterated on.

‎src/app/containers/ButtonsContainer.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import * as React from 'react';
2-
import { importSnapshots, toggleMode } from '../actions/actions';
3-
import { useStoreContext } from '../store';
2+
// import { importSnapshots, toggleMode } from '../actions/actions';
3+
// import { useStoreContext } from '../store';
44
import { Button } from '@mui/material';
55
import Tutorial from '../components/Tutorial';
66
import LockIcon from '@mui/icons-material/Lock';
77
import LockOpenIcon from '@mui/icons-material/LockOpen';
88
import FileDownloadIcon from '@mui/icons-material/FileDownload';
99
import FileUploadIcon from '@mui/icons-material/FileUpload';
10+
import { toggleMode, importSnapshots } from '../RTKslices';
11+
import { useDispatch, useSelector } from 'react-redux';
1012

1113
function exportHandler(snapshots: []): void { // function that takes in our tabs[currentTab] object to be exported as a JSON file. NOTE: TypeScript needs to be updated
1214
const fileDownload: HTMLAnchorElement = document.createElement('a'); // invisible HTML element that will hold our tabs[currentTab] object
@@ -43,8 +45,13 @@ function importHandler(dispatch: (a: unknown) => void): void { // function handl
4345
}
4446

4547
function ButtonsContainer(): JSX.Element {
46-
const [{ tabs, currentTab, currentTabInApp }, dispatch] = useStoreContext();
47-
const { snapshots, mode: { paused }} = tabs[currentTab];
48+
// const [{ tabs, currentTab, currentTabInApp }, dispatch] = useStoreContext();
49+
// const [state, dispatch] = useStoreContext();
50+
const dispatch = useDispatch();
51+
const currentTab = useSelector((state: any) => state.main.currentTab);
52+
const tabs = useSelector((state: any)=>state.main.tabs);
53+
const currentTabInApp = useSelector((state: any)=> state.main.currentTabInApp);
54+
const { mode: { paused }} = tabs[currentTab];
4855

4956
return (
5057
<div className='buttons-container'>

‎src/app/containers/TravelContainer.tsx

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ import {
99
moveForward,
1010
moveBackward,
1111
resetSlider,
12-
} from '../actions/actions';
13-
import { useStoreContext } from '../store';
12+
} from '../RTKslices';
13+
import { useDispatch, useSelector } from 'react-redux';
14+
//Commented out useStoreContext
15+
// import { useStoreContext } from '../store';
1416
import { TravelContainerProps } from '../FrontendTypes';
1517
import { Button } from '@mui/material';
1618
import FastRewindIcon from '@mui/icons-material/FastRewind';
@@ -29,7 +31,8 @@ const speeds: {
2931
{ value: 1000, label: '1.0x' },
3032
{ value: 500, label: '2.0x' },
3133
];
32-
34+
//NOTE HERE REMOVED THE DISPATCH FUNCTION IN THE TYPE SCRIPT:
35+
//USING THE BUILT IN DISPATCH
3336
function play( // function that will start/pause slider movement
3437
speed: number,
3538
playing: boolean,
@@ -47,7 +50,7 @@ function play( // function that will start/pause slider movement
4750
}
4851
const intervalId: NodeJS.Timeout = setInterval(() => { // sets interval period to wait before advancing 'currentIndex'/slider
4952
if (currentIndex < snapshotsLength - 1) { // as long as we're not the last snapshot, increment slider up through our dispatch and increment index
50-
dispatch(playForward());
53+
dispatch(playForward(true));
5154
currentIndex += 1;
5255
} else {
5356
dispatch(pause()); // pause the slider when we reach the end
@@ -60,8 +63,12 @@ function play( // function that will start/pause slider movement
6063
function TravelContainer(props: TravelContainerProps): JSX.Element {
6164
const { snapshotsLength } = props;
6265
const [selectedSpeed, setSpeed] = useState(speeds[1]); // create a new local state selectedSpeed and set it to the second element of the 'speeds' array (1.0x speed)
63-
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
64-
const { sliderIndex, playing } = tabs[currentTab]; // we destructure the currentTab object
66+
67+
// 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
68+
// const { sliderIndex, playing } = tabs[currentTab]; // we destructure the currentTab object
69+
const dispatch = useDispatch();
70+
const { tabs, currentTab } = useSelector((state: any) => state.main);
71+
const { sliderIndex, playing } = tabs[currentTab];
6572

6673
return (
6774
<div className='travel-container'>
@@ -72,15 +79,16 @@ function TravelContainer(props: TravelContainerProps): JSX.Element {
7279
type='button'
7380
// data-testid, prop for testing in RTL
7481
data-testid='play-button-test'
82+
//REMOVED DISPATCH FROM PLAY
7583
onClick={() => play(selectedSpeed.value, playing, dispatch, snapshotsLength, sliderIndex)}
7684
>
7785
{playing ? 'Pause' : 'Play'}
7886
</Button>
7987
<MainSlider snapshotsLength={snapshotsLength} />
80-
<Button variant="contained" className='backward-button' onClick={() => dispatch(moveBackward())} type='button' sx={{height: 25, minWidth: 30, p: 0, mr: 1}}>
88+
<Button variant="contained" className='backward-button' onClick={() => dispatch(moveBackward(false))} type='button' sx={{height: 25, minWidth: 30, p: 0, mr: 1}}>
8189
<FastRewindIcon sx={{color: '#000'}}/>
8290
</Button>
83-
<Button variant="contained" className='forward-button' onClick={() => dispatch(moveForward())} type='button' sx={{height: 25, minWidth: 30, p: 0}}>
91+
<Button variant="contained" className='forward-button' onClick={() => dispatch(moveForward(false))} type='button' sx={{height: 25, minWidth: 30, p: 0}}>
8492
<FastForwardIcon sx={{color: '#000'}}/>
8593
</Button>
8694
<Dropdown speeds={speeds} selectedSpeed={selectedSpeed} setSpeed={setSpeed} />

0 commit comments

Comments
 (0)