Web sockets

client/App.js

@@ -1,19 +1,49 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 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 { isMigrating, origin, destination } = useSelector(
- (state) => state.GUI
- );
- return (
- <>
+const App = () => {
+ const dispatch = useDispatch();
+ const { isMigrating } = useSelector((state) => state.GUI);
+
+ //Basic client socket.io connection.
+ //MAY NEED TO SHIFT THIS LOGIC INTO THE COMPONENT WE NEED?
+ useEffect(() => {
+ function onConnect() {
+ dispatch(updateSocketConnectivity(true));
+ }
+
+ function onDisconnect() {
+ dispatch(updateSocketConnectivity(false));
+ }
 
+ function onDataTransfer(value) {
+ //Don't update value if it isn't a valid increase.
+ if (value === '') return;
+ dispatch(updateDataTransferProgressPercent(value));
+ }
 
+ socket.on('connect', onConnect);
+ socket.on('disconnect', onDisconnect);
+ socket.on('data transfer', onDataTransfer);
+
+ return () => {
+ socket.off('connect', onConnect);
+ socket.off('disconnect', onDisconnect);
+ socket.off('data transfer', onDataTransfer);
+ };
+ }, []);
+
+ return (
+ <>
  <div className="nav flex items-center justify-between mr-36 ml-20 p-6 text-xl ">
  <div>CloudShift</div>
  <div>
@@ -22,9 +52,8 @@ const App = (props) => {
  </div>
  <RemoteContainer></RemoteContainer>
  {isMigrating && <Overlay></Overlay>}
-
  </>
  );
 };
 
-export default App;
+export default App;

client/components/BucketSelect.js

@@ -1,44 +1,50 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { updateSelectedBucket } from '../slice';
-import LoadingButton from './LoadingButton'
+import LoadingButton from './LoadingButton';
 
 const BucketSelect = (props) => {
  const dispatch = useDispatch();
- const { bucketLoading, bucketOptions } = useSelector((state) => state.GUI[props.remote]);
+ const { bucketLoading, bucketOptions } = useSelector(
+ (state) => state.GUI[props.remote]
+ );
  const options = [];
- options.push(<option value="">Select Bucket</option>);
+ options.push(
+ <option key={Date.now() + Math.random()} value="">
+ Select Bucket
+ </option>
+ );
  bucketOptions.forEach((bucket) => {
  options.push(
- <option key={bucket} value={bucket}>
+ <option key={Date.now() + Math.random()} value={bucket}>
  {bucket}
  </option>
  );
  });
  return (
  <>
- {bucketLoading ? 
- <LoadingButton></LoadingButton> :
- <div>
- <label htmlFor="buckets" for="buckets" class="text-xs scale-75">
- Choose a bucket:
- </label>
- <select
- class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
- name="buckets"
- onChange={(e) => {
- const payload = {
- bucket: e.target.value,
- remote: props.remote
- };
- dispatch(updateSelectedBucket(payload));
- }}
- >
- {options}
- </select>
- </div>
- }
-
+  {bucketLoading ? (
+  <LoadingButton></LoadingButton>
+  ) : (
+  <div>
+  <label htmlFor="buckets" className="text-xs scale-75">
+  Choose a bucket:
+  </label>
+  <select
+  className="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+  name="buckets"
+  onChange={(e) => {
+  const payload = {
+  bucket: e.target.value,
+  remote: props.remote
+  };
+  dispatch(updateSelectedBucket(payload));
+  }}
+  >
+  {options}
+  </select>
+  </div>
+ )}
  </>
  );
 };

client/components/Destination.js

@@ -8,12 +8,10 @@ import {
 } from '../slice';
 import { useDispatch, useSelector } from 'react-redux';
 import BucketSelect from './BucketSelect';
-import aws_edited from '../public/aws_edited.png'
-import cloudflare_edited from '../public/cloudflare_edited.png'
+import aws_edited from '../public/aws_edited.png';
+import cloudflare_edited from '../public/cloudflare_edited.png';
 import MigrationButton from './MigrationButton';
 
-
-
 const Destination = (props) => {
  const dispatch = useDispatch();
  const { origin, destination } = useSelector((state) => state.GUI);
@@ -36,7 +34,7 @@ const Destination = (props) => {
 
  useEffect(() => {
  if (destination.accessId && destination.secretKey) {
- dispatch(updateDestinationBucketLoading(true))
+ dispatch(updateDestinationBucketLoading(true));
  if (destination.name === 'Cloudflare' && !destination.accountId) return;
  (async () => {
  const res = await fetch('/listBuckets', {
@@ -52,8 +50,7 @@ const Destination = (props) => {
  })
  });
  const data = await res.json();
- console.log(data)
- dispatch(updateDestinationBuckets(data))
+ dispatch(updateDestinationBuckets(data));
  dispatch(updateDestinationBucketLoading(false));
  })();
  }
@@ -65,114 +62,99 @@ const Destination = (props) => {
  ]);
 
  return (
- <>
- <div>
- <div class="relative z-0 w-4/5 mb-6 group text-center text-lg">
- {!destination.name ?
- null :
- <img src={destination.name === 'AWS' ?
- aws_edited :
- cloudflare_edited} >
- </img>
- }
- Destination
- {props.name && (
- <>
- : {props.name} {props.service}
- </>
- )}
- </div>
+ <div>
+ <div className="flex flex-col justify-items-center items-center relative z-0 w-4/5 mb-6 group text-center text-lg">
+ {!props.name ? null : (
+ <img
+ src={props.name === 'AWS' ? aws_edited : cloudflare_edited}
+ ></img>
+ )}
+ Destination
+ {props.name && (
+ <>
+ : {props.name} {props.service}
+ </>
+ )}
+ </div>
 
- <div class="relative z-0 w-4/5 mb-6 group">
- <input
- type="key"
- class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-800 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
- placeholder=" "
- required
- name="destAccessId"
- id="destinationAccessId"
- onChange={(e) => {
- const newState = props.accessIdHandler(e, origin, destination);
- dispatch(updateDestinationAccessId(newState));
- }}
- ></input>
- <label
- htmlFor="destAccessId"
- for="destinationAccessId"
- class="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
- >
- Access ID{destination.accessId ? <>{' \u2705'}</> : <></>}
- </label>
- </div>
+ <div className="relative z-0 w-4/5 mb-6 group">
+ <input
+ type="key"
+ className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-800 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
+ placeholder=" "
+ required
+ name="destAccessId"
+ id="destinationAccessId"
+ onChange={(e) => {
+ const newState = props.accessIdHandler(e, origin, destination);
+ dispatch(updateDestinationAccessId(newState));
+ }}
+ ></input>
+ <label
+ htmlFor="destAccessId"
+ className="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
+ >
+ Access ID{destination.accessId ? <>{' \u2705'}</> : <></>}
+ </label>
+ </div>
+
+ <div className="block relative z-0 w-4/5 mb-6 group">
+ <input
+ className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-800 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
+ placeholder=" "
+ required
+ type="key"
+ name="destSecretKey"
+ id="destSecretKey"
+ onChange={(e) => {
+ const newState = props.secretKeyHandler(e, origin, destination);
+ dispatch(updateDestinationSecretKey(newState));
+ }}
+ ></input>
+
+ <label
+ htmlFor="destSecretKey"
+ className="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
+ >
+ Secret Key{destination.secretKey ? <>{' \u2705'}</> : <></>}
+ </label>
+ </div>
 
- <div class="block relative z-0 w-4/5 mb-6 group">
+ {props.name === 'Cloudflare' && (
+ <div className="relative z-0 w-4/5 mb-6 group">
  <input
- class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-800 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
+ className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-800 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
  placeholder=" "
  required
- type="key"
- name="destSecretKey"
- id="destSecretKey"
+ type="id"
+ id="destAccountId"
+ name="destAccountId"
  onChange={(e) => {
- const newState = props.secretKeyHandler(e, origin, destination);
- dispatch(updateDestinationSecretKey(newState));
+ const newState = props.accountIdHandler(
+ e,
+ origin,
+ destination,
+ props.remoteType
+ );
+ dispatch(updateAccountId(newState));
  }}
  ></input>
-
  <label
- htmlFor="destSecretKey"
- for="destSecretKey"
- class="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
+ htmlFor="destAccountId"
+ className="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
  >
- Secret Key{destination.secretKey ? <>{' \u2705'}</> : <></>}
+ Account ID {destination.accountId.length > 1 && <>{'\u2705'}</>}
  </label>
  </div>
-
- {props.name === 'Cloudflare' && (
- <div class="relative z-0 w-4/5 mb-6 group">
- <input
- class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-800 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
- placeholder=" "
- required
- type="id"
- id="destAccountId"
- name="destAccountId"
- onChange={(e) => {
- const newState = props.accountIdHandler(
- e,
- origin,
- destination,
- props.remoteType
- );
- dispatch(updateAccountId(newState));
- }}
- ></input>
- <label
- for="destAccountId"
- class="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
- >
- Account ID {destination.accountId.length > 1 && <>{'\u2705'}</>}
- </label>
- </div>
+ )}
+ <div className="relative z-0 w-4/5 mb-6 group">{bucketSelect}</div>
+ <div className="relative z-0 w-4/5 mb-6 group">
+ {origin.selectedBucket && destination.selectedBucket && (
+ <MigrationButton></MigrationButton>
  )}
- <div class="relative z-0 w-4/5 mb-6 group">{bucketSelect}</div>
-<div class="relative z-0 w-4/5 mb-6 group">
-
-{origin.selectedBucket && destination.selectedBucket && (
-<MigrationButton></MigrationButton>
-)}
-</div>
  </div>
- </>
+ </div>
  );
 };
 
 export default Destination;
-
-
-{/* <div class="relative z-0 w-4/5 mb-6 group">
-
-{origin.selectedBucket && destination.selectedBucket && (
-<MigrationButton></MigrationButton>
-)}
-</div> */}