Skip to content

Commit

Permalink
Merge pull request #29 from oslabs-beta/webSockets
Browse files Browse the repository at this point in the history 
Web sockets
  • Loading branch information
@mjhuff
mjhuff authored Apr 6, 2023
2 parents 0d99d4c + 30c4b75 commit 827a8a2
Show file tree
Hide file tree
Showing 17 changed files with 901 additions and 294 deletions.
49 changes: 39 additions & 10 deletions client/App.js
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -22,9 +52,8 @@ const App = (props) => {
</div>
<RemoteContainer></RemoteContainer>
{isMigrating && <Overlay></Overlay>}

</>
);
};

export default App;
export default App;
58 changes: 32 additions & 26 deletions client/components/BucketSelect.js
View file
Original file line number Diff line number Diff line change
@@ -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>
)}
</>
);
};
Expand Down
182 changes: 82 additions & 100 deletions client/components/Destination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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', {
Expand All @@ -52,8 +50,7 @@ const Destination = (props) => {
})
});
const data = await res.json();
console.log(data)
dispatch(updateDestinationBuckets(data))
dispatch(updateDestinationBuckets(data));
dispatch(updateDestinationBucketLoading(false));
})();
}
Expand All @@ -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> */}
Loading

0 comments on commit 827a8a2

Please sign in to comment.