Skip to content

Commit 83d4d34

Browse files
YohezeYoheze
committed
websockets huge update, still need to create rooms
1 parent 4758e6d commit 83d4d34

File tree

7 files changed

+95
-64
lines changed

7 files changed

+95
-64
lines changed

‎app/src/components/App.tsx

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -65,38 +65,38 @@ export const App = (): JSX.Element => {
6565
});
6666
}
6767
}, []);
68-
useEffect(() => {
69-
// provide config properties to legacy projects so new edits can be auto saved
70-
// if (state.config === undefined) {
71-
// state.config = { saveFlag: true, saveTimer: false };
72-
// }
73-
// New project save configuration to optimize server load and minimize Ajax requests
74-
if (state.config.saveFlag) {
75-
// state.config.saveFlag = false;
76-
// state.config.saveTimer = true;
77-
dispatch(configToggle())
68+
// useEffect(() => {
69+
// // provide config properties to legacy projects so new edits can be auto saved
70+
// // if (state.config === undefined) {
71+
// // state.config = { saveFlag: true, saveTimer: false };
72+
// // }
73+
// // New project save configuration to optimize server load and minimize Ajax requests
74+
// if (state.config.saveFlag) {
75+
// // state.config.saveFlag = false;
76+
// // state.config.saveTimer = true;
77+
// // dispatch(configToggle())
7878

79-
let userId;
80-
if (Cookies.get('ssid')) {
81-
userId = Cookies.get('ssid');
82-
} else {
83-
userId = window.localStorage.getItem('ssid');
84-
}
85-
// if (state.isLoggedIn === false) {
86-
if (!state.isLoggedIn) {
87-
localforage.setItem('guestProject', state);
88-
} else if (state.name !== '') {
89-
saveProject(state.name, state);
90-
localforage.setItem(userId, state);
91-
}
92-
}
93-
if (!state.config.saveTimer) {
94-
// state.config.saveTimer = false;
95-
setTimeout(() => {
96-
// state.config.saveFlag = true;
97-
}, 15000);
98-
}
99-
}, [state]);
79+
// let userId;
80+
// if (Cookies.get('ssid')) {
81+
// userId = Cookies.get('ssid');
82+
// } else {
83+
// userId = window.localStorage.getItem('ssid');
84+
// }
85+
// // if (state.isLoggedIn === false) {
86+
// if (!state.isLoggedIn) {
87+
// localforage.setItem('guestProject', state);
88+
// } else if (state.name !== '') {
89+
// saveProject(state.name, state);
90+
// localforage.setItem(userId, state);
91+
// }
92+
// }
93+
// if (!state.config.saveTimer) {
94+
// state.config.saveTimer = false;
95+
// setTimeout(() => {
96+
// state.config.saveFlag = true;
97+
// }, 15000);
98+
// }
99+
// }, [state]);
100100
// uncomment below to log state
101101

102102
return (
@@ -113,5 +113,6 @@ export const App = (): JSX.Element => {
113113
</DndProvider>
114114
</div>
115115
);
116-
};
116+
}
117+
117118
export default App;

‎app/src/index.js

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ import Tutorial from './tutorial/Tutorial.tsx';
2020
import TutorialPage from './tutorial/TutorialPage.tsx';
2121
import ProjectDashboard from './Dashboard/ProjectContainer.tsx';
2222

