oslabs-beta · mjhuff · Apr 13, 2023 · Apr 13, 2023 · Apr 13, 2023 · Apr 13, 2023
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["@babel/preset-env","@babel/preset-react"]
-}
+ "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
diff --git a/.github/workflows/code-format.yml b/.github/workflows/code-format.yml
@@ -0,0 +1,21 @@
+name: Format Code
+
+on:
+ pull_request: 
+ types: [opened, edited, reopened]
+
+jobs:
+ prettier:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
+ with:
+ # Make sure the actual branch is checked out when running on pull requests
+ ref: ${{ github.head_ref }}
+
+ - name: Prettify code
+ uses: creyD/[email protected]
+ with:
+ prettier_options: --write **/*.{js,md}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
-rclone.conf
+rclone.conf
+build/
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# CloudShift
+# CloudShift
diff --git a/build/index.html b/build/index.html
@@ -1,20 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Cloud Shift</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <!-- not sure about stylesheet include with tailwind <link rel="stylesheet" href="style.scss" /> -->
+ <script defer src="index_bundle.js"></script>
+ </head>
 
-<head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Cloud Shift</title>
- <script src="https://cdn.tailwindcss.com"></script>
- <!-- not sure about stylesheet include with tailwind <link rel="stylesheet" href="style.scss" /> -->
-<script defer src="index_bundle.js"></script></head>
-
-<body class="bg-gradient-to-br from-emerald-100 to-purple-300 !h-screen">
-
-
- <div id="root"></div>
- <div id="portal"></div>
-</body>
-
-</html>
+ <body class="bg-gradient-to-br from-emerald-100 to-purple-300 !h-screen">
+ <div id="root"></div>
+ <div id="portal"></div>
+ </body>
+</html>
diff --git a/build/index_bundle.js b/build/index_bundle.js
diff --git a/client/App.js b/client/App.js
@@ -1,12 +1,12 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { RemoteContainer } from './components/RemoteContainer';
-import Overlay from './components/Overlay';
-import { socket } from './socket';
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { RemoteContainer } from "./components/RemoteContainer";
+import Overlay from "./components/Overlay";
+import { socket } from "./socket";
 import {
  updateDataTransferProgressPercent,
- updateSocketConnectivity
-} from './slice';
+ updateSocketConnectivity,
+} from "./slice";
 //import styles if necessary
 //may need to import functions from slices here
 
@@ -27,18 +27,18 @@ const App = () => {
 
  function onDataTransfer(value) {
  //Don't update value if it isn't a valid increase.
- if (value === '') return;
+ if (value === "") return;
  dispatch(updateDataTransferProgressPercent(value));
  }
 
- socket.on('connect', onConnect);
- socket.on('disconnect', onDisconnect);
- socket.on('data transfer', onDataTransfer);
+ 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);
+ socket.off("connect", onConnect);
+ socket.off("disconnect", onDisconnect);
+ socket.off("data transfer", onDataTransfer);
  };
  }, []);
 
@@ -47,7 +47,12 @@ const App = () => {
  <div className="nav flex items-center justify-between mr-36 ml-20 p-6 text-xl ">
  <div>CloudShift</div>
  <div>
- <a target='_blank' href="https://github.com/oslabs-beta/CloudShift/blob/dev/README.md">ReadMe</a>
+ <a
+ target="_blank"
+ href="https://github.com/oslabs-beta/CloudShift/blob/dev/README.md"
+ >
+ ReadMe
+ </a>
  </div>
  </div>
  <RemoteContainer></RemoteContainer>

diff --git a/client/components/BucketSelect.js b/client/components/BucketSelect.js
@@ -1,7 +1,7 @@
-import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { updateSelectedBucket } from '../slice';
-import LoadingButton from './LoadingButton';
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { updateSelectedBucket } from "../slice";
+import LoadingButton from "./LoadingButton";
 
 const BucketSelect = (props) => {
  const dispatch = useDispatch();
@@ -33,7 +33,7 @@ const BucketSelect = (props) => {
  onChange={(e) => {
  const payload = {
  bucket: e.target.value,
- remote: props.remote
+ remote: props.remote,
  };
  dispatch(updateSelectedBucket(payload));
  }}

diff --git a/client/components/Destination.js b/client/components/Destination.js
@@ -1,77 +1,81 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 import {
  updateDestinationAccessId,
  updateDestinationSecretKey,
- updateAccountId
-} from '../slice';
-import { getUserBuckets } from '../services/getBuckets';
-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 MigrationButton from './MigrationButton';
-import ErrorComponent from './ErrorComponent';
+ updateAccountId,
+} from "../slice";
+import { getUserBuckets } from "../services/getBuckets";
+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 MigrationButton from "./MigrationButton";
+import ErrorComponent from "./ErrorComponent";
 
 const Destination = (props) => {
  const dispatch = useDispatch();
  const { origin, destination } = useSelector((state) => state.GUI);
 
  let bucketSelect;
 
- const requireAccountId = props.name === 'Cloudflare' ? true : false;
+ const requireAccountId = props.name === "Cloudflare" ? true : false;
 
  if (!requireAccountId) {
  bucketSelect = destination.accessId && destination.secretKey && (
- <BucketSelect remote={'destination'}></BucketSelect>
+ <BucketSelect remote={"destination"}></BucketSelect>
  );
  } else {
  bucketSelect = destination.accessId &&
  destination.secretKey &&
  destination.accountId && (
- <BucketSelect remote={'destination'}></BucketSelect>
+ <BucketSelect remote={"destination"}></BucketSelect>
  );
  }
 
  useEffect(() => {
  if (!destination.accessId || !destination.secretKey) return;
- if (destination.name === 'Cloudflare' && !destination.accountId) return;
+ if (destination.name === "Cloudflare" && !destination.accountId) return;
  dispatch(
- getUserBuckets({ ...destination, originOrDestination: 'destination' })
+ getUserBuckets({ ...destination, originOrDestination: "destination" })
  );
  }, [
  destination.accessId,
  destination.secretKey,
  destination.name,
- destination.accountId
+ destination.accountId,
  ]);
 
  return (
  <div>
  <div className="relative z-0 w-full h-full mb-6 group">
- <div class="grid grid-cols-3 gap-2">
- <div class="mx-auto text-sm flex items-center font-mono">
- Destination
- {props.name && (
- <>
- : {props.name} {props.service}
- </>
- )}
- </div>
- <div>
- <img
- class={`flex items-center mx-auto object-scale-down h-8 w-8 ${props.name === "Cloudflare" ? "" : "grayscale"}`}
- // src={props.name === 'AWS' ? aws_edited : cloudflare_edited}
- src={cloudflare_edited}
- />
- </div>
- <div>
- <img
- class={`flex items-center mx-auto object-scale-down h-8 w-8 ${props.name === "AWS" ? "" : "grayscale"}`}
- // src={props.name === 'AWS' ? aws_edited : cloudflare_edited}
- src={aws_edited}
- />
- </div>
+ <div class="grid grid-cols-3 gap-2">
+ <div class="mx-auto text-sm flex items-center font-mono">
+ Destination
+ {props.name && (
+ <>
+ : {props.name} {props.service}
+ </>
+ )}
  </div>
+ <div>
+ <img
+ class={`flex items-center mx-auto object-scale-down h-8 w-8 ${
+ props.name === "Cloudflare" ? "" : "grayscale"
+ }`}
+ // src={props.name === 'AWS' ? aws_edited : cloudflare_edited}
+ src={cloudflare_edited}
+ />
+ </div>
+ <div>
+ <img
+ class={`flex items-center mx-auto object-scale-down h-8 w-8 ${
+ props.name === "AWS" ? "" : "grayscale"
+ }`}
+ // src={props.name === 'AWS' ? aws_edited : cloudflare_edited}
+ src={aws_edited}
+ />
+ </div>
+ </div>
  </div>
 
  <div className="relative z-0 w-full h-full mb-6 group">
@@ -91,7 +95,7 @@ const Destination = (props) => {
  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'}</> : <></>}
+ Access ID{destination.accessId ? <>{" \u2705"}</> : <></>}
  </label>
  </div>
 
@@ -113,11 +117,11 @@ const Destination = (props) => {
  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'}</> : <></>}
+ Secret Key{destination.secretKey ? <>{" \u2705"}</> : <></>}
  </label>
  </div>
 
- {props.name === 'Cloudflare' && (
+ {props.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"
@@ -140,15 +144,17 @@ const Destination = (props) => {
  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"
  >
- Account ID {destination.accountId.length > 1 && <>{'\u2705'}</>}
+ Account ID {destination.accountId.length > 1 && <>{"\u2705"}</>}
  </label>
  </div>
  )}
 
  {destination.errorMessage ? (
  <ErrorComponent></ErrorComponent>
  ) : (
- <div className="relative z-0 w-full h-full mb-6 group">{bucketSelect}</div>
+ <div className="relative z-0 w-full h-full mb-6 group">
+ {bucketSelect}
+ </div>
  )}
 
  <div className="relative z-0 w-full h-full mb-6 group">

diff --git a/client/components/ErrorComponent.js b/client/components/ErrorComponent.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
+import React from "react";
+import { useSelector } from "react-redux";
 
 const ErrorComponent = () => {
  const { origin, destination } = useSelector((state) => state.GUI);

diff --git a/client/components/LoadingButton.js b/client/components/LoadingButton.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
 
 const LoadingButton = () => {
  return (

diff --git a/client/components/MigrationButton.js b/client/components/MigrationButton.js
@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { migrationStatusChange } from '../slice.js';
-import { migrateData } from '../services/migrate.js';
+import React, { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { migrationStatusChange } from "../slice.js";
+import { migrateData } from "../services/migrate.js";
 
 const StartMigrationButton = () => {
  const dispatch = useDispatch();