Skip to content

Commit 41e7144

Browse files
mdunnmonmdunnmon
authored
Merge pull request #22 from oslabs-beta/Yoheze/websockets
Yoheze/websockets
2 parents 29565f4 + 83d4d34 commit 41e7144

File tree

10 files changed

+136
-62
lines changed

10 files changed

+136
-62
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/components/login/SignIn.tsx

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
223223
>
224224
{isDarkMode ? `Light Mode`: `Dark Mode`}
225225
</Button>
226-
<Avatar className={classes.avatar}>
226+
<Avatar className={classes.avatar} sx={{marginTop: '10vh'}}>
227227
<LockOutlinedIcon />
228228
</Avatar>
229229
<Typography component="h1" variant="h5" color="textPrimary">
@@ -269,8 +269,16 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
269269
color="primary"
270270
className={classes.submit}
271271
onClick={e => handleLogin(e)}
272+
sx={{
273+
marginBottom: '5px',
274+
marginTop:'20px',
275+
}}
272276
>
273277
Sign In
278+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-check" viewBox="0 0 16 16" style={{marginLeft: '5px'}}>
279+
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
280+
<path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"/>
281+
</svg>
274282
</Button>
275283
<Button
276284
fullWidth
@@ -279,8 +287,14 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
279287
color="primary"
280288
className={classes.submit}
281289
onClick={e => handleGithubLogin(e)}
290+
sx={{
291+
marginBottom: '5px'
292+
}}
282293
>
283294
Sign In With Github
295+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16" style={{marginLeft: '5px'}}>
296+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
297+
</svg>
284298
</Button>
285299
<Button
286300
fullWidth
@@ -291,17 +305,30 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
291305
e.preventDefault();
292306
window.location.assign('http://localhost:5656/auth/google');
293307
}}
308+
sx={{
309+
marginBottom: '5px'
310+
}}
294311
>
295312
Sign in With Google
313+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-google" viewBox="0 0 16 16" style={{marginLeft: '5px'}}>
314+
<path d="M15.545 6.558a9.42 9.42 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.689 7.689 0 0 1 5.352 2.082l-2.284 2.284A4.347 4.347 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.792 4.792 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.702 3.702 0 0 0 1.599-2.431H8v-3.08h7.545z"/>
315+
</svg>
296316
</Button>
297317
<Button
298318
fullWidth
299319
variant="contained"
300320
color="primary"
301321
className={classes.submit}
302322
onClick={e => handleLoginGuest(e)}
323+
sx={{
324+
marginBottom: '5px'
325+
}}
303326
>
304327
Continue as Guest
328+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16" style={{marginLeft: '5px'}}>
329+
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
330+
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
331+
</svg>
305332
</Button>
306333
<Grid container>
307334
<Grid item xs>

‎app/src/components/login/SignUp.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -218,10 +218,10 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
218218
>
219219
{`Dark Mode: ${isDarkMode}`}
220220
</Button>
221-
<Avatar className={classes.avatar}>
221+
<Avatar className={classes.avatar} sx={{marginTop: '10vh'}}>
222222
<AssignmentIcon />
223223
</Avatar>
224-
<Typography component="h1" variant="h5" color="textPrimary">
224+
<Typography component="h1" variant="h5" color="textPrimary" sx={{marginBottom: '10px'}}>
225225
Sign up
226226
</Typography>
227227
<form className={classes.form} noValidate>
@@ -301,8 +301,16 @@ const SignUp: React.FC<LoginInt & RouteComponentProps> = props => {
301301
color="primary"
302302
className={classes.submit}
303303
onClick={e => handleSignUp(e)}
304+
sx={{
305+
marginTop: '15px',
306+
marginBottom: '5px'
307+
}}
304308
>
305309
Sign Up
310+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-add" viewBox="0 0 16 16" style={{marginLeft: '5px'}}>
311+
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
312+
<path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"/>
313+
</svg>
306314
</Button>
307315
<Grid container justifyContent="flex-end">
308316
<Grid item>

‎app/src/index.js

Lines changed: 28 additions & 9 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,6 +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'
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';
6067

6168
const socket = io('http://localhost:5656', {
6269
transports: ['websocket']
@@ -70,30 +77,42 @@ console.log(store.getState())
7077
let previousState = store.getState();
7178

7279
// sending info to backend whenever the redux store changes
73-
function handleStoreChange () {
74-
socket.connect();
80+
const handleStoreChange = debounce(() => {
7581
const newState = store.getState();
7682
if (newState !== previousState){
77-
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))
7885
previousState = newState;
7986
}
80-
}
81-
82-
store.subscribe(handleStoreChange)
87+
}, 100);
8388

8489
// receiving the message from the back end
8590
socket.on('receive message', (event) => {
86-
console.log('message from server: ', event);
87-
const currentStore = store.getState();
91+
// console.log('message from server: ', event);
92+
let currentStore = JSON.stringify(store.getState())
8893
if (currentStore!==event){
94+
currentStore = JSON.parse(currentStore);
95+
event = JSON.parse(event);
8996
console.log('stores do not match')
9097
if (currentStore.darkMode.isDarkMode!==event.darkMode.isDarkMode){
9198
store.dispatch(toggleDarkMode())
92-
}
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))
105+
}
106+
// else {
107+
// console.log('contextslice else if block is running: ', event.contextSlice.allContext[lastIndex])
108+
// store.dispatch(allContextCooperative(event.contextSlice))
109+
// }
93110
}
94111
console.log('updated user Store from another user: ', store.getState())
95112
})
96113

114+
store.subscribe(handleStoreChange)
115+
97116
ReactDOM.render(
98117
<ApolloProvider client={client}>
99118
<Provider store={store}>

‎app/src/public/styles/style.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -661,5 +661,4 @@ a.nav_link:hover {
661661
display: flex;
662662
flex-direction: column;
663663
align-items: center;
664-
}
665-
664+
}

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

Lines changed: 20 additions & 9 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,23 +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);
1290+
},
1291+
allCooperativeState: (state, action) => {
1292+
return Object.assign({}, state, action.payload)
12891293
}
12901294
}
12911295
});
12921296

12931297
// Exports the action creator function to be used with useDispatch
12941298

12951299

1296-
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 } = 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;
12971308

12981309

12991310
// 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)