Merge branch 'dev' of https://github.com/oslabs-beta/ReacType-v15 into garrett/websockets

Author: GarrettHutson

app/src/components/App.tsx

@@ -52,30 +52,38 @@ export const App = (): JSX.Element => {
       });
     }
   }, []);
-  useEffect(() => {
-    // provide config properties to legacy projects so new edits can be auto saved
+  // useEffect(() => {
+  //   // provide config properties to legacy projects so new edits can be auto saved
+  //   // if (state.config === undefined) {
+  //   //   state.config = { saveFlag: true, saveTimer: false };
+  //   // }
+  //   // New project save configuration to optimize server load and minimize Ajax requests
+  //   if (state.config.saveFlag) {
+  //     // state.config.saveFlag = false;
+  //     // state.config.saveTimer = true;
+  //     // dispatch(configToggle())
 
-    // New project save configuration to optimize server load and minimize Ajax requests
-    if (state.config.saveFlag) {
-      dispatch(configToggle())
-      let userId;
-      if (Cookies.get('ssid')) {
-        userId = Cookies.get('ssid');
-      } else {
-        userId = window.localStorage.getItem('ssid');
-      }
-      if (!state.isLoggedIn) {
-        localforage.setItem('guestProject', state);
-      } else if (state.name !== '') {
-        saveProject(state.name, state);
-        localforage.setItem(userId, state);
-      }
-    }
-    if (!state.config.saveTimer) {
-      setTimeout(() => {
-      }, 15000);
-    }
-  }, [state]);
+  //     let userId;
+  //     if (Cookies.get('ssid')) {
+  //       userId = Cookies.get('ssid');
+  //     } else {
+  //       userId = window.localStorage.getItem('ssid');
+  //     }
+  //     // if (state.isLoggedIn === false) {
+  //     if (!state.isLoggedIn) {
+  //       localforage.setItem('guestProject', state);
+  //     } else if (state.name !== '') {
+  //       saveProject(state.name, state);
+  //       localforage.setItem(userId, state);
+  //     }
+  //   }
+  //   if (!state.config.saveTimer) {
+  //     state.config.saveTimer = false;
+  //     setTimeout(() => {
+  //       state.config.saveFlag = true;
+  //     }, 15000);
+  //   }
+  // }, [state]);
   // uncomment below to log state
 
   return (
@@ -92,5 +100,6 @@ export const App = (): JSX.Element => {
       </DndProvider>
     </div>
   );
-};
+}
+
 export default App;

app/src/index.js

@@ -19,6 +19,9 @@ import Tutorial from './tutorial/Tutorial.tsx';
 import TutorialPage from './tutorial/TutorialPage.tsx';
 import ProjectDashboard from './Dashboard/ProjectContainer.tsx';
 
