From 32c2c94b95cd2e3e48a2a8d96b331b18edef8a8b Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Tue, 10 May 2016 06:36:54 -0400
Subject: [PATCH] Basics of My Files page

---
 dist/index.html     |  1 +
 js/app.js           |  4 ++-
 js/page/my_files.js | 66 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 js/page/my_files.js

diff --git a/dist/index.html b/dist/index.html
index a1d031f5a..d3fbbb0f6 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -30,6 +30,7 @@
       <script src="./js/page/help.js"></script>
       <script src="./js/page/watch.js"></script>
       <script src="./js/page/report.js"></script>
+      <script src="./js/page/my_files.js"></script>
       <script src="./js/page/start.js"></script>
       <script src="./js/app.js"></script>
       <script src="./js/main.js"></script>
diff --git a/js/app.js b/js/app.js
index 08fea20d3..aeb0fbbca 100644
--- a/js/app.js
+++ b/js/app.js
@@ -9,7 +9,7 @@ var App = React.createClass({
     var match, param, val;
     [match, param, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/);
 
-    if (['settings', 'help', 'start', 'watch', 'report'].indexOf(param) != -1) {
+    if (['settings', 'help', 'start', 'watch', 'report', 'files'].indexOf(param) != -1) {
       var viewingPage = param;
     } else {
       var viewingPage = 'home';
@@ -55,6 +55,8 @@ var App = React.createClass({
       var content = <WatchPage name={this.state.pageArgs}/>;
     } else if (this.state.viewingPage == 'report') {
       var content = <ReportPage />;
+    } else if (this.state.viewingPage == 'files') {
+      var content = <MyFilesPage />;
     } else if (this.state.viewingPage == 'start') {
       var content = <StartPage />;
     }
diff --git a/js/page/my_files.js b/js/page/my_files.js
new file mode 100644
index 000000000..3f9139ea1
--- /dev/null
+++ b/js/page/my_files.js
@@ -0,0 +1,66 @@
+var MyFilesCellStyle = {
+  padding: '3px',
+  border: '2px solid black',
+};
+
+var MyFilesRow = React.createClass({
+  render: function() {
+    return (
+      <tr>
+        <td style={MyFilesCellStyle}>{this.props.streamName}</td>
+        <td style={MyFilesCellStyle}>{this.props.completed ? 'True' : 'False'}</td>
+        <td style={MyFilesCellStyle}><Link label={this.props.stopped ? 'Start' : 'Stop'} /></td>        
+        <td style={MyFilesCellStyle}><Link label="Cancel" /></td>        
+      </tr>
+    );
+  }
+});
+
+var MyFilesPage = React.createClass({
+  getInitialState: function() {
+    return {
+      filesInfo: null,
+    };
+  },
+  componentWillMount: function() {
+    lbry.getFilesInfo((filesInfo) => {
+      this.setState({
+        filesInfo: filesInfo
+      });
+    });
+  },
+  render: function() {
+    if (!this.state.filesInfo) {
+      return null;
+    } else {
+      var rows = [];
+      for (let fileInfo of this.state.filesInfo) {
+        console.log(fileInfo);
+        rows.push(<MyFilesRow streamName={fileInfo.stream_name} completed={fileInfo.completed} />);
+      }
+      console.log(rows);
+      return (
+        <main>
+        <h1>My files</h1>
+        <table>
+          <thead>
+            <tr>
+              <th style={MyFilesCellStyle}>Stream name</th>
+              <th style={MyFilesCellStyle}>Completed</th>
+              <th style={MyFilesCellStyle}>Toggle</th>
+              <th style={MyFilesCellStyle}>Remove</th>
+            </tr>
+          </thead>
+        <tbody>
+          {rows}
+        </tbody>
+        </table>
+
+        <section>
+          <Link href="/" label="<< Return" />
+        </section>
+        </main>
+      );
+    }
+  }
+});
\ No newline at end of file