finished the overlay functionality

client/App.js

@@ -1,17 +1,18 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { RemoteContainer } from './components/RemoteContainer';
-import Button from './components/Button';
+import MigrationButton from './components/MigrationButton';
 import Overlay from './components/Overlay';
 //import styles if necessary
 //may need to import functions from slices here
 
 const App = (props) => {
+ const {isMigrating, origin, destination} = useSelector(state => state.GUI)
  return (
  <>
  <RemoteContainer></RemoteContainer>
- <Button></Button>
- <Overlay></Overlay>
+ { origin.accessId && origin.secretKey && destination.accessId && destination.secretKey && (origin.accountId || destination.accountId) && <MigrationButton></MigrationButton>}
+ { isMigrating && <Overlay></Overlay>}
  </>
  );
 };

client/components/MigrationButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { migrationStatusChange } from '../slice.js';
+
+const StartMigrationButton = (props) => {
+ const dispatch = useDispatch();
+ const changeMigrationStatus = () => {
+ dispatch(migrationStatusChange(true));
+ };
+
+ return (
+ <button onClick={() => changeMigrationStatus()}>Start Migration</button>
+ );
+};
+
+export default StartMigrationButton;

client/components/Overlay.js

@@ -1,16 +1,28 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
+import aws_edited from '../public/aws_edited.png';
+import cloudflare_edited from '../public/cloudflare_edited.png';
 
-const Overlay = (props) => {
- //Some Things to track in State...
- //isMigrating / loading status
- //From/To component input fields
 
- //Components to return
- //two remote components
- //button
- //overlay?
- //graphic/animation for loading status
- return <h1>Overlay</h1>;
+const Overlay = (props) => {
+ const { origin, destination } = useSelector((state) => state.GUI);
+ const originSrc = origin.name === 'Amazon' ? aws_edited : cloudflare_edited;
+ const destinationSrc = destination.name === 'Amazon' ? aws_edited : cloudflare_edited;
+ return (
+ <div>
+ <div>
+ <section>
+ <h2>{origin.name}</h2>
+ <img src={originSrc} alt="origin logo"></img>
+ </section>
+ <section>
+ <h2>{destination.name}</h2>
+ <img src={destinationSrc} alt='destination logo'></img>
+ </section>
+ <p>placeholder for progress bar</p>
+ </div>
+ </div>
+ );
 };
 
 export default Overlay;

client/slice.js

@@ -43,7 +43,7 @@ const slice = createSlice({
  state.destination = action.payload.destination;
  },
  updateAccountId: (state, action) => {
- const {origin, destination} = action.payload
+ const { origin, destination } = action.payload;
  state.origin = origin;
  state.destination = destination;
  },