+// for websockets
+import debounce from 'lodash/debounce'
+
 const client = new ApolloClient({
   uri: 'https://reactype-caret.herokuapp.com/graphql',
   cache: new InMemoryCache()
@@ -41,7 +44,12 @@ const PrivateRoute = ({ component: Component, ...rest }) => (
 // websocket front end starts here
 import { io } from 'socket.io-client'
 import { toggleDarkMode } from './redux/reducers/slice/darkModeSlice'
-import { addChild } from './redux/reducers/slice/appStateSlice.ts'
+
+import { allCooperativeState } from './redux/reducers/slice/appStateSlice.ts'
+import { codePreviewCooperative } from './redux/reducers/slice/codePreviewSlice';
+import { allContextCooperative } from './redux/reducers/slice/contextReducer';
+import { cooperativeStyle } from './redux/reducers/slice/styleSlice';
+
 
 const socket = io('http://localhost:5656', {
   transports: ['websocket']
@@ -55,36 +63,51 @@ console.log(store.getState())
 let previousState = store.getState();
 
 // sending info to backend whenever the redux store changes
-function handleStoreChange () {
-  socket.connect();
+const handleStoreChange = debounce(() => {
   const newState = store.getState();
   if (newState !== previousState){
-    socket.emit('custom-event', 'sent from front-end', store.getState())
+    console.log('before sending to server: ', newState)
+    socket.emit('custom-event', 'sent from front-end', JSON.stringify(newState))
     previousState = newState;
   }
-}
-
-store.subscribe(handleStoreChange)
+}, 100);
 
 // receiving the message from the back end
 socket.on('receive message', (event) => {
-  console.log('message from server: ', event);
-  const currentStore = store.getState();
+  // console.log('message from server: ', event);
+  let currentStore = JSON.stringify(store.getState())
   if (currentStore!==event){
+    currentStore = JSON.parse(currentStore);
+    event = JSON.parse(event);
     console.log('stores do not match')
     if (currentStore.darkMode.isDarkMode!==event.darkMode.isDarkMode){
       store.dispatch(toggleDarkMode())
+    } else if (currentStore.appState!==event.appState) {
+      store.dispatch(allCooperativeState(event.appState))
+    } else if (currentStore.codePreviewSlice!==event.codePreviewCooperative){
+      store.dispatch(codePreviewCooperative(event.codePreviewCooperative))
+    } else if (currentStore.styleSlice!==event.styleSlice) {
+      store.dispatch(cooperativeStyle(event.styleSlice))
     } 
+<<<<<<< HEAD
 
       console.log("eventstate from precooperative",event.appState.components[0].children[1])
       const {type, typeId, childId} = event.appState.components[0].children[1]
       store.dispatch(addChild({type, typeId, childId}))
 
 
+=======
+    // else {
+    //   console.log('contextslice else if block is running: ', event.contextSlice.allContext[lastIndex])
+    //   store.dispatch(allContextCooperative(event.contextSlice))
+    // }
+>>>>>>> 41e7144c6d708703d21ec0f269f012deb75d4aaf
   }
   console.log('updated user Store from another user: ', store.getState())
 })
 
+store.subscribe(handleStoreChange)
+
 ReactDOM.render(
   <ApolloProvider client={client}>
     <Provider store={store}>

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

@@ -1,5 +1,10 @@
 // Main slice for all the component state.///
+<<<<<<< HEAD
 import { createSlice, current } from '@reduxjs/toolkit';
+=======
+import { createSlice } from '@reduxjs/toolkit';
+import produce from 'immer';
+>>>>>>> 41e7144c6d708703d21ec0f269f012deb75d4aaf
 // Import Interfaces for State, and HTML Types
 import {
   State,
@@ -14,7 +19,7 @@ import manageSeparators from '../../../helperFunctions/manageSeparators';
 export const initialState: State = {
   name: '',
   isLoggedIn: false,
-  config: { saveFlag: true, saveTimer: false },
+  // config: { saveFlag: true, saveTimer: false },
   components: [
     {
       id: 1,
@@ -1208,15 +1213,18 @@ const appStateSlice = createSlice({
     toggleLoggedIn: (state) => {
       state.isLoggedIn = !state.isLoggedIn;
     },
-    configToggle: (state) => {
-      state.config = {
-        ...state.config,
-        saveFlag: !state.config.saveFlag,
-        saveTimer: !state.config.saveTimer
-      };
-    },
+    // configToggle: (state) => {
+    //   state.config = {
+    //     ...state.config,
+    //     saveFlag: !state.config.saveFlag,
+    //     saveTimer: !state.config.saveTimer
+    //   };
+    // },
     snapShotAction: (state, action) => {
       state.components[action.payload.focusIndex].past.push(action.payload.deepCopiedState.components[action.payload.focusIndex].children);
+    },
+    allCooperativeState: (state, action) => {
+      return Object.assign({}, state, action.payload)
     }
 
   }
@@ -1225,7 +1233,14 @@ const appStateSlice = createSlice({
 // Exports the action creator function to be used with useDispatch
 
 
-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;
+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, allCooperativeState } = appStateSlice.actions;
 
 
 // Exports so we can combine in rootReducer

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

@@ -14,11 +14,14 @@ const codePreviewSlice = createSlice({
     },
     codePreviewInput: (state, action) => {
       state.input = action.payload
-    }
+    },
+    codePreviewCooperative: (state, action) => {
+      return Object.assign({}, state, action.payload)
+    },
   }
 })
 
 
-export const { codePreviewSave, codePreviewInput } = codePreviewSlice.actions;
+export const { codePreviewSave, codePreviewInput, codePreviewCooperative } = codePreviewSlice.actions;
 
 export default codePreviewSlice.reducer;

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

@@ -49,11 +49,14 @@ const contextReducerSlice = createSlice({
     },
     getAllContext: (state, action) => {
       state = state;
-    }
+    },
+    allContextCooperative: (state, action) => {
+      return Object.assign({}, state, action.payload)
+    },
 
   }
 })
 
-export const { addContext, addContextValues, deleteContext, getAllContext, addComponentToContext} = contextReducerSlice.actions
+export const { addContext, addContextValues, deleteContext, getAllContext, addComponentToContext, allContextCooperative } = contextReducerSlice.actions
 export default contextReducerSlice.reducer;
 

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

@@ -13,10 +13,13 @@ const initialState = {
     reducers: {
         setStyle: (state, action) => {
             state.style = action.payload;
-        }
+        },
+        cooperativeStyle: (state, action) => {
+            return Object.assign({}, state, action.payload)
+        },
     }
     });
 
-    export const { setStyle } = styleSlice.actions;
+    export const { setStyle, cooperativeStyle } = styleSlice.actions;
 
     export default styleSlice.reducer;

server/server.mjs

@@ -88,7 +88,7 @@ io.on('connection', socket => {
   console.log(socket.id)
   socket.on('custom-event', (string, redux_store) => {
     console.log(string)
-    console.log(redux_store)
+    // console.log(redux_store)
     socket.broadcast.emit('receive message', redux_store)
   })
 })