Skip to content

Commit ecdb5c1

Browse files
jimmallyjimmally
authored
Merge pull request #4 from oslabs-beta/jimmyFeat
Jimmy feat
2 parents e9e207e + 2cbc888 commit ecdb5c1

File tree

2 files changed

+127
-9
lines changed

2 files changed

+127
-9
lines changed

‎src/app/RTKslices.tsx

Lines changed: 111 additions & 1 deletion
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
@@ -202,6 +202,110 @@ export const mainSlice = createSlice({
202202
tabs[currentTab].playing = false;
203203
tabs[currentTab].intervalId = null;
204204
},
205+
206+
playForward: (state, action) => {
207+
const {port, tabs, currentTab} = state
208+
const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
209+
210+
if (sliderIndex < snapshots.length - 1) {
211+
const newIndex = sliderIndex + 1;
212+
// eslint-disable-next-line max-len
213+
// finds the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
214+
const nameFromIndex = findName(newIndex, hierarchy);
215+
216+
port.postMessage({
217+
action: 'jumpToSnap',
218+
payload: snapshots[newIndex],
219+
index: newIndex,
220+
name: nameFromIndex,
221+
tabId: currentTab,
222+
});
223+
224+
tabs[currentTab].sliderIndex = newIndex;
225+
226+
// message is coming from the user
227+
if (!action.payload) {
228+
clearInterval(intervalId);
229+
tabs[currentTab].playing = false;
230+
}
231+
}
232+
},
233+
startPlaying : (state, action) => {
234+
const {tabs, currentTab} = state
235+
236+
tabs[currentTab].playing = true;
237+
tabs[currentTab].intervalId = action.payload;
238+
},
239+
moveForward: (state, action) => {
240+
const {port, tabs, currentTab} = state
241+
const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
242+
243+
if (sliderIndex < snapshots.length - 1) {
244+
const newIndex = sliderIndex + 1;
245+
// eslint-disable-next-line max-len
246+
// finds the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
247+
const nameFromIndex = findName(newIndex, hierarchy);
248+
249+
port.postMessage({
250+
action: 'jumpToSnap',
251+
payload: snapshots[newIndex],
252+
index: newIndex,
253+
name: nameFromIndex,
254+
tabId: currentTab,
255+
});
256+
257+
tabs[currentTab].sliderIndex = newIndex;
258+
259+
// message is coming from the user
260+
if (!action.payload) {
261+
clearInterval(intervalId);
262+
tabs[currentTab].playing = false;
263+
}
264+
}
265+
},
266+
moveBackward : (state, action) => {
267+
const {port, tabs, currentTab} = state
268+
const { hierarchy, snapshots, sliderIndex, intervalId } = tabs[currentTab] || {};
269+
270+
if (sliderIndex > 0) {
271+
const newIndex = sliderIndex - 1;
272+
// eslint-disable-next-line max-len
273+
// finds the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
274+
const nameFromIndex = findName(newIndex, hierarchy);
275+
276+
port.postMessage({
277+
action: 'jumpToSnap',
278+
payload: snapshots[newIndex],
279+
index: newIndex,
280+
name: nameFromIndex,
281+
tabId: currentTab,
282+
newProp: 'newPropFromReducer',
283+
});
284+
clearInterval(intervalId);
285+
286+
tabs[currentTab].sliderIndex = newIndex;
287+
tabs[currentTab].playing = false;
288+
}
289+
},
290+
291+
resetSlider: (state) => {
292+
const {port, tabs, currentTab} = state
293+
const { snapshots, sliderIndex} = tabs[currentTab] || {};
294+
295+
// eslint-disable-next-line max-len
296+
// resets name to 0 to send to background.js the current name in the jump action
297+
port.postMessage({
298+
action: 'jumpToSnap',
299+
index: 0,
300+
name: 0,
301+
payload: snapshots[0],
302+
tabId: currentTab,
303+
});
304+
tabs[currentTab].sliderIndex = 0;
305+
},
306+
307+
308+
205309
toggleMode: (state, action)=>{
206310
console.log('Toggle Mode')
207311
const { port, tabs, currentTab } = state;
@@ -252,6 +356,7 @@ export const mainSlice = createSlice({
252356
tabs[currentTab].currBranch = savedSnapshot.Branch;
253357
tabs[currentTab].seriesSavedStatus = false;
254358
}
359+
255360
},
256361
})
257362

@@ -268,6 +373,11 @@ export const {
268373
changeSlider,
269374
setCurrentTabInApp,
270375
pause,
376+
playForward,
377+
startPlaying,
378+
moveForward,
379+
moveBackward,
380+
resetSlider,
271381
toggleMode,
272382
importSnapshots
273383
} = mainSlice.actions

‎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)