Added relevant client state for sockets

client/App.js

@@ -4,39 +4,42 @@ import { RemoteContainer } from './components/RemoteContainer';
 import MigrationButton from './components/MigrationButton';
 import Overlay from './components/Overlay';
 import { socket } from './socket';
+import {
+ updateDataTransferProgressPercent,
+ updateSocketConnectivity
+} from './slice';
 //import styles if necessary
 //may need to import functions from slices here
 
 const App = (props) => {
+ const dispatch = useDispatch();
  const { isMigrating, origin, destination } = useSelector(
  (state) => state.GUI
  );
 
- const [isConnected, setIsConnected] = useState(socket.connected);
- const [fooEvents, setFooEvents] = useState([]);
-
  //Basic client socket.io connection.
+ //MAY NEED TO SHIFT THIS LOGIC INTO THE COMPONENT WE NEED.
  useEffect(() => {
  function onConnect() {
- setIsConnected(true);
+ dispatch(updateSocketConnectivity(true));
  }
 
  function onDisconnect() {
- setIsConnected(false);
+ dispatch(updateSocketConnectivity(false));
  }
 
- function onFooEvent(value) {
- setFooEvents((previous) => [...previous, value]);
+ function onDataTransfer(value) {
+ dispatch(updateDataTransferProgressPercent(value));
  }
 
  socket.on('connect', onConnect);
  socket.on('disconnect', onDisconnect);
- socket.on('foo', onFooEvent);
+ socket.on('data transfer', onDataTransfer);
 
  return () => {
  socket.off('connect', onConnect);
  socket.off('disconnect', onDisconnect);
- socket.off('foo', onFooEvent);
+ socket.off('data transfer', onDataTransfer);
  };
  }, []);
 

client/slice.js

@@ -13,7 +13,7 @@ const slice = createSlice({
  accountId: '',
  selectedBucket: '',
  service: '',
- bucketOptions: [],
+ bucketOptions: []
  },
  destination: {
  name: '',
@@ -22,8 +22,12 @@ const slice = createSlice({
  accountId: '',
  selectedBucket: '',
  service: '',
- bucketOptions: [],
+ bucketOptions: []
  },
+ socket: {
+ isConnected: false,
+ dataTransferProgressPercent: ''
+ }
  },
  reducers: {
  migrationStatusChange: (state, action) => {
@@ -46,7 +50,6 @@ const slice = createSlice({
  state.destination = action.payload.destination;
  },
  updateDestinationSecretKey: (state, action) => {
-
  state.destination = action.payload.destination;
  },
  updateAccountId: (state, action) => {
@@ -65,6 +68,12 @@ const slice = createSlice({
  },
  updateErrorState: (state, action) => {
  state.errState = action.payload;
+ },
+ updateSocketConnectivity: (state, action) => {
+ state.socket.isConnected = action.payload;
+ },
+ updateDataTransferProgressPercent: (state, action) => {
+ state.socket.dataTransferProgressPercent = action.payload;
  }
  },
  extraReducers: (builder) => {
@@ -91,5 +100,7 @@ export const {
  updateOriginBuckets,
  updateDestinationBuckets,
  updateSelectedBucket,
- updateErrorState
+ updateErrorState,
+ updateSocketConnectivity,
+ updateDataTransferProgressPercent
 } = slice.actions;

server/server.js

@@ -23,6 +23,7 @@ const io = new Server(server, {
 });
 
 //PUT ALL THE WEBSOCKET LOGIC HERE FOR NOW.
+//CURRENT PROBLEM: I DON'T KNOW HOW TO EXPORT THIS STUFF.
 io.on('connection', (socket) => {
  console.log('a user connected');
 });

server/test.js

@@ -0,0 +1,6 @@
+const { io } = require('./server');
+
+//PUT ALL THE WEBSOCKET LOGIC HERE FOR NOW.
+io.on('connection', (socket) => {
+ console.log('a user connected');
+});