- loader + delay

crfmc · crfmc · commit 05b0b8e79070 · 2021-04-09T07:40:08.000-04:00
- copytoclipboard
diff --git a/.eslintcache b/.eslintcache
@@ -1 +1 @@
-[{"/Users/ironman/Desktop/FileOvr/src/index.js":"1","/Users/ironman/Desktop/FileOvr/src/components/Ovr.js":"2","/Users/ironman/Desktop/FileOvr/src/components/TopBar.js":"3","/Users/ironman/Desktop/FileOvr/src/components/Down.js":"4","/Users/ironman/Desktop/FileOvr/src/components/Up.js":"5","/Users/ironman/Desktop/FileOvr/src/App.js":"6","/Users/ironman/Desktop/FileOvr/src/reportWebVitals.js":"7","/Users/ironman/Desktop/FileOvr/src/components/Pouch.js":"8","/Users/ironman/Desktop/FileOvr/src/components/DragNDrop.js":"9"},{"size":500,"mtime":1613856732928,"results":"10","hashOfConfig":"11"},{"size":12371,"mtime":1615347666908,"results":"12","hashOfConfig":"13"},{"size":890,"mtime":1614541607804,"results":"14","hashOfConfig":"13"},{"size":1476,"mtime":1615338440333,"results":"15","hashOfConfig":"13"},{"size":1514,"mtime":1617965619475,"results":"16","hashOfConfig":"13"},{"size":161,"mtime":1615148943420,"results":"17","hashOfConfig":"13"},{"size":362,"mtime":1613856732929,"results":"18","hashOfConfig":"13"},{"size":2054,"mtime":1617965255922,"results":"19","hashOfConfig":"13"},{"size":2199,"mtime":1617963748199,"results":"20","hashOfConfig":"13"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"14lgwgo",{"filePath":"23","messages":"24","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"at8weu",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"27"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"27"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/ironman/Desktop/FileOvr/src/index.js",[],"/Users/ironman/Desktop/FileOvr/src/components/Ovr.js",["41","42","43"],"/Users/ironman/Desktop/FileOvr/src/components/TopBar.js",[],["44","45"],"/Users/ironman/Desktop/FileOvr/src/components/Down.js",[],"/Users/ironman/Desktop/FileOvr/src/components/Up.js",[],"/Users/ironman/Desktop/FileOvr/src/App.js",[],["46","47"],"/Users/ironman/Desktop/FileOvr/src/reportWebVitals.js",[],"/Users/ironman/Desktop/FileOvr/src/components/Pouch.js",[],"/Users/ironman/Desktop/FileOvr/src/components/DragNDrop.js",[],{"ruleId":"48","severity":1,"message":"49","line":15,"column":9,"nodeType":"50","messageId":"51","endLine":15,"endColumn":29},{"ruleId":"48","severity":1,"message":"52","line":20,"column":9,"nodeType":"50","messageId":"51","endLine":20,"endColumn":34},{"ruleId":"48","severity":1,"message":"53","line":27,"column":9,"nodeType":"50","messageId":"51","endLine":27,"endColumn":32},{"ruleId":"54","replacedBy":"55"},{"ruleId":"56","replacedBy":"57"},{"ruleId":"54","replacedBy":"58"},{"ruleId":"56","replacedBy":"59"},"no-unused-vars","'baseStyle_sendButton' is assigned a value but never used.","Identifier","unusedVar","'slideLeftStyle_sendButton' is assigned a value but never used.","'baseStyle_receiveButton' is assigned a value but never used.","no-native-reassign",["60"],"no-negated-in-lhs",["61"],["60"],["61"],"no-global-assign","no-unsafe-negation"]
+[{"/Users/ironman/Desktop/FileOvr/src/index.js":"1","/Users/ironman/Desktop/FileOvr/src/components/Ovr.js":"2","/Users/ironman/Desktop/FileOvr/src/components/TopBar.js":"3","/Users/ironman/Desktop/FileOvr/src/components/Down.js":"4","/Users/ironman/Desktop/FileOvr/src/components/Up.js":"5","/Users/ironman/Desktop/FileOvr/src/App.js":"6","/Users/ironman/Desktop/FileOvr/src/reportWebVitals.js":"7","/Users/ironman/Desktop/FileOvr/src/components/Pouch.js":"8","/Users/ironman/Desktop/FileOvr/src/components/DragNDrop.js":"9"},{"size":500,"mtime":1613856732928,"results":"10","hashOfConfig":"11"},{"size":12371,"mtime":1615347666908,"results":"12","hashOfConfig":"13"},{"size":890,"mtime":1614541607804,"results":"14","hashOfConfig":"13"},{"size":1476,"mtime":1615338440333,"results":"15","hashOfConfig":"13"},{"size":2446,"mtime":1617968338791,"results":"16","hashOfConfig":"13"},{"size":161,"mtime":1615148943420,"results":"17","hashOfConfig":"13"},{"size":362,"mtime":1613856732929,"results":"18","hashOfConfig":"13"},{"size":2054,"mtime":1617965255922,"results":"19","hashOfConfig":"13"},{"size":2199,"mtime":1617963748199,"results":"20","hashOfConfig":"13"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"14lgwgo",{"filePath":"23","messages":"24","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"at8weu",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"27"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"27"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/ironman/Desktop/FileOvr/src/index.js",[],"/Users/ironman/Desktop/FileOvr/src/components/Ovr.js",["41","42","43"],"/Users/ironman/Desktop/FileOvr/src/components/TopBar.js",[],["44","45"],"/Users/ironman/Desktop/FileOvr/src/components/Down.js",[],"/Users/ironman/Desktop/FileOvr/src/components/Up.js",[],"/Users/ironman/Desktop/FileOvr/src/App.js",[],["46","47"],"/Users/ironman/Desktop/FileOvr/src/reportWebVitals.js",[],"/Users/ironman/Desktop/FileOvr/src/components/Pouch.js",[],"/Users/ironman/Desktop/FileOvr/src/components/DragNDrop.js",[],{"ruleId":"48","severity":1,"message":"49","line":15,"column":9,"nodeType":"50","messageId":"51","endLine":15,"endColumn":29},{"ruleId":"48","severity":1,"message":"52","line":20,"column":9,"nodeType":"50","messageId":"51","endLine":20,"endColumn":34},{"ruleId":"48","severity":1,"message":"53","line":27,"column":9,"nodeType":"50","messageId":"51","endLine":27,"endColumn":32},{"ruleId":"54","replacedBy":"55"},{"ruleId":"56","replacedBy":"57"},{"ruleId":"54","replacedBy":"58"},{"ruleId":"56","replacedBy":"59"},"no-unused-vars","'baseStyle_sendButton' is assigned a value but never used.","Identifier","unusedVar","'slideLeftStyle_sendButton' is assigned a value but never used.","'baseStyle_receiveButton' is assigned a value but never used.","no-native-reassign",["60"],"no-negated-in-lhs",["61"],["60"],["61"],"no-global-assign","no-unsafe-negation"]
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "framer-motion": "^3.2.2-rc.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-loader-spinner": "^4.0.0",
     "react-scripts": "4.0.1",
     "web-vitals": "^0.2.4"
   },
diff --git a/src/components/Up.js b/src/components/Up.js
@@ -1,7 +1,9 @@
 import React, { Component } from "react";
 import styles from "../styles/up.module.css";
 import { motion } from "framer-motion";
-import Pouch from "./Pouch"
+import Loader from "react-loader-spinner";
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+import Pouch from "./Pouch";
 
 export default class Send extends Component
 {
@@ -10,22 +12,41 @@ export default class Send extends Component
     super(props)
     this.state = {
       subfile: {},
-      code: ""
+      code: "",
+      waiting: false
     }
   }
 
   handleSub = (sub) =>
   {
     this.setState({
       subfile: sub
+    })
+    this.showLoading()
+    setTimeout(() => {
+      this.setState({
+      code: sub.name,
+      waiting: false
     },
-    console.log(sub))
+    console.log(sub))}, 2000)
 
   }
+
+  showLoading() {
+    this.setState({
+      waiting: true
+    })
+  }
+
+  codeToClipboard = () => {
+    const el = this.textArea
+    el.select()
+    document.execCommand("copy")
+  }
   
   render()
   {
-    if (this.state.subfile.name)
+    if (this.state.waiting)
     {
       return (
         <>
@@ -35,13 +56,38 @@ export default class Send extends Component
             <h1>
               {this.state.subfile.name}
             </h1>
-            <h2>
-              Loading...
-            </h2>
+            <Loader
+              type="Oval"
+              color="#4d4d4d"
+              height={100}
+              width={100}
+            // timeout={3000}
+            />
           </div>
         </>
       );
     }
+    else if (this.state.code)
+    {
+      return (
+        <div className={styles.upload_file}>
+          <div className={styles.code_from_upload_container}>
+            <h2>Step 2: Copy your code</h2>
+            <textarea
+              className={styles.code_from_upload}
+              ref={(textarea) => this.textArea = textarea}
+              value={this.state.code}
+              readOnly
+            />
+            <button
+              onClick={() => this.codeToClipboard()}
+            >
+              Copy
+            </button>
+          </div>
+        </div>
+      );
+    }
     else {
       return (
         <>
@@ -61,10 +107,6 @@ export default class Send extends Component
               <h2 className={styles.up_subtext}>Step 1: Drop your file here</h2>
               <Pouch onSub={this.handleSub}/>
             </div>
-            <div className={styles.code_from_upload_container}>
-              <h2>Step 2: Copy your code</h2>
-              <h4 className={styles.code_from_upload}>{this.state.code}</h4>
-            </div>
           </motion.div>
         </>
       );
diff --git a/yarn.lock b/yarn.lock
@@ -8939,6 +8939,13 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-loader-spinner@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz#43d9e71b0574219f64216933c28ef5faa12262f6"
+  integrity sha512-RU2vpEej6G4ECei0h3q6bgLU10of9Lw5O+4AwF/mtkrX5oY20Sh/AxoPJ7etbrs/7Q3u4jN5qwCwGLRKCHpk6g==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz"

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-[{"/Users/ironman/Desktop/FileOvr/src/index.js":"1","/Users/ironman/Desktop/FileOvr/src/components/Ovr.js":"2","/Users/ironman/Desktop/FileOvr/src/components/TopBar.js":"3","/Users/ironman/Desktop/FileOvr/src/components/Down.js":"4","/Users/ironman/Desktop/FileOvr/src/components/Up.js":"5","/Users/ironman/Desktop/FileOvr/src/App.js":"6","/Users/ironman/Desktop/FileOvr/src/reportWebVitals.js":"7","/Users/ironman/Desktop/FileOvr/src/components/Pouch.js":"8","/Users/ironman/Desktop/FileOvr/src/components/DragNDrop.js":"9"},{"size":500,"mtime":1613856732928,"results":"10","hashOfConfig":"11"},{"size":12371,"mtime":1615347666908,"results":"12","hashOfConfig":"13"},{"size":890,"mtime":1614541607804,"results":"14","hashOfConfig":"13"},{"size":1476,"mtime":1615338440333,"results":"15","hashOfConfig":"13"},{"size":1514,"mtime":1617965619475,"results":"16","hashOfConfig":"13"},{"size":161,"mtime":1615148943420,"results":"17","hashOfConfig":"13"},{"size":362,"mtime":1613856732929,"results":"18","hashOfConfig":"13"},{"size":2054,"mtime":1617965255922,"results":"19","hashOfConfig":"13"},{"size":2199,"mtime":1617963748199,"results":"20","hashOfConfig":"13"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"14lgwgo",{"filePath":"23","messages":"24","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"at8weu",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"27"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"27"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/ironman/Desktop/FileOvr/src/index.js",[],"/Users/ironman/Desktop/FileOvr/src/components/Ovr.js",["41","42","43"],"/Users/ironman/Desktop/FileOvr/src/components/TopBar.js",[],["44","45"],"/Users/ironman/Desktop/FileOvr/src/components/Down.js",[],"/Users/ironman/Desktop/FileOvr/src/components/Up.js",[],"/Users/ironman/Desktop/FileOvr/src/App.js",[],["46","47"],"/Users/ironman/Desktop/FileOvr/src/reportWebVitals.js",[],"/Users/ironman/Desktop/FileOvr/src/components/Pouch.js",[],"/Users/ironman/Desktop/FileOvr/src/components/DragNDrop.js",[],{"ruleId":"48","severity":1,"message":"49","line":15,"column":9,"nodeType":"50","messageId":"51","endLine":15,"endColumn":29},{"ruleId":"48","severity":1,"message":"52","line":20,"column":9,"nodeType":"50","messageId":"51","endLine":20,"endColumn":34},{"ruleId":"48","severity":1,"message":"53","line":27,"column":9,"nodeType":"50","messageId":"51","endLine":27,"endColumn":32},{"ruleId":"54","replacedBy":"55"},{"ruleId":"56","replacedBy":"57"},{"ruleId":"54","replacedBy":"58"},{"ruleId":"56","replacedBy":"59"},"no-unused-vars","'baseStyle_sendButton' is assigned a value but never used.","Identifier","unusedVar","'slideLeftStyle_sendButton' is assigned a value but never used.","'baseStyle_receiveButton' is assigned a value but never used.","no-native-reassign",["60"],"no-negated-in-lhs",["61"],["60"],["61"],"no-global-assign","no-unsafe-negation"]
	`1`	+[{"/Users/ironman/Desktop/FileOvr/src/index.js":"1","/Users/ironman/Desktop/FileOvr/src/components/Ovr.js":"2","/Users/ironman/Desktop/FileOvr/src/components/TopBar.js":"3","/Users/ironman/Desktop/FileOvr/src/components/Down.js":"4","/Users/ironman/Desktop/FileOvr/src/components/Up.js":"5","/Users/ironman/Desktop/FileOvr/src/App.js":"6","/Users/ironman/Desktop/FileOvr/src/reportWebVitals.js":"7","/Users/ironman/Desktop/FileOvr/src/components/Pouch.js":"8","/Users/ironman/Desktop/FileOvr/src/components/DragNDrop.js":"9"},{"size":500,"mtime":1613856732928,"results":"10","hashOfConfig":"11"},{"size":12371,"mtime":1615347666908,"results":"12","hashOfConfig":"13"},{"size":890,"mtime":1614541607804,"results":"14","hashOfConfig":"13"},{"size":1476,"mtime":1615338440333,"results":"15","hashOfConfig":"13"},{"size":2446,"mtime":1617968338791,"results":"16","hashOfConfig":"13"},{"size":161,"mtime":1615148943420,"results":"17","hashOfConfig":"13"},{"size":362,"mtime":1613856732929,"results":"18","hashOfConfig":"13"},{"size":2054,"mtime":1617965255922,"results":"19","hashOfConfig":"13"},{"size":2199,"mtime":1617963748199,"results":"20","hashOfConfig":"13"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"14lgwgo",{"filePath":"23","messages":"24","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"at8weu",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"27"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"27"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/ironman/Desktop/FileOvr/src/index.js",[],"/Users/ironman/Desktop/FileOvr/src/components/Ovr.js",["41","42","43"],"/Users/ironman/Desktop/FileOvr/src/components/TopBar.js",[],["44","45"],"/Users/ironman/Desktop/FileOvr/src/components/Down.js",[],"/Users/ironman/Desktop/FileOvr/src/components/Up.js",[],"/Users/ironman/Desktop/FileOvr/src/App.js",[],["46","47"],"/Users/ironman/Desktop/FileOvr/src/reportWebVitals.js",[],"/Users/ironman/Desktop/FileOvr/src/components/Pouch.js",[],"/Users/ironman/Desktop/FileOvr/src/components/DragNDrop.js",[],{"ruleId":"48","severity":1,"message":"49","line":15,"column":9,"nodeType":"50","messageId":"51","endLine":15,"endColumn":29},{"ruleId":"48","severity":1,"message":"52","line":20,"column":9,"nodeType":"50","messageId":"51","endLine":20,"endColumn":34},{"ruleId":"48","severity":1,"message":"53","line":27,"column":9,"nodeType":"50","messageId":"51","endLine":27,"endColumn":32},{"ruleId":"54","replacedBy":"55"},{"ruleId":"56","replacedBy":"57"},{"ruleId":"54","replacedBy":"58"},{"ruleId":"56","replacedBy":"59"},"no-unused-vars","'baseStyle_sendButton' is assigned a value but never used.","Identifier","unusedVar","'slideLeftStyle_sendButton' is assigned a value but never used.","'baseStyle_receiveButton' is assigned a value but never used.","no-native-reassign",["60"],"no-negated-in-lhs",["61"],["60"],["61"],"no-global-assign","no-unsafe-negation"]