Update

Author: alexmancheno

package-lock.json

@@ -27,6 +27,7 @@
     "auto-bind": "^1.2.1",
     "react": "^16.5.0",
     "react-dom": "^16.5.0",
+    "react-file-reader": "^1.1.4",
     "react-router-dom": "^4.3.1"
   }
 }

package.json

@@ -1,6 +1,6 @@
-import React from 'react'
-import Header from './Header'
-import Main from './Main'
+import React from 'react';
+import Header from './Header';
+import Main from './Main';
 
 export default class App extends React.Component {
     render() {

src/components/App.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import UrlVisualizer from './UrlVisualizer';
+const autoBind = require('auto-bind');
+
+export default class Assignment2 extends React.Component {
+    constructor(props) {
+        super(props);
+        autoBind(this);
+        this.state = {
+            urls: []
+        };
+    }
+
+    openFile(e) {
+        let input = e.target;
+        let reader = new FileReader();
+        reader.onload = () => {
+            let str = reader.result;
+            let arr = str.split(/[\r\n]+/g);
+            this.setState({urls: arr});
+            console.log(this.state.urls);
+        };
+        reader.readAsText(input.files[0]);
+    }
+
+    render() {
+        let url_array = this.state.urls;
+        console.log("url_array: " + url_array);
+        let msg = "hi";
+        return (
+            <div>
+                 <input type='file' accept='text/plain'
+                  onChange={e => this.openFile(e)} />
+                  <UrlVisualizer urls={url_array} />
+            </div>
+        )
+    }
+}

src/components/Assignment2/Assignment2.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const ImportFromFileBodyComponent = () => {
+    let fileReader;
+
+    const handleFileReader = (e) => {
+        const content = fileReader.result;
+        console.log(content);
+    };
+
+    const handleFileChosen = (file) => {
+        fileReader = new FileReader();
+        fileReader.onloadend = handleFileRead;
+        fileReader.readAsText(file);
+    };
+
+    return 
+    <div className="upload-expense">
+        <input type="file" id="file" className="input-file"
+            onChange={e => handleFileChosen(e.target.files[0])} />
+    </div>
+}
+
+export default ImportFromFileBodyComponent;

src/components/Assignment2/ImportFromFileBodyComponent.js

@@ -0,0 +1,20 @@
+import React from 'react';
+const autoBind = require('auto-bind');
+
+export default class UrlVisualizer extends React.Component {
+    constructor(props) {
+        super(props);
+        autoBind(this);
+    }
+
+    
+    
+    render() {
+        return (
+            <div>
+                <h3>Current time: {new Date().toLocaleTimeString()}</h3>
+                <h4>Urls length: {this.props.urls.length}</h4>
+            </div>
+        )
+    }
+}

src/components/Assignment2/UrlVisualizer.js

@@ -32,6 +32,11 @@ export default class Header extends React.Component {
                                     <ul class="dropdown-menu">
                                         <li><a href="https://www.zybooks.com/" target="_blanks">Zybooks</a></li>
                                         <li><Link to="/">Assignment 1</Link></li>
+                                        <li>
+                                            <Link to="/Assignment2">
+                                                Assignment 2
+                                            </Link>
+                                        </li>
                                     </ul>
                                 </li>
                                 <li><Link to="/UserInfo">User Info</Link>

src/components/Header.js

@@ -1,7 +1,8 @@
-import React from 'react'
-import { Switch, Route } from 'react-router-dom'
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
 import Home from './Home';
 import UserInfo from './UserInfo';
+import Assignment2 from './Assignment2/Assignment2';
 
 // The Main component renders one of the provided
 // Routes (provided that one matches).
@@ -13,6 +14,7 @@ export default class Main extends React.Component {
                 <Switch>
                     <Route exact path="/" component={Home} />
                     <Route path="/UserInfo" component={UserInfo} />
+                    <Route path="/Assignment2" component={Assignment2} />
                 </Switch>
             </main>
         )

src/components/Main.js

@@ -0,0 +1,4 @@
+https://www.youtube.com/watch?v=QZl3ohphHSE&t=8341s
+https://developer.mozilla.org/en-US/docs/Web/API/URL
+https://www.cs.qc.cuny.edu/
+https://www.google.com/