Basics of My Files page

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>

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 />;
     }

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>
+      );
+    }
+  }
+});