Starting on downloaded/published content

ui/js/actions/content.js

@@ -25,6 +25,52 @@ export function doResolveUri(dispatch, uri) {
   })
 }
 
+export function doFetchDownloadedContent() {
+  return function(dispatch, getState) {
+    const state = getState()
+
+    dispatch({
+      type: types.FETCH_DOWNLOADED_CONTENT_STARTED,
+    })
+
+    lbry.claim_list_mine().then((myClaimInfos) => {
+      lbry.file_list().then((fileInfos) => {
+        const myClaimOutpoints = myClaimInfos.map(({txid, nout}) => txid + ':' + nout);
+
+        dispatch({
+          type: types.FETCH_DOWNLOADED_CONTENT_COMPLETED,
+          data: {
+            fileInfos: fileInfos.filter(({outpoint}) => !myClaimOutpoints.includes(outpoint)),
+          }
+        })
+      });
+    });
+  }
+}
+
+export function doFetchPublishedContent() {
+  return function(dispatch, getState) {
+    const state = getState()
+
+    dispatch({
+      type: types.FETCH_PUBLISHED_CONTENT_STARTED,
+    })
+
+    lbry.claim_list_mine().then((claimInfos) => {
+      lbry.file_list().then((fileInfos) => {
+        const myClaimOutpoints = claimInfos.map(({txid, nout}) => txid + ':' + nout)
+
+        dispatch({
+          type: types.FETCH_PUBLISHED_CONTENT_COMPLETED,
+          data: {
+            fileInfos: fileInfos.filter(({outpoint}) => myClaimOutpoints.includes(outpoint)),
+          }
+        })
+      })
+    })
+  }
+}
+
 export function doFetchFeaturedContent() {
   return function(dispatch, getState) {
     const state = getState()

ui/js/component/fileList/index.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import {
+  connect
+} from 'react-redux'
+import FileList from './view'
+
+export default connect()(FileList)

ui/js/component/fileList/view.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import lbry from 'lbry.js';
+import lbryuri from 'lbryuri.js';
+import Link from 'component/link';
+import {FormField} from 'component/form.js';
+import FileTileStream from 'component/fileTile';
+import rewards from 'rewards.js';
+import lbryio from 'lbryio.js';
+import {BusyMessage, Thumbnail} from 'component/common.js';
+
+const FileList = React.createClass({
+  _sortFunctions: {
+    date: function(fileInfos) {
+      return fileInfos.slice().reverse();
+    },
+    title: function(fileInfos) {
+      return fileInfos.slice().sort(function(fileInfo1, fileInfo2) {
+        const title1 = fileInfo1.metadata ? fileInfo1.metadata.title.toLowerCase() : fileInfo1.name;
+        const title2 = fileInfo2.metadata ? fileInfo2.metadata.title.toLowerCase() : fileInfo2.name;
+        if (title1 < title2) {
+          return -1;
+        } else if (title1 > title2) {
+          return 1;
+        } else {
+          return 0;
+        }
+      });
+    },
+    filename: function(fileInfos) {
+      return fileInfos.slice().sort(function({file_name: fileName1}, {file_name: fileName2}) {
+        const fileName1Lower = fileName1.toLowerCase();
+        const fileName2Lower = fileName2.toLowerCase();
+        if (fileName1Lower < fileName2Lower) {
+          return -1;
+        } else if (fileName2Lower > fileName1Lower) {
+          return 1;
+        } else {
+          return 0;
+        }
+      });
+    },
+  },
+  propTypes: {
+    fileInfos: React.PropTypes.array.isRequired,
+    hidePrices: React.PropTypes.bool,
+  },
+  getDefaultProps: function() {
+    return {
+      hidePrices: false,
+    };
+  },
+  getInitialState: function() {
+    return {
+      sortBy: 'date',
+    };
+  },
+  handleSortChanged: function(event) {
+    this.setState({
+      sortBy: event.target.value,
+    });
+  },
+  render: function() {
+    var content = [],
+        seenUris = {};
+
+    const fileInfosSorted = this._sortFunctions[this.state.sortBy](this.props.fileInfos);
+    for (let {outpoint, name, channel_name, metadata, mime_type, claim_id, has_signature, signature_is_valid} of fileInfosSorted) {
+      if (seenUris[name] || !claim_id) {
+        continue;
+      }
+
+      let streamMetadata;
+      if (metadata) {
+        streamMetadata = metadata.stream.metadata;
+      } else {
+        streamMetadata = null;
+      }
+
+
+      const uri = lbryuri.build({contentName: name, channelName: channel_name});
+      seenUris[name] = true;
+      content.push(<FileTileStream key={outpoint} outpoint={outpoint} uri={uri} hideOnRemove={true}
+                                   hidePrice={this.props.hidePrices} metadata={streamMetadata} contentType={mime_type}
+                                   hasSignature={has_signature} signatureIsValid={signature_is_valid} />);
+    }
+
+    return (
+      <section>
+        <span className='sort-section'>
+          Sort by { ' ' }
+          <FormField type="select" onChange={this.handleSortChanged}>
+            <option value="date">Date</option>
+            <option value="title">Title</option>
+            <option value="filename">File name</option>
+          </FormField>
+        </span>
+        {content}
+      </section>
+    );
+  }
+});
+
+export default FileList

ui/js/component/router/view.jsx

@@ -9,10 +9,8 @@ import PublishPage from 'page/publish.js';
 import DiscoverPage from 'page/discover';
 import SplashScreen from 'component/splash.js';
 import DeveloperPage from 'page/developer.js';
-import {
-  FileListDownloaded,
-  FileListPublished
-} from 'page/file-list.js';
+import FileListDownloaded from 'page/fileListDownloaded'
+import FileListPublished from 'page/fileListPublished'
 
 const route = (page, routesMap) => {
   const component = routesMap[page]

ui/js/constants/action_types.js

@@ -39,3 +39,7 @@ export const FETCH_FEATURED_CONTENT_STARTED = 'FETCH_FEATURED_CONTENT_STARTED'
 export const FETCH_FEATURED_CONTENT_COMPLETED = 'FETCH_FEATURED_CONTENT_COMPLETED'
 export const RESOLVE_URI_STARTED = 'RESOLVE_URI_STARTED'
 export const RESOLVE_URI_COMPLETED = 'RESOLVE_URI_COMPLETED'
+export const FETCH_DOWNLOADED_CONTENT_STARTED = 'FETCH_DOWNLOADED_CONTENT_STARTED'
+export const FETCH_DOWNLOADED_CONTENT_COMPLETED = 'FETCH_DOWNLOADED_CONTENT_COMPLETED'
+export const FETCH_PUBLISHED_CONTENT_STARTED = 'FETCH_PUBLISHED_CONTENT_STARTED'
+export const FETCH_PUBLISHED_CONTENT_COMPLETED = 'FETCH_PUBLISHED_CONTENT_COMPLETED'

ui/js/page/file-list.js

@@ -1,217 +0,0 @@
-import React from 'react';
-import lbry from 'lbry.js';
-import lbryuri from 'lbryuri.js';
-import Link from 'component/link';
-import {FormField} from 'component/form.js';
-import SubHeader from '../component/sub-header';
-import {FileTileStream} from 'component/fileTile';
-import rewards from 'rewards.js';
-import lbryio from 'lbryio.js';
-import {BusyMessage, Thumbnail} from 'component/common.js';
-
-export let FileListNav = React.createClass({
-  render: function() {
-    return <SubHeader modifier="constrained" viewingPage={this.props.viewingPage} links={{
-      '?downloaded': 'Downloaded',
-      '?published': 'Published',
-    }} />;
-  }
-});
-
-export let FileListDownloaded = React.createClass({
-  _isMounted: false,
-
-  getInitialState: function() {
-    return {
-      fileInfos: null,
-    };
-  },
-  componentDidMount: function() {
-    this._isMounted = true;
-
-    lbry.claim_list_mine().then((myClaimInfos) => {
-      if (!this._isMounted) { return; }
-
-      lbry.file_list().then((fileInfos) => {
-        if (!this._isMounted) { return; }
-
-        const myClaimOutpoints = myClaimInfos.map(({txid, nout}) => txid + ':' + nout);
-        this.setState({
-          fileInfos: fileInfos.filter(({outpoint}) => !myClaimOutpoints.includes(outpoint)),
-        });
-      });
-    });
-  },
-  componentWillUnmount: function() {
-    this._isMounted = false;
-  },
-  render: function() {
-    let content = "";
-    if (this.state.fileInfos === null) {
-      content = <BusyMessage message="Loading" />;
-    } else if (!this.state.fileInfos.length) {
-      content = <span>You haven't downloaded anything from LBRY yet. Go <Link href="?discover" label="search for your first download" />!</span>;
-    } else {
-      content = <FileList fileInfos={this.state.fileInfos} hidePrices={true} />;
-    }
-    return (
-      <main className="main--single-column">
-        <FileListNav viewingPage="downloaded" />
-        {content}
-      </main>
-    );
-  }
-});
-
-export let FileListPublished = React.createClass({
-  _isMounted: false,
-
-  getInitialState: function () {
-    return {
-      fileInfos: null,
-    };
-  },
-  _requestPublishReward: function() {
-    lbryio.call('reward', 'list', {}).then(function(userRewards) {
-      //already rewarded
-      if (userRewards.filter(function (reward) {
-          return reward.RewardType == rewards.TYPE_FIRST_PUBLISH && reward.TransactionID;
-        }).length) {
-        return;
-      }
-      else {
-        rewards.claimReward(rewards.TYPE_FIRST_PUBLISH).catch(() => {})
-      }
-    }, () => {});
-  },
-  componentDidMount: function () {
-    this._isMounted = true;
-    this._requestPublishReward();
-
-    lbry.claim_list_mine().then((claimInfos) => {
-      if (!this._isMounted) { return; }
-
-      lbry.file_list().then((fileInfos) => {
-        if (!this._isMounted) { return; }
-
-        const myClaimOutpoints = claimInfos.map(({txid, nout}) => txid + ':' + nout);
-        this.setState({
-          fileInfos: fileInfos.filter(({outpoint}) => myClaimOutpoints.includes(outpoint)),
-        });
-      });
-    });
-  },
-  componentWillUnmount: function() {
-    this._isMounted = false;
-  },
-  render: function () {
-    let content = null;
-    if (this.state.fileInfos === null) {
-      content = <BusyMessage message="Loading" />;
-    }
-    else if (!this.state.fileInfos.length) {
-      content = <span>You haven't published anything to LBRY yet. Try <Link href="?publish" label="publishing" />!</span>;
-    }
-    else {
-      content = <FileList fileInfos={this.state.fileInfos} />;
-    }
-    return (
-      <main className="main--single-column">
-        <FileListNav viewingPage="published" />
-        {content}
-      </main>
-    );
-  }
-});
-
-export let FileList = React.createClass({
-  _sortFunctions: {
-    date: function(fileInfos) {
-      return fileInfos.slice().reverse();
-    },
-    title: function(fileInfos) {
-      return fileInfos.slice().sort(function(fileInfo1, fileInfo2) {
-        const title1 = fileInfo1.metadata ? fileInfo1.metadata.title.toLowerCase() : fileInfo1.name;
-        const title2 = fileInfo2.metadata ? fileInfo2.metadata.title.toLowerCase() : fileInfo2.name;
-        if (title1 < title2) {
-          return -1;
-        } else if (title1 > title2) {
-          return 1;
-        } else {
-          return 0;
-        }
-      });
-    },
-    filename: function(fileInfos) {
-      return fileInfos.slice().sort(function({file_name: fileName1}, {file_name: fileName2}) {
-        const fileName1Lower = fileName1.toLowerCase();
-        const fileName2Lower = fileName2.toLowerCase();
-        if (fileName1Lower < fileName2Lower) {
-          return -1;
-        } else if (fileName2Lower > fileName1Lower) {
-          return 1;
-        } else {
-          return 0;
-        }
-      });
-    },
-  },
-  propTypes: {
-    fileInfos: React.PropTypes.array.isRequired,
-    hidePrices: React.PropTypes.bool,
-  },
-  getDefaultProps: function() {
-    return {
-      hidePrices: false,
-    };
-  },
-  getInitialState: function() {
-    return {
-      sortBy: 'date',
-    };
-  },
-  handleSortChanged: function(event) {
-    this.setState({
-      sortBy: event.target.value,
-    });
-  },
-  render: function() {
-    var content = [],
-        seenUris = {};
-
-    const fileInfosSorted = this._sortFunctions[this.state.sortBy](this.props.fileInfos);
-    for (let {outpoint, name, channel_name, metadata, mime_type, claim_id, has_signature, signature_is_valid} of fileInfosSorted) {
-      if (seenUris[name] || !claim_id) {
-        continue;
-      }
-
-      let streamMetadata;
-      if (metadata) {
-        streamMetadata = metadata.stream.metadata;
-      } else {
-        streamMetadata = null;
-      }
-
-
-      const uri = lbryuri.build({contentName: name, channelName: channel_name});
-      seenUris[name] = true;
-      content.push(<FileTileStream key={outpoint} outpoint={outpoint} uri={uri} hideOnRemove={true}
-                                   hidePrice={this.props.hidePrices} metadata={streamMetadata} contentType={mime_type}
-                                   hasSignature={has_signature} signatureIsValid={signature_is_valid} />);
-    }
-
-    return (
-      <section>
-        <span className='sort-section'>
-          Sort by { ' ' }
-          <FormField type="select" onChange={this.handleSortChanged}>
-            <option value="date">Date</option>
-            <option value="title">Title</option>
-            <option value="filename">File name</option>
-          </FormField>
-        </span>
-        {content}
-      </section>
-    );
-  }
-});

ui/js/page/fileListDownloaded/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import {
+  connect
+} from 'react-redux'
+import {
+  selectDownloadedContent,
+} from 'selectors/content'
+import FileListDownloaded from './view'
+
+const select = (state) => ({
+  downloadedContent: selectDownloadedContent(state),
+})
+
+const perform = (dispatch) => ({
+})
+
+export default connect(select, perform)(FileListDownloaded)

ui/js/page/fileListDownloaded/view.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import lbry from 'lbry.js';
+import lbryuri from 'lbryuri.js';
+import Link from 'component/link';
+import {FormField} from 'component/form.js';
+import {FileTileStream} from 'component/fileTile';
+import rewards from 'rewards.js';
+import lbryio from 'lbryio.js';
+import {BusyMessage, Thumbnail} from 'component/common.js';
+import FileList from 'component/fileList'
+
+const FileListDownloaded = (props) => {
+  // <FileListNav viewingPage="published" />
+  return (
+    <div>item</div>
+  )
+}
+// const FileListDownloaded = React.createClass({
+//   _isMounted: false,
+
+//   getInitialState: function() {
+//     return {
+//       fileInfos: null,
+//     };
+//   },
+//   componentDidMount: function() {
+//     this._isMounted = true;
+//     document.title = "Downloaded Files";
+
+//     lbry.claim_list_mine().then((myClaimInfos) => {
+//       if (!this._isMounted) { return; }
+
+//       lbry.file_list().then((fileInfos) => {
+//         if (!this._isMounted) { return; }
+
+//         const myClaimOutpoints = myClaimInfos.map(({txid, nout}) => txid + ':' + nout);
+//         this.setState({
+//           fileInfos: fileInfos.filter(({outpoint}) => !myClaimOutpoints.includes(outpoint)),
+//         });
+//       });
+//     });
+//   },
+//   componentWillUnmount: function() {
+//     this._isMounted = false;
+//   },
+//   render: function() {
+//     if (this.state.fileInfos === null) {
+//       return (
+//         <main className="page">
+//           <BusyMessage message="Loading" />
+//         </main>
+//       );
+//     } else if (!this.state.fileInfos.length) {
+//       return (
+//         <main className="page">
+//           <span>You haven't downloaded anything from LBRY yet. Go <Link href="?discover" label="search for your first download" />!</span>
+//         </main>
+//       );
+//     } else {
+//       return (
+//         <main className="page">
+//           <FileList fileInfos={this.state.fileInfos} hidePrices={true} />
+//         </main>
+//       );
+//     }
+//   }
+// });
+
+export default FileListDownloaded

ui/js/page/fileListPublished/index.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import {
+  connect
+} from 'react-redux'
+import FileListPublished from './view'
+
+export default connect()(FileListPublished)

ui/js/page/fileListPublished/view.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import lbry from 'lbry.js';
+import lbryuri from 'lbryuri.js';
+import Link from 'component/link';
+import {FormField} from 'component/form.js';
+import {FileTileStream} from 'component/fileTile';
+import rewards from 'rewards.js';
+import lbryio from 'lbryio.js';
+import {BusyMessage, Thumbnail} from 'component/common.js';
+import FileList from 'component/fileList'
+
+const FileListPublished = (props) => {
+  // <FileListNav viewingPage="published" />
+  return (
+    <div>published content</div>
+  )
+}
+
+// const FileListPublished = React.createClass({
+//   _isMounted: false,
+
+//   getInitialState: function () {
+//     return {
+//       fileInfos: null,
+//     };
+//   },
+//   _requestPublishReward: function() {
+//     lbryio.call('reward', 'list', {}).then(function(userRewards) {
+//       //already rewarded
+//       if (userRewards.filter(function (reward) {
+//           return reward.RewardType == rewards.TYPE_FIRST_PUBLISH && reward.TransactionID;
+//         }).length) {
+//         return;
+//       }
+//       else {
+//         rewards.claimReward(rewards.TYPE_FIRST_PUBLISH).catch(() => {})
+//       }
+//     });
+//   },
+//   componentDidMount: function () {
+//     this._isMounted = true;
+//     this._requestPublishReward();
+//     document.title = "Published Files";
+
+//     lbry.claim_list_mine().then((claimInfos) => {
+//       if (!this._isMounted) { return; }
+
+//       lbry.file_list().then((fileInfos) => {
+//         if (!this._isMounted) { return; }
+
+//         const myClaimOutpoints = claimInfos.map(({txid, nout}) => txid + ':' + nout);
+//         this.setState({
+//           fileInfos: fileInfos.filter(({outpoint}) => myClaimOutpoints.includes(outpoint)),
+//         });
+//       });
+//     });
+//   },
+//   componentWillUnmount: function() {
+//     this._isMounted = false;
+//   },
+//   render: function () {
+//     if (this.state.fileInfos === null) {
+//       return (
+//         <main className="page">
+//           <BusyMessage message="Loading" />
+//         </main>
+//       );
+//     }
+//     else if (!this.state.fileInfos.length) {
+//       return (
+//         <main className="page">
+//           <span>You haven't published anything to LBRY yet.</span> Try <Link href="?publish" label="publishing" />!
+//         </main>
+//       );
+//     }
+//     else {
+//       return (
+//         <main className="page">
+//           <FileList fileInfos={this.state.fileInfos} />
+//         </main>
+//       );
+//     }
+//   }
+// });
+
+export default FileListPublished

ui/js/reducers/content.js

@@ -66,6 +66,46 @@ reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) {
   return Object.assign({}, state, newState)
 }
 
+reducers[types.FETCH_DOWNLOADED_CONTENT_STARTED] = function(state, action) {
+  return Object.assign({}, state, {
+    fetchingDownloadedContent: true,
+  })
+}
+
+reducers[types.FETCH_DOWNLOADED_CONTENT_COMPLETED] = function(state, action) {
+  const {
+    fileInfos
+  } = action.data
+  const newDownloadedContent = Object.assign({}, state.downloadedContent, {
+    fileInfos
+  })
+
+  return Object.assign({}, state, {
+    downloadedContent: newDownloadedContent,
+    fetchingDownloadedContent: false,
+  })
+}
+
+reducers[types.FETCH_PUBLISHED_CONTENT_STARTED] = function(state, action) {
+  return Object.assign({}, state, {
+    fetchingPublishedContent: true,
+  })
+}
+
+reducers[types.FETCH_PUBLISHED_CONTENT_COMPLETED] = function(state, action) {
+  const {
+    fileInfos
+  } = action.data
+  const newPublishedContent = Object.assign({}, state.publishedContent, {
+    fileInfos
+  })
+
+  return Object.assign({}, state, {
+    publishedContent: newPublishedContent,
+    fetchingPublishedContent: false,
+  })
+}
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

ui/js/selectors/content.js

@@ -40,3 +40,53 @@ export const selectResolvedUris = createSelector(
   _selectState,
   (state) => state.resolvedUris || {}
 )
+
+export const selectFetchingDownloadedContent = createSelector(
+  _selectState,
+  (state) => !!state.fetchingDownloadedContent
+)
+
+export const selectDownloadedContent = createSelector(
+  _selectState,
+  (state) => state.downloadedContent || {}
+)
+
+export const shouldFetchDownloadedContent = createSelector(
+  selectDaemonReady,
+  selectCurrentPage,
+  selectFetchingDownloadedContent,
+  selectDownloadedContent,
+  (daemonReady, page, fetching, content) => {
+    if (!daemonReady) return false
+    if (page != 'downloaded') return false
+    if (fetching) return false
+    if (Object.keys(content).length != 0) return false
+
+    return true
+  }
+)
+
+export const selectFetchingPublishedContent = createSelector(
+  _selectState,
+  (state) => !!state.fetchingPublishedContent
+)
+
+export const selectPublishedContent = createSelector(
+  _selectState,
+  (state) => state.publishedContent || {}
+)
+
+export const shouldFetchPublishedContent = createSelector(
+  selectDaemonReady,
+  selectCurrentPage,
+  selectFetchingPublishedContent,
+  selectPublishedContent,
+  (daemonReady, page, fetching, content) => {
+    if (!daemonReady) return false
+    if (page != 'published') return false
+    if (fetching) return false
+    if (Object.keys(content).length != 0) return false
+
+    return true
+  }
+)

ui/js/triggers.js

@@ -4,6 +4,8 @@ import {
 } from 'selectors/wallet'
 import {
   shouldFetchFeaturedContent,
+  shouldFetchDownloadedContent,
+  shouldFetchPublishedContent,
 } from 'selectors/content'
 import {
   doFetchTransactions,
@@ -11,6 +13,8 @@ import {
 } from 'actions/wallet'
 import {
   doFetchFeaturedContent,
+  doFetchDownloadedContent,
+  doFetchPublishedContent,
 } from 'actions/content'
 
 const triggers = []
@@ -30,6 +34,18 @@ triggers.push({
   action: doFetchFeaturedContent,
 })
 
+triggers.push({
+  selector: shouldFetchDownloadedContent,
+  action: doFetchDownloadedContent,
+})
+
+triggers.push({
+  selector: shouldFetchPublishedContent,
+  action: doFetchPublishedContent,
+})
+
+console.log(triggers)
+
 const runTriggers = function() {
   triggers.forEach(function(trigger) {
     const state = app.store.getState();