Skip to content

Commit 961177a

Browse files
AndrewByunAndrewByun
authored
Merge pull request #19 from oslabs-beta/featurekelvin
Finalized RTK
2 parents 6602039 + 4c257fd commit 961177a

20 files changed

+168
-231
lines changed

‎src/app/RTKslices.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -412,10 +412,9 @@ export const mainSlice = createSlice({
412412
// Runs if series name input box is active.
413413
// Updates chrome local storage with the newly saved series. Console logging the seriesArray grabbed from local storage may be helpful.
414414
if (tabs[currentTab].seriesSavedStatus === 'inputBoxOpen') {
415-
//Set a type for seriesArray 10/04/2023
415+
416416
let seriesArray: any = localStorage.getItem('project');
417417
seriesArray = seriesArray === null ? [] : JSON.parse(seriesArray);
418-
// seriesArray = seriesArray ? JSON.parse(seriesArray) : [];
419418
newSeries.name = newSeriesName;
420419
seriesArray.push(newSeries);
421420
localStorage.setItem('project', JSON.stringify(seriesArray));

‎src/app/actions/actions.ts

Lines changed: 129 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,129 @@
1-
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
2-
import * as types from '../constants/actionTypes';
3-
4-
export const save = (newSeries, newSeriesName) => ({
5-
type: types.SAVE,
6-
payload: { newSeries, newSeriesName },
7-
});
8-
9-
export const deleteSeries = () => ({
10-
type: types.DELETE_SERIES,
11-
});
12-
13-
export const toggleMode = (mode) => ({
14-
type: types.TOGGLE_MODE,
15-
payload: mode,
16-
});
17-
18-
export const addNewSnapshots = (tabsObj) => ({
19-
type: types.NEW_SNAPSHOTS,
20-
payload: tabsObj,
21-
});
22-
23-
export const initialConnect = (tabsObj) => ({
24-
type: types.INITIAL_CONNECT,
25-
payload: tabsObj,
26-
});
27-
28-
export const setPort = (port) => ({
29-
type: types.SET_PORT,
30-
payload: port,
31-
});
32-
33-
export const emptySnapshots = () => ({
34-
type: types.EMPTY,
35-
});
36-
37-
export const changeView = (index) => ({
38-
type: types.CHANGE_VIEW,
39-
payload: index,
40-
});
41-
42-
export const changeSlider = (index) => ({
43-
type: types.CHANGE_SLIDER,
44-
payload: index,
45-
});
46-
47-
export const moveBackward = () => ({
48-
type: types.MOVE_BACKWARD,
49-
payload: false,
50-
});
51-
52-
export const moveForward = () => ({
53-
type: types.MOVE_FORWARD,
54-
payload: false,
55-
});
56-
57-
export const playForward = () => ({
58-
type: types.MOVE_FORWARD,
59-
payload: true,
60-
});
61-
62-
export const pause = () => ({
63-
type: types.PAUSE,
64-
});
65-
66-
export const startPlaying = (intervalId) => ({
67-
type: types.PLAY,
68-
payload: intervalId,
69-
});
70-
71-
export const importSnapshots = (newSnaps) => ({
72-
type: types.IMPORT,
73-
payload: newSnaps,
74-
});
75-
76-
export const setTab = (tab) => ({
77-
type: types.SET_TAB,
78-
payload: tab,
79-
});
80-
81-
export const deleteTab = (tab) => ({
82-
type: types.DELETE_TAB,
83-
payload: tab,
84-
});
85-
86-
export const noDev = (tab) => ({
87-
type: types.NO_DEV,
88-
payload: tab,
89-
});
90-
91-
export const toggleExpanded = (node) => ({
92-
type: types.TOGGLE_EXPANDED,
93-
payload: node,
94-
});
95-
96-
export const launchContentScript = (tab) => ({
97-
type: types.LAUNCH_CONTENT,
98-
payload: tab,
99-
});
100-
101-
export const resetSlider = () => ({
102-
type: types.SLIDER_ZERO,
103-
});
104-
105-
export const onHover = (rtid) => ({
106-
type: types.ON_HOVER,
107-
//the payload should be something to relate the component we're hovering and highlight that component on the DOM
108-
payload: rtid,
109-
});
110-
111-
export const onHoverExit = (rtid) => ({
112-
type: types.ON_HOVER_EXIT,
113-
payload: rtid,
114-
});
115-
116-
export const setCurrentLocation = (tabsObj) => ({
117-
type: types.SET_CURRENT_LOCATION,
118-
payload: tabsObj,
119-
});
120-
121-
export const setCurrentTabInApp = (currentTabInApp) => ({
122-
type: types.SET_CURRENT_TAB_IN_APP,
123-
payload: currentTabInApp,
124-
});
125-
126-
export const tutorialSaveSeriesToggle = (toggleVal) => ({
127-
type: types.TUTORIAL_SAVE_SERIES_TOGGLE,
128-
payload: toggleVal,
129-
});
1+
// /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
2+
// import * as types from '../constants/actionTypes';
3+
4+
// export const save = (newSeries, newSeriesName) => ({
5+
// type: types.SAVE,
6+
// payload: { newSeries, newSeriesName },
7+
// });
8+
9+
// export const deleteSeries = () => ({
10+
// type: types.DELETE_SERIES,
11+
// });
12+
13+
// export const toggleMode = (mode) => ({
14+
// type: types.TOGGLE_MODE,
15+
// payload: mode,
16+
// });
17+
18+
// export const addNewSnapshots = (tabsObj) => ({
19+
// type: types.NEW_SNAPSHOTS,
20+
// payload: tabsObj,
21+
// });
22+
23+
// export const initialConnect = (tabsObj) => ({
24+
// type: types.INITIAL_CONNECT,
25+
// payload: tabsObj,
26+
// });
27+
28+
// export const setPort = (port) => ({
29+
// type: types.SET_PORT,
30+
// payload: port,
31+
// });
32+
33+
// export const emptySnapshots = () => ({
34+
// type: types.EMPTY,
35+
// });
36+
37+
// export const changeView = (index) => ({
38+
// type: types.CHANGE_VIEW,
39+
// payload: index,
40+
// });
41+
42+
// export const changeSlider = (index) => ({
43+
// type: types.CHANGE_SLIDER,
44+
// payload: index,
45+
// });
46+
47+
// export const moveBackward = () => ({
48+
// type: types.MOVE_BACKWARD,
49+
// payload: false,
50+
// });
51+
52+
// export const moveForward = () => ({
53+
// type: types.MOVE_FORWARD,
54+
// payload: false,
55+
// });
56+
57+
// export const playForward = () => ({
58+
// type: types.MOVE_FORWARD,
59+
// payload: true,
60+
// });
61+
62+
// export const pause = () => ({
63+
// type: types.PAUSE,
64+
// });
65+
66+
// export const startPlaying = (intervalId) => ({
67+
// type: types.PLAY,
68+
// payload: intervalId,
69+
// });
70+
71+
// export const importSnapshots = (newSnaps) => ({
72+
// type: types.IMPORT,
73+
// payload: newSnaps,
74+
// });
75+
76+
// export const setTab = (tab) => ({
77+
// type: types.SET_TAB,
78+
// payload: tab,
79+
// });
80+
81+
// export const deleteTab = (tab) => ({
82+
// type: types.DELETE_TAB,
83+
// payload: tab,
84+
// });
85+
86+
// export const noDev = (tab) => ({
87+
// type: types.NO_DEV,
88+
// payload: tab,
89+
// });
90+
91+
// export const toggleExpanded = (node) => ({
92+
// type: types.TOGGLE_EXPANDED,
93+
// payload: node,
94+
// });
95+
96+
// export const launchContentScript = (tab) => ({
97+
// type: types.LAUNCH_CONTENT,
98+
// payload: tab,
99+
// });
100+
101+
// export const resetSlider = () => ({
102+
// type: types.SLIDER_ZERO,
103+
// });
104+
105+
// export const onHover = (rtid) => ({
106+
// type: types.ON_HOVER,
107+
// //the payload should be something to relate the component we're hovering and highlight that component on the DOM
108+
// payload: rtid,
109+
// });
110+
111+
// export const onHoverExit = (rtid) => ({
112+
// type: types.ON_HOVER_EXIT,
113+
// payload: rtid,
114+
// });
115+
116+
// export const setCurrentLocation = (tabsObj) => ({
117+
// type: types.SET_CURRENT_LOCATION,
118+
// payload: tabsObj,
119+
// });
120+
121+
// export const setCurrentTabInApp = (currentTabInApp) => ({
122+
// type: types.SET_CURRENT_TAB_IN_APP,
123+
// payload: currentTabInApp,
124+
// });
125+
126+
// export const tutorialSaveSeriesToggle = (toggleVal) => ({
127+
// type: types.TUTORIAL_SAVE_SERIES_TOGGLE,
128+
// payload: toggleVal,
129+
// });

‎src/app/components/Action.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,6 @@ const Action = (props: ActionProps): JSX.Element => {
3838
last, // boolean on (whether the view index is less than 0) AND if (the index is the same as the last snapshot's index value in hierarchyArr) in 'ActionContainer'
3939
index, // from snapshot.index in "ActionContainer's" 'hierarchyArr'
4040
sliderIndex, // from tabs[currentTab] object in 'ActionContainer'
41-
//commented out dispatch that was prop drilled as conversion to RTX might invalidate need for prop drilling to access dispatch
42-
// dispatch,
4341
displayName, // from snapshot.displayName in "ActionContainer's" 'hierarchyArr'
4442
componentData, // from snapshot.componentData in "ActionContainer's" 'hierarchyArr'
4543
viewIndex, // from tabs[currentTab] object in 'ActionContainer'

‎src/app/components/App.tsx

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import React, { useReducer } from 'react';
1+
import React from 'react';
22
import { MemoryRouter as Router } from 'react-router-dom';
33
import MainContainer from '../containers/MainContainer';
4-
import { StoreContext } from '../store';
5-
// import mainReducer from '../reducers/mainReducer.js';
6-
import { InitialStateProps } from '../FrontendTypes';
74
import { ThemeProvider } from '@mui/material/styles';
85
import theme from './theme';
96

@@ -13,25 +10,12 @@ import theme from './theme';
1310
This is used to determine the proper tutorial to render when How To button is pressed.
1411
*/
1512

16-
// const initialState: InitialStateProps = { // we initialize what our initialState is here
17-
// port: null,
18-
// currentTab: null,
19-
// currentTitle: 'No Target',
20-
// tabs: {},
21-
// currentTabInApp: null,
22-
// connectionStatus: true,
23-
// reconnectRequested: false,
24-
// };
25-
2613
function App(): JSX.Element {
2714
return (
2815
<ThemeProvider theme={theme}>
2916
<Router>
3017
{/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
31-
{/* <StoreContext.Provider value={useReducer(mainReducer, initialState)}> */}
32-
{/* we wrap our MainContainer with the provider so that we will be able to use the store context. We create our store by using useReducer and passing it into the value property */}
3318
<MainContainer />
34-
{/* </StoreContext.Provider> */}
3519
</Router>
3620
</ThemeProvider>
3721
);

‎src/app/components/Diff.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import { diff, formatters } from 'jsondiffpatch';
33
import ReactHtmlParser from 'react-html-parser';
4-
import { useStoreContext } from '../store';
54
import { DiffProps, StatelessCleaning } from '../FrontendTypes';
65
import { useSelector } from 'react-redux';
76

@@ -17,8 +16,6 @@ function Diff(props: DiffProps): JSX.Element {
1716
snapshot, // snapshot from 'tabs[currentTab]' object in 'MainContainer'
1817
show // boolean that is dependent on the 'Route' path; true if 'Route' path === '/diffRaw'
1918
} = props;
20-
// const [mainState] = useStoreContext(); // useStoreContext() returns our global state object (which was initialized as 'initialState' in 'App.tsx')
21-
// const { currentTab, tabs } = mainState; // 'currentTab' (type: number) and 'tabs' (type: object) are destructured from 'mainState'
2219
const { currentTab, tabs } = useSelector((state: any) => state.main);
2320
const { snapshots, viewIndex, sliderIndex } = tabs[currentTab];
2421

‎src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import LinkControls from './LinkControls';
1919
import getLinkComponent from './getLinkComponent';
2020
import ToolTipDataDisplay from './ToolTipDataDisplay';
2121
import { toggleExpanded, setCurrentTabInApp } from '../../../RTKslices';
22-
// import { useStoreContext } from '../../../store';
2322
import { useDispatch } from 'react-redux';
2423
import { LinkTypesProps, DefaultMargin, ToolTipStyles } from '../../../FrontendTypes'
2524

@@ -42,7 +41,6 @@ export default function ComponentMap({
4241
const [linkType, setLinkType] = useState('diagonal'); // We create a local state "linkType" and set it to a string 'diagonal'.
4342
const [stepPercent, setStepPercent] = useState(0.5); // We create a local state "stepPercent" and set it to a number '0.5'. This will be used to scale the Map component's link: Step to 50%
4443
const [selectedNode, setSelectedNode] = useState('root'); // We create a local state "selectedNode" and set it to a string 'root'.
45-
// const [, dispatch] = useStoreContext(); // we destructure the returned context object from the invocation of the useStoreContext function to get access to our dispatch function
4644
const dispatch = useDispatch();
4745

4846
const toolTipTimeoutID = useRef(null); //useRef stores stateful data that’s not needed for rendering.

‎src/app/components/StateRoute/History.tsx

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,7 @@ import React, { useEffect } from 'react';
66
import { diff, formatters } from 'jsondiffpatch';
77
import * as d3 from 'd3';
88
import { DefaultMargin } from '../../FrontendTypes';
9-
//removed changeView from line 11 and added it as an import on line 16 from RTKSlices
10-
// import { changeView, changeSlider,setCurrentTabInApp } from '../../actions/actions';
11-
// import { useStoreContext } from '../../store';
12-
//importing these methods for RTK
13-
import { useSelector, useDispatch } from 'react-redux';
14-
//import the relevant actions that are used within this file for the slice we are creating
9+
import { useDispatch } from 'react-redux';
1510
import { changeView, changeSlider, setCurrentTabInApp } from '../../RTKslices';
1611

1712
/*
@@ -33,18 +28,12 @@ function History(props: Record<string, unknown>): JSX.Element {
3328
height: totalHeight, // from ParentSize provided in StateRoute
3429
margin = defaultMargin,
3530
hierarchy, // from 'tabs[currentTab]' object in 'MainContainer'
36-
// dispatch, // from useStoreContext in 'StateRoute'
3731
currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
3832
snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
3933
} = props;
40-
41-
//Commented out dispatch: 10/03/23 3:18 PM from original
42-
// const [, dispatch] = useStoreContext(); // use the dispatch that is connected with our storeContext
4334

4435
//here we are adding useSelector and useDispatch for RTK state conversion
4536
const dispatch = useDispatch();
46-
const currentTab = useSelector(state => state.main.currentTab)
47-
const tabs = useSelector(state => state.main.tabs)
4837

4938
const svgRef = React.useRef(null);
5039
const root = JSON.parse(JSON.stringify(hierarchy)); // why do we stringify and then parse our hierarchy back to JSON? (asked 7/31/23)

0 commit comments

Comments
 (0)