Prettified Code!

client/components/ErrorDisplay.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
+import React from "react";
+import { useSelector } from "react-redux";
 
 const ErrorDisplay = () => {
  const { origin, destination } = useSelector((state) => state.GUI);

client/components/Overlay.js

@@ -1,15 +1,15 @@
-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';
-import ReactDOM from 'react-dom';
-import ProgressBar from './ProgressBar';
+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";
+import ReactDOM from "react-dom";
+import ProgressBar from "./ProgressBar";
 
 const Overlay = (props) => {
  const { origin, destination } = useSelector((state) => state.GUI);
- const originSrc = origin.name === 'AWS' ? aws_edited : cloudflare_edited;
+ const originSrc = origin.name === "AWS" ? aws_edited : cloudflare_edited;
  const destinationSrc =
- destination.name === 'AWS' ? aws_edited : cloudflare_edited;
+ destination.name === "AWS" ? aws_edited : cloudflare_edited;
  return ReactDOM.createPortal(
  <>
  <div className="flex left-0 top-0 justify-center item-center fixed z-9999 h-screen w-screen backdrop-blur-xl">
@@ -18,7 +18,7 @@ const Overlay = (props) => {
  </div>
  </div>
  </>,
- document.querySelector('#portal')
+ document.querySelector("#portal")
  );
 };
 

client/components/Remote.js

@@ -1,24 +1,24 @@
-import React, { useEffect } from 'react';
-import { updateSecretKey, updateAccessId, updateAccountId } from '../slice';
-import { useDispatch, useSelector } from 'react-redux';
-import BucketSelect from './BucketSelect';
-import { getUserBuckets } from '../services/getBuckets';
-import aws_edited from '../public/aws_edited.png';
-import cloudflare_edited from '../public/cloudflare_edited.png';
-import ErrorDisplay from './ErrorDisplay';
-import StartMigrationButton from './MigrationButton';
+import React, { useEffect } from "react";
+import { updateSecretKey, updateAccessId, updateAccountId } from "../slice";
+import { useDispatch, useSelector } from "react-redux";
+import BucketSelect from "./BucketSelect";
+import { getUserBuckets } from "../services/getBuckets";
+import aws_edited from "../public/aws_edited.png";
+import cloudflare_edited from "../public/cloudflare_edited.png";
+import ErrorDisplay from "./ErrorDisplay";
+import StartMigrationButton from "./MigrationButton";
 
 const Remote = (props) => {
  const dispatch = useDispatch();
  const { origin, destination } = useSelector((state) => state.GUI);
 
  let { remoteType } = props;
 
- const remote = remoteType === 'origin' ? origin : destination;
+ const remote = remoteType === "origin" ? origin : destination;
 
  let bucketSelect;
 
- const requireAccountId = remote.name === 'Cloudflare' ? true : false;
+ const requireAccountId = remote.name === "Cloudflare" ? true : false;
 
  if (!requireAccountId) {
  bucketSelect = remote.accessId && remote.secretKey && (
@@ -33,14 +33,14 @@ const Remote = (props) => {
  //Get the list of buckets if all credentials are present.
  useEffect(() => {
  if (!remote.accessId || !remote.secretKey) return;
- if (remote.name === 'Cloudflare' && !remote.accountId) return;
+ if (remote.name === "Cloudflare" && !remote.accountId) return;
  dispatch(getUserBuckets({ ...remote, originOrDestination: remoteType }));
  }, [remote.accessId, remote.secretKey, remote.name, remote.accountId]);
 
  let correctInputClass =
- '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';
+ "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";
  let wrongInputClass =
- 'block py-2.5 px-0 w-full text-sm text-red-600 bg-transparent border-2 border-b-2 border-red-600 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-red-600 peer';
+ "block py-2.5 px-0 w-full text-sm text-red-600 bg-transparent border-2 border-b-2 border-red-600 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-red-600 peer";
 
  return (
  <div>
@@ -58,8 +58,8 @@ const Remote = (props) => {
  <input
  type="key"
  className={
- remote.errorField === 'accessId' ||
- (remote.name === 'azureblob' && remote.errorMessage)
+ remote.errorField === "accessId" ||
+ (remote.name === "azureblob" && remote.errorMessage)
  ? wrongInputClass
  : correctInputClass
  }
@@ -76,16 +76,16 @@ const Remote = (props) => {
  htmlFor={`${remoteType}AccessId`}
  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"
  >
- {remote.name === 'azureblob' ? 'Account ID' : 'Access ID'}
- {remote.accessId ? <>{' \u2705'}</> : <></>}
+ {remote.name === "azureblob" ? "Account ID" : "Access ID"}
+ {remote.accessId ? <>{" \u2705"}</> : <></>}
  </label>
  </div>
 
  <div className="block relative z-0 w-full h-full mb-6 group">
  <input
  className={
- remote.errorField === 'secretKey' ||
- (remote.name === 'azureblob' && remote.errorMessage)
+ remote.errorField === "secretKey" ||
+ (remote.name === "azureblob" && remote.errorMessage)
  ? wrongInputClass
  : correctInputClass
  }
@@ -104,12 +104,12 @@ const Remote = (props) => {
  htmlFor="secretKey"
  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"
  >
- {remote.name === 'azureblob' ? 'Access Key' : 'Secret Key'}
- {remote.secretKey ? <>{' \u2705'}</> : <></>}
+ {remote.name === "azureblob" ? "Access Key" : "Secret Key"}
+ {remote.secretKey ? <>{" \u2705"}</> : <></>}
  </label>
  </div>
 
- {remote.name === 'Cloudflare' && (
+ {remote.name === "Cloudflare" && (
  <div className="relative z-0 w-full h-full 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"
@@ -122,7 +122,7 @@ const Remote = (props) => {
  dispatch(
  updateAccountId({
  accountId: e.target.value.trim(),
- remoteType
+ remoteType,
  })
  );
  }}
@@ -131,7 +131,7 @@ const Remote = (props) => {
  htmlFor="accountId"
  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"
  >
- Account ID {remote.accountId.length > 1 && <>{'\u2705'}</>}
+ Account ID {remote.accountId.length > 1 && <>{"\u2705"}</>}
  </label>
  </div>
  )}
@@ -144,7 +144,7 @@ const Remote = (props) => {
  </div>
  )}
 
- {remote.selectedBucket && remoteType === 'destination' ? (
+ {remote.selectedBucket && remoteType === "destination" ? (
  <StartMigrationButton></StartMigrationButton>
  ) : null}
  </div>

client/components/RemoteContainer.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import RemoteSelection from './RemoteSelection';
-import Remote from './Remote';
+import React from "react";
+import { useSelector } from "react-redux";
+import RemoteSelection from "./RemoteSelection";
+import Remote from "./Remote";
 
 export const RemoteContainer = (props) => {
  const { origin, destination } = useSelector((state) => state.GUI);
@@ -11,10 +11,10 @@ export const RemoteContainer = (props) => {
  <div className="grid grid-rows-1 grid-cols-2 mx-32 my-16 p-6">
  <div className="mx-20 my-8">
  {!origin.name ? (
- <RemoteSelection source={'Origin'}></RemoteSelection>
+ <RemoteSelection source={"Origin"}></RemoteSelection>
  ) : (
  <Remote
- remoteType={'origin'}
+ remoteType={"origin"}
  accessIdHandler={accessIdHandler}
  secretKeyHandler={secretKeyHandler}
  displayName={origin.displayName}
@@ -24,10 +24,10 @@ export const RemoteContainer = (props) => {
 
  <div className="mx-20 my-8">
  {!destination.name ? (
- <RemoteSelection source={'Destinaton'}></RemoteSelection>
+ <RemoteSelection source={"Destinaton"}></RemoteSelection>
  ) : (
  <Remote
- remoteType={'destination'}
+ remoteType={"destination"}
  accessIdHandler={accessIdHandler}
  secretKeyHandler={secretKeyHandler}
  displayName={destination.displayName}
@@ -46,20 +46,20 @@ const accessIdHandler = (e, remote) => {
  );
  const isCloudflareAccessId = /^[a-z0-9]{32}$/.test(accessId);
  const isMicrosoftAccessId =
- remote.name === 'azureblob' && !isAmazonAccessId && !isCloudflareAccessId
+ remote.name === "azureblob" && !isAmazonAccessId && !isCloudflareAccessId
  ? true
  : false;
  if (isAmazonAccessId || isCloudflareAccessId || isMicrosoftAccessId) {
  return {
  ...remote,
  accessId: accessId.trim(),
- errorField: ''
+ errorField: "",
  };
  } else {
  //this should probably just return a red check mark
  return {
  ...remote,
- accessId: ''
+ accessId: "",
  };
  }
 };
@@ -74,13 +74,13 @@ const secretKeyHandler = (e, remote) => {
  return {
  ...remote,
  secretKey: secretKey.trim(),
- errorField: ''
+ errorField: "",
  };
  } else {
  //this should probably just return a red check mark
  return {
  ...remote,
- secretKey: ''
+ secretKey: "",
  };
  }
 };

client/components/RemoteSelection.js

@@ -1,36 +1,42 @@
-import React from 'react';
-import { useDispatch } from 'react-redux';
+import React from "react";
+import { useDispatch } from "react-redux";
 
-import awsIcon from '../public/aws_edited.png'
-import cloudflareIcon from '../public/cloudflare_edited.png'
-import {updateRemoteName} from '../slice'
+import awsIcon from "../public/aws_edited.png";
+import cloudflareIcon from "../public/cloudflare_edited.png";
+import { updateRemoteName } from "../slice";
 
 const RemoteSelection = (props) => {
-  const dispatch = useDispatch()
-  const {source} = props
+ const dispatch = useDispatch();
+ const { source } = props;
 
  const changeSourceHandler = (e) => {
  const displayNames = {
- azureblob: 'Microsoft Storage Container', 
- Cloudflare: 'Cloudflare R2',
- AWS: 'Amazon S3'
- }
- 
+ azureblob: "Microsoft Storage Container",
+ Cloudflare: "Cloudflare R2",
+ AWS: "Amazon S3",
+ };
+
  const name = e.target.id;
- const displayName = displayNames[name]
- 
-  dispatch(updateRemoteName({name, source, displayName}))
- }
+ const displayName = displayNames[name];
+
+ dispatch(updateRemoteName({ name, source, displayName }));
+ };
 
  return (
  <>
- <h1>{props.source}</h1>
- <button typeof='button' onClick={changeSourceHandler}><img id='AWS' src={awsIcon} alt='aws'></img>AWS</button>
- <button typeof='button' onClick={changeSourceHandler}><img id='Cloudflare' src={cloudflareIcon} alt='cloudflare'></img>Cloudflare</button>
- <button typeof='button' onClick={changeSourceHandler}><img id='azureblob' src={awsIcon} alt='azure'></img>MS Azure</button>
+ <h1>{props.source}</h1>
+ <button typeof="button" onClick={changeSourceHandler}>
+ <img id="AWS" src={awsIcon} alt="aws"></img>AWS
+ </button>
+ <button typeof="button" onClick={changeSourceHandler}>
+ <img id="Cloudflare" src={cloudflareIcon} alt="cloudflare"></img>
+ Cloudflare
+ </button>
+ <button typeof="button" onClick={changeSourceHandler}>
+ <img id="azureblob" src={awsIcon} alt="azure"></img>MS Azure
+ </button>
  </>
-
- )
+ );
 };
 
 export default RemoteSelection;