Prettified Code!

client/App.js

@@ -1,13 +1,13 @@
-import React, { useEffect } from 'react';
-import './app.css';
-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 "./app.css";
+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
 
@@ -28,18 +28,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);
  };
  }, []);
 

client/components/Origin.js

@@ -1,37 +1,37 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 import {
  updateOriginSecretKey,
  updateOriginAccessId,
- updateAccountId
-} from '../slice';
-import { useDispatch, useSelector } from 'react-redux';
-import { getUserBuckets } from '../services/getBuckets';
-import BucketSelect from './BucketSelect';
-import aws_edited from '../public/aws_edited.png';
-import cloudflare_edited from '../public/cloudflare_edited.png';
-import ErrorComponent from './ErrorComponent';
+ updateAccountId,
+} from "../slice";
+import { useDispatch, useSelector } from "react-redux";
+import { getUserBuckets } from "../services/getBuckets";
+import BucketSelect from "./BucketSelect";
+import aws_edited from "../public/aws_edited.png";
+import cloudflare_edited from "../public/cloudflare_edited.png";
+import ErrorComponent from "./ErrorComponent";
 
 const Origin = (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 = origin.accessId && origin.secretKey && (
- <BucketSelect remote={'origin'}></BucketSelect>
+ <BucketSelect remote={"origin"}></BucketSelect>
  );
  } else {
  bucketSelect = origin.accessId && origin.secretKey && origin.accountId && (
- <BucketSelect remote={'origin'}></BucketSelect>
+ <BucketSelect remote={"origin"}></BucketSelect>
  );
  }
 
  //Get the list of buckets if all credentials are present.
  useEffect(() => {
  if (!origin.accessId || !origin.secretKey) return;
- if (origin.name === 'Cloudflare' && !origin.accountId) return;
- dispatch(getUserBuckets({ ...origin, originOrDestination: 'origin' }));
+ if (origin.name === "Cloudflare" && !origin.accountId) return;
+ dispatch(getUserBuckets({ ...origin, originOrDestination: "origin" }));
  }, [origin.accessId, origin.secretKey, origin.name, origin.accountId]);
 
  return (
@@ -49,7 +49,7 @@ const Origin = (props) => {
  <div>
  <img
  class={`flex items-center mx-auto object-scale-down h-8 w-8 ${
- props.name === 'Cloudflare' ? '' : 'grayscale'
+ props.name === "Cloudflare" ? "" : "grayscale"
  }`}
  // src={props.name === 'AWS' ? aws_edited : cloudflare_edited}
  src={cloudflare_edited}
@@ -59,7 +59,7 @@ const Origin = (props) => {
  <div>
  <img
  class={`flex items-center mx-auto object-scale-down h-8 w-8 ${
- props.name === 'AWS' ? '' : 'grayscale'
+ props.name === "AWS" ? "" : "grayscale"
  }`}
  // src={props.name === 'AWS' ? aws_edited : cloudflare_edited}
  src={aws_edited}
@@ -89,7 +89,7 @@ const Origin = (props) => {
  htmlFor="originAccessId"
  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{origin.accessId ? <>{' \u2705'}</> : <></>}
+ Access ID{origin.accessId ? <>{" \u2705"}</> : <></>}
  </label>
  </div>
 
@@ -111,11 +111,11 @@ const Origin = (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"
  >
- Secret Key{origin.secretKey ? <>{' \u2705'}</> : <></>}
+ Secret Key{origin.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"
@@ -138,7 +138,7 @@ const Origin = (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 {origin.accountId.length > 1 && <>{'\u2705'}</>}
+ Account ID {origin.accountId.length > 1 && <>{"\u2705"}</>}
  </label>
  </div>
  )}

postcss.config.js

@@ -1,6 +1,6 @@
-const tailwindcss = require('tailwindcss');
-const autoprefixer = require('autoprefixer');
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
 
 module.exports = {
- plugins: [tailwindcss('./tailwind.config.js'), autoprefixer]
+ plugins: [tailwindcss("./tailwind.config.js"), autoprefixer],
 };

server/server.js

@@ -1,39 +1,39 @@
-const path = require('path');
-const express = require('express');
-const fsController = require('./controllers/fsController.js');
+const path = require("path");
+const express = require("express");
+const fsController = require("./controllers/fsController.js");
 const {
  rCloneCopyController,
- rcloneListBuckets
-} = require('./controllers/rcloneController');
+ rcloneListBuckets,
+} = require("./controllers/rcloneController");
 const {
  assignVariablesForFS,
- getBucketLoc
-} = require('./controllers/assignController.js');
-const resetAWSConfig = require('./controllers/resetAWSController.js');
-const { rcloneCopyString } = require('./services/rcloneCopyString.js');
+ getBucketLoc,
+} = require("./controllers/assignController.js");
+const resetAWSConfig = require("./controllers/resetAWSController.js");
+const { rcloneCopyString } = require("./services/rcloneCopyString.js");
 const app = express();
-const http = require('http');
+const http = require("http");
 const server = http.createServer(app);
-const { Server } = require('socket.io');
+const { Server } = require("socket.io");
 const io = new Server(server, {
  cors: {
- origin: '*'
- }
+ origin: "*",
+ },
 });
 
 app.use(express.json());
 
 const servePath =
- process.env.NODE_ENV === 'development' ? '../client/public' : '../build';
+ process.env.NODE_ENV === "development" ? "../client/public" : "../build";
 
 app.use(express.static(path.resolve(__dirname, servePath)));
 
-app.post('/listBuckets', resetAWSConfig, rcloneListBuckets, (req, res) => {
+app.post("/listBuckets", resetAWSConfig, rcloneListBuckets, (req, res) => {
  return res.status(200).json(res.locals.buckets);
 });
 
 app.post(
- '/transfer',
+ "/transfer",
  resetAWSConfig,
  getBucketLoc,
  assignVariablesForFS,
@@ -42,32 +42,32 @@ app.post(
  (req, res) => {
  //If a string ever returns 'access denied', pass that to the client.
  let isAccessDenied = false;
- res.locals.rcloneCopy.stdout.on('data', (data) => {
+ res.locals.rcloneCopy.stdout.on("data", (data) => {
  if (isAccessDenied) return;
  const relevantString = rcloneCopyString(data.toString());
- if (relevantString === 'accessDenied') isAccessDenied = true;
- io.emit('data transfer', relevantString);
+ if (relevantString === "accessDenied") isAccessDenied = true;
+ io.emit("data transfer", relevantString);
  });
  return res.sendStatus(200);
  }
 );
 
-app.get('/removeConfig', fsController.removeConfig, (req, res) => {
+app.get("/removeConfig", fsController.removeConfig, (req, res) => {
  return res.sendStatus(200);
 });
 
 //Redirect if there's any request to a page that doesn't exist.
-app.get('*', (req, res) => {
- return res.redirect('/');
+app.get("*", (req, res) => {
+ return res.redirect("/");
 });
 
 //GLOBAL ERROR HANDLER NEEDED.
 app.use((err, req, res, next) => {
  const defaultErr = {
- log: 'Express error handler caught unknown middleware error',
+ log: "Express error handler caught unknown middleware error",
  status: 500,
- message: { err: 'An error occurred' },
- field: ''
+ message: { err: "An error occurred" },
+ field: "",
  };
  const errorObj = Object.assign({}, defaultErr, err);
  console.log(errorObj.log);
@@ -76,6 +76,6 @@ app.use((err, req, res, next) => {
  .json({ message: errorObj.message, field: errorObj.field });
 });
 
-server.listen(3000, () => console.log('Serving listening on port 3000...'));
+server.listen(3000, () => console.log("Serving listening on port 3000..."));
 
 module.exports = { io };

tailwind.config.js

@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
- content: ['./client/**/*.{js,jsx}', './public/index.html'],
+ content: ["./client/**/*.{js,jsx}", "./public/index.html"],
  theme: {
- extend: {}
+ extend: {},
  },
- plugins: []
+ plugins: [],
 };

webpack.config.js

@@ -1,57 +1,57 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const path = require('path');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
 
 module.exports = {
- entry: './client/index.js',
- mode: 'development',
+ entry: "./client/index.js",
+ mode: "development",
  output: {
- path: path.resolve(__dirname, './build'),
- filename: 'index_bundle.js'
+ path: path.resolve(__dirname, "./build"),
+ filename: "index_bundle.js",
  },
- target: 'web',
+ target: "web",
  devServer: {
- port: '8080',
+ port: "8080",
  proxy: {
- '/': 'http:https://localhost:3000'
+ "/": "http:https://localhost:3000",
  },
  static: {
- directory: path.join(__dirname, './client/public')
+ directory: path.join(__dirname, "./client/public"),
  },
  open: true,
  hot: true,
- liveReload: true
+ liveReload: true,
  },
  resolve: {
- extensions: ['.js', '.jsx', '.json']
+ extensions: [".js", ".jsx", ".json"],
  },
  module: {
  rules: [
  {
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
- use: 'babel-loader'
+ use: "babel-loader",
  },
  {
  test: /\.(gif|png|jpe?g)$/,
  use: [
  {
- loader: 'file-loader',
+ loader: "file-loader",
  options: {
- name: '[name].[ext]',
- outputPath: 'assets/images/'
- }
- }
- ]
+ name: "[name].[ext]",
+ outputPath: "assets/images/",
+ },
+ },
+ ],
  },
  {
  test: /\.css$/i,
- use: ['style-loader', 'css-loader', 'postcss-loader']
- }
- ]
+ use: ["style-loader", "css-loader", "postcss-loader"],
+ },
+ ],
  },
  plugins: [
  new HtmlWebpackPlugin({
- template: path.resolve(__dirname, './client/public/index.html')
- })
- ]
+ template: path.resolve(__dirname, "./client/public/index.html"),
+ }),
+ ],
 };