Working progress bar

client/App.js

@@ -1,7 +1,6 @@
-import React, { useState, useEffect } 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 {
@@ -11,14 +10,12 @@ import {
 //import styles if necessary
 //may need to import functions from slices here
 
-const App = (props) => {
+const App = () => {
  const dispatch = useDispatch();
- const { isMigrating, origin, destination } = useSelector(
- (state) => state.GUI
- );
+ const { isMigrating } = useSelector((state) => state.GUI);
 
  //Basic client socket.io connection.
- //MAY NEED TO SHIFT THIS LOGIC INTO THE COMPONENT WE NEED.
+ //MAY NEED TO SHIFT THIS LOGIC INTO THE COMPONENT WE NEED?
  useEffect(() => {
  function onConnect() {
  dispatch(updateSocketConnectivity(true));
@@ -59,4 +56,4 @@ const App = (props) => {
  );
 };
 
-export default App;
+export default App;

client/components/MigrationButton.js

@@ -35,7 +35,6 @@ const StartMigrationButton = () => {
  },
  body: JSON.stringify(body)
  });
- dispatch(migrationStatusChange(false));
  })();
  }, [isMigrating]);
 

client/components/ProgressBar.js

@@ -1,26 +1,42 @@
-import React from 'react'
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { migrationStatusChange } from '../slice';
 
 const ProgressBar = () => {
+ const dispatch = useDispatch();
+ const { socket } = useSelector((state) => state.GUI);
+ const transferVal = socket.dataTransferProgressPercent.length
+ ? `${socket.dataTransferProgressPercent}%`
+ : '0%';
 
- return (
+ //Flip migrating back to false if download complete.
+ useEffect(() => {
+ if (socket.dataTransferProgressPercent === '100')
+ dispatch(migrationStatusChange(false));
+ }, [socket.dataTransferProgressPercent]);
+
+ return (
  <div className="relative pt-1 w-2/5 ">
- <div className="flex mb-2 items-center justify-between">
- <div>
- <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-stone-100 bg-emerald-300">
- Task in progress
- </span>
- </div>
- <div className="text-right">
- <span className="text-xs font-semibold inline-block text-black-600">
- 30%
- </span>
+ <div className="flex mb-2 items-center justify-between">
+ <div>
+ <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-stone-100 bg-emerald-300">
+ Task in progress
+ </span>
+ </div>
+ <div className="text-right">
+ <span className="text-xs font-semibold inline-block text-black-600">
+ {transferVal}
+ </span>
+ </div>
+ </div>
+ <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-100 w-full">
+ <div
+ style={{ width: transferVal }}
+ className={`shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-300`}
+ ></div>
+ </div>
  </div>
- </div>
- <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-100 w-full">
- <div style={{ width: "30%" }} className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-300"></div>
- </div>
-</div>
- )
-}
+ );
+};
 
-export default ProgressBar
+export default ProgressBar;

server/services/rcloneCopyString.js

@@ -9,7 +9,6 @@ const rcloneCopyString = (fullString) => {
  let first = fullString.indexOf('Transferred:');
  let second = fullString.indexOf('Transferred:', first + 1);
  const slicedStr = fullString.slice(first, second);
- console.log(slicedStr);
  //Now get the overall percentage as the number.
  first = slicedStr.indexOf(',');
  second = slicedStr.indexOf('%');