23+
// for websockets
24+
import debounce from 'lodash/debounce'
25+
2326
const client = new ApolloClient({
2427
uri: 'https://reactype-caret.herokuapp.com/graphql',
2528
cache: new InMemoryCache()
@@ -57,7 +60,10 @@ const PrivateRoute = ({ component: Component, ...rest }) => (
5760
// websocket front end starts here
5861
import { io } from 'socket.io-client'
5962
import { toggleDarkMode } from './redux/reducers/slice/darkModeSlice'
60-
import { cooperative } from './redux/reducers/slice/appStateSlice.ts'
63+
import { allCooperativeState } from './redux/reducers/slice/appStateSlice.ts'
64+
import { codePreviewCooperative } from './redux/reducers/slice/codePreviewSlice';
65+
import { allContextCooperative } from './redux/reducers/slice/contextReducer';
66+
import { cooperativeStyle } from './redux/reducers/slice/styleSlice';
6167

6268
const socket = io('http://localhost:5656', {
6369
transports: ['websocket']
@@ -71,34 +77,42 @@ console.log(store.getState())
7177
let previousState = store.getState();
7278

7379
// sending info to backend whenever the redux store changes
74-
function handleStoreChange () {
75-
socket.connect();
80+
const handleStoreChange = debounce(() => {
7681
const newState = store.getState();
7782
if (newState !== previousState){
78-
socket.emit('custom-event', 'sent from front-end', store.getState())
83+
console.log('before sending to server: ', newState)
84+
socket.emit('custom-event', 'sent from front-end', JSON.stringify(newState))
7985
previousState = newState;
8086
}
81-
}
82-
83-
store.subscribe(handleStoreChange)
87+
}, 100);
8488

8589
// receiving the message from the back end
8690
socket.on('receive message', (event) => {
87-
console.log('message from server: ', event);
88-
const currentStore = store.getState();
91+
// console.log('message from server: ', event);
92+
let currentStore = JSON.stringify(store.getState())
8993
if (currentStore!==event){
94+
currentStore = JSON.parse(currentStore);
95+
event = JSON.parse(event);
9096
console.log('stores do not match')
9197
if (currentStore.darkMode.isDarkMode!==event.darkMode.isDarkMode){
9298
store.dispatch(toggleDarkMode())
99+
} else if (currentStore.appState!==event.appState) {
100+
store.dispatch(allCooperativeState(event.appState))
101+
} else if (currentStore.codePreviewSlice!==event.codePreviewCooperative){
102+
store.dispatch(codePreviewCooperative(event.codePreviewCooperative))
103+
} else if (currentStore.styleSlice!==event.styleSlice) {
104+
store.dispatch(cooperativeStyle(event.styleSlice))
93105
}
94-
if (currentStore.appState!==event.appState){
95-
console.log(event.appState)
96-
store.dispatch()
97-
}
106+
// else {
107+
// console.log('contextslice else if block is running: ', event.contextSlice.allContext[lastIndex])
108+
// store.dispatch(allContextCooperative(event.contextSlice))
109+
// }
98110
}
99111
console.log('updated user Store from another user: ', store.getState())
100112
})
101113

114+
store.subscribe(handleStoreChange)
115+
102116
ReactDOM.render(
103117
<ApolloProvider client={client}>
104118
<Provider store={store}>

‎app/src/redux/reducers/slice/appStateSlice.ts

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// Main slice for all the component state.///
22
import { createSlice } from '@reduxjs/toolkit';
3+
import produce from 'immer';
34
// Import Interfaces for State, and HTML Types
45
import {
56
State,
@@ -14,7 +15,7 @@ import manageSeparators from '../../../helperFunctions/manageSeparators';
1415
export const initialState: State = {
1516
name: '',
1617
isLoggedIn: false,
17-
config: { saveFlag: true, saveTimer: false },
18+
// config: { saveFlag: true, saveTimer: false },
1819
components: [
1920
{
2021
id: 1,
@@ -1277,27 +1278,33 @@ const appStateSlice = createSlice({
12771278
toggleLoggedIn: (state) => {
12781279
state.isLoggedIn = !state.isLoggedIn;
12791280
},
1280-
configToggle: (state) => {
1281-
state.config = {
1282-
...state.config,
1283-
saveFlag: !state.config.saveFlag,
1284-
saveTimer: !state.config.saveTimer
1285-
};
1286-
},
1281+
// configToggle: (state) => {
1282+
// state.config = {
1283+
// ...state.config,
1284+
// saveFlag: !state.config.saveFlag,
1285+
// saveTimer: !state.config.saveTimer
1286+
// };
1287+
// },
12871288
snapShotAction: (state, action) => {
12881289
state.components[action.payload.focusIndex].past.push(action.payload.deepCopiedState.components[action.payload.focusIndex].children);
12891290
},
1290-
cooperative: (state, action) => {
1291-
console.log(action.payload);
1292-
return {...action.payload};
1291+
allCooperativeState: (state, action) => {
1292+
return Object.assign({}, state, action.payload)
12931293
}
12941294
}
12951295
});
12961296

12971297
// Exports the action creator function to be used with useDispatch
12981298

12991299

1300-
export const { addComponent, addChild, changeFocus, changeTailwind, changePosition, updateStateUsed, resetAllState, updateUseContext, updateCss, updateEvents, deleteEventAction, deletePage, deleteReusableComponent, setProjectName, changeProjectType, resetState, updateProjectName, deleteElement, updateAttributes, deleteChild, setInitialState, openProject, addElement, undo, redo, addState, addPassedInProps, deletePassedInProps, deleteState, toggleLoggedIn, configToggle, snapShotAction, cooperative } = appStateSlice.actions;
1300+
export const { addComponent, addChild, changeFocus,
1301+
changeTailwind, changePosition, updateStateUsed,
1302+
resetAllState, updateUseContext, updateCss, updateEvents,
1303+
deleteEventAction, deletePage, deleteReusableComponent,
1304+
setProjectName, changeProjectType, resetState, updateProjectName,
1305+
deleteElement, updateAttributes, deleteChild, setInitialState, openProject,
1306+
addElement, undo, redo, addState, addPassedInProps, deletePassedInProps,
1307+
deleteState, toggleLoggedIn, configToggle, snapShotAction, allCooperativeState } = appStateSlice.actions;
13011308

13021309

13031310
// Exports so we can combine in rootReducer

‎app/src/redux/reducers/slice/codePreviewSlice.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,15 @@ const codePreviewSlice = createSlice({
1414
},
1515
codePreviewInput: (state, action) => {
1616
state.input = action.payload
17-
}
17+
},
18+
codePreviewCooperative: (state, action) => {
19+
return Object.assign({}, state, action.payload)
20+
},
1821
}
1922
})
2023

2124

22-
export const { codePreviewSave, codePreviewInput } = codePreviewSlice.actions;
25+
export const { codePreviewSave, codePreviewInput, codePreviewCooperative } = codePreviewSlice.actions;
2326

2427
export default codePreviewSlice.reducer;
2528
// import * as types from '../../constants/actionTypes';

‎app/src/redux/reducers/slice/contextReducer.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,15 @@ const contextReducerSlice = createSlice({
5050
},
5151
getAllContext: (state, action) => {
5252
state = state;
53-
}
53+
},
54+
allContextCooperative: (state, action) => {
55+
return Object.assign({}, state, action.payload)
56+
},
5457

5558
}
5659
})
5760

58-
export const { addContext, addContextValues, deleteContext, getAllContext, addComponentToContext} = contextReducerSlice.actions
61+
export const { addContext, addContextValues, deleteContext, getAllContext, addComponentToContext, allContextCooperative } = contextReducerSlice.actions
5962
export default contextReducerSlice.reducer;
6063

6164
// const contextReducer = (state = initialState, action) => {

‎app/src/redux/reducers/slice/styleSlice.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@ const initialState = {
1313
reducers: {
1414
setStyle: (state, action) => {
1515
state.style = action.payload;
16-
}
16+
},
17+
cooperativeStyle: (state, action) => {
18+
return Object.assign({}, state, action.payload)
19+
},
1720
}
1821
});
1922

20-
export const { setStyle } = styleSlice.actions;
23+
export const { setStyle, cooperativeStyle } = styleSlice.actions;
2124

2225
export default styleSlice.reducer;

‎server/server.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ io.on('connection', socket => {
106106
console.log(socket.id)
107107
socket.on('custom-event', (string, redux_store) => {
108108
console.log(string)
109-
console.log(redux_store)
109+
// console.log(redux_store)
110110
socket.broadcast.emit('receive message', redux_store)
111111
})
112112
})

0 commit comments

Comments
 (0)