From c96ec875cdb3f5efc40c4579164f53afc36769ab Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 29 Jan 2018 11:47:12 -0800 Subject: [PATCH 01/96] added react-router --- package.json | 1 + react/app.js | 26 -------------------------- react/components/AboutPage/index.js | 15 +++++++++++++++ react/components/LoginPage/index.js | 15 +++++++++++++++ react/components/PublishPage/index.js | 18 ++++++++++++++++++ react/index.js | 15 +++++++++++++++ react/root.js | 22 ++++++++++++++++++++++ views/index.handlebars | 3 +-- webpack.config.js | 2 +- 9 files changed, 88 insertions(+), 29 deletions(-) delete mode 100644 react/app.js create mode 100644 react/components/AboutPage/index.js create mode 100644 react/components/LoginPage/index.js create mode 100644 react/components/PublishPage/index.js create mode 100644 react/index.js create mode 100644 react/root.js diff --git a/package.json b/package.json index e2b779a1..0d235a8c 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "react": "^16.2.0", "react-dom": "^16.2.0", "react-redux": "^5.0.6", + "react-router-dom": "^4.2.2", "redux": "^3.7.2", "request": "^2.83.0", "request-promise": "^4.2.2", diff --git a/react/app.js b/react/app.js deleted file mode 100644 index d6af0313..00000000 --- a/react/app.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import {Provider} from 'react-redux'; -import {createStore} from 'redux'; -import Reducer from 'reducers'; -import Publish from 'containers/PublishTool'; -import NavBar from 'containers/NavBar'; - -let store = createStore( - Reducer, - window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() -); - -ReactDOM.render( - - - , - document.getElementById('react-nav-bar') -) - -ReactDOM.render( - - - , - document.getElementById('react-publish-tool') -) diff --git a/react/components/AboutPage/index.js b/react/components/AboutPage/index.js new file mode 100644 index 00000000..260942e7 --- /dev/null +++ b/react/components/AboutPage/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import NavBar from 'containers/NavBar'; + +class AboutPage extends React.Component { + render () { + return ( +
+ +

About page

; +
+ ); + } +}; + +export default AboutPage; diff --git a/react/components/LoginPage/index.js b/react/components/LoginPage/index.js new file mode 100644 index 00000000..722b9be0 --- /dev/null +++ b/react/components/LoginPage/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import NavBar from 'containers/NavBar'; + +class PublishPage extends React.Component { + render () { + return ( +
+ +

Login Page

+
+ ); + } +}; + +export default PublishPage; diff --git a/react/components/PublishPage/index.js b/react/components/PublishPage/index.js new file mode 100644 index 00000000..7db97f36 --- /dev/null +++ b/react/components/PublishPage/index.js @@ -0,0 +1,18 @@ +import React from 'react'; +import NavBar from 'containers/NavBar'; +import PublishTool from 'containers/PublishTool'; + +class PublishPage extends React.Component { + render () { + return ( +
+ +
+ +
+
+ ); + } +}; + +export default PublishPage; diff --git a/react/index.js b/react/index.js new file mode 100644 index 00000000..bb43f082 --- /dev/null +++ b/react/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { render } from 'react-dom'; +import { createStore } from 'redux'; +import Reducer from 'reducers'; +import Root from './root'; + +let store = createStore( + Reducer, + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() +); + +render( + , + document.getElementById('react-app') +) diff --git a/react/root.js b/react/root.js new file mode 100644 index 00000000..2d6630ca --- /dev/null +++ b/react/root.js @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Provider } from 'react-redux'; +import { BrowserRouter as Router, Route } from 'react-router-dom'; + +import PublishPage from 'components/PublishPage'; +import AboutPage from 'components/AboutPage'; +import LoginPage from 'components/LoginPage'; + +const Root = ({ store }) => ( + + + + + +) + +Root.propTypes = { + store: PropTypes.object.isRequired, +} + +export default Root; diff --git a/views/index.handlebars b/views/index.handlebars index 563fa20b..075fe851 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -1,6 +1,5 @@ -
-
+

loading...

{{> progressBar}} diff --git a/webpack.config.js b/webpack.config.js index ae082fa7..b377412c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,7 +3,7 @@ const Path = require('path'); const REACT_ROOT = Path.resolve(__dirname, 'react/'); module.exports = { - entry : ['whatwg-fetch', './react/app.js'], + entry : ['whatwg-fetch', './react/index.js'], output: { path : Path.join(__dirname, '/public/bundle/'), filename: 'bundle.js', From 728c0440d89dc848287654481350685644f254f6 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 29 Jan 2018 12:27:22 -0800 Subject: [PATCH 02/96] updated nav bar to use react router Link --- react/components/AboutPage/index.js | 2 +- react/containers/NavBar/view.jsx | 13 +++++++------ react/root.js | 12 ++++++++---- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/react/components/AboutPage/index.js b/react/components/AboutPage/index.js index 260942e7..5ce194bf 100644 --- a/react/components/AboutPage/index.js +++ b/react/components/AboutPage/index.js @@ -6,7 +6,7 @@ class AboutPage extends React.Component { return (
-

About page

; +

About page

); } diff --git a/react/containers/NavBar/view.jsx b/react/containers/NavBar/view.jsx index 2ecf395f..5f76c61e 100644 --- a/react/containers/NavBar/view.jsx +++ b/react/containers/NavBar/view.jsx @@ -1,7 +1,8 @@ import React from 'react'; -import request from 'utils/request'; +import { Link, withRouter } from 'react-router-dom'; import Logo from 'components/Logo'; import NavBarChannelDropdown from 'components/NavBarChannelOptionsDropdown'; +import request from 'utils/request'; const VIEW = 'VIEW'; const LOGOUT = 'LOGOUT'; @@ -48,7 +49,7 @@ class NavBar extends React.Component { break; case VIEW: // redirect to channel page - window.location.href = `/${this.props.channelName}:${this.props.channelLongId}`; + this.props.history.push(`/${this.props.channelName}:${this.props.channelLongId}`); break; default: break; @@ -63,8 +64,8 @@ class NavBar extends React.Component { Open-source, decentralized image and video sharing.
- Publish - About + Publish + About { this.props.channelName ? ( ) : ( - Channel + Channel )}
@@ -82,4 +83,4 @@ class NavBar extends React.Component { } } -export default NavBar; +export default withRouter(NavBar); diff --git a/react/root.js b/react/root.js index 2d6630ca..0863c664 100644 --- a/react/root.js +++ b/react/root.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Provider } from 'react-redux'; -import { BrowserRouter as Router, Route } from 'react-router-dom'; +import { BrowserRouter, Route, Switch } from 'react-router-dom'; import PublishPage from 'components/PublishPage'; import AboutPage from 'components/AboutPage'; @@ -9,9 +9,13 @@ import LoginPage from 'components/LoginPage'; const Root = ({ store }) => ( - - - + + + + + + + ) From 696a1bf5009162b2ac3e65e893665121e662735d Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 29 Jan 2018 12:34:34 -0800 Subject: [PATCH 03/96] updated /about page and route --- react/components/AboutPage/index.js | 20 +++++++++++++++++++- routes/page-routes.js | 4 ++-- views/about.handlebars | 21 --------------------- 3 files changed, 21 insertions(+), 24 deletions(-) delete mode 100644 views/about.handlebars diff --git a/react/components/AboutPage/index.js b/react/components/AboutPage/index.js index 5ce194bf..73ceb2be 100644 --- a/react/components/AboutPage/index.js +++ b/react/components/AboutPage/index.js @@ -6,7 +6,25 @@ class AboutPage extends React.Component { return (
-

About page

+
+
+
+

Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.

+

TWITTER

+

GITHUB

+

DISCORD CHANNEL

+

DOCUMENTATION

+
+
+
+

Spee.ch is a media-hosting site that reads from and publishes content to the LBRY blockchain.

+

Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the LBRY network. This means that your images are stored in multiple locations without a single point of failure.

+

Contribute

+

If you have an idea for your own spee.ch-like site on top of LBRY, fork our github repo and go to town!

+

If you want to improve spee.ch, join our discord channel or solve one of our github issues.

+
+
+
); } diff --git a/routes/page-routes.js b/routes/page-routes.js index 54317d00..ef107893 100644 --- a/routes/page-routes.js +++ b/routes/page-routes.js @@ -13,13 +13,13 @@ module.exports = (app) => { if (req.user) { res.status(200).redirect(`/${req.user.channelName}`); } else { - res.status(200).render('login'); + res.status(200).render('index'); } }); // route to show 'about' page app.get('/about', (req, res) => { // get and render the content - res.status(200).render('about'); + res.status(200).render('index'); }); // route to display a list of the trending images app.get('/trending', (req, res) => { diff --git a/views/about.handlebars b/views/about.handlebars deleted file mode 100644 index 0274f1e9..00000000 --- a/views/about.handlebars +++ /dev/null @@ -1,21 +0,0 @@ -{{> navBar}} -
-
-
-

Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.

-

TWITTER

-

GITHUB

-

DISCORD CHANNEL

-

DOCUMENTATION

-
-
-
-

Spee.ch is a media-hosting site that reads from and publishes content to the LBRY blockchain.

-

Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the LBRY network. This means that your images are stored in multiple locations without a single point of failure.

-

Contribute

-

If you have an idea for your own spee.ch-like site on top of LBRY, fork our github repo and go to town!

-

If you want to improve spee.ch, join our discord channel or solve one of our github issues.

-
-
- -
From 47b6c59ae8ea4336043fd35ba5d1c708aace7da3 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 29 Jan 2018 12:44:46 -0800 Subject: [PATCH 04/96] updated /login page with create and login components --- react/components/LoginPage/index.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/react/components/LoginPage/index.js b/react/components/LoginPage/index.js index 722b9be0..b76f8242 100644 --- a/react/components/LoginPage/index.js +++ b/react/components/LoginPage/index.js @@ -1,12 +1,27 @@ import React from 'react'; import NavBar from 'containers/NavBar'; +import ChannelLoginForm from 'containers/ChannelLoginForm'; +import ChannelCreateForm from 'containers/ChannelCreateForm'; class PublishPage extends React.Component { render () { return (
-

Login Page

+
+
+
+

Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting important events, or making a public repository for cat gifs (password: '1234'), try creating a channel for it!

+
+
+
+

Log in to an existing channel:

+ +

Create a brand new channel:

+ +
+
+
); } From caee8bb8355c99cea79f34c50de702854d2f1976 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 29 Jan 2018 12:49:01 -0800 Subject: [PATCH 05/96] updated Logo to use Link --- react/components/Logo/index.jsx | 5 +++-- react/index.js | 2 +- react/root.js | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/react/components/Logo/index.jsx b/react/components/Logo/index.jsx index 7bc4dd36..e4b0149e 100644 --- a/react/components/Logo/index.jsx +++ b/react/components/Logo/index.jsx @@ -1,9 +1,10 @@ import React from 'react'; +import { Link } from 'react-router-dom'; function Logo () { return ( - + Logo Spee.ch logo @@ -20,7 +21,7 @@ function Logo () { - + ); }; diff --git a/react/index.js b/react/index.js index bb43f082..46be33c4 100644 --- a/react/index.js +++ b/react/index.js @@ -12,4 +12,4 @@ let store = createStore( render( , document.getElementById('react-app') -) +); diff --git a/react/root.js b/react/root.js index 0863c664..22192d73 100644 --- a/react/root.js +++ b/react/root.js @@ -17,10 +17,10 @@ const Root = ({ store }) => ( -) +); Root.propTypes = { store: PropTypes.object.isRequired, -} +}; export default Root; From fa5c811dab96e9a60e9cdab9e14998e58ee3752a Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 30 Jan 2018 09:00:02 -0800 Subject: [PATCH 06/96] added templates for show pages and channel page --- helpers/serveHelpers.js | 4 +- react/components/AssetDisplay/index.js | 11 +++ react/components/AssetInfo/index.js | 11 +++ react/components/AssetTitle/index.js | 11 +++ react/components/ShowChannel/index.js | 47 +++++++++++++ react/components/ShowDetails/index.js | 34 ++++++++++ react/components/ShowLite/index.js | 14 ++++ react/components/ShowPage/index.js | 94 ++++++++++++++++++++++++++ react/root.js | 3 + react/utils/lbryUri.js | 91 +++++++++++++++++++++++++ routes/page-routes.js | 7 +- routes/serve-routes.js | 5 +- views/login.handlebars | 16 ----- 13 files changed, 322 insertions(+), 26 deletions(-) create mode 100644 react/components/AssetDisplay/index.js create mode 100644 react/components/AssetInfo/index.js create mode 100644 react/components/AssetTitle/index.js create mode 100644 react/components/ShowChannel/index.js create mode 100644 react/components/ShowDetails/index.js create mode 100644 react/components/ShowLite/index.js create mode 100644 react/components/ShowPage/index.js create mode 100644 react/utils/lbryUri.js delete mode 100644 views/login.handlebars diff --git a/helpers/serveHelpers.js b/helpers/serveHelpers.js index 8bfa37f1..b3e1e61a 100644 --- a/helpers/serveHelpers.js +++ b/helpers/serveHelpers.js @@ -16,10 +16,10 @@ module.exports = { }, showFile (claimInfo, shortId, res) { logger.verbose(`showing claim: ${claimInfo.name}#${claimInfo.claimId}`); - res.status(200).render('show', { layout: 'show', claimInfo, shortId }); + res.status(200).render('index'); }, showFileLite (claimInfo, shortId, res) { logger.verbose(`showlite claim: ${claimInfo.name}#${claimInfo.claimId}`); - res.status(200).render('showLite', { layout: 'showlite', claimInfo, shortId }); + res.status(200).render('index'); }, }; diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js new file mode 100644 index 00000000..b7647322 --- /dev/null +++ b/react/components/AssetDisplay/index.js @@ -0,0 +1,11 @@ +import React from 'react'; + +const AssetDisplay = () => { + return ( +
+

display asset here

+
+ ); +}; + +export default AssetDisplay; diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js new file mode 100644 index 00000000..61e8d0ff --- /dev/null +++ b/react/components/AssetInfo/index.js @@ -0,0 +1,11 @@ +import React from 'react'; + +const AssetTitle = () => { + return ( +
+

Show asset info here

+
+ ); +}; + +export default AssetTitle; diff --git a/react/components/AssetTitle/index.js b/react/components/AssetTitle/index.js new file mode 100644 index 00000000..f943a940 --- /dev/null +++ b/react/components/AssetTitle/index.js @@ -0,0 +1,11 @@ +import React from 'react'; + +const AssetTitle = ({title}) => { + return ( +
+ {title} +
+ ); +}; + +export default AssetTitle; diff --git a/react/components/ShowChannel/index.js b/react/components/ShowChannel/index.js new file mode 100644 index 00000000..1e8418bc --- /dev/null +++ b/react/components/ShowChannel/index.js @@ -0,0 +1,47 @@ +import React from 'react'; +import NavBar from 'containers/NavBar'; + +class ShowChannel extends React.Component { + componentDidMount () { + console.log(this.props); + } + render () { + return ( +
+ +
+
+

channelName: {this.props.channelName}

+

channelClaimId: {this.props.channelClaimId}

+
+
+
+ + {((this.props.totalPages === 0) && +

There is no content in {this.props.channelName}:{this.props.longChannelClaimId} yet. Upload some! +

)} + + {((this.props.totalPages >= 1) && +
+

Below are the contents for {this.channelName}:{this.longChannelClaimId}

+
+ {/* claims here */} +
+
)} + +
+
+
+
+ ); + } +}; + +// required props +// channelName +// channelLongClaimId +// channelShortClaimId +// totalPages +// claims + +export default ShowChannel; diff --git a/react/components/ShowDetails/index.js b/react/components/ShowDetails/index.js new file mode 100644 index 00000000..cfae88b3 --- /dev/null +++ b/react/components/ShowDetails/index.js @@ -0,0 +1,34 @@ +import React from 'react'; +import NavBar from 'containers/NavBar'; +import AssetTitle from 'components/AssetTitle'; +import AssetDisplay from 'components/AssetDisplay'; +import AssetInfo from 'components/AssetInfo'; + +class ShowDetailsPage extends React.Component { + componentDidMount () { + console.log(this.props); + } + render () { + return ( +
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ ); + } +}; + +export default ShowDetailsPage; diff --git a/react/components/ShowLite/index.js b/react/components/ShowLite/index.js new file mode 100644 index 00000000..aed5d44c --- /dev/null +++ b/react/components/ShowLite/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import AssetDisplay from 'components/AssetDisplay'; + +class ShowLitePage extends React.Component { + render () { + return ( +
+ +
+ ); + } +}; + +export default ShowLitePage; diff --git a/react/components/ShowPage/index.js b/react/components/ShowPage/index.js new file mode 100644 index 00000000..bc66ae9c --- /dev/null +++ b/react/components/ShowPage/index.js @@ -0,0 +1,94 @@ +import React from 'react'; +import ShowLite from 'components/ShowLite'; +import ShowDetails from 'components/ShowDetails'; +import ShowChannel from 'components/ShowChannel'; +import lbryUri from 'utils/lbryUri'; + +class ShowPage extends React.Component { + constructor (props) { + super(props); + this.state = { + isChannel : null, + channelName : null, + channelClaimId: null, + claimId : null, + claimName : null, + isServeRequest: null, + }; + } + componentDidMount () { + const identifier = this.props.match.params.identifier; + const claim = this.props.match.params.claim; + // handle case of identifier and claim + if (identifier) { + let isChannel, channelName, channelClaimId, claimId, claimName, isServeRequest; + try { + ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(identifier)); + ({ claimName, isServeRequest } = lbryUri.parseName(claim)); + } catch (error) { + return console.log('error:', error); + } + // set state + return this.setState({ + isChannel, + channelName, + channelClaimId, + claimId, + claimName, + isServeRequest, + }); + } + // handle case of just claim (asset or channel) + let isChannel, channelName, channelClaimId; + try { + ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(claim)); + } catch (error) { + console.log('error:', error); + } + if (isChannel) { + return this.setState({ + isChannel, + channelName, + channelClaimId, + }); + } + let claimName, isServeRequest; + try { + ({claimName, isServeRequest} = lbryUri.parseName(claim)); + } catch (error) { + console.log('error:', error); + } + this.setState({ + claimName, + isServeRequest, + }); + } + render () { + const identifier = this.props.match.params.identifier; + console.log('rendering component'); + if (!identifier && this.state.isChannel) { + return ( + + ); + } + if (this.state.isServeRequest) { + return ( + + ); + } + return ( + + ); + } +}; + +export default ShowPage; diff --git a/react/root.js b/react/root.js index 22192d73..33e286db 100644 --- a/react/root.js +++ b/react/root.js @@ -6,6 +6,7 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'; import PublishPage from 'components/PublishPage'; import AboutPage from 'components/AboutPage'; import LoginPage from 'components/LoginPage'; +import ShowPage from 'components/ShowPage'; const Root = ({ store }) => ( @@ -14,6 +15,8 @@ const Root = ({ store }) => ( + + diff --git a/react/utils/lbryUri.js b/react/utils/lbryUri.js new file mode 100644 index 00000000..653b0fe7 --- /dev/null +++ b/react/utils/lbryUri.js @@ -0,0 +1,91 @@ +module.exports = { + REGEXP_INVALID_CLAIM : /[^A-Za-z0-9-]/g, + REGEXP_INVALID_CHANNEL: /[^A-Za-z0-9-@]/g, + REGEXP_ADDRESS : /^b(?=[^0OIl]{32,33})[0-9A-Za-z]{32,33}$/, + CHANNEL_CHAR : '@', + parseIdentifier : function (identifier) { + console.log('parsing identifier:', identifier); + const componentsRegex = new RegExp( + '([^:$#/]*)' + // value (stops at the first separator or end) + '([:$#]?)([^/]*)' // modifier separator, modifier (stops at the first path separator or end) + ); + const [proto, value, modifierSeperator, modifier] = componentsRegex + .exec(identifier) + .map(match => match || null); + console.log(`${proto}, ${value}, ${modifierSeperator}, ${modifier}`); + + // Validate and process name + if (!value) { + throw new Error(`Check your url. No channel name provided before "${modifierSeperator}"`); + } + const isChannel = value.startsWith(module.exports.CHANNEL_CHAR); + const channelName = isChannel ? value : null; + let claimId; + if (isChannel) { + if (!channelName) { + throw new Error('No channel name after @.'); + } + const nameBadChars = (channelName).match(module.exports.REGEXP_INVALID_CHANNEL); + if (nameBadChars) { + throw new Error(`Invalid characters in channel name: ${nameBadChars.join(', ')}.`); + } + } else { + claimId = value; + } + + // Validate and process modifier + let channelClaimId; + if (modifierSeperator) { + if (!modifier) { + throw new Error(`No modifier provided after separator "${modifierSeperator}"`); + } + + if (modifierSeperator === ':') { + channelClaimId = modifier; + } else { + throw new Error(`The "${modifierSeperator}" modifier is not currently supported`); + } + } + return { + isChannel, + channelName, + channelClaimId, + claimId, + }; + }, + parseName: function (name) { + console.log('parsing name:', name); + const componentsRegex = new RegExp( + '([^:$#/.]*)' + // name (stops at the first modifier) + '([:$#.]?)([^/]*)' // modifier separator, modifier (stops at the first path separator or end) + ); + const [proto, claimName, modifierSeperator, modifier] = componentsRegex + .exec(name) + .map(match => match || null); + console.log(`${proto}, ${claimName}, ${modifierSeperator}, ${modifier}`); + + // Validate and process name + if (!claimName) { + throw new Error('No claim name provided before .'); + } + const nameBadChars = (claimName).match(module.exports.REGEXP_INVALID_CLAIM); + if (nameBadChars) { + throw new Error(`Invalid characters in claim name: ${nameBadChars.join(', ')}.`); + } + // Validate and process modifier + let isServeRequest = false; + if (modifierSeperator) { + if (!modifier) { + throw new Error(`No file extension provided after separator ${modifierSeperator}.`); + } + if (modifierSeperator !== '.') { + throw new Error(`The ${modifierSeperator} modifier is not supported in the claim name`); + } + isServeRequest = true; + } + return { + claimName, + isServeRequest, + }; + }, +}; diff --git a/routes/page-routes.js b/routes/page-routes.js index ef107893..21226c2d 100644 --- a/routes/page-routes.js +++ b/routes/page-routes.js @@ -10,15 +10,10 @@ module.exports = (app) => { }); // route to display login page app.get('/login', (req, res) => { - if (req.user) { - res.status(200).redirect(`/${req.user.channelName}`); - } else { - res.status(200).render('index'); - } + res.status(200).render('index'); }); // route to show 'about' page app.get('/about', (req, res) => { - // get and render the content res.status(200).render('index'); }); // route to display a list of the trending images diff --git a/routes/serve-routes.js b/routes/serve-routes.js index 3baf1f6e..d6f379e3 100644 --- a/routes/serve-routes.js +++ b/routes/serve-routes.js @@ -188,7 +188,8 @@ module.exports = (app) => { // log the request data for debugging logRequestData(null, null, channelName, null); // handle showing the channel page - showChannelPageToClient(channelName, channelClaimId, originalUrl, ip, query, res); + // showChannelPageToClient(channelName, channelClaimId, originalUrl, ip, query, res); + return res.status(200).render('index'); } else { let claimName, isServeRequest; try { @@ -203,7 +204,7 @@ module.exports = (app) => { getClaimId(null, null, claimName, null) .then(fullClaimId => { if (fullClaimId === NO_CLAIM) { - return res.status(200).render('noClaim'); + return res.status(200).render('index'); } showOrServeAsset(responseType, fullClaimId, claimName, res); postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'success'); diff --git a/views/login.handlebars b/views/login.handlebars deleted file mode 100644 index 17b028cc..00000000 --- a/views/login.handlebars +++ /dev/null @@ -1,16 +0,0 @@ -{{> navBar}} -
-
-
-

Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting important events, or making a public repository for cat gifs (password: '1234'), try creating a channel for it!

-
-
-
-

Log in to an existing channel:

- {{>channelLoginForm}} -

Create a brand new channel:

- {{>channelCreationForm}} -
-
-
- From 091d073d01a069029e70bf9f06b71cd7c0163e33 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 30 Jan 2018 11:46:22 -0800 Subject: [PATCH 07/96] implemented basica channel content request routes --- controllers/serveController.js | 4 +- helpers/channelPagination.js | 10 +- models/certificate.js | 4 +- react/components/AssetDisplay/index.js | 4 +- react/components/AssetInfo/index.js | 3 +- react/components/AssetPreview/index.js | 12 ++ react/components/ShowChannel/index.js | 93 ++++++++++----- react/components/ShowDetails/index.js | 16 ++- react/components/ShowLite/index.js | 5 +- routes/api-routes.js | 20 ++++ routes/serve-routes.js | 149 +++++++++++-------------- test/end-to-end/end-to-end.tests.js | 20 ++++ 12 files changed, 215 insertions(+), 125 deletions(-) create mode 100644 react/components/AssetPreview/index.js diff --git a/controllers/serveController.js b/controllers/serveController.js index e2e9ff13..c638162d 100644 --- a/controllers/serveController.js +++ b/controllers/serveController.js @@ -53,7 +53,7 @@ module.exports = { }); }); }, - getChannelViewData (channelName, channelClaimId, query) { + getChannelViewData (channelName, channelClaimId, page) { return new Promise((resolve, reject) => { // 1. get the long channel Id (make sure channel exists) db.Certificate.getLongChannelId(channelName, channelClaimId) @@ -69,7 +69,7 @@ module.exports = { return resolve(NO_CHANNEL); } // 3. format the data for the view, including pagination - let paginatedChannelViewData = returnPaginatedChannelViewData(channelName, longChannelClaimId, shortChannelClaimId, channelClaimsArray, query); + let paginatedChannelViewData = returnPaginatedChannelViewData(channelName, longChannelClaimId, shortChannelClaimId, channelClaimsArray, page); // 4. return all the channel information and contents resolve(paginatedChannelViewData); }) diff --git a/helpers/channelPagination.js b/helpers/channelPagination.js index d454a9ff..e5d99b7e 100644 --- a/helpers/channelPagination.js +++ b/helpers/channelPagination.js @@ -1,9 +1,9 @@ const CLAIMS_PER_PAGE = 10; module.exports = { - returnPaginatedChannelViewData (channelName, longChannelClaimId, shortChannelClaimId, claims, query) { + returnPaginatedChannelViewData (channelName, longChannelClaimId, shortChannelClaimId, claims, page) { const totalPages = module.exports.determineTotalPages(claims); - const paginationPage = module.exports.getPageFromQuery(query); + const paginationPage = module.exports.getPageFromQuery(page); const viewData = { channelName : channelName, longChannelClaimId : longChannelClaimId, @@ -17,9 +17,9 @@ module.exports = { }; return viewData; }, - getPageFromQuery (query) { - if (query.p) { - return parseInt(query.p); + getPageFromQuery (page) { + if (page) { + return parseInt(page); } return 1; }, diff --git a/models/certificate.js b/models/certificate.js index 50a24479..07c0cc76 100644 --- a/models/certificate.js +++ b/models/certificate.js @@ -100,7 +100,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => { }; Certificate.getShortChannelIdFromLongChannelId = function (longChannelId, channelName) { - logger.debug(`finding short channel id for ${channelName}:${longChannelId}`); + logger.debug(`getShortChannelIdFromLongChannelId ${channelName}:${longChannelId}`); return new Promise((resolve, reject) => { this .findAll({ @@ -122,6 +122,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => { }; Certificate.getLongChannelIdFromShortChannelId = function (channelName, channelClaimId) { + logger.debug(`getLongChannelIdFromShortChannelId(${channelName}, ${channelClaimId})`); return new Promise((resolve, reject) => { this .findAll({ @@ -170,6 +171,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => { }; Certificate.validateLongChannelId = function (name, claimId) { + logger.debug(`validateLongChannelId(${name}, ${claimId})`); return new Promise((resolve, reject) => { this.findOne({ where: {name, claimId}, diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index b7647322..f5cd45d8 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -1,9 +1,9 @@ import React from 'react'; -const AssetDisplay = () => { +const AssetDisplay = ({claimName, claimId}) => { return (
-

display asset here

+

display {claimName}#{claimId} here

); }; diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 61e8d0ff..0fabd5a1 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -1,9 +1,10 @@ import React from 'react'; -const AssetTitle = () => { +const AssetTitle = ({claimId}) => { return (

Show asset info here

+

claimId: {claimId}

); }; diff --git a/react/components/AssetPreview/index.js b/react/components/AssetPreview/index.js new file mode 100644 index 00000000..c6c8e8c1 --- /dev/null +++ b/react/components/AssetPreview/index.js @@ -0,0 +1,12 @@ +import React from 'react'; + +const AssetPreview = ({asset}) => { + console.log('asset display info:', asset); + return ( +
+

Preview Asset here

+
+ ); +}; + +export default AssetPreview; diff --git a/react/components/ShowChannel/index.js b/react/components/ShowChannel/index.js index 1e8418bc..427a9646 100644 --- a/react/components/ShowChannel/index.js +++ b/react/components/ShowChannel/index.js @@ -1,37 +1,82 @@ import React from 'react'; import NavBar from 'containers/NavBar'; +import AssetPreview from 'components/AssetPreview'; +import request from 'utils/request'; class ShowChannel extends React.Component { + constructor (props) { + super(props); + this.state = { + error : null, + channelName : null, + claims : null, + currentPage : null, + longChannelClaimId : null, + nextPage : null, + previousPage : null, + shortChannelClaimId: null, + totalPages : null, + totalResults : null, + }; + this.updateChannelData = this.updateChannelData.bind(this); + } componentDidMount () { console.log(this.props); + this.updateChannelData(1); + } + updateChannelData (page) { + const that = this; + const channelName = this.props.channelName; + const channelClaimId = this.props.channelClaimId || 'none'; + const url = `/api/channel-get-content/${channelName}/${channelClaimId}/${page}`; + return request(url) + .then(({ success, message, data }) => { + console.log('get channel data response:', data); + if (!success) { + return this.setState({error: message}); + } + that.setState({ + channelName : data.channelName, + claims : data.claims, + currentPage : data.currentPage, + longChannelClaimId : data.longChannelClaimId, + nextPage : data.nextPage, + previousPage : data.previousPage, + shortChannelClaimId: data.shortChannelClaimId, + totalPages : data.totalPages, + totalResults : data.totalResults, + }); + }) + .catch((error) => { + that.setState({error: error.message}); + }); } render () { return (
-
-
-

channelName: {this.props.channelName}

-

channelClaimId: {this.props.channelClaimId}

-
-
-
- - {((this.props.totalPages === 0) && -

There is no content in {this.props.channelName}:{this.props.longChannelClaimId} yet. Upload some! -

)} - - {((this.props.totalPages >= 1) && -
-

Below are the contents for {this.channelName}:{this.longChannelClaimId}

-
- {/* claims here */} -
-
)} - + {this.state.error ? ( +
+
+

{this.state.error}

-
+ ) : ( +
+
+

channel name: {this.props.channelName}

+

full channel id: {this.state.longChannelClaimId ? this.state.longChannelClaimId : 'loading...'}

+

short channel id: {this.state.shortChannelClaimId ? this.state.shortChannelClaimId : 'loading...'}

+

# of claims in channel: {this.state.totalResults ? this.state.totalResults : 'loading...' }

+
+
+
+ {/* claims here */} + {this.state.claims && this.state.claims.map((claim, index) => )} +
+
+
+ )}
); } @@ -39,9 +84,7 @@ class ShowChannel extends React.Component { // required props // channelName -// channelLongClaimId -// channelShortClaimId -// totalPages -// claims +// channelClaimId + export default ShowChannel; diff --git a/react/components/ShowDetails/index.js b/react/components/ShowDetails/index.js index cfae88b3..1825252d 100644 --- a/react/components/ShowDetails/index.js +++ b/react/components/ShowDetails/index.js @@ -14,15 +14,18 @@ class ShowDetailsPage extends React.Component {
- +
- +
- +
@@ -31,4 +34,11 @@ class ShowDetailsPage extends React.Component { } }; +// required props +// isChannel +// channelName +// channelClaimId +// claimId +// claimName + export default ShowDetailsPage; diff --git a/react/components/ShowLite/index.js b/react/components/ShowLite/index.js index aed5d44c..fb41fc64 100644 --- a/react/components/ShowLite/index.js +++ b/react/components/ShowLite/index.js @@ -5,7 +5,10 @@ class ShowLitePage extends React.Component { render () { return (
- +
); } diff --git a/routes/api-routes.js b/routes/api-routes.js index 65057295..8fd4f224 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -9,6 +9,9 @@ const { createPublishParams, parsePublishApiRequestBody, parsePublishApiRequestF const errorHandlers = require('../helpers/errorHandlers.js'); const { sendGoogleAnalyticsTiming } = require('../helpers/statsHelpers.js'); const { authenticateIfNoUserToken } = require('../auth/authentication.js'); +const { getChannelViewData } = require('../controllers/serveController.js'); + +const NO_CHANNEL = 'NO_CHANNEL'; module.exports = (app) => { // route to run a claim_list request on the daemon @@ -185,4 +188,21 @@ module.exports = (app) => { errorHandlers.handleApiError(originalUrl, ip, error, res); }); }); + app.get('/api/channel-get-content/:name/:longId/:page', ({ ip, originalUrl, body, params }, res) => { + const channelName = params.name; + let channelClaimId = params.longId; + if (channelClaimId === 'none') channelClaimId = null; + const page = params.page; + getChannelViewData(channelName, channelClaimId, page) + .then(data => { + if (data === NO_CHANNEL) { + return res.status(200).json({success: false, message: 'No matching channel was found'}); + } + res.status(200).json({success: true, data}); + }) + .catch(error => { + logger.error('api error getting channel contents', error); + errorHandlers.handleApiError(originalUrl, ip, error, res); + }); + }); }; diff --git a/routes/serve-routes.js b/routes/serve-routes.js index d6f379e3..de34d455 100644 --- a/routes/serve-routes.js +++ b/routes/serve-routes.js @@ -1,5 +1,5 @@ const logger = require('winston'); -const { getClaimId, getChannelViewData, getLocalFileRecord } = require('../controllers/serveController.js'); +const { getClaimId, getLocalFileRecord } = require('../controllers/serveController.js'); const serveHelpers = require('../helpers/serveHelpers.js'); const { handleRequestError } = require('../helpers/errorHandlers.js'); const { postToStats } = require('../helpers/statsHelpers.js'); @@ -25,25 +25,6 @@ function isValidShortIdOrClaimId (input) { return (isValidClaimId(input) || isValidShortId(input)); } -function sendChannelInfoAndContentToClient (channelPageData, res) { - if (channelPageData === NO_CHANNEL) { - res.status(200).render('noChannel'); - } else { - res.status(200).render('channel', channelPageData); - } -} - -function showChannelPageToClient (channelName, channelClaimId, originalUrl, ip, query, res) { - // 1. retrieve the channel contents - getChannelViewData(channelName, channelClaimId, query) - .then(channelViewData => { - sendChannelInfoAndContentToClient(channelViewData, res); - }) - .catch(error => { - handleRequestError(originalUrl, ip, error, res); - }); -} - function clientAcceptsHtml ({accept}) { return accept && accept.match(/text\/html/); } @@ -75,31 +56,31 @@ function determineResponseType (isServeRequest, headers) { return responseType; } -function showAssetToClient (claimId, name, res) { - return Promise - .all([db.Claim.resolveClaim(name, claimId), db.Claim.getShortClaimIdFromLongClaimId(claimId, name)]) - .then(([claimInfo, shortClaimId]) => { - // logger.debug('claimInfo:', claimInfo); - // logger.debug('shortClaimId:', shortClaimId); - return serveHelpers.showFile(claimInfo, shortClaimId, res); - }) - .catch(error => { - throw error; - }); -} - -function showLiteAssetToClient (claimId, name, res) { - return Promise - .all([db.Claim.resolveClaim(name, claimId), db.Claim.getShortClaimIdFromLongClaimId(claimId, name)]) - .then(([claimInfo, shortClaimId]) => { - // logger.debug('claimInfo:', claimInfo); - // logger.debug('shortClaimId:', shortClaimId); - return serveHelpers.showFileLite(claimInfo, shortClaimId, res); - }) - .catch(error => { - throw error; - }); -} +// function showAssetToClient (claimId, name, res) { +// return Promise +// .all([db.Claim.resolveClaim(name, claimId), db.Claim.getShortClaimIdFromLongClaimId(claimId, name)]) +// .then(([claimInfo, shortClaimId]) => { +// // logger.debug('claimInfo:', claimInfo); +// // logger.debug('shortClaimId:', shortClaimId); +// return serveHelpers.showFile(claimInfo, shortClaimId, res); +// }) +// .catch(error => { +// throw error; +// }); +// } +// +// function showLiteAssetToClient (claimId, name, res) { +// return Promise +// .all([db.Claim.resolveClaim(name, claimId), db.Claim.getShortClaimIdFromLongClaimId(claimId, name)]) +// .then(([claimInfo, shortClaimId]) => { +// // logger.debug('claimInfo:', claimInfo); +// // logger.debug('shortClaimId:', shortClaimId); +// return serveHelpers.showFileLite(claimInfo, shortClaimId, res); +// }) +// .catch(error => { +// throw error; +// }); +// } function serveAssetToClient (claimId, name, res) { return getLocalFileRecord(claimId, name) @@ -115,19 +96,6 @@ function serveAssetToClient (claimId, name, res) { }); } -function showOrServeAsset (responseType, claimId, claimName, res) { - switch (responseType) { - case SHOW: - return showAssetToClient(claimId, claimName, res); - case SHOWLITE: - return showLiteAssetToClient(claimId, claimName, res); - case SERVE: - return serveAssetToClient(claimId, claimName, res); - default: - break; - } -} - function flipClaimNameAndIdForBackwardsCompatibility (identifier, name) { // this is a patch for backwards compatability with '/name/claim_id' url format if (isValidShortIdOrClaimId(name) && !isValidShortIdOrClaimId(identifier)) { @@ -161,20 +129,26 @@ module.exports = (app) => { let responseType = determineResponseType(isServeRequest, headers); // log the request data for debugging logRequestData(responseType, claimName, channelName, claimId); - // get the claim Id and then serve/show the asset - getClaimId(channelName, channelClaimId, claimName, claimId) - .then(fullClaimId => { - if (fullClaimId === NO_CLAIM) { - return res.status(200).render('noClaim'); - } else if (fullClaimId === NO_CHANNEL) { - return res.status(200).render('noChannel'); - } - showOrServeAsset(responseType, fullClaimId, claimName, res); - postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'success'); - }) - .catch(error => { - handleRequestError(originalUrl, ip, error, res); - }); + // if a serve request, serve, otherwise send the react app + if (responseType === SERVE) { + // get the claim Id and then serve/show the asset + getClaimId(channelName, channelClaimId, claimName, claimId) + .then(fullClaimId => { + if (fullClaimId === NO_CLAIM) { + return res.status(200).json({success: false, message: 'no claim id could be found'}); + } else if (fullClaimId === NO_CHANNEL) { + return res.status(200).json({success: false, message: 'no channel id could be found'}); + } + serveAssetToClient(fullClaimId, claimName, res); + // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'success'); + }) + .catch(error => { + handleRequestError(originalUrl, ip, error, res); + // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'fail'); + }); + } else { + res.status(200).render('index'); + } }); // route to serve the winning asset at a claim or a channel page app.get('/:identifier', ({ headers, ip, originalUrl, params, query }, res) => { @@ -188,7 +162,6 @@ module.exports = (app) => { // log the request data for debugging logRequestData(null, null, channelName, null); // handle showing the channel page - // showChannelPageToClient(channelName, channelClaimId, originalUrl, ip, query, res); return res.status(200).render('index'); } else { let claimName, isServeRequest; @@ -200,18 +173,24 @@ module.exports = (app) => { let responseType = determineResponseType(isServeRequest, headers); // log the request data for debugging logRequestData(responseType, claimName, null, null); - // get the claim Id and then serve/show the asset - getClaimId(null, null, claimName, null) - .then(fullClaimId => { - if (fullClaimId === NO_CLAIM) { - return res.status(200).render('index'); - } - showOrServeAsset(responseType, fullClaimId, claimName, res); - postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'success'); - }) - .catch(error => { - handleRequestError(originalUrl, ip, error, res); - }); + // if a serve request, serve, otherwise send the react app + if (responseType === SERVE) { + // get the claim Id and then serve/show the asset + getClaimId(null, null, claimName, null) + .then(fullClaimId => { + if (fullClaimId === NO_CLAIM) { + return res.status(200).render('index'); + } + serveAssetToClient(fullClaimId, claimName, res); + // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'success'); + }) + .catch(error => { + handleRequestError(originalUrl, ip, error, res); + // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'fail'); + }); + } else { + res.status(200).render('index'); + } } }); }; diff --git a/test/end-to-end/end-to-end.tests.js b/test/end-to-end/end-to-end.tests.js index 4fb9c31c..5bcf9d8e 100644 --- a/test/end-to-end/end-to-end.tests.js +++ b/test/end-to-end/end-to-end.tests.js @@ -84,6 +84,26 @@ describe('end-to-end', function () { }); }); + describe('channel data request from client', function () { + const url = '/@test'; + const urlWithShortClaimId = '/@test:3'; + const urlWithMediumClaimId = '/@test:3b5bc6b6819172c6'; + const urlWithLongClaimId = '/@test:3b5bc6b6819172c6e2f3f90aa855b14a956b4a82'; + + describe(url, function () { + it('should pass the tests I write here'); + }); + describe(urlWithShortClaimId, function () { + it('should pass the tests I write here'); + }); + describe(urlWithMediumClaimId, function () { + it('should pass the tests I write here'); + }); + describe(urlWithLongClaimId, function () { + it('should pass the tests I write here'); + }); + }); + describe('publish requests', function () { const publishUrl = '/api/claim-publish'; const filePath = './test/mock-data/bird.jpeg'; From da32c35403c52645f6d7d148d1d90eb57c565bca Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 30 Jan 2018 11:54:29 -0800 Subject: [PATCH 08/96] added props to asset preview --- react/components/AssetPreview/index.js | 5 ++--- react/components/ShowChannel/index.js | 7 ++++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/react/components/AssetPreview/index.js b/react/components/AssetPreview/index.js index c6c8e8c1..b00275de 100644 --- a/react/components/AssetPreview/index.js +++ b/react/components/AssetPreview/index.js @@ -1,10 +1,9 @@ import React from 'react'; -const AssetPreview = ({asset}) => { - console.log('asset display info:', asset); +const AssetPreview = ({ name, claimId, contentType }) => { return (
-

Preview Asset here

+

name: {name}, claimId: {claimId}, contentType: {contentType}

); }; diff --git a/react/components/ShowChannel/index.js b/react/components/ShowChannel/index.js index 427a9646..c86168c8 100644 --- a/react/components/ShowChannel/index.js +++ b/react/components/ShowChannel/index.js @@ -72,7 +72,12 @@ class ShowChannel extends React.Component {
{/* claims here */} - {this.state.claims && this.state.claims.map((claim, index) => )} + {this.state.claims && this.state.claims.map((claim, index) => )}
From 1f5a493375e881da7becd8f2da7ceb779c66bfea Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 30 Jan 2018 15:32:42 -0800 Subject: [PATCH 09/96] update show lite component --- README.md | 4 +- models/claim.js | 1 + react/components/AssetDisplay/index.js | 2 +- react/components/ShowLite/index.js | 74 ++++++++++++++++++++++++-- react/components/ShowPage/index.js | 9 +++- routes/api-routes.js | 36 ++++++++++++- routes/serve-routes.js | 4 +- 7 files changed, 117 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 9ac04df7..08b36aa7 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,8 @@ spee.ch is a single-serving site that reads and publishes images and videos to a ## API #### GET -* /api/claim-resolve/:name - * example: `curl https://spee.ch/api/claim-resolve/doitlive` +* /api/claim-resolve/:name/:claimId + * example: `curl https://spee.ch/api/claim-resolve/doitlive/xyz` * /api/claim-list/:name * example: `curl https://spee.ch/api/claim-list/doitlive` * /api/claim-is-available/:name ( diff --git a/models/claim.js b/models/claim.js index 6fc23de2..25c1a04f 100644 --- a/models/claim.js +++ b/models/claim.js @@ -342,6 +342,7 @@ module.exports = (sequelize, { STRING, BOOLEAN, INTEGER, TEXT, DECIMAL }) => { }; Claim.resolveClaim = function (name, claimId) { + logger.debug(`Claim.resolveClaim: ${name} ${claimId}`); return new Promise((resolve, reject) => { this .findAll({ diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index f5cd45d8..18d72c12 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -1,6 +1,6 @@ import React from 'react'; -const AssetDisplay = ({claimName, claimId}) => { +const AssetDisplay = ({ claimName, claimId }) => { return (

display {claimName}#{claimId} here

diff --git a/react/components/ShowLite/index.js b/react/components/ShowLite/index.js index fb41fc64..908042d7 100644 --- a/react/components/ShowLite/index.js +++ b/react/components/ShowLite/index.js @@ -1,14 +1,80 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import AssetDisplay from 'components/AssetDisplay'; +import request from 'utils/request'; class ShowLitePage extends React.Component { + constructor (props) { + super(props); + this.state = { + claimData: null, + error : null, + }; + this.getLongClaimId = this.getLongClaimId.bind(this); + this.getClaimData = this.getClaimData.bind(this); + } + componentDidMount () { + const that = this; + const claimName = that.props.claimName; + const claimId = that.props.claimId || 'none'; + this.getLongClaimId(claimName, claimId) + .then(claimLongId => { + return that.getClaimData(claimName, claimLongId); + }) + .then(claimData => { + this.setState({ claimData }); + }) + .catch(error => { + this.setState({error}); + }); + } + getLongClaimId (claimName, claimId) { + return new Promise((resolve, reject) => { + const url = `/api/claim-get-long-id/${claimName}/${claimId}`; + return request(url) + .then(({ success, message }) => { + console.log('get long claim id response:', message); + if (!success) { + reject(message); + } + resolve(message); + }) + .catch((error) => { + reject(error.message); + }); + }); + } + getClaimData (claimName, claimId) { + return new Promise((resolve, reject) => { + const url = `/api/claim-get-data/${claimName}/${claimId}`; + return request(url) + .then(({ success, message }) => { + console.log('get claim data response:', message); + if (!success) { + reject(message); + } + resolve(message); + }) + .catch((error) => { + reject(error.message); + }); + }); + } render () { return (
- + {this.state.error && +

{this.state.error}

+ } + {this.state.claimData && +
+ + hosted via Spee.ch +
+ }
); } diff --git a/react/components/ShowPage/index.js b/react/components/ShowPage/index.js index bc66ae9c..b42e76d6 100644 --- a/react/components/ShowPage/index.js +++ b/react/components/ShowPage/index.js @@ -14,6 +14,7 @@ class ShowPage extends React.Component { claimId : null, claimName : null, isServeRequest: null, + longClaimId : null, }; } componentDidMount () { @@ -77,15 +78,19 @@ class ShowPage extends React.Component { if (this.state.isServeRequest) { return ( ); } return ( ); } diff --git a/routes/api-routes.js b/routes/api-routes.js index 8fd4f224..dc63a44b 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -96,8 +96,8 @@ module.exports = (app) => { }); }); // route to run a resolve request on the daemon - app.get('/api/claim-resolve/:uri', ({ headers, ip, originalUrl, params }, res) => { - resolveUri(params.uri) + app.get('/api/claim-resolve/:name/:claimId', ({ headers, ip, originalUrl, params }, res) => { + resolveUri(`${params.name}#${params.claimId}`) .then(resolvedUri => { res.status(200).json(resolvedUri); }) @@ -205,4 +205,36 @@ module.exports = (app) => { errorHandlers.handleApiError(originalUrl, ip, error, res); }); }); + app.get('/api/claim-get-long-id/:claimName/:claimId', ({ ip, originalUrl, body, params }, res) => { + const claimName = params.claimName; + let claimId = params.claimId; + if (claimId === 'none') claimId = null; + db.Claim.getLongClaimId(claimName, claimId) + .then(longId => { + if (!longId) { + return res.status(200).json({success: false, message: 'No matching claim id could be found'}); + } + res.status(200).json({success: true, message: longId}); + }) + .catch(error => { + logger.error('api error getting long claim id', error); + errorHandlers.handleApiError(originalUrl, ip, error, res); + }); + }); + app.get('/api/claim-get-data/:claimName/:claimId', ({ ip, originalUrl, body, params }, res) => { + const claimName = params.claimName; + let claimId = params.claimId; + if (claimId === 'none') claimId = null; + db.Claim.resolveClaim(claimName, claimId) + .then(claimInfo => { + if (!claimInfo) { + return res.status(200).json({success: false, message: 'No claim could be found'}); + } + res.status(200).json({success: true, message: claimInfo}); + }) + .catch(error => { + logger.error('api error getting long claim id', error); + errorHandlers.handleApiError(originalUrl, ip, error, res); + }); + }); }; diff --git a/routes/serve-routes.js b/routes/serve-routes.js index de34d455..ab42137e 100644 --- a/routes/serve-routes.js +++ b/routes/serve-routes.js @@ -155,12 +155,12 @@ module.exports = (app) => { let isChannel, channelName, channelClaimId; try { ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(params.identifier)); + // log the result + logger.debug(`isChannel: ${isChannel}, channelName: ${channelName}, channelClaimId: ${channelClaimId}`); } catch (error) { return handleRequestError(originalUrl, ip, error, res); } if (isChannel) { - // log the request data for debugging - logRequestData(null, null, channelName, null); // handle showing the channel page return res.status(200).render('index'); } else { From 6ac91046b1dc83143636bdbb258116b0d410fc2f Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 30 Jan 2018 17:15:23 -0800 Subject: [PATCH 10/96] changed show components to share ShowAsset --- react/components/ShowAsset/index.js | 106 ++++++++++++++++++++++++++ react/components/ShowDetails/index.js | 39 +++++----- react/components/ShowLite/index.js | 73 ++---------------- react/components/ShowPage/index.js | 79 +++++++++---------- routes/api-routes.js | 24 +++--- 5 files changed, 189 insertions(+), 132 deletions(-) create mode 100644 react/components/ShowAsset/index.js diff --git a/react/components/ShowAsset/index.js b/react/components/ShowAsset/index.js new file mode 100644 index 00000000..63d2021b --- /dev/null +++ b/react/components/ShowAsset/index.js @@ -0,0 +1,106 @@ +import React from 'react'; +import ShowLite from 'components/ShowLite'; +import ShowDetails from 'components/ShowDetails'; +import request from 'utils/request'; + +class ShowAsset extends React.Component { + constructor (props) { + super(props); + this.state = { + claimData: null, + error : null, + }; + this.getLongClaimId = this.getLongClaimId.bind(this); + this.getClaimData = this.getClaimData.bind(this); + } + componentDidMount () { + console.log('ShowAsset did mount'); + console.log('ShowAsset props', this.props); + let body = {}; + if (this.props.identifier) { + if (this.props.identifier.isChannel) { + body['channelName'] = this.props.identifier.channelName; + body['channelClaimId'] = this.props.identifier.channelClaimId; + } else { + body['claimId'] = this.props.identifier.claimId; + } + } + if (this.props.claim) { + body['claimName'] = this.props.claim.claimName; + } + const params = { + method : 'POST', + headers: new Headers({ + 'Content-Type': 'application/json', + }), + body: JSON.stringify(body), + } + const that = this; + this.getLongClaimId(params) + .then(claimLongId => { + return that.getClaimData(this.props.claim.claimName, claimLongId); + }) + .then(claimData => { + this.setState({ claimData }); + }) + .catch(error => { + this.setState({error}); + }); + } + getLongClaimId (params) { + const url = `/api/claim-get-long-id`; + console.log('params:', params); + return new Promise((resolve, reject) => { + request(url, params) + .then(({ success, message }) => { + console.log('get long claim id response:', message); + if (!success) { + reject(message); + } + resolve(message); + }) + .catch((error) => { + reject(error.message); + }); + }); + } + getClaimData (claimName, claimId) { + return new Promise((resolve, reject) => { + const url = `/api/claim-get-data/${claimName}/${claimId}`; + return request(url) + .then(({ success, message }) => { + console.log('get claim data response:', message); + if (!success) { + reject(message); + } + resolve(message); + }) + .catch((error) => { + reject(error.message); + }); + }); + } + render () { + if (this.props.isServeRequest) { + return ( + + ); + } + return ( + + ); + } +}; + +// required props +// identifier +// claim +// isServeRequest + +export default ShowAsset; diff --git a/react/components/ShowDetails/index.js b/react/components/ShowDetails/index.js index 1825252d..a6e810bb 100644 --- a/react/components/ShowDetails/index.js +++ b/react/components/ShowDetails/index.js @@ -4,7 +4,7 @@ import AssetTitle from 'components/AssetTitle'; import AssetDisplay from 'components/AssetDisplay'; import AssetInfo from 'components/AssetInfo'; -class ShowDetailsPage extends React.Component { +class ShowDetails extends React.Component { componentDidMount () { console.log(this.props); } @@ -12,24 +12,29 @@ class ShowDetailsPage extends React.Component { return (
-
-
- -
-
-
- + {this.props.error && +

{this.props.error}

+ } + {this.props.claimData && +
+
+ +
+
+
+ +
+
+
+ +
-
-
-
+ }
-
-
); } }; @@ -41,4 +46,4 @@ class ShowDetailsPage extends React.Component { // claimId // claimName -export default ShowDetailsPage; +export default ShowDetails; diff --git a/react/components/ShowLite/index.js b/react/components/ShowLite/index.js index 908042d7..a7865278 100644 --- a/react/components/ShowLite/index.js +++ b/react/components/ShowLite/index.js @@ -1,78 +1,21 @@ import React from 'react'; import { Link } from 'react-router-dom'; import AssetDisplay from 'components/AssetDisplay'; -import request from 'utils/request'; -class ShowLitePage extends React.Component { - constructor (props) { - super(props); - this.state = { - claimData: null, - error : null, - }; - this.getLongClaimId = this.getLongClaimId.bind(this); - this.getClaimData = this.getClaimData.bind(this); - } - componentDidMount () { - const that = this; - const claimName = that.props.claimName; - const claimId = that.props.claimId || 'none'; - this.getLongClaimId(claimName, claimId) - .then(claimLongId => { - return that.getClaimData(claimName, claimLongId); - }) - .then(claimData => { - this.setState({ claimData }); - }) - .catch(error => { - this.setState({error}); - }); - } - getLongClaimId (claimName, claimId) { - return new Promise((resolve, reject) => { - const url = `/api/claim-get-long-id/${claimName}/${claimId}`; - return request(url) - .then(({ success, message }) => { - console.log('get long claim id response:', message); - if (!success) { - reject(message); - } - resolve(message); - }) - .catch((error) => { - reject(error.message); - }); - }); - } - getClaimData (claimName, claimId) { - return new Promise((resolve, reject) => { - const url = `/api/claim-get-data/${claimName}/${claimId}`; - return request(url) - .then(({ success, message }) => { - console.log('get claim data response:', message); - if (!success) { - reject(message); - } - resolve(message); - }) - .catch((error) => { - reject(error.message); - }); - }); - } +class ShowLite extends React.Component { render () { return (
- {this.state.error && -

{this.state.error}

+ {this.props.error && +

{this.props.error}

} - {this.state.claimData && + {this.props.claimData &&
- hosted via Spee.ch + hosted via Spee.ch
}
@@ -80,4 +23,4 @@ class ShowLitePage extends React.Component { } }; -export default ShowLitePage; +export default ShowLite; diff --git a/react/components/ShowPage/index.js b/react/components/ShowPage/index.js index b42e76d6..5846c686 100644 --- a/react/components/ShowPage/index.js +++ b/react/components/ShowPage/index.js @@ -1,6 +1,5 @@ import React from 'react'; -import ShowLite from 'components/ShowLite'; -import ShowDetails from 'components/ShowDetails'; +import ShowAsset from 'components/ShowAsset'; import ShowChannel from 'components/ShowChannel'; import lbryUri from 'utils/lbryUri'; @@ -8,16 +7,13 @@ class ShowPage extends React.Component { constructor (props) { super(props); this.state = { - isChannel : null, - channelName : null, - channelClaimId: null, - claimId : null, - claimName : null, + identifier : null, + claim : null, isServeRequest: null, - longClaimId : null, }; } componentDidMount () { + console.log('ShowPage did mount'); const identifier = this.props.match.params.identifier; const claim = this.props.match.params.claim; // handle case of identifier and claim @@ -31,11 +27,15 @@ class ShowPage extends React.Component { } // set state return this.setState({ - isChannel, - channelName, - channelClaimId, - claimId, - claimName, + identifier: { + isChannel, + channelName, + channelClaimId, + claimId, + }, + claim: { + claimName, + }, isServeRequest, }); } @@ -44,54 +44,51 @@ class ShowPage extends React.Component { try { ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(claim)); } catch (error) { - console.log('error:', error); + return console.log('error:', error); } if (isChannel) { return this.setState({ - isChannel, - channelName, - channelClaimId, + claim: { + isChannel, + channelName, + channelClaimId, + }, }); } let claimName, isServeRequest; try { ({claimName, isServeRequest} = lbryUri.parseName(claim)); } catch (error) { - console.log('error:', error); + return console.log('error:', error); } this.setState({ - claimName, + claim: { + claimName, + }, isServeRequest, }); } render () { - const identifier = this.props.match.params.identifier; - console.log('rendering component'); - if (!identifier && this.state.isChannel) { + console.log('rendering ShowPage'); + if (this.state.claim) { + if (this.state.claim.isChannel) { + return ( + + ); + } return ( - - ); - } - if (this.state.isServeRequest) { - return ( - ); } return ( - +

Loading...

); } }; diff --git a/routes/api-routes.js b/routes/api-routes.js index dc63a44b..57f1c629 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -9,9 +9,10 @@ const { createPublishParams, parsePublishApiRequestBody, parsePublishApiRequestF const errorHandlers = require('../helpers/errorHandlers.js'); const { sendGoogleAnalyticsTiming } = require('../helpers/statsHelpers.js'); const { authenticateIfNoUserToken } = require('../auth/authentication.js'); -const { getChannelViewData } = require('../controllers/serveController.js'); +const { getChannelViewData, getClaimId } = require('../controllers/serveController.js'); const NO_CHANNEL = 'NO_CHANNEL'; +const NO_CLAIM = 'NO_CLAIM'; module.exports = (app) => { // route to run a claim_list request on the daemon @@ -205,16 +206,21 @@ module.exports = (app) => { errorHandlers.handleApiError(originalUrl, ip, error, res); }); }); - app.get('/api/claim-get-long-id/:claimName/:claimId', ({ ip, originalUrl, body, params }, res) => { - const claimName = params.claimName; - let claimId = params.claimId; - if (claimId === 'none') claimId = null; - db.Claim.getLongClaimId(claimName, claimId) - .then(longId => { - if (!longId) { + app.post('/api/claim-get-long-id', ({ ip, originalUrl, body, params }, res) => { + logger.debug('body:', body); + const channelName = body.channelName; + const channelClaimId = body.channelClaimId; + const claimName = body.claimName; + const claimId = body.claimId; + getClaimId(channelName, channelClaimId, claimName, claimId) + .then(result => { + if (result === NO_CHANNEL) { + return res.status(200).json({success: false, message: 'No matching channel could be found'}); + } + if (result === NO_CLAIM) { return res.status(200).json({success: false, message: 'No matching claim id could be found'}); } - res.status(200).json({success: true, message: longId}); + res.status(200).json({success: true, message: result}); }) .catch(error => { logger.error('api error getting long claim id', error); From e6e50a1253fe329f82f0f3df4941e9649ec17df1 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 31 Jan 2018 10:40:26 -0800 Subject: [PATCH 11/96] added basic asset preview --- react/components/AssetPreview/index.js | 49 ++++++++++++++++++++++---- react/components/ShowChannel/index.js | 7 ++-- 2 files changed, 46 insertions(+), 10 deletions(-) diff --git a/react/components/AssetPreview/index.js b/react/components/AssetPreview/index.js index b00275de..79eefb3c 100644 --- a/react/components/AssetPreview/index.js +++ b/react/components/AssetPreview/index.js @@ -1,11 +1,48 @@ import React from 'react'; -const AssetPreview = ({ name, claimId, contentType }) => { - return ( -
-

name: {name}, claimId: {claimId}, contentType: {contentType}

-
- ); +const AssetPreview = ({ name, claimId, fileExt, contentType }) => { + const directSourceLink = `${claimId}/${name}.${fileExt}`; + const previewHolderStyle = { + clear: 'both', + display: 'inline-block', + width: '31%', + padding: '0px', + margin: '1%', + backgroundColor: 'black', + }; + const assetStyle = { + width: '100%', + padding: '0px', + margin: '0px', + }; + switch (contentType) { + case 'image/jpeg': + case 'image/jpg': + case 'image/png': + return ( +
+ {name} +
+ ); + case 'image/gif': + return ( +
+ {name} +
+ ); + case 'video/mp4': + return ( +
+ +
+ ); + default: + return ( +

unsupported file type

+ ); + } }; export default AssetPreview; diff --git a/react/components/ShowChannel/index.js b/react/components/ShowChannel/index.js index c86168c8..1e51f353 100644 --- a/react/components/ShowChannel/index.js +++ b/react/components/ShowChannel/index.js @@ -21,19 +21,18 @@ class ShowChannel extends React.Component { this.updateChannelData = this.updateChannelData.bind(this); } componentDidMount () { - console.log(this.props); this.updateChannelData(1); } updateChannelData (page) { - const that = this; const channelName = this.props.channelName; const channelClaimId = this.props.channelClaimId || 'none'; const url = `/api/channel-get-content/${channelName}/${channelClaimId}/${page}`; + const that = this; return request(url) .then(({ success, message, data }) => { console.log('get channel data response:', data); if (!success) { - return this.setState({error: message}); + return that.setState({error: message}); } that.setState({ channelName : data.channelName, @@ -67,7 +66,7 @@ class ShowChannel extends React.Component {

channel name: {this.props.channelName}

full channel id: {this.state.longChannelClaimId ? this.state.longChannelClaimId : 'loading...'}

short channel id: {this.state.shortChannelClaimId ? this.state.shortChannelClaimId : 'loading...'}

-

# of claims in channel: {this.state.totalResults ? this.state.totalResults : 'loading...' }

+

# of claims in channel: {this.state.totalResults >= 0 ? this.state.totalResults : 'loading...' }

From 8fc44a45348945dd7a98f1187cca8aff1a7d655c Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 31 Jan 2018 10:52:57 -0800 Subject: [PATCH 12/96] added active styling to nav bar links --- react/containers/NavBar/view.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/react/containers/NavBar/view.jsx b/react/containers/NavBar/view.jsx index 5f76c61e..7ff11cf6 100644 --- a/react/containers/NavBar/view.jsx +++ b/react/containers/NavBar/view.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Link, withRouter } from 'react-router-dom'; +import { NavLink, withRouter } from 'react-router-dom'; import Logo from 'components/Logo'; import NavBarChannelDropdown from 'components/NavBarChannelOptionsDropdown'; import request from 'utils/request'; @@ -64,8 +64,8 @@ class NavBar extends React.Component { Open-source, decentralized image and video sharing.
- Publish - About + Publish + About { this.props.channelName ? ( ) : ( - Channel + Channel )}
From aeaab8bf2d841001af2691d99dcabe400e6e1687 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 31 Jan 2018 11:49:20 -0800 Subject: [PATCH 13/96] split up url parsing functions --- react/components/ShowAsset/index.js | 4 +- .../index.js | 0 .../{ShowLite => ShowAssetLite}/index.js | 0 react/components/ShowPage/index.js | 64 ++++++++++++------- 4 files changed, 44 insertions(+), 24 deletions(-) rename react/components/{ShowDetails => ShowAssetDetails}/index.js (100%) rename react/components/{ShowLite => ShowAssetLite}/index.js (100%) diff --git a/react/components/ShowAsset/index.js b/react/components/ShowAsset/index.js index 63d2021b..d2dd5db7 100644 --- a/react/components/ShowAsset/index.js +++ b/react/components/ShowAsset/index.js @@ -1,6 +1,6 @@ import React from 'react'; -import ShowLite from 'components/ShowLite'; -import ShowDetails from 'components/ShowDetails'; +import ShowLite from 'components/ShowAssetLite'; +import ShowDetails from 'components/ShowAssetDetails'; import request from 'utils/request'; class ShowAsset extends React.Component { diff --git a/react/components/ShowDetails/index.js b/react/components/ShowAssetDetails/index.js similarity index 100% rename from react/components/ShowDetails/index.js rename to react/components/ShowAssetDetails/index.js diff --git a/react/components/ShowLite/index.js b/react/components/ShowAssetLite/index.js similarity index 100% rename from react/components/ShowLite/index.js rename to react/components/ShowAssetLite/index.js diff --git a/react/components/ShowPage/index.js b/react/components/ShowPage/index.js index 5846c686..ef3e4c20 100644 --- a/react/components/ShowPage/index.js +++ b/react/components/ShowPage/index.js @@ -3,6 +3,9 @@ import ShowAsset from 'components/ShowAsset'; import ShowChannel from 'components/ShowChannel'; import lbryUri from 'utils/lbryUri'; +const CHANNEL = 'CHANNEL'; +const ASSET = 'ASSET'; + class ShowPage extends React.Component { constructor (props) { super(props); @@ -11,35 +14,52 @@ class ShowPage extends React.Component { claim : null, isServeRequest: null, }; + this.parseUrlAndUpdateState = this.parseUrlAndUpdateState.bind(this); + this.parseAndUpdateIdentifierAndClaim = this.parseAndUpdateIdentifierAndClaim.bind(this); + this.parseAndUpdateClaimOnly = this.parseAndUpdateClaimOnly.bind(this); } componentDidMount () { console.log('ShowPage did mount'); + this.parseUrlAndUpdateState(); + } + parseUrlAndUpdateState () { const identifier = this.props.match.params.identifier; const claim = this.props.match.params.claim; - // handle case of identifier and claim if (identifier) { - let isChannel, channelName, channelClaimId, claimId, claimName, isServeRequest; - try { - ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(identifier)); - ({ claimName, isServeRequest } = lbryUri.parseName(claim)); - } catch (error) { - return console.log('error:', error); - } - // set state - return this.setState({ - identifier: { - isChannel, - channelName, - channelClaimId, - claimId, - }, - claim: { - claimName, - }, - isServeRequest, - }); + return this.parseAndUpdateIdentifierAndClaim(identifier, claim); } - // handle case of just claim (asset or channel) + this.parseAndUpdateClaimOnly(claim); + } + parseAndUpdateIdentifierAndClaim(identifier, claim) { + // handle case of identifier and claim + // this is a request for an asset + // claim will be an asset claim + // the identifier could be a channel or a claim id + let isChannel, channelName, channelClaimId, claimId, claimName, isServeRequest; + try { + ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(identifier)); + ({ claimName, isServeRequest } = lbryUri.parseName(claim)); + } catch (error) { + return console.log('error:', error); + } + // set state + return this.setState({ + identifier: { + isChannel, + channelName, + channelClaimId, + claimId, + }, + claim: { + claimName, + }, + isServeRequest, + }); + } + parseAndUpdateClaimOnly (claim) { + // handle case of just claim + // this could be a request for an asset or a channel page + // claim could be an asset claim or a channel claim let isChannel, channelName, channelClaimId; try { ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(claim)); From a5f383aff80830b47afaf1bb23ed7e7e44ee2a5c Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 31 Jan 2018 14:50:35 -0800 Subject: [PATCH 14/96] fixed issue where ShowPage wasnot re-rendering on new props --- react/components/AssetPreview/index.js | 6 +++++- react/components/ShowPage/index.js | 16 ++++++++++++---- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/react/components/AssetPreview/index.js b/react/components/AssetPreview/index.js index 79eefb3c..f298949b 100644 --- a/react/components/AssetPreview/index.js +++ b/react/components/AssetPreview/index.js @@ -1,7 +1,9 @@ import React from 'react'; +import { Link } from 'react-router-dom'; const AssetPreview = ({ name, claimId, fileExt, contentType }) => { const directSourceLink = `${claimId}/${name}.${fileExt}`; + const showUrlLink = `${claimId}/${name}`; const previewHolderStyle = { clear: 'both', display: 'inline-block', @@ -21,7 +23,9 @@ const AssetPreview = ({ name, claimId, fileExt, contentType }) => { case 'image/png': return (
- {name} + + {name} +
); case 'image/gif': diff --git a/react/components/ShowPage/index.js b/react/components/ShowPage/index.js index ef3e4c20..6945e729 100644 --- a/react/components/ShowPage/index.js +++ b/react/components/ShowPage/index.js @@ -20,17 +20,25 @@ class ShowPage extends React.Component { } componentDidMount () { console.log('ShowPage did mount'); - this.parseUrlAndUpdateState(); - } - parseUrlAndUpdateState () { const identifier = this.props.match.params.identifier; const claim = this.props.match.params.claim; + this.parseUrlAndUpdateState(identifier, claim); + } + componentWillReceiveProps (nextProps) { + if (this.props.match.params !== nextProps.match.params) { + console.log('received new params props'); + const identifier = nextProps.match.params.identifier; + const claim = nextProps.match.params.claim; + this.parseUrlAndUpdateState(identifier, claim); + } + } + parseUrlAndUpdateState (identifier, claim) { if (identifier) { return this.parseAndUpdateIdentifierAndClaim(identifier, claim); } this.parseAndUpdateClaimOnly(claim); } - parseAndUpdateIdentifierAndClaim(identifier, claim) { + parseAndUpdateIdentifierAndClaim (identifier, claim) { // handle case of identifier and claim // this is a request for an asset // claim will be an asset claim From f7e50597e65703856b3e908859180b49f191e462 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 31 Jan 2018 16:00:11 -0800 Subject: [PATCH 15/96] added ChannelClaimDisplay as subcomponent to ShowChannel --- controllers/serveController.js | 37 +++++++-- helpers/channelPagination.js | 23 +++--- react/components/AssetPreview/index.js | 76 +++++++++---------- .../components/ChannelClaimsDisplay/index.js | 72 ++++++++++++++++++ react/components/ShowChannel/index.js | 47 ++++-------- routes/api-routes.js | 26 +++++-- 6 files changed, 188 insertions(+), 93 deletions(-) create mode 100644 react/components/ChannelClaimsDisplay/index.js diff --git a/controllers/serveController.js b/controllers/serveController.js index c638162d..a1a8fbc8 100644 --- a/controllers/serveController.js +++ b/controllers/serveController.js @@ -1,6 +1,6 @@ const db = require('../models'); const logger = require('winston'); -const { returnPaginatedChannelViewData } = require('../helpers/channelPagination.js'); +const { returnPaginatedChannelClaims } = require('../helpers/channelPagination.js'); const NO_CHANNEL = 'NO_CHANNEL'; const NO_CLAIM = 'NO_CLAIM'; @@ -53,7 +53,7 @@ module.exports = { }); }); }, - getChannelViewData (channelName, channelClaimId, page) { + getChannelData (channelName, channelClaimId, page) { return new Promise((resolve, reject) => { // 1. get the long channel Id (make sure channel exists) db.Certificate.getLongChannelId(channelName, channelClaimId) @@ -62,14 +62,41 @@ module.exports = { return [null, null, null]; } // 2. get the short ID and all claims for that channel - return Promise.all([longChannelClaimId, db.Certificate.getShortChannelIdFromLongChannelId(longChannelClaimId, channelName), db.Claim.getAllChannelClaims(longChannelClaimId)]); + return Promise.all([longChannelClaimId, db.Certificate.getShortChannelIdFromLongChannelId(longChannelClaimId, channelName)]); }) - .then(([longChannelClaimId, shortChannelClaimId, channelClaimsArray]) => { + .then(([longChannelClaimId, shortChannelClaimId]) => { + if (!longChannelClaimId) { + return resolve(NO_CHANNEL); + } + // 3. return all the channel information + resolve({ + channelName, + longChannelClaimId, + shortChannelClaimId, + }); + }) + .catch(error => { + reject(error); + }); + }); + }, + getChannelClaims (channelName, channelClaimId, page) { + return new Promise((resolve, reject) => { + // 1. get the long channel Id (make sure channel exists) + db.Certificate.getLongChannelId(channelName, channelClaimId) + .then(longChannelClaimId => { + if (!longChannelClaimId) { + return [null, null, null]; + } + // 2. get the short ID and all claims for that channel + return Promise.all([longChannelClaimId, db.Claim.getAllChannelClaims(longChannelClaimId)]); + }) + .then(([longChannelClaimId, channelClaimsArray]) => { if (!longChannelClaimId) { return resolve(NO_CHANNEL); } // 3. format the data for the view, including pagination - let paginatedChannelViewData = returnPaginatedChannelViewData(channelName, longChannelClaimId, shortChannelClaimId, channelClaimsArray, page); + let paginatedChannelViewData = returnPaginatedChannelClaims(channelName, longChannelClaimId, channelClaimsArray, page); // 4. return all the channel information and contents resolve(paginatedChannelViewData); }) diff --git a/helpers/channelPagination.js b/helpers/channelPagination.js index e5d99b7e..e76a1158 100644 --- a/helpers/channelPagination.js +++ b/helpers/channelPagination.js @@ -1,19 +1,18 @@ -const CLAIMS_PER_PAGE = 10; +const CLAIMS_PER_PAGE = 12; module.exports = { - returnPaginatedChannelViewData (channelName, longChannelClaimId, shortChannelClaimId, claims, page) { + returnPaginatedChannelClaims (channelName, longChannelClaimId, claims, page) { const totalPages = module.exports.determineTotalPages(claims); const paginationPage = module.exports.getPageFromQuery(page); const viewData = { - channelName : channelName, - longChannelClaimId : longChannelClaimId, - shortChannelClaimId: shortChannelClaimId, - claims : module.exports.extractPageFromClaims(claims, paginationPage), - previousPage : module.exports.determinePreviousPage(paginationPage), - currentPage : paginationPage, - nextPage : module.exports.determineNextPage(totalPages, paginationPage), - totalPages : totalPages, - totalResults : module.exports.determineTotalClaims(claims), + channelName : channelName, + longChannelClaimId: longChannelClaimId, + claims : module.exports.extractPageFromClaims(claims, paginationPage), + previousPage : module.exports.determinePreviousPage(paginationPage), + currentPage : paginationPage, + nextPage : module.exports.determineNextPage(totalPages, paginationPage), + totalPages : totalPages, + totalResults : module.exports.determineTotalClaims(claims), }; return viewData; }, @@ -30,7 +29,7 @@ module.exports = { // logger.debug('claims is array?', Array.isArray(claims)); // logger.debug(`pageNumber ${pageNumber} is number?`, Number.isInteger(pageNumber)); const claimStartIndex = (pageNumber - 1) * CLAIMS_PER_PAGE; - const claimEndIndex = claimStartIndex + 10; + const claimEndIndex = claimStartIndex + CLAIMS_PER_PAGE; const pageOfClaims = claims.slice(claimStartIndex, claimEndIndex); return pageOfClaims; }, diff --git a/react/components/AssetPreview/index.js b/react/components/AssetPreview/index.js index f298949b..c42d8b6d 100644 --- a/react/components/AssetPreview/index.js +++ b/react/components/AssetPreview/index.js @@ -1,52 +1,52 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom' const AssetPreview = ({ name, claimId, fileExt, contentType }) => { const directSourceLink = `${claimId}/${name}.${fileExt}`; const showUrlLink = `${claimId}/${name}`; const previewHolderStyle = { - clear: 'both', - display: 'inline-block', - width: '31%', - padding: '0px', - margin: '1%', + clear : 'both', + display : 'inline-block', + width : '31%', + padding : '0px', + margin : '1%', backgroundColor: 'black', }; const assetStyle = { - width: '100%', + width : '100%', padding: '0px', - margin: '0px', + margin : '0px', }; - switch (contentType) { - case 'image/jpeg': - case 'image/jpg': - case 'image/png': - return ( -
- - {name} - -
- ); - case 'image/gif': - return ( -
- {name} -
- ); - case 'video/mp4': - return ( -
- -
- ); - default: - return ( -

unsupported file type

- ); - } + return ( +
+ + {(() => { + switch (contentType) { + case 'image/jpeg': + case 'image/jpg': + case 'image/png': + return ( + {name}/ + ); + case 'image/gif': + return ( + {name}/ + ); + case 'video/mp4': + return ( + + ); + default: + return ( +

unsupported file type

+ ); + } + })()} + +
+ ); }; export default AssetPreview; diff --git a/react/components/ChannelClaimsDisplay/index.js b/react/components/ChannelClaimsDisplay/index.js new file mode 100644 index 00000000..09049419 --- /dev/null +++ b/react/components/ChannelClaimsDisplay/index.js @@ -0,0 +1,72 @@ +import React from 'react'; +import NavBar from 'containers/NavBar'; +import AssetPreview from 'components/AssetPreview'; +import request from 'utils/request'; + +class ChannelClaimsDisplay extends React.Component { + constructor (props) { + super(props); + this.state = { + error: null, + page : 1, + }; + this.getAndStoreChannelClaims = this.getAndStoreChannelClaims.bind(this); + } + componentDidMount () { + const channelName = this.props.channelName; + const channelClaimId = this.props.channelClaimId || 'none'; + const page = this.state.page; + this.getAndStoreChannelClaims(channelName, channelClaimId, page); + } + getAndStoreChannelClaims (channelName, channelClaimId, page) { + const url = `/api/channel-claims/${channelName}/${channelClaimId}/${page}`; + const that = this; + return request(url) + .then(({ success, message, data }) => { + console.log('api/channel-claims response:', data); + if (!success) { + return that.setState({error: message}); + } + that.setState({ + claims : data.claims, + currentPage : data.currentPage, + nextPage : data.nextPage, + previousPage: data.previousPage, + totalPages : data.totalPages, + totalResults: data.totalResults, + }); + }) + .catch((error) => { + that.setState({error: error.message}); + }); + } + render () { + return ( +
+ {this.state.error ? ( +
+
+

{this.state.error}

+
+
+ ) : ( +
+

# of claims in channel: {this.state.totalResults >= 0 ? this.state.totalResults : 'loading...' }

+ {this.state.claims && this.state.claims.map((claim, index) => )} +
+ )} +
+ ); + } +}; + +// required props +// channelName +// channelClaimId + +export default ChannelClaimsDisplay; diff --git a/react/components/ShowChannel/index.js b/react/components/ShowChannel/index.js index 1e51f353..d28acaf6 100644 --- a/react/components/ShowChannel/index.js +++ b/react/components/ShowChannel/index.js @@ -1,49 +1,34 @@ import React from 'react'; import NavBar from 'containers/NavBar'; -import AssetPreview from 'components/AssetPreview'; +import ChannelClaimsDisplay from 'components/ChannelClaimsDisplay'; import request from 'utils/request'; class ShowChannel extends React.Component { constructor (props) { super(props); this.state = { - error : null, - channelName : null, - claims : null, - currentPage : null, - longChannelClaimId : null, - nextPage : null, - previousPage : null, - shortChannelClaimId: null, - totalPages : null, - totalResults : null, + error: null, }; - this.updateChannelData = this.updateChannelData.bind(this); + this.getAndStoreChannelData = this.getAndStoreChannelData.bind(this); } componentDidMount () { - this.updateChannelData(1); - } - updateChannelData (page) { const channelName = this.props.channelName; const channelClaimId = this.props.channelClaimId || 'none'; - const url = `/api/channel-get-content/${channelName}/${channelClaimId}/${page}`; + this.getAndStoreChannelData(channelName, channelClaimId); + } + getAndStoreChannelData (channelName, channelClaimId) { + const url = `/api/channel-data/${channelName}/${channelClaimId}`; const that = this; return request(url) .then(({ success, message, data }) => { - console.log('get channel data response:', data); + console.log('api/channel-data response:', data); if (!success) { return that.setState({error: message}); } that.setState({ channelName : data.channelName, - claims : data.claims, - currentPage : data.currentPage, longChannelClaimId : data.longChannelClaimId, - nextPage : data.nextPage, - previousPage : data.previousPage, shortChannelClaimId: data.shortChannelClaimId, - totalPages : data.totalPages, - totalResults : data.totalResults, }); }) .catch((error) => { @@ -66,18 +51,14 @@ class ShowChannel extends React.Component {

channel name: {this.props.channelName}

full channel id: {this.state.longChannelClaimId ? this.state.longChannelClaimId : 'loading...'}

short channel id: {this.state.shortChannelClaimId ? this.state.shortChannelClaimId : 'loading...'}

-

# of claims in channel: {this.state.totalResults >= 0 ? this.state.totalResults : 'loading...' }

-
- {/* claims here */} - {this.state.claims && this.state.claims.map((claim, index) => )} -
+ { (this.state.channelName && this.state.longChannelClaimId) && + + }
)} diff --git a/routes/api-routes.js b/routes/api-routes.js index 57f1c629..4cc20ba9 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -9,7 +9,7 @@ const { createPublishParams, parsePublishApiRequestBody, parsePublishApiRequestF const errorHandlers = require('../helpers/errorHandlers.js'); const { sendGoogleAnalyticsTiming } = require('../helpers/statsHelpers.js'); const { authenticateIfNoUserToken } = require('../auth/authentication.js'); -const { getChannelViewData, getClaimId } = require('../controllers/serveController.js'); +const { getChannelData, getChannelClaims, getClaimId } = require('../controllers/serveController.js'); const NO_CHANNEL = 'NO_CHANNEL'; const NO_CLAIM = 'NO_CLAIM'; @@ -189,12 +189,28 @@ module.exports = (app) => { errorHandlers.handleApiError(originalUrl, ip, error, res); }); }); - app.get('/api/channel-get-content/:name/:longId/:page', ({ ip, originalUrl, body, params }, res) => { - const channelName = params.name; - let channelClaimId = params.longId; + app.get('/api/channel-data/:channelName/:channelClaimId', ({ ip, originalUrl, body, params }, res) => { + const channelName = params.channelName; + let channelClaimId = params.channelClaimId; + if (channelClaimId === 'none') channelClaimId = null; + getChannelData(channelName, channelClaimId, 0) // getChannelViewData(channelName, channelId, 0) + .then(data => { + if (data === NO_CHANNEL) { + return res.status(200).json({success: false, message: 'No matching channel was found'}); + } + res.status(200).json({success: true, data}); + }) + .catch(error => { + logger.error('api error getting channel contents', error); + errorHandlers.handleApiError(originalUrl, ip, error, res); + }); + }); + app.get('/api/channel-claims/:channelName/:channelClaimId/:page', ({ ip, originalUrl, body, params }, res) => { + const channelName = params.channelName; + let channelClaimId = params.channelClaimId; if (channelClaimId === 'none') channelClaimId = null; const page = params.page; - getChannelViewData(channelName, channelClaimId, page) + getChannelClaims(channelName, channelClaimId, page)// getChannelViewData(channelName, channelClaimId, page) .then(data => { if (data === NO_CHANNEL) { return res.status(200).json({success: false, message: 'No matching channel was found'}); From 37442cd9e6e2c579c30989a82cdbf98d161fc8da Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 31 Jan 2018 16:43:15 -0800 Subject: [PATCH 16/96] added basic tags to AssetInfo component --- react/components/AssetInfo/index.js | 177 +++++++++++++++++- .../components/ChannelClaimsDisplay/index.js | 1 - 2 files changed, 169 insertions(+), 9 deletions(-) diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 0fabd5a1..4c0306aa 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -1,12 +1,173 @@ import React from 'react'; -const AssetTitle = ({claimId}) => { - return ( -
-

Show asset info here

-

claimId: {claimId}

-
- ); +class AssetInfo extends React.Component { + constructor (props) { + super(props); + this.toggleSection = this.toggleSection.bind(this); + this.copyToClipboard = this.copyToClipboard.bind(this); + } + toggleSection (event) { + var dataSet = event.target.dataset; + var status = dataSet.status; + var toggle = document.getElementById('show-details-toggle'); + var details = document.getElementById('show-details'); + if (status === 'closed') { + details.hidden = false; + toggle.innerText = '[less]'; + toggle.dataset.status = 'open'; + } else { + details.hidden = true; + toggle.innerText = '[more]'; + toggle.dataset.status = 'closed'; + } + } + copyToClipboard (event) { + var elementToCopy = event.target.dataset.elementtocopy; + var element = document.getElementById(elementToCopy); + element.select(); + try { + document.execCommand('copy'); + } catch (err) { + this.setState({error: 'Oops, unable to copy'}); + } + } + render () { + return ( +
+ {this.props.channelName && +
+
+ Channel: +
+ +
+ } + + {this.props.description && +
+ {this.props.description} +
+ } + +
+ +
+
+ Embed: +
+
+
+
+ + {(this.props.contentType === 'video/mp4') ? ( + `}/> + ) : ( + `} + /> + )} +
+
+
+ +
+
+
+
+
+ +
+
+
+ Share: +
+
+ +
+
+
+ + + +
+ [more] +
+
+ ); + } }; -export default AssetTitle; +// required props +// {channelName, certificateId, description, shortId, name, fileExt, claimId, contentType, thumbnail, host} + +export default AssetInfo; diff --git a/react/components/ChannelClaimsDisplay/index.js b/react/components/ChannelClaimsDisplay/index.js index 09049419..021e03e0 100644 --- a/react/components/ChannelClaimsDisplay/index.js +++ b/react/components/ChannelClaimsDisplay/index.js @@ -1,5 +1,4 @@ import React from 'react'; -import NavBar from 'containers/NavBar'; import AssetPreview from 'components/AssetPreview'; import request from 'utils/request'; From 0e88bb4c60524b555a2aca42ee1421409009347d Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 31 Jan 2018 19:12:54 -0800 Subject: [PATCH 17/96] updated routes to handle serves only and return to client for show requests --- helpers/lbryUri.js | 29 +++- react/components/AssetDisplay/index.js | 4 +- react/components/AssetInfo/index.js | 14 +- react/components/ErrorPage/index.js | 20 +++ react/components/ShowAsset/index.js | 8 +- react/components/ShowAssetDetails/index.js | 19 ++- react/components/ShowPage/index.js | 17 ++- react/utils/lbryUri.js | 20 +-- routes/serve-routes.js | 166 +++++++++------------ 9 files changed, 165 insertions(+), 132 deletions(-) create mode 100644 react/components/ErrorPage/index.js diff --git a/helpers/lbryUri.js b/helpers/lbryUri.js index 15ab0b86..f72a25ef 100644 --- a/helpers/lbryUri.js +++ b/helpers/lbryUri.js @@ -55,14 +55,14 @@ module.exports = { claimId, }; }, - parseName: function (name) { - logger.debug('parsing name:', name); + parseClaim: function (claim) { + logger.debug('parsing name:', claim); const componentsRegex = new RegExp( '([^:$#/.]*)' + // name (stops at the first modifier) '([:$#.]?)([^/]*)' // modifier separator, modifier (stops at the first path separator or end) ); const [proto, claimName, modifierSeperator, modifier] = componentsRegex - .exec(name) + .exec(claim) .map(match => match || null); logger.debug(`${proto}, ${claimName}, ${modifierSeperator}, ${modifier}`); @@ -75,7 +75,6 @@ module.exports = { throw new Error(`Invalid characters in claim name: ${nameBadChars.join(', ')}.`); } // Validate and process modifier - let isServeRequest = false; if (modifierSeperator) { if (!modifier) { throw new Error(`No file extension provided after separator ${modifierSeperator}.`); @@ -83,11 +82,29 @@ module.exports = { if (modifierSeperator !== '.') { throw new Error(`The ${modifierSeperator} modifier is not supported in the claim name`); } - isServeRequest = true; } + // return results return { claimName, - isServeRequest, + }; + }, + parseModifier: function (claim) { + logger.debug('parsing modifier:', claim); + const componentsRegex = new RegExp( + '([^:$#/.]*)' + // name (stops at the first modifier) + '([:$#.]?)([^/]*)' // modifier separator, modifier (stops at the first path separator or end) + ); + const [proto, claimName, modifierSeperator, modifier] = componentsRegex + .exec(claim) + .map(match => match || null); + logger.debug(`${proto}, ${claimName}, ${modifierSeperator}, ${modifier}`); + // Validate and process modifier + let hasFileExtension = false; + if (modifierSeperator) { + hasFileExtension = true; + } + return { + hasFileExtension, }; }, }; diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 18d72c12..ae630a0b 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -1,9 +1,9 @@ import React from 'react'; -const AssetDisplay = ({ claimName, claimId }) => { +const AssetDisplay = ({ name, claimId }) => { return (
-

display {claimName}#{claimId} here

+

display {name}#{claimId} here

); }; diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 4c0306aa..006ea701 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -54,7 +54,7 @@ class AssetInfo extends React.Component {
@@ -168,6 +168,6 @@ class AssetInfo extends React.Component { }; // required props -// {channelName, certificateId, description, shortId, name, fileExt, claimId, contentType, thumbnail, host} +// {channelName, certificateId, description, shortClaimId, name, fileExt, claimId, contentType, thumbnail, host} export default AssetInfo; diff --git a/react/components/ErrorPage/index.js b/react/components/ErrorPage/index.js new file mode 100644 index 00000000..f40d348a --- /dev/null +++ b/react/components/ErrorPage/index.js @@ -0,0 +1,20 @@ +import React from 'react'; +import NavBar from 'containers/NavBar'; + +class ErrorPage extends React.Component { + render () { + return ( +
+ +
+

{this.props.error}

+
+
+ ); + } +}; + +// required props +// error + +export default ErrorPage; diff --git a/react/components/ShowAsset/index.js b/react/components/ShowAsset/index.js index d2dd5db7..616ae44e 100644 --- a/react/components/ShowAsset/index.js +++ b/react/components/ShowAsset/index.js @@ -1,6 +1,6 @@ import React from 'react'; -import ShowLite from 'components/ShowAssetLite'; -import ShowDetails from 'components/ShowAssetDetails'; +import ShowAssetLite from 'components/ShowAssetLite'; +import ShowAssetDetails from 'components/ShowAssetDetails'; import request from 'utils/request'; class ShowAsset extends React.Component { @@ -83,14 +83,14 @@ class ShowAsset extends React.Component { render () { if (this.props.isServeRequest) { return ( - ); } return ( - diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index a6e810bb..640aa409 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -13,7 +13,9 @@ class ShowDetails extends React.Component {
{this.props.error && -

{this.props.error}

+
+

{this.props.error}

+
} {this.props.claimData &&
@@ -23,13 +25,24 @@ class ShowDetails extends React.Component {
- +
diff --git a/react/components/ShowPage/index.js b/react/components/ShowPage/index.js index 6945e729..67e6a68e 100644 --- a/react/components/ShowPage/index.js +++ b/react/components/ShowPage/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import ErrorPage from 'components/ErrorPage'; import ShowAsset from 'components/ShowAsset'; import ShowChannel from 'components/ShowChannel'; import lbryUri from 'utils/lbryUri'; @@ -10,6 +11,7 @@ class ShowPage extends React.Component { constructor (props) { super(props); this.state = { + error : null, identifier : null, claim : null, isServeRequest: null, @@ -46,9 +48,9 @@ class ShowPage extends React.Component { let isChannel, channelName, channelClaimId, claimId, claimName, isServeRequest; try { ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(identifier)); - ({ claimName, isServeRequest } = lbryUri.parseName(claim)); + ({ claimName, isServeRequest } = lbryUri.parseClaim(claim)); } catch (error) { - return console.log('error:', error); + return this.setState({error: error.message}); } // set state return this.setState({ @@ -72,7 +74,7 @@ class ShowPage extends React.Component { try { ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(claim)); } catch (error) { - return console.log('error:', error); + return this.setState({error: error.message}); } if (isChannel) { return this.setState({ @@ -85,9 +87,9 @@ class ShowPage extends React.Component { } let claimName, isServeRequest; try { - ({claimName, isServeRequest} = lbryUri.parseName(claim)); + ({claimName, isServeRequest} = lbryUri.parseClaim(claim)); } catch (error) { - return console.log('error:', error); + return this.setState({error: error.message}); } this.setState({ claim: { @@ -98,6 +100,11 @@ class ShowPage extends React.Component { } render () { console.log('rendering ShowPage'); + if (this.state.error) { + return ( + + ); + } if (this.state.claim) { if (this.state.claim.isChannel) { return ( diff --git a/react/utils/lbryUri.js b/react/utils/lbryUri.js index 653b0fe7..957a1a5f 100644 --- a/react/utils/lbryUri.js +++ b/react/utils/lbryUri.js @@ -16,18 +16,18 @@ module.exports = { // Validate and process name if (!value) { - throw new Error(`Check your url. No channel name provided before "${modifierSeperator}"`); + throw new Error(`Check your URL. No channel name provided before "${modifierSeperator}"`); } const isChannel = value.startsWith(module.exports.CHANNEL_CHAR); const channelName = isChannel ? value : null; let claimId; if (isChannel) { if (!channelName) { - throw new Error('No channel name after @.'); + throw new Error('Check your URL. No channel name after "@".'); } const nameBadChars = (channelName).match(module.exports.REGEXP_INVALID_CHANNEL); if (nameBadChars) { - throw new Error(`Invalid characters in channel name: ${nameBadChars.join(', ')}.`); + throw new Error(`Check your URL. Invalid characters in channel name: "${nameBadChars.join(', ')}".`); } } else { claimId = value; @@ -37,13 +37,13 @@ module.exports = { let channelClaimId; if (modifierSeperator) { if (!modifier) { - throw new Error(`No modifier provided after separator "${modifierSeperator}"`); + throw new Error(`Check your URL. No modifier provided after separator "${modifierSeperator}"`); } if (modifierSeperator === ':') { channelClaimId = modifier; } else { - throw new Error(`The "${modifierSeperator}" modifier is not currently supported`); + throw new Error(`Check your URL. The "${modifierSeperator}" modifier is not currently supported`); } } return { @@ -53,7 +53,7 @@ module.exports = { claimId, }; }, - parseName: function (name) { + parseClaim: function (name) { console.log('parsing name:', name); const componentsRegex = new RegExp( '([^:$#/.]*)' + // name (stops at the first modifier) @@ -66,20 +66,20 @@ module.exports = { // Validate and process name if (!claimName) { - throw new Error('No claim name provided before .'); + throw new Error('Check your URL. No claim name provided before "."'); } const nameBadChars = (claimName).match(module.exports.REGEXP_INVALID_CLAIM); if (nameBadChars) { - throw new Error(`Invalid characters in claim name: ${nameBadChars.join(', ')}.`); + throw new Error(`Check your URL. Invalid characters in claim name: "${nameBadChars.join(', ')}".`); } // Validate and process modifier let isServeRequest = false; if (modifierSeperator) { if (!modifier) { - throw new Error(`No file extension provided after separator ${modifierSeperator}.`); + throw new Error(`Check your URL. No file extension provided after separator "${modifierSeperator}".`); } if (modifierSeperator !== '.') { - throw new Error(`The ${modifierSeperator} modifier is not supported in the claim name`); + throw new Error(`Check your URL. The "${modifierSeperator}" modifier is not supported in the claim name.`); } isServeRequest = true; } diff --git a/routes/serve-routes.js b/routes/serve-routes.js index ab42137e..b95c564a 100644 --- a/routes/serve-routes.js +++ b/routes/serve-routes.js @@ -2,13 +2,10 @@ const logger = require('winston'); const { getClaimId, getLocalFileRecord } = require('../controllers/serveController.js'); const serveHelpers = require('../helpers/serveHelpers.js'); const { handleRequestError } = require('../helpers/errorHandlers.js'); -const { postToStats } = require('../helpers/statsHelpers.js'); -const db = require('../models'); const lbryUri = require('../helpers/lbryUri.js'); const SERVE = 'SERVE'; const SHOW = 'SHOW'; -const SHOWLITE = 'SHOWLITE'; const NO_CHANNEL = 'NO_CHANNEL'; const NO_CLAIM = 'NO_CLAIM'; const NO_FILE = 'NO_FILE'; @@ -39,49 +36,23 @@ function clientWantsAsset ({accept, range}) { return imageIsWanted || videoIsWanted; } -function determineResponseType (isServeRequest, headers) { +function determineResponseType (hasFileExtension, headers) { let responseType; - if (isServeRequest) { - responseType = SERVE; - if (clientAcceptsHtml(headers)) { // this is in case a serve request comes from a browser - responseType = SHOWLITE; + if (hasFileExtension) { + responseType = SERVE; // assume a serve request if file extension is present + if (clientAcceptsHtml(headers)) { // if the request comes from a browser, change it to a show request + responseType = SHOW; } } else { responseType = SHOW; if (clientWantsAsset(headers) && requestIsFromBrowser(headers)) { // this is in case someone embeds a show url - logger.debug('Show request came from browser and wants an image/video; changing response to serve.'); + logger.debug('Show request came from browser but wants an image/video. Changing response to serve...'); responseType = SERVE; } } return responseType; } -// function showAssetToClient (claimId, name, res) { -// return Promise -// .all([db.Claim.resolveClaim(name, claimId), db.Claim.getShortClaimIdFromLongClaimId(claimId, name)]) -// .then(([claimInfo, shortClaimId]) => { -// // logger.debug('claimInfo:', claimInfo); -// // logger.debug('shortClaimId:', shortClaimId); -// return serveHelpers.showFile(claimInfo, shortClaimId, res); -// }) -// .catch(error => { -// throw error; -// }); -// } -// -// function showLiteAssetToClient (claimId, name, res) { -// return Promise -// .all([db.Claim.resolveClaim(name, claimId), db.Claim.getShortClaimIdFromLongClaimId(claimId, name)]) -// .then(([claimInfo, shortClaimId]) => { -// // logger.debug('claimInfo:', claimInfo); -// // logger.debug('shortClaimId:', shortClaimId); -// return serveHelpers.showFileLite(claimInfo, shortClaimId, res); -// }) -// .catch(error => { -// throw error; -// }); -// } - function serveAssetToClient (claimId, name, res) { return getLocalFileRecord(claimId, name) .then(fileInfo => { @@ -115,82 +86,87 @@ function logRequestData (responseType, claimName, channelName, claimId) { module.exports = (app) => { // route to serve a specific asset using the channel or claim id - app.get('/:identifier/:name', ({ headers, ip, originalUrl, params }, res) => { - let isChannel, channelName, channelClaimId, claimId, claimName, isServeRequest; + app.get('/:identifier/:claim', ({ headers, ip, originalUrl, params }, res) => { + // decide if this is a show request + let hasFileExtension; + try { + ({ hasFileExtension } = lbryUri.parseModifier(params.claim)); + } catch (error) { + return res.status(200).json({success: false, message: error.message}); + } + let responseType = determineResponseType(hasFileExtension, headers); + if (responseType !== SERVE) { + return res.status(200).render('index'); + } + // parse the claim + let claimName; + try { + ({ claimName } = lbryUri.parseClaim(params.claim)); + } catch (error) { + return res.status(200).json({success: false, message: error.message}); + } + // parse the identifier + let isChannel, channelName, channelClaimId, claimId; try { ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(params.identifier)); - ({ claimName, isServeRequest } = lbryUri.parseName(params.name)); } catch (error) { return handleRequestError(originalUrl, ip, error, res); } if (!isChannel) { [claimId, claimName] = flipClaimNameAndIdForBackwardsCompatibility(claimId, claimName); } - let responseType = determineResponseType(isServeRequest, headers); // log the request data for debugging logRequestData(responseType, claimName, channelName, claimId); - // if a serve request, serve, otherwise send the react app - if (responseType === SERVE) { - // get the claim Id and then serve/show the asset - getClaimId(channelName, channelClaimId, claimName, claimId) - .then(fullClaimId => { - if (fullClaimId === NO_CLAIM) { - return res.status(200).json({success: false, message: 'no claim id could be found'}); - } else if (fullClaimId === NO_CHANNEL) { - return res.status(200).json({success: false, message: 'no channel id could be found'}); - } - serveAssetToClient(fullClaimId, claimName, res); - // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'success'); - }) - .catch(error => { - handleRequestError(originalUrl, ip, error, res); - // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'fail'); - }); - } else { - res.status(200).render('index'); - } + // get the claim Id and then serve the asset + getClaimId(channelName, channelClaimId, claimName, claimId) + .then(fullClaimId => { + if (fullClaimId === NO_CLAIM) { + return res.status(200).json({success: false, message: 'no claim id could be found'}); + } else if (fullClaimId === NO_CHANNEL) { + return res.status(200).json({success: false, message: 'no channel id could be found'}); + } + serveAssetToClient(fullClaimId, claimName, res); + // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'success'); + }) + .catch(error => { + handleRequestError(originalUrl, ip, error, res); + // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'fail'); + }); }); // route to serve the winning asset at a claim or a channel page - app.get('/:identifier', ({ headers, ip, originalUrl, params, query }, res) => { - let isChannel, channelName, channelClaimId; + app.get('/:claim', ({ headers, ip, originalUrl, params, query }, res) => { + // decide if this is a show request + let hasFileExtension; try { - ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(params.identifier)); - // log the result - logger.debug(`isChannel: ${isChannel}, channelName: ${channelName}, channelClaimId: ${channelClaimId}`); + ({ hasFileExtension } = lbryUri.parseModifier(params.claim)); } catch (error) { - return handleRequestError(originalUrl, ip, error, res); + return res.status(200).json({success: false, message: error.message}); } - if (isChannel) { - // handle showing the channel page + let responseType = determineResponseType(hasFileExtension, headers); + if (responseType !== SERVE) { return res.status(200).render('index'); - } else { - let claimName, isServeRequest; - try { - ({claimName, isServeRequest} = lbryUri.parseName(params.identifier)); - } catch (error) { - return handleRequestError(originalUrl, ip, error, res); - } - let responseType = determineResponseType(isServeRequest, headers); - // log the request data for debugging - logRequestData(responseType, claimName, null, null); - // if a serve request, serve, otherwise send the react app - if (responseType === SERVE) { - // get the claim Id and then serve/show the asset - getClaimId(null, null, claimName, null) - .then(fullClaimId => { - if (fullClaimId === NO_CLAIM) { - return res.status(200).render('index'); - } - serveAssetToClient(fullClaimId, claimName, res); - // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'success'); - }) - .catch(error => { - handleRequestError(originalUrl, ip, error, res); - // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'fail'); - }); - } else { - res.status(200).render('index'); - } } + // parse the claim + let claimName; + try { + ({claimName} = lbryUri.parseClaim(params.claim)); + } catch (error) { + return res.status(200).json({success: false, message: error.message}); + } + // log the request data for debugging + logRequestData(responseType, claimName, null, null); + // get the claim Id and then serve the asset + getClaimId(null, null, claimName, null) + .then(fullClaimId => { + if (fullClaimId === NO_CLAIM) { + return res.status(200).render('index'); + } + serveAssetToClient(fullClaimId, claimName, res); + // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'success'); + }) + .catch(error => { + handleRequestError(originalUrl, ip, error, res); + // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'fail'); + }); }); }; From bfa623ec1741b327c2e8710bc518e5d58b92f285 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 31 Jan 2018 19:21:00 -0800 Subject: [PATCH 18/96] removed unnecessary handlebars page routes --- routes/home-routes.js | 2 +- routes/page-routes.js | 28 ++-------------------------- 2 files changed, 3 insertions(+), 27 deletions(-) diff --git a/routes/home-routes.js b/routes/home-routes.js index 0879194a..dc23346d 100644 --- a/routes/home-routes.js +++ b/routes/home-routes.js @@ -6,6 +6,6 @@ module.exports = app => { // a catch-all route if someone visits a page that does not exist app.use('*', ({ originalUrl, ip }, res) => { // send response - res.status(404).render('fourOhFour'); + res.status(404).render('index'); }); }; diff --git a/routes/page-routes.js b/routes/page-routes.js index 21226c2d..6d46bf6e 100644 --- a/routes/page-routes.js +++ b/routes/page-routes.js @@ -1,5 +1,3 @@ -const errorHandlers = require('../helpers/errorHandlers.js'); -const { getTrendingClaims, getRecentClaims } = require('../controllers/statsController.js'); const { site } = require('../config/speechConfig.js'); module.exports = (app) => { @@ -21,28 +19,11 @@ module.exports = (app) => { res.status(301).redirect('/popular'); }); app.get('/popular', ({ ip, originalUrl }, res) => { - const startDate = new Date(); - startDate.setDate(startDate.getDate() - 1); - const dateTime = startDate.toISOString().slice(0, 19).replace('T', ' '); - getTrendingClaims(dateTime) - .then(result => { - res.status(200).render('popular', { - trendingAssets: result, - }); - }) - .catch(error => { - errorHandlers.handleRequestError(originalUrl, ip, error, res); - }); + res.status(200).render('index'); }); // route to display a list of the trending images app.get('/new', ({ ip, originalUrl }, res) => { - getRecentClaims() - .then(result => { - res.status(200).render('new', { newClaims: result }); - }) - .catch(error => { - errorHandlers.handleRequestError(originalUrl, ip, error, res); - }); + res.status(200).render('index'); }); // route to send embedable video player (for twitter) app.get('/embed/:claimId/:name', ({ params }, res) => { @@ -52,9 +33,4 @@ module.exports = (app) => { // get and render the content res.status(200).render('embed', { layout: 'embed', host, claimId, name }); }); - // route to display all free public claims at a given name - app.get('/:name/all', (req, res) => { - // get and render the content - res.status(410).send('/:name/all is no longer supported'); - }); }; From 97a6254370baf1c683fe1643ccc0e42e6db5d981 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 31 Jan 2018 21:08:28 -0800 Subject: [PATCH 19/96] set up basic AssetDisplay functionality and removed unnecessary handlebars/js --- public/assets/js/assetConstructor.js | 139 ---------------- public/assets/js/createChannelFunctions.js | 65 -------- public/assets/js/loginFunctions.js | 44 ----- public/assets/js/progressBarConstructor.js | 45 ----- public/assets/js/validationFunctions.js | 132 --------------- react/components/AssetDisplay/index.js | 154 +++++++++++++++++- react/components/AssetInfo/index.js | 83 +++++----- .../components/ChannelClaimsDisplay/index.js | 1 - react/components/ShowAssetDetails/index.js | 3 + routes/home-routes.js | 2 +- .../{fourOhFour.handlebars => 404.handlebars} | 3 +- views/channel.handlebars | 55 ------- views/layouts/channel.handlebars | 22 --- views/layouts/main.handlebars | 2 - views/layouts/show.handlebars | 21 --- views/noChannel.handlebars | 6 - views/noClaim.handlebars | 6 - views/partials/progressBar.handlebars | 49 +++++- views/requestError.handlebars | 7 - views/show.handlebars | 18 -- views/statistics.handlebars | 32 ---- 21 files changed, 238 insertions(+), 651 deletions(-) delete mode 100644 public/assets/js/assetConstructor.js delete mode 100644 public/assets/js/createChannelFunctions.js delete mode 100644 public/assets/js/loginFunctions.js delete mode 100644 public/assets/js/validationFunctions.js rename views/{fourOhFour.handlebars => 404.handlebars} (60%) delete mode 100644 views/channel.handlebars delete mode 100644 views/layouts/channel.handlebars delete mode 100644 views/layouts/show.handlebars delete mode 100644 views/noChannel.handlebars delete mode 100644 views/noClaim.handlebars delete mode 100644 views/requestError.handlebars delete mode 100644 views/show.handlebars delete mode 100644 views/statistics.handlebars diff --git a/public/assets/js/assetConstructor.js b/public/assets/js/assetConstructor.js deleted file mode 100644 index f84d3344..00000000 --- a/public/assets/js/assetConstructor.js +++ /dev/null @@ -1,139 +0,0 @@ -const Asset = function () { - this.data = {}; - this.addPlayPauseToVideo = function () { - const that = this; - const video = document.getElementById('video-asset'); - if (video) { - // add event listener for click - video.addEventListener('click', ()=> { - that.playOrPause(video); - }); - // add event listener for space bar - document.body.onkeyup = (event) => { - if (event.keyCode == 32) { - that.playOrPause(video); - } - }; - } - }; - this.playOrPause = function(video){ - if (video.paused == true) { - video.play(); - } - else{ - video.pause(); - } - }; - this.showAsset = function () { - this.hideAssetStatus(); - this.showAssetHolder(); - if (!this.data.src) { - return console.log('error: src is not set') - } - if (!this.data.contentType) { - return console.log('error: contentType is not set') - } - if (this.data.contentType === 'video/mp4') { - this.showVideo(); - } else { - this.showImage(); - } - }; - this.showVideo = function () { - console.log('showing video', this.data.src); - const video = document.getElementById('video-asset'); - const source = document.createElement('source'); - source.setAttribute('src', this.data.src); - video.appendChild(source); - video.play(); - }; - this.showImage = function () { - console.log('showing image', this.data.src); - const asset = document.getElementById('image-asset'); - asset.setAttribute('src', this.data.src); - }; - this.hideAssetStatus = function () { - const assetStatus = document.getElementById('asset-status'); - assetStatus.hidden = true; - }; - this.showAssetHolder =function () { - const assetHolder = document.getElementById('asset-holder'); - assetHolder.hidden = false; - }; - this.showSearchMessage = function () { - const searchMessage = document.getElementById('searching-message'); - searchMessage.hidden = false; - }; - this.showFailureMessage = function (msg) { - console.log(msg); - const searchMessage = document.getElementById('searching-message'); - const failureMessage = document.getElementById('failure-message'); - const errorMessage = document.getElementById('error-message'); - searchMessage.hidden = true; - failureMessage.hidden = false; - errorMessage.innerText = msg; - }; - this.checkFileAndRenderAsset = function () { - const that = this; - this.isFileAvailable() - .then(isAvailable => { - if (!isAvailable) { - console.log('file is not yet available'); - that.showSearchMessage(); - return that.getAssetOnSpeech(); - } - }) - .then(() => { - that.showAsset(); - }) - .catch(error => { - that.showFailureMessage(error); - }) - }; - this.isFileAvailable = function () { - console.log(`checking if file is available for ${this.data.claimName}#${this.data.claimId}`) - const uri = `/api/file-is-available/${this.data.claimName}/${this.data.claimId}`; - const xhr = new XMLHttpRequest(); - return new Promise((resolve, reject) => { - xhr.open("GET", uri, true); - xhr.onreadystatechange = function() { - if (xhr.readyState == 4) { - const response = JSON.parse(xhr.response); - if (xhr.status == 200) { - console.log('isFileAvailable succeeded:', response); - if (response.message === true) { - resolve(true); - } else { - resolve(false); - } - } else { - console.log('isFileAvailable failed:', response); - reject('Well this sucks, but we can\'t seem to phone home'); - } - } - }; - xhr.send(); - }) - }; - this.getAssetOnSpeech = function() { - console.log(`getting claim for ${this.data.claimName}#${this.data.claimId}`) - const uri = `/api/claim-get/${this.data.claimName}/${this.data.claimId}`; - const xhr = new XMLHttpRequest(); - return new Promise((resolve, reject) => { - xhr.open("GET", uri, true); - xhr.onreadystatechange = function() { - if (xhr.readyState == 4) { - const response = JSON.parse(xhr.response); - if (xhr.status == 200) { - console.log('getAssetOnSpeech succeeded:', response) - resolve(true); - } else { - console.log('getAssetOnSpeech failed:', response); - reject(response.message); - } - } - }; - xhr.send(); - }) - }; -}; diff --git a/public/assets/js/createChannelFunctions.js b/public/assets/js/createChannelFunctions.js deleted file mode 100644 index 478cc2d8..00000000 --- a/public/assets/js/createChannelFunctions.js +++ /dev/null @@ -1,65 +0,0 @@ -// display the content that shows channel creation has started -function showChannelCreateInProgressDisplay () { - const publishChannelForm = document.getElementById('publish-channel-form'); - const inProgress = document.getElementById('channel-publish-in-progress'); - publishChannelForm.hidden = true; - inProgress.hidden = false; -} - -// display the content that shows channel creation is done -function showChannelCreateDoneDisplay() { - const inProgress = document.getElementById('channel-publish-in-progress'); - inProgress.hidden=true; - const done = document.getElementById('channel-publish-done'); - done.hidden = false; -} - -function showChannelCreationError(msg) { - const inProgress = document.getElementById('channel-publish-in-progress'); - inProgress.innerText = msg; -} - -function publishNewChannel (event) { - const username = document.getElementById('new-channel-name').value; - const password = document.getElementById('new-channel-password').value; - // prevent default so this script can handle submission - event.preventDefault(); - // validate submission - validationFunctions.validateNewChannelSubmission(username, password) - .then(() => { - showChannelCreateInProgressDisplay(); - // return sendAuthRequest(userName, password, '/signup') // post the request - return fetch('/signup', { - method: 'POST', - body: JSON.stringify({username, password}), - headers: new Headers({ - 'Content-Type': 'application/json' - }), - credentials: 'include', - }) - .then(function(response) { - if (response.ok){ - return response.json(); - } else { - throw response; - } - }) - .catch(function(error) { - throw error; - }) - }) - .then(signupResult => { - console.log('signup success:', signupResult); - showChannelCreateDoneDisplay(); - window.location = '/'; - }) - .catch(error => { - if (error.name === 'ChannelNameError' || error.name === 'ChannelPasswordError'){ - const channelNameErrorDisplayElement = document.getElementById('input-error-channel-name'); - validationFunctions.showError(channelNameErrorDisplayElement, error.message); - } else { - console.log('signup failure:', error); - showChannelCreationError('Unfortunately, we encountered an error while creating your channel. Please let us know in slack!', error); - } - }) -} diff --git a/public/assets/js/loginFunctions.js b/public/assets/js/loginFunctions.js deleted file mode 100644 index b13710ab..00000000 --- a/public/assets/js/loginFunctions.js +++ /dev/null @@ -1,44 +0,0 @@ -function loginToChannel (event) { - const username = document.getElementById('channel-login-name-input').value; - const password = document.getElementById('channel-login-password-input').value; - // prevent default - event.preventDefault() - validationFunctions.validateNewChannelLogin(username, password) - .then(() => { - return fetch('/login', { - method: 'POST', - body: JSON.stringify({username, password}), - headers: new Headers({ - 'Content-Type': 'application/json' - }), - credentials: 'include', - }) - .then(function(response) { - console.log(response); - if (response.ok){ - return response.json(); - } else { - throw response; - } - }) - .catch(function(error) { - throw error; - }) - }) - .then(function({success, message}) { - if (success) { - window.location = '/'; - } else { - throw new Error(message); - } - - }) - .catch(error => { - const loginErrorDisplayElement = document.getElementById('login-error-display-element'); - if (error.message){ - validationFunctions.showError(loginErrorDisplayElement, error.message); - } else { - validationFunctions.showError(loginErrorDisplayElement, 'There was an error logging into your channel'); - } - }) -} diff --git a/public/assets/js/progressBarConstructor.js b/public/assets/js/progressBarConstructor.js index 468cf178..e69de29b 100644 --- a/public/assets/js/progressBarConstructor.js +++ b/public/assets/js/progressBarConstructor.js @@ -1,45 +0,0 @@ -const ProgressBar = function() { - this.data = { - x: 0, - adder: 1, - bars: [], - }; - this.barHolder = document.getElementById('bar-holder'); - this.createProgressBar = function (size) { - this.data['size'] = size; - for (var i = 0; i < size; i++) { - const bar = document.createElement('span'); - bar.innerText = '| '; - bar.setAttribute('class', 'progress-bar progress-bar--inactive'); - this.barHolder.appendChild(bar); - this.data.bars.push(bar); - } - }; - this.startProgressBar = function () { - this.updateInterval = setInterval(this.updateProgressBar.bind(this), 300); - }; - this.updateProgressBar = function () { - const x = this.data.x; - const adder = this.data.adder; - const size = this.data.size; - // update the appropriate bar - if (x > -1 && x < size){ - if (adder === 1){ - this.data.bars[x].setAttribute('class', 'progress-bar progress-bar--active'); - } else { - this.data.bars[x].setAttribute('class', 'progress-bar progress-bar--inactive'); - } - } - // update adder - if (x === size){ - this.data['adder'] = -1; - } else if ( x === -1){ - this.data['adder'] = 1; - } - // update x - this.data['x'] = x + adder; - }; - this.stopProgressBar = function () { - clearInterval(this.updateInterval); - }; -}; \ No newline at end of file diff --git a/public/assets/js/validationFunctions.js b/public/assets/js/validationFunctions.js deleted file mode 100644 index 07c9bad3..00000000 --- a/public/assets/js/validationFunctions.js +++ /dev/null @@ -1,132 +0,0 @@ -// validation function which checks the proposed file's type, size, and name -const validationFunctions = { - validateChannelName: function (name) { - name = name.substring(name.indexOf('@') + 1); - // ensure a name was entered - if (name.length < 1) { - throw new ChannelNameError("You must enter a name for your channel"); - } - // validate the characters in the 'name' field - const invalidCharacters = /[^A-Za-z0-9,-,@]/g.exec(name); - if (invalidCharacters) { - throw new ChannelNameError('"' + invalidCharacters + '" characters are not allowed'); - } - }, - validatePassword: function (password) { - if (password.length < 1) { - throw new ChannelPasswordError("You must enter a password for you channel"); - } - }, - // validation functions to check claim & channel name eligibility as the inputs change - isChannelNameAvailable: function (name) { - return this.isNameAvailable(name, '/api/channel-is-available/'); - }, - isNameAvailable: function (name, apiUrl) { - console.log('isNameAvailable?', name); - const url = apiUrl + name; - return fetch(url) - .then(function (response) { - return response.json(); - }) - .catch(error => { - console.log('isNameAvailable error', error); - throw error; - }) - }, - showError: function (errorDisplay, errorMsg) { - errorDisplay.hidden = false; - errorDisplay.innerText = errorMsg; - }, - hideError: function (errorDisplay) { - errorDisplay.hidden = true; - errorDisplay.innerText = ''; - }, - showSuccess: function (successElement) { - successElement.hidden = false; - successElement.innerHTML = "✔"; - }, - hideSuccess: function (successElement) { - successElement.hidden = true; - successElement.innerHTML = ""; - }, - checkChannelName: function (name) { - var successDisplayElement = document.getElementById('input-success-channel-name'); - var errorDisplayElement = document.getElementById('input-error-channel-name'); - var channelName = `@${name}`; - var that = this; - try { - // check to make sure the characters are valid - that.validateChannelName(channelName); - // check to make sure it is available - that.isChannelNameAvailable(channelName) - .then(function(isAvailable){ - console.log('isChannelNameAvailable:', isAvailable); - if (isAvailable) { - that.hideError(errorDisplayElement); - that.showSuccess(successDisplayElement) - } else { - that.hideSuccess(successDisplayElement); - that.showError(errorDisplayElement, 'Sorry, that name is already taken'); - } - }) - .catch(error => { - that.hideSuccess(successDisplayElement); - that.showError(errorDisplayElement, error.message); - }); - } catch (error) { - that.hideSuccess(successDisplayElement); - that.showError(errorDisplayElement, error.message); - } - }, - // validation function which checks all aspects of a new channel submission - validateNewChannelSubmission: function (userName, password) { - const channelName = `@${userName}`; - var that = this; - return new Promise(function (resolve, reject) { - // 1. validate name - try { - that.validateChannelName(channelName); - } catch (error) { - return reject(error); - } - // 2. validate password - try { - that.validatePassword(password); - } catch (error) { - return reject(error); - } - // 3. if all validation passes, check availability of the name - that.isChannelNameAvailable(channelName) - .then(function(isAvailable) { - if (isAvailable) { - resolve(); - } else { - reject(new ChannelNameError('Sorry, that name is already taken')); - } - }) - .catch(function(error) { - reject(error); - }); - }); - }, - // validation function which checks all aspects of a new channel login - validateNewChannelLogin: function (userName, password) { - const channelName = `@${userName}`; - var that = this; - return new Promise(function (resolve, reject) { - // 1. validate name - try { - that.validateChannelName(channelName); - } catch (error) { - return reject(error); - } - // 2. validate password - try { - that.validatePassword(password); - } catch (error) { - return reject(error); - } - resolve(); - }); - } -}; diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index ae630a0b..1de46417 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -1,11 +1,153 @@ import React from 'react'; +import ProgressBar from 'components/ProgressBar'; +import Request from 'utils/request'; -const AssetDisplay = ({ name, claimId }) => { - return ( -
-

display {name}#{claimId} here

-
- ); +const LOCAL_CHECK = 'LOCAL_CHECK'; +const SEARCHING = 'SEARCHING'; +const UNAVAILABLE = 'UNAVAILABLE'; +const AVAILABLE = 'AVAILABLE'; + +class AssetDisplay extends React.Component { + constructor (props) { + super(props); + this.state = { + error : null, + status : LOCAL_CHECK, + thumbnail : this.props.thumbnail, + src : `/${this.props.claimId}}/${this.props.name}.${this.props.fileExt}`, + name : this.props.name, + claimId : this.props.claimId, + fileExt : this.props.fileExt, + contentType: this.props.contentType, + }; + this.checkIfLocalFileAvailable = this.checkIfLocalFileAvailable.bind(this); + this.triggerGetAssetOnSpeech = this.triggerGetAssetOnSpeech.bind(this); + } + componentDidMount () { + const that = this; + this.checkIfLocalFileAvailable() + .then(isAvailable => { + if (!isAvailable) { + console.log('file is not yet available'); + that.setState({status: SEARCHING}); + return that.triggerGetAssetOnSpeech(); + } + }) + .then(() => { + that.setState({status: AVAILABLE}); + that.addPlayPauseToVideoToBody(); + }) + .catch(error => { + that.setState({ + status: UNAVAILABLE, + error : error.message, + }); + }); + } + checkIfLocalFileAvailable () { + console.log(`checking if file is available for ${this.props.name}#${this.props.claimId}`); + const url = `/api/file-is-available/${this.props.name}/${this.props.claimId}`; + return new Promise((resolve, reject) => { + Request(url) + .then(isAvailable => { + console.log('/api/file-is-available response:', isAvailable); + resolve(isAvailable); + }) + .catch(error => { + reject(error); + }); + }); + } + triggerGetAssetOnSpeech () { + console.log(`getting claim for ${this.props.name}#${this.props.claimId}`) + const url = `/api/claim-get/${this.props.name}/${this.props.claimId}`; + return new Promise((resolve, reject) => { + Request(url) + .then(response => { + console.log('/api/claim-get response:', response); + resolve(true); + }) + .catch(error => { + reject(error); + }); + }); + } + addPlayPauseToVideoToBody () { + const that = this; + const video = document.getElementById('video'); + if (video) { + // add event listener for click + video.addEventListener('click', () => { + that.playOrPause(video); + }); + // add event listener for space bar + document.body.onkeyup = (event) => { + if (event.keyCode === 32) { + that.playOrPause(video); + } + }; + } + } + playOrPause (video) { + if (video.paused === true) { + video.play(); + } else { + video.pause(); + } + } + render () { + return ( +
+ {(this.state.status === SEARCHING) && +
+

Sit tight, we're searching the LBRY blockchain for your asset!

+ +

Curious what magic is happening here? Learn more.

+
+ } + {(this.state.status === UNAVAILABLE) && +
+

Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the below error message in the LBRY discord.

+

{this.state.error}

 +
+ } + {(this.state.status === AVAILABLE) && + (() => { + switch (this.state.contentType) { + case 'image/jpeg': + case 'image/jpg': + case 'image/png': + return ( + {this.state.name}/ + ); + case 'image/gif': + return ( + {this.state.name}/ + ); + case 'video/mp4': + return ( + + ); + default: + return ( +

unsupported file type

+ ); + } + })() + } +
+ ); + } }; +// required props +// name +// claimId +// thumbnail +// contentType +// file extension + export default AssetDisplay; diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 006ea701..b0ab729f 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -3,23 +3,17 @@ import React from 'react'; class AssetInfo extends React.Component { constructor (props) { super(props); - this.toggleSection = this.toggleSection.bind(this); + this.state = { + showDetails: false, + } + this.toggleDetails = this.toggleDetails.bind(this); this.copyToClipboard = this.copyToClipboard.bind(this); } - toggleSection (event) { - var dataSet = event.target.dataset; - var status = dataSet.status; - var toggle = document.getElementById('show-details-toggle'); - var details = document.getElementById('show-details'); - if (status === 'closed') { - details.hidden = false; - toggle.innerText = '[less]'; - toggle.dataset.status = 'open'; - } else { - details.hidden = true; - toggle.innerText = '[more]'; - toggle.dataset.status = 'closed'; + toggleDetails () { + if (this.state.showDetails) { + return this.setState({showDetails: false}); } + this.setState({showDetails: true}); } copyToClipboard (event) { var elementToCopy = event.target.dataset.elementtocopy; @@ -126,41 +120,40 @@ class AssetInfo extends React.Component {
-
diff --git a/routes/home-routes.js b/routes/home-routes.js index dc23346d..e58607fc 100644 --- a/routes/home-routes.js +++ b/routes/home-routes.js @@ -6,6 +6,6 @@ module.exports = app => { // a catch-all route if someone visits a page that does not exist app.use('*', ({ originalUrl, ip }, res) => { // send response - res.status(404).render('index'); + res.status(404).render('404'); }); }; diff --git a/views/fourOhFour.handlebars b/views/404.handlebars similarity index 60% rename from views/fourOhFour.handlebars rename to views/404.handlebars index a7f6f0ea..9cc0a1c4 100644 --- a/views/fourOhFour.handlebars +++ b/views/404.handlebars @@ -1,5 +1,4 @@ -{{> navBar}} -
+

404: Not Found

That page does not exist. Return home.

diff --git a/views/channel.handlebars b/views/channel.handlebars deleted file mode 100644 index 2fcff401..00000000 --- a/views/channel.handlebars +++ /dev/null @@ -1,55 +0,0 @@ -{{> navBar}} -
-
- {{#ifConditional this.totalPages '===' 0}} -

There is no content in {{this.channelName}}:{{this.longChannelClaimId}} yet. Upload some!

- {{/ifConditional}} - {{#ifConditional this.totalPages '>=' 1}} -

Below are the contents for {{this.channelName}}:{{this.longChannelClaimId}}

-
- {{#each this.claims}} - {{> gridItem}} - {{/each}} -
- {{/ifConditional}} - {{#ifConditional this.totalPages '>' 1}} -
-
- First [1] -
- {{#if this.previousPage}} - Previous - {{else}} - Previous - {{/if}} - | - {{#if this.nextPage}} - Next - {{else}} - Next - {{/if}} -
- Last [{{this.totalPages}}] -
-
- {{/ifConditional}} -
-
- - - - diff --git a/views/layouts/channel.handlebars b/views/layouts/channel.handlebars deleted file mode 100644 index 18a41951..00000000 --- a/views/layouts/channel.handlebars +++ /dev/null @@ -1,22 +0,0 @@ - - - - {{ placeCommonHeaderTags }} - - - - - - - - - - - - {{ googleAnalytics }} - - - - {{{ body }}} - - diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars index fb262239..09068747 100644 --- a/views/layouts/main.handlebars +++ b/views/layouts/main.handlebars @@ -16,8 +16,6 @@ {{ googleAnalytics }} - - {{{ body }}} diff --git a/views/layouts/show.handlebars b/views/layouts/show.handlebars deleted file mode 100644 index 8ba33271..00000000 --- a/views/layouts/show.handlebars +++ /dev/null @@ -1,21 +0,0 @@ - - - - {{ placeCommonHeaderTags }} - - {{#unless claimInfo.nsfw}} - {{{addTwitterCard claimInfo }}} - {{{addOpenGraph claimInfo }}} - {{/unless}} - - - - {{ googleAnalytics }} - - - - - {{{ body }}} - - - diff --git a/views/noChannel.handlebars b/views/noChannel.handlebars deleted file mode 100644 index 19b6a9bc..00000000 --- a/views/noChannel.handlebars +++ /dev/null @@ -1,6 +0,0 @@ -{{> navBar}} -
-

No Channel

-

There are no published channels matching your url

-

If you think this message is an error, contact us in the LBRY Discord!

-
diff --git a/views/noClaim.handlebars b/views/noClaim.handlebars deleted file mode 100644 index f479c81c..00000000 --- a/views/noClaim.handlebars +++ /dev/null @@ -1,6 +0,0 @@ -{{> navBar}} -
-

No Claims

-

There are no free assets at that claim. You should publish one at spee.ch.

-

NOTE: it is possible your claim was published, but it is still being processed by the blockchain

-
diff --git a/views/partials/progressBar.handlebars b/views/partials/progressBar.handlebars index e9d2dae6..dd7dc827 100644 --- a/views/partials/progressBar.handlebars +++ b/views/partials/progressBar.handlebars @@ -1,8 +1,53 @@

- \ No newline at end of file + diff --git a/views/requestError.handlebars b/views/requestError.handlebars deleted file mode 100644 index 45048624..00000000 --- a/views/requestError.handlebars +++ /dev/null @@ -1,7 +0,0 @@ -{{> navBar}} -
-

Error

-

Unfortnately, Spee.ch encountered an error. You can help us out, by reporting the below error message in the #speech channel on LBRY Discord!

-

status: {{status}}

-

message: {{message}}

-
diff --git a/views/show.handlebars b/views/show.handlebars deleted file mode 100644 index ac8066c8..00000000 --- a/views/show.handlebars +++ /dev/null @@ -1,18 +0,0 @@ -{{> navBar}} -
-
- - {{claimInfo.title}} -
-
- -
- {{> asset}} -
-
- -
- {{> assetInfo}} -
-
-
diff --git a/views/statistics.handlebars b/views/statistics.handlebars deleted file mode 100644 index 09c4747f..00000000 --- a/views/statistics.handlebars +++ /dev/null @@ -1,32 +0,0 @@ -
-

Site Statistics

-

Serve: {{ totals.totalServe }}

-

Publish: {{ totals.totalPublish }}

-

Show: {{ totals.totalShow }}

-

Percent Success: {{ percentSuccess}}%

- - - - - - - - - {{#each records}} - - - - - - - - {{/each}} - - - - - - - -
actionurlcountsuccessfailure
{{ this.action }}{{ this.url }}{{ this.count }}{{ this.success }}{{ this.failure }}
{{ totals.totalCount }}{{ totals.totalSuccess }}{{ totals.totalFailure }}
-
From 69ed241d1c4616f480e0be6edb672dee12185443 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 1 Feb 2018 10:46:41 -0800 Subject: [PATCH 20/96] deleted unnecessary handlebars js and partials --- public/assets/img/loading.gif | Bin 9172 -> 0 bytes public/assets/js/generalFunctions.js | 56 -------- public/assets/js/progressBarConstructor.js | 0 views/partials/assetInfo.handlebars | 134 ------------------ views/partials/channelCreationForm.handlebars | 39 ----- views/partials/channelLoginForm.handlebars | 28 ---- views/partials/contentListItem.handlebars | 15 -- views/partials/gridItem.handlebars | 11 -- views/partials/navBar.handlebars | 68 --------- 9 files changed, 351 deletions(-) delete mode 100644 public/assets/img/loading.gif delete mode 100644 public/assets/js/generalFunctions.js delete mode 100644 public/assets/js/progressBarConstructor.js delete mode 100644 views/partials/assetInfo.handlebars delete mode 100644 views/partials/channelCreationForm.handlebars delete mode 100644 views/partials/channelLoginForm.handlebars delete mode 100644 views/partials/contentListItem.handlebars delete mode 100644 views/partials/gridItem.handlebars delete mode 100644 views/partials/navBar.handlebars diff --git a/public/assets/img/loading.gif b/public/assets/img/loading.gif deleted file mode 100644 index a9648d12275ee8c4b3603a6f6cfd4c282c994584..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9172 zcmeI1eLU0q-^ahZu?-tD%uS>1>n1vjjS-?YhLH*>H%DbyaS}7q(5W#u!`y{XPK^q6 z>ZH39=i}na6#@~!-E=@xQ?tLnUrS4CXlQ6+V&dJqcYpo$mr|*G{`~pCz`%wL8~*(B zPZSFE;>C+=*RDN#_KZLvynp|G`t<1-4Cd|Ix3_NHYH4XPFfh>8)_(Np(eUu__3PI& zGc#RWT*AV_e*5jWKmPdR)TvWFJv~N7M!R(+_I;wx9KWMpI%78d5@ zr(WSX*1O*=#E-tNr`; z8yXrOJ$jVEUP4-XG>bMxZj;;O2u+qZAGwzh8GyxGCQAv849%*?E>ukYc*hg2$c z+O%mP2>$fbPbDQKU0q#|A3v5#rFwdL1qB7ArKQ!?)vsT_zI*p>U0q#6L&ME>tG6cNE84E*VGFHd9 z#)9+alHG-F!ZrLgyi_h(xF#Vn#ZBk|a$}RCd2Y~S)ywuESv@3mwFk&jy+Ky((<@29 zBRknS&WfSY>11bTJ37P3*_loyJJ9G3_B80vc@~}F=H%?=FdI5Y^$mpfCWu|>7R>hf zurKJD2N;){%6GH3hrTqsb&hsPf>ri(S65fn91ae%pb@iD(i2m;!dZza7E?2@c_}f1 zcz$YpQX*M3BR4u}ZK?+d9qHsLtl@v0HZjFceL8kANo(wdT)sWsj;1=Lseua?{O3d0 ztob-PB{i7$>3F|5aY{%!pJyM;OG#QQh~YuQEmXVWyLkzC+|(pNNK#V5)TbC2mz0{6 z5|_j$do6Y*+l0m^#wM*xu~m;>u)xhPF(s9o7{l{pdw|dkcJcACZgdA1)@)C@gAd)s znNIhf?MkD0vgl5pK0Yj(vkTj2YFlE&l7rLi_4`AGVGC`mxZzx~)BQF!ri1_OmZ~>LuvvQ9b;4*+Ne~UiiF3 z=xP^0mo;qS{kyk+{rP76^&hWZzIZ-1`t0eG$B!O9xPR~N$nc$^LFMgRHwSL?U+=qi z^-AyMo^D0g@0TuKIDfA5?3s?!?QN~{Q@@=&@#`wS+S|SthA(9T2xpd$^>Cl#=IS!r*@@xkK&RQ;&7yuY)7EB&wUwm>NFh%*HzQ3mH8D0K8XD*m^zgbm zIIOmoCI*etKqBDKj|1fmQWF5u0jla}MD-I6peID>+2WksynIPPVUe`Bq_nJjQ$=Of z=IWZ-EnDk;*tT6(->_rnuEwV3-FtrAyYHv{Ee8%BI(+2kqsNZ_^6QC{znzj-ST3+^ zJ%l3&3Ai%{K%oM>)B=Mhhh5%(<=XZBeFJ^Bl~;%E)FO$~O9yY=+pOnC(~l^5QZjuJ z@>w1#SRssH{Bkz#64KaRYxJ8`8H(v34FN)0n>CozP(%VK(tyj&i_9bCDTA$`6R?`3 zh>I&Ah)4!{oo!YZeq;Lq4XuI-D+)RgKs`v8w1LxsU$LVFalVEkSLwnb7@wojSU`}# zIz0)w4B*Gg);-PHcwn)E>C6^UCpahF8apm`!D8^8+#@ZJ_d0U|X1X*?Z_yM*oJ<~vjSlwv&x2X3y>P*i)~ zY^_nQ{Pv~^jZOpDjkT|r35C+?WnfQ1=*_h;*1-eG z=kyLnrVQ_@ot~(;e`afv+|~9TrFnN+w(hENVC#2>pX}zq7mBR6#4fB{X+zOPmQ|BY z+=;cZl~rZ1mD6etH-!UaJ>~N6-x>Brh`m7lEOSBhwNWQR=f{z{P)g6e__D#2z)D>PPT3aTF-pb| zIk#>Qk+7%x%so)k1-2z_vujX)eXcuRz9Ku87S7wuUFwMvQ(Llp^Y>@~1Q^OWjGJ%u za}60qhKcYQyK3dS+>?gaBJ;{dq~Y;T`BKLv-kvNSv|o!?noh!SKybm~@L)We#chr^ z%{j0bq#iebpdvv~)#>p8|KFP{B|fAq2r9G+DukJ+!Eq_|V3{Khf{J6Yc8P+eIjgM{ z)OFPl3f16?x(ti4dpiv$kU2zH%;C$UESLLKg6@eJH*7ov)nlDA;35brDdPq9e7Uh0 zf@&V&BJHbCagqp_zk{m(rm9ph-N~QSm6|1uM>&&djggLs^3LXEtrufCl)i=_rq6en zt1hB4MV2Y@94(j?sIkKm*&P)W8ia>Y@t8ltUMk_+v~`JZ$bCGfpV$0K{IE>IB-({@ zz#$f≤ya#H1Lr?^Co2ZFW+^c433rbN1jb!qyVBv*!^a7gRE_EMlci01UW$zmIJ= zkpt8S6oFY9Y@*Uj#n4geNve$jMWkV1-+Y3}r7)55Eh?(S><_A9>1RSzu@vIVkgD)1RY6o`PEiG^YQyD!plV80IS-p}>)xBc^=#_^ zAOes?4jJ|B+bUm#os#8+Db8Uc%zyD-5koj~3wtfA}>-o3I z>s)G=Z=5*kEl<1oy^*>39bUC0b!f@DA8HE>))i)+6nl}+mm4;_A(>WyqajK>t;OUtHI5+ns51= zmkA&6IztsXJe9B7RlZ`XeI=T&U{qo1RK8*bTB>~YxL4&X7K9caLaR)V&-7R9t>nzN zFNV-ULTDX*L*lD^)uzWVw~fwa8!X#}_maBr>|`p8Q^8Mml$N8onBEBznVQ zP9TzJm&m-5(ol;`{W`&R{p53-%A^h!UF<^+mYp^+gBMD$i?Lr+6=%l2mpysNzr|Ol zm%%2_ucLb5#>g%^J-fVAK(Q#@^VkMG_`Sh*Z5xo$n1eN^ zvz4XD<@!tT@F;&TFO3OeOE~`sJ{KzaTo!D-pH;2#{GWWK_glG|EZHPk2~%WcZ$9)n zS-T)#nL@sT$TFTHD-kLJS^8@=Rb+Yf4Ca3%OJA?0WEE24P4?j|9$mj93ulUIUa^rZ z=CjytoNv41au4fxYh4NNn*MvWa}n&TzEVobdMAR~v(VAxR#NL1eD!Rk)yK#p0_8(P z2;#`7&nm&Y<%4-{TB588QW`R4dB$6uV!3qeQt0jP-{=W^D<8f=D;MAJyJIFC8e}a` zlW=A)Uwf^-fRlXIYIdjKQq{f2f@6L=rX~FbGrIG`+>X4n-+ho4D(;iC8pQ5+AZkil z*(Q~QgG7LHg10j&$3#We8ovG(&9`J?q&A*)jbfnES0?UgyF*W)m0x&Iol_lx;b&2~ zq#&>i!6H14+M+4~Z$eOUSD7P`EWANshPNCx-A_Mw1>^co3>s;BfE|IB*%TXs<%cI3 z`*{GvE@KsiR7wnu<4*^}NWCc?tiG}eg=eE1TW3fkj|<0wWK{A zI;DFTwm+^J;4m&Xzm+&#GNRTwdTh)W(M!^6nqj}CBh=NT6Dj{le}kFK}!f14aQDJ%o4 zv3%70xfMAi=9tlNBLyBl6gw8*nSaU-!8h*@>R6$pRe-l18cgD7?2-^9V`o*p)%!h_ zty|Q+)l5}ybqT&ZXCiF;uW}J}{#SY{ZFO(;*6&kqh5gi9sjzxW|Ik}aVf8*5JF4of zHbTOJuoBPH=R;Txc0s*We(?C>7EabF1I0gJHPG-ytS}$2%Kdt8r3^6tgjL&@usYD) zA=#8gxhNu;O0sa;&f`%z(txnRT$99_9e^>^b4}3h?K*oKcyhAZcm0bi>sD+K4~*^1 zcn_0YN$U}!w+V%1)n;H%G1OqK0#&sj4r;JQj>LnBJ?aL_FTUyX2J2nz#|EqMKKZi- zE8N+ZvJxiBi7ySpiy|x$_YaHR-;13mlkfC~d<{!0g%bMp; ztv8tW9_a1%mA+K!BGHm>7r;oTQ@ojdW$h9}i>g=xEM}*8ban~H66ft*=y|%+P{XV; zx$QASP%1wXf8yb3t?dE2oipbVE-_}!X}~%fow>-NpY8kC-byVjg~tEBu>PN{e}gO( zWn2*TE(15M+3+F`z(gsbaH6GSWjaF%H)rH1I2eXzv-+CuZQdMK5wvAO}c86s=+F7L7Bu=hNEm%`GpZB^VO@+ zD6yeWCw$szb|aKuz^+6j@83y4Y0D3HvrRzM*5O}lDwQRY!@dNj_mn>e(=aAUddl2+Fl+~o7V6+&*E8NTpPZxKHr&UBl(=HTM$`oQ)F!;Pm-mX%|yMUYsy3}Yi1O$ zQx@c-)2~y&o5Cy0Lao6Lv+4oz1*gzkTb2%47bl*0gBqwvHO=1g-HdU5o^H!-pKrGp zSSpcm4Ssjo@e=DH<5*eH((ICSY6~l%{9#A+3X!Hy4VMFuPe)((z%!RiTD(txo7ZWD zTXww`$}|GgtHkpNk7<$cd3{L>9UY0o z=lK^Meo1I52%`u4Swk72PY++EE0vI})iOio;9RAVK?)Xe><$zUZj8~LYi%fJxra78 z(&o)cCD44_h;s(wE%Dz6bajAUsyvYGh&x|m(~ixfItE|-S{}$q&H9@%_W!C5tbyW+ zGN{F>R@Z=~_mmGR)dgV5m?~#~k*m{t%(t<7uFq;~xiSb)s>;8CN3Hi|4aC<8#(Yj( z!KO?Sard#N=<+R@PC9(*FmV1Pc>@2Tz4Cin-%3ask(n)dIwBKEn44X~GfbZ+@4oEuk_FV-1K9;*S01N*4Q{3RVHr)&257vkmc zLZgu7vKBnKjf_|fhz9o<5lRU7l>-&d2v1E%G0}zAV;l^(t{B5=Ub0MD<)>pj5X1NM zC78_!nIEH6GAxk}Pdkhi6>^dB>sWHjO^GN!)A~MPX4KF&^sdvoyN)$Qm1k$#Hp~F| zW?dM35mQ>$2)Hp3(-_#WuJ_Em!JNX>vY#8ewc^bRv7VzNK;|E&3AC&BvjMU^3zAYR z(FETk(iST4o)#2^C|~>c;jDI|v89BJ0tWB_ah5|YGz9}>oka#Q2pvdhsbf3QDvubD zWxgTKODuLb9?X%32)TJKeF|;~JjWP2k@4`|Y*FSY4xIk|AA?QX$(UH>_6nHJef@Pk z>y2&+g_TWa;N|jFW@)R4YwH;2%-ZTw?j9-NCH6eNdLyaT8>$0$?^6fu_#59HQP+Vv z&i%0qYZ~LgQg31e&uX;hEPUEP>^%hRm^Ws{2AH)mH*YdyZ>>pN0TUsE^5ov9BlG&K zaLfCxMiEP5NBE`4Ie1m0g?)83jWqyOdd05H3I@$^?PT?ber04qEsv-UKd{?cB5o-3)bGhFtOQpt0YMZvR&U6^rDz8G>9->^{g_ zPa^9}z2(oTJ&S%Fz|(wOjb^*=wj>r~bC zGHBQMA6~suMHc1I3RaDptFn<>_o`G&R>$2MFm4WmLi7xlmURXn)|HDc>h1k8S+uj>Y{|nBS(!Q# z3<3Rvb#cUcXS5Z5acKv*t#EzsBL}i=gO(={U=m*7dy-fLfU zs6Amrj1GF{3;($SM7D^AG^&hjs7MK|Qw~M%Z9~O5JCHdhuVj}*fo&IM8ah&HNu|gy z*4=Ba6 zyZLO}hqhrmWy=fi6=Fg@u3qsMeq6nxjLW{TdKLLua8ce${_5)0nf1`>Rq8PM^GGm4 zI$ldh2>R-A+FCuIuUnrg7z7h$mY+hwJj|Hmig7_SL&DooRyVz_IYSa#vP=eU3Yx z8J-=hG>$D_u+&qfELgz$XjRZY<*mt}y|5e#+83A%5hFWso<@wc^5b3(ipK^}9oP%i zfnBZ&0>jp7(<2tE7m-`PH6HKd<6+j?p(oI4V|n;f4;aJHHb|V;H%DG>0zG;myly^B zkryb!4q$v0!krRB$1AZ{++PhGl6Vz}kj0#(hVoXoP)2MqBrm;gcC;St4BJI#-JMS6 uShO!~=TmpAZYO1RfP*WzopjEzyBVwLa6a<>L5p^SuLc+U4pSgy&G`>uBIgSL diff --git a/public/assets/js/generalFunctions.js b/public/assets/js/generalFunctions.js deleted file mode 100644 index 74497983..00000000 --- a/public/assets/js/generalFunctions.js +++ /dev/null @@ -1,56 +0,0 @@ -// Create new error objects, that prototypically inherit from the Error constructor -function FileError(message) { - this.name = 'FileError'; - this.message = message || 'Default Message'; - this.stack = (new Error()).stack; -} -FileError.prototype = Object.create(Error.prototype); -FileError.prototype.constructor = FileError; - -function NameError(message) { - this.name = 'NameError'; - this.message = message || 'Default Message'; - this.stack = (new Error()).stack; -} -NameError.prototype = Object.create(Error.prototype); -NameError.prototype.constructor = NameError; - -function ChannelNameError(message) { - this.name = 'ChannelNameError'; - this.message = message || 'Default Message'; - this.stack = (new Error()).stack; -} -ChannelNameError.prototype = Object.create(Error.prototype); -ChannelNameError.prototype.constructor = ChannelNameError; - -function ChannelPasswordError(message) { - this.name = 'ChannelPasswordError'; - this.message = message || 'Default Message'; - this.stack = (new Error()).stack; -} -ChannelPasswordError.prototype = Object.create(Error.prototype); -ChannelPasswordError.prototype.constructor = ChannelPasswordError; - -function AuthenticationError(message) { - this.name = 'AuthenticationError'; - this.message = message || 'Default Message'; - this.stack = (new Error()).stack; -} -AuthenticationError.prototype = Object.create(Error.prototype); -AuthenticationError.prototype.constructor = AuthenticationError; - -function showAssetDetails(event) { - var thisAssetHolder = document.getElementById(event.target.id); - var thisAssetImage = thisAssetHolder.firstElementChild; - var thisAssetDetails = thisAssetHolder.lastElementChild; - thisAssetImage.style.opacity = 0.2; - thisAssetDetails.setAttribute('class', 'grid-item-details flex-container--column flex-container--center-center'); -} - -function hideAssetDetails(event) { - var thisAssetHolder = document.getElementById(event.target.id); - var thisAssetImage = thisAssetHolder.firstElementChild; - var thisAssetDetails = thisAssetHolder.lastElementChild; - thisAssetImage.style.opacity = 1; - thisAssetDetails.setAttribute('class', 'hidden'); -} diff --git a/public/assets/js/progressBarConstructor.js b/public/assets/js/progressBarConstructor.js deleted file mode 100644 index e69de29b..00000000 diff --git a/views/partials/assetInfo.handlebars b/views/partials/assetInfo.handlebars deleted file mode 100644 index 0ecd3644..00000000 --- a/views/partials/assetInfo.handlebars +++ /dev/null @@ -1,134 +0,0 @@ -{{#if claimInfo.channelName}} -
-
- Channel: -
- {{claimInfo.channelName}} -
-
-{{/if}} - -{{#if claimInfo.description}} -
- {{claimInfo.description}} -
-{{/if}} - -
- -
-
- Embed: -
-
-
- - {{#ifConditional claimInfo.contentType '===' 'video/mp4'}} - - {{else}} - - {{/ifConditional}} -
- -
-
-
-
-
- -
-
-
- Share: -
-
- twitter - facebook - tumblr - reddit -
-
-
-
- - - - - -
- [more] -
- - diff --git a/views/partials/channelCreationForm.handlebars b/views/partials/channelCreationForm.handlebars deleted file mode 100644 index 1b28db91..00000000 --- a/views/partials/channelCreationForm.handlebars +++ /dev/null @@ -1,39 +0,0 @@ -
-

-
-
- -
-
- @ - - -
-
-
-
-
- -
-
- -
-
-
- -
- -
-
- - - - - - - diff --git a/views/partials/channelLoginForm.handlebars b/views/partials/channelLoginForm.handlebars deleted file mode 100644 index c4c0217f..00000000 --- a/views/partials/channelLoginForm.handlebars +++ /dev/null @@ -1,28 +0,0 @@ -
-

-
-
- -
-
- @ - -
-
-
-
-
- -
-
- -
-
-
- -
- -
-
- - diff --git a/views/partials/contentListItem.handlebars b/views/partials/contentListItem.handlebars deleted file mode 100644 index 378153fe..00000000 --- a/views/partials/contentListItem.handlebars +++ /dev/null @@ -1,15 +0,0 @@ -
-
- - {{#ifConditional this.contentType '===' 'video/mp4'}} - - {{else}} - - {{/ifConditional}} - -
-

{{this.title}}

- spee.ch{{this.showUrlShort}} -
-
- diff --git a/views/partials/gridItem.handlebars b/views/partials/gridItem.handlebars deleted file mode 100644 index 45bd7bcd..00000000 --- a/views/partials/gridItem.handlebars +++ /dev/null @@ -1,11 +0,0 @@ -
- {{#ifConditional this.contentType '===' 'video/mp4'}} - - {{else}} - - {{/ifConditional}} - - -
diff --git a/views/partials/navBar.handlebars b/views/partials/navBar.handlebars deleted file mode 100644 index 8460ee4a..00000000 --- a/views/partials/navBar.handlebars +++ /dev/null @@ -1,68 +0,0 @@ -
-
- -
- Open-source, decentralized image and video sharing. -
-
- Publish - - About - {{#if user }} - - {{else}} - Channel - {{/if}} -
-
-
- - From ff86b0aa8198df2c5b8d9ee0f309ebab1824160e Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 1 Feb 2018 14:29:33 -0800 Subject: [PATCH 21/96] updated ShowPage component to use redux store --- react/actions/show.js | 30 +++++ react/components/AssetDisplay/index.js | 81 +++++--------- react/components/ShowAssetDetails/index.js | 3 +- react/components/ShowAssetLite/index.js | 8 +- react/constants/asset_display_states.js | 4 + react/constants/show_action_types.js | 4 + react/containers/ChannelSelect/index.js | 2 +- react/containers/ShowPage/index.js | 23 ++++ .../index.js => containers/ShowPage/view.jsx} | 79 ++++++------- react/reducers/index.js | 2 + react/reducers/show.js | 104 ++++++++++++++++++ react/root.js | 2 +- react/utils/lbryUri.js | 28 +++-- 13 files changed, 256 insertions(+), 114 deletions(-) create mode 100644 react/actions/show.js create mode 100644 react/constants/asset_display_states.js create mode 100644 react/constants/show_action_types.js create mode 100644 react/containers/ShowPage/index.js rename react/{components/ShowPage/index.js => containers/ShowPage/view.jsx} (71%) create mode 100644 react/reducers/show.js diff --git a/react/actions/show.js b/react/actions/show.js new file mode 100644 index 00000000..c756bc24 --- /dev/null +++ b/react/actions/show.js @@ -0,0 +1,30 @@ +import * as actions from 'constants/show_action_types'; + +// export action creators + +export function updateClaimRequest (claim) { + return { + type: actions.CLAIM_REQUEST_UPDATE, + claim, + }; +}; + +export function updateChannelRequest (channel) { + return { + type: actions.CHANNEL_REQUEST_UPDATE, + channel, + }; +}; + +export function updateChannelData (channelData) { + return { + type: actions.CHANNEL_DATA_UPDATE, + channelData, + }; +}; + +export function updateClaimData (claimData) { + return { + type: actions.CHANNEL_DATA_UPDATE, + }; +}; diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 1de46417..8a0ed5cc 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -1,41 +1,31 @@ import React from 'react'; import ProgressBar from 'components/ProgressBar'; import Request from 'utils/request'; - -const LOCAL_CHECK = 'LOCAL_CHECK'; -const SEARCHING = 'SEARCHING'; -const UNAVAILABLE = 'UNAVAILABLE'; -const AVAILABLE = 'AVAILABLE'; +import { LOCAL_CHECK, SEARCHING, UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; +import PropTypes from 'prop-types'; class AssetDisplay extends React.Component { constructor (props) { super(props); this.state = { - error : null, - status : LOCAL_CHECK, - thumbnail : this.props.thumbnail, - src : `/${this.props.claimId}}/${this.props.name}.${this.props.fileExt}`, - name : this.props.name, - claimId : this.props.claimId, - fileExt : this.props.fileExt, - contentType: this.props.contentType, + error : null, + status: LOCAL_CHECK, }; - this.checkIfLocalFileAvailable = this.checkIfLocalFileAvailable.bind(this); - this.triggerGetAssetOnSpeech = this.triggerGetAssetOnSpeech.bind(this); + this.isLocalFileAvailableOnServer = this.isLocalFileAvailableOnServer.bind(this); + this.triggerGetAssetOnServer = this.triggerGetAssetOnServer.bind(this); } componentDidMount () { const that = this; - this.checkIfLocalFileAvailable() + this.isLocalFileAvailableOnServer() .then(isAvailable => { if (!isAvailable) { console.log('file is not yet available'); that.setState({status: SEARCHING}); - return that.triggerGetAssetOnSpeech(); + return that.triggerGetAssetOnServer(); } }) .then(() => { that.setState({status: AVAILABLE}); - that.addPlayPauseToVideoToBody(); }) .catch(error => { that.setState({ @@ -44,7 +34,7 @@ class AssetDisplay extends React.Component { }); }); } - checkIfLocalFileAvailable () { + isLocalFileAvailableOnServer () { console.log(`checking if file is available for ${this.props.name}#${this.props.claimId}`); const url = `/api/file-is-available/${this.props.name}/${this.props.claimId}`; return new Promise((resolve, reject) => { @@ -58,8 +48,8 @@ class AssetDisplay extends React.Component { }); }); } - triggerGetAssetOnSpeech () { - console.log(`getting claim for ${this.props.name}#${this.props.claimId}`) + triggerGetAssetOnServer () { + console.log(`getting claim for ${this.props.name}#${this.props.claimId}`); const url = `/api/claim-get/${this.props.name}/${this.props.claimId}`; return new Promise((resolve, reject) => { Request(url) @@ -72,29 +62,6 @@ class AssetDisplay extends React.Component { }); }); } - addPlayPauseToVideoToBody () { - const that = this; - const video = document.getElementById('video'); - if (video) { - // add event listener for click - video.addEventListener('click', () => { - that.playOrPause(video); - }); - // add event listener for space bar - document.body.onkeyup = (event) => { - if (event.keyCode === 32) { - that.playOrPause(video); - } - }; - } - } - playOrPause (video) { - if (video.paused === true) { - video.play(); - } else { - video.pause(); - } - } render () { return (
@@ -113,27 +80,27 @@ class AssetDisplay extends React.Component { } {(this.state.status === AVAILABLE) && (() => { - switch (this.state.contentType) { + switch (this.props.contentType) { case 'image/jpeg': case 'image/jpg': case 'image/png': return ( - {this.state.name}/ + {this.props.name}/ ); case 'image/gif': return ( - {this.state.name}/ + {this.props.name}/ ); case 'video/mp4': return ( -
diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index a7865278..632cec47 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -12,8 +12,12 @@ class ShowLite extends React.Component { {this.props.claimData &&
hosted via Spee.ch
diff --git a/react/constants/asset_display_states.js b/react/constants/asset_display_states.js new file mode 100644 index 00000000..ce8530f5 --- /dev/null +++ b/react/constants/asset_display_states.js @@ -0,0 +1,4 @@ +export const LOCAL_CHECK = 'LOCAL_CHECK'; +export const SEARCHING = 'SEARCHING'; +export const UNAVAILABLE = 'UNAVAILABLE'; +export const AVAILABLE = 'AVAILABLE'; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js new file mode 100644 index 00000000..3457d74c --- /dev/null +++ b/react/constants/show_action_types.js @@ -0,0 +1,4 @@ +export const CLAIM_REQUEST_UPDATE = 'CLAIM_REQUEST_UPDATE'; +export const CHANNEL_REQUEST_UPDATE = 'CHANNEL_REQUEST_UPDATE'; +export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; +export const CLAIM_DATA_UPDATE = 'CLAIM_DATA_UPDATE'; diff --git a/react/containers/ChannelSelect/index.js b/react/containers/ChannelSelect/index.js index b7766609..a401fe38 100644 --- a/react/containers/ChannelSelect/index.js +++ b/react/containers/ChannelSelect/index.js @@ -1,6 +1,6 @@ import {connect} from 'react-redux'; import {setPublishInChannel, updateSelectedChannel, updateError} from 'actions/publish'; -import View from './view.jsx'; +import View from './view'; const mapStateToProps = ({ channel, publish }) => { return { diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js new file mode 100644 index 00000000..b3c946ad --- /dev/null +++ b/react/containers/ShowPage/index.js @@ -0,0 +1,23 @@ +import { updateChannelRequest, updateClaimRequest } from 'actions/show'; +import { connect } from 'react-redux'; +import View from './view'; + +const mapStateToProps = ({ show }) => { + return { + channel: show.request.channel, + claim : show.request.claim, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + onChannelRequest: (channel) => { + dispatch(updateChannelRequest(channel)); + }, + onClaimRequest: (claim) => { + dispatch(updateClaimRequest(claim)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/components/ShowPage/index.js b/react/containers/ShowPage/view.jsx similarity index 71% rename from react/components/ShowPage/index.js rename to react/containers/ShowPage/view.jsx index 67e6a68e..5a3524c9 100644 --- a/react/components/ShowPage/index.js +++ b/react/containers/ShowPage/view.jsx @@ -4,17 +4,11 @@ import ShowAsset from 'components/ShowAsset'; import ShowChannel from 'components/ShowChannel'; import lbryUri from 'utils/lbryUri'; -const CHANNEL = 'CHANNEL'; -const ASSET = 'ASSET'; - class ShowPage extends React.Component { constructor (props) { super(props); this.state = { - error : null, - identifier : null, - claim : null, - isServeRequest: null, + error: null, }; this.parseUrlAndUpdateState = this.parseUrlAndUpdateState.bind(this); this.parseAndUpdateIdentifierAndClaim = this.parseAndUpdateIdentifierAndClaim.bind(this); @@ -40,31 +34,36 @@ class ShowPage extends React.Component { } this.parseAndUpdateClaimOnly(claim); } - parseAndUpdateIdentifierAndClaim (identifier, claim) { + parseAndUpdateIdentifierAndClaim (modifier, claim) { // handle case of identifier and claim // this is a request for an asset // claim will be an asset claim // the identifier could be a channel or a claim id - let isChannel, channelName, channelClaimId, claimId, claimName, isServeRequest; + let isChannel, channelName, channelClaimId, claimId, claimName, extension; try { - ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(identifier)); - ({ claimName, isServeRequest } = lbryUri.parseClaim(claim)); + ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(modifier)); + ({ claimName, extension } = lbryUri.parseClaim(claim)); } catch (error) { return this.setState({error: error.message}); } - // set state - return this.setState({ - identifier: { - isChannel, - channelName, - channelClaimId, - claimId, + // update the store + let requestedClaim = { + name : claimName, + modifier: { + id : null, + channel: null, }, - claim: { - claimName, - }, - isServeRequest, - }); + extension, + }; + if (isChannel) { + requestedClaim['modifier']['channel'] = { + name: channelName, + id : channelClaimId, + }; + } else { + requestedClaim['modifier']['id'] = claimId; + } + return this.props.onClaimRequest(requestedClaim); } parseAndUpdateClaimOnly (claim) { // handle case of just claim @@ -76,27 +75,27 @@ class ShowPage extends React.Component { } catch (error) { return this.setState({error: error.message}); } + // return early if this request is for a channel if (isChannel) { - return this.setState({ - claim: { - isChannel, - channelName, - channelClaimId, - }, - }); + const requestedChannel = { + name: channelName, + id : channelClaimId, + } + return this.props.onChannelRequest(requestedChannel); } - let claimName, isServeRequest; + // if not for a channel, parse the claim request + let claimName, extension; // if I am destructuring below, do I still need to declare these here? try { - ({claimName, isServeRequest} = lbryUri.parseClaim(claim)); + ({claimName, extension} = lbryUri.parseClaim(claim)); } catch (error) { return this.setState({error: error.message}); } - this.setState({ - claim: { - claimName, - }, - isServeRequest, - }); + const requestedClaim = { + name : claimName, + modifier: null, + extension, + } + this.props.onClaimRequest(requestedClaim); } render () { console.log('rendering ShowPage'); @@ -128,4 +127,8 @@ class ShowPage extends React.Component { } }; +// props +// channel +// show + export default ShowPage; diff --git a/react/reducers/index.js b/react/reducers/index.js index ee000700..c80273f3 100644 --- a/react/reducers/index.js +++ b/react/reducers/index.js @@ -1,8 +1,10 @@ import { combineReducers } from 'redux'; import PublishReducer from 'reducers/publish'; import ChannelReducer from 'reducers/channel'; +import ShowReducer from 'reducers/show'; export default combineReducers({ channel: ChannelReducer, publish: PublishReducer, + show : ShowReducer, }); diff --git a/react/reducers/show.js b/react/reducers/show.js new file mode 100644 index 00000000..fb9e924f --- /dev/null +++ b/react/reducers/show.js @@ -0,0 +1,104 @@ +import * as actions from 'constants/show_action_types'; + +const initialState = { + request: { + channel: { + name: null, + id : null, + }, + claim: { + name : null, + modifier: { + id : null, + channel: { + name: null, + id : null, + }, + }, + extension: null, + }, + }, + channelData: { + channelName : null, + claims : null, + currentPage : null, + previousPage: null, + totalPages : null, + totalResults: null, + }, + claimData: { + FileId : null, + address : null, + amount : null, + author : null, + certificateId : null, + channelName : null, + claimId : null, + claimSequence : null, + claimType : null, + contentType : null, + createdAt : null, + decodedClaim : null, + depth : null, + description : null, + effectiveAmount: null, + fileExt : null, + hasSignature : null, + height : null, + hex : null, + host : null, + id : null, + language : null, + license : null, + licenseUrl : null, + metadataVersion: null, + name : null, + nout : null, + nsfw : null, + outpoint : null, + preview : null, + source : null, + sourceType : null, + sourceVersion : null, + streamVersion : null, + thumbnail : null, + title : null, + txid : null, + updatedAt : null, + validAtHeight : null, + valueVersion : null, + }, +}; + +/* +Reducers describe how the application's state changes in response to actions +*/ + +export default function (state = initialState, action) { + switch (action.type) { + case actions.CLAIM_REQUEST_UPDATE: + return Object.assign({}, state, { + request: { + channel: null, + claim : action.claim, + }, + }); + case actions.CHANNEL_REQUEST_UPDATE: + return Object.assign({}, state, { + request: { + channel: action.channel, + claim : null, + }, + }); + case actions.CHANNEL_DATA_UPDATE: + return Object.assign({}, state, { + channelData: action.channelData, + }); + case actions.CLAIM_DATA_UPDATE: + return Object.assign({}, state, { + claimData: action.claimData, + }); + default: + return state; + } +} diff --git a/react/root.js b/react/root.js index 33e286db..170f1759 100644 --- a/react/root.js +++ b/react/root.js @@ -6,7 +6,7 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'; import PublishPage from 'components/PublishPage'; import AboutPage from 'components/AboutPage'; import LoginPage from 'components/LoginPage'; -import ShowPage from 'components/ShowPage'; +import ShowPage from 'containers/ShowPage'; const Root = ({ store }) => ( diff --git a/react/utils/lbryUri.js b/react/utils/lbryUri.js index 957a1a5f..bc40f35c 100644 --- a/react/utils/lbryUri.js +++ b/react/utils/lbryUri.js @@ -49,20 +49,20 @@ module.exports = { return { isChannel, channelName, - channelClaimId, - claimId, + channelClaimId: channelClaimId || null, + claimId : claimId || null, }; }, parseClaim: function (name) { console.log('parsing name:', name); const componentsRegex = new RegExp( - '([^:$#/.]*)' + // name (stops at the first modifier) - '([:$#.]?)([^/]*)' // modifier separator, modifier (stops at the first path separator or end) + '([^:$#/.]*)' + // name (stops at the first extension) + '([:$#.]?)([^/]*)' // extension separator, extension (stops at the first path separator or end) ); - const [proto, claimName, modifierSeperator, modifier] = componentsRegex + const [proto, claimName, extensionSeperator, extension] = componentsRegex .exec(name) .map(match => match || null); - console.log(`${proto}, ${claimName}, ${modifierSeperator}, ${modifier}`); + console.log(`${proto}, ${claimName}, ${extensionSeperator}, ${extension}`); // Validate and process name if (!claimName) { @@ -72,20 +72,18 @@ module.exports = { if (nameBadChars) { throw new Error(`Check your URL. Invalid characters in claim name: "${nameBadChars.join(', ')}".`); } - // Validate and process modifier - let isServeRequest = false; - if (modifierSeperator) { - if (!modifier) { - throw new Error(`Check your URL. No file extension provided after separator "${modifierSeperator}".`); + // Validate and process extension + if (extensionSeperator) { + if (!extension) { + throw new Error(`Check your URL. No file extension provided after separator "${extensionSeperator}".`); } - if (modifierSeperator !== '.') { - throw new Error(`Check your URL. The "${modifierSeperator}" modifier is not supported in the claim name.`); + if (extensionSeperator !== '.') { + throw new Error(`Check your URL. The "${extensionSeperator}" separator is not supported in the claim name.`); } - isServeRequest = true; } return { claimName, - isServeRequest, + extension: extension || null, }; }, }; From a00ff9203cb6003871dcd763f38f14b9008ac321 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 1 Feb 2018 18:42:03 -0800 Subject: [PATCH 22/96] updated channel display to use redux store --- react/actions/show.js | 16 ++- react/constants/show_action_types.js | 1 + .../containers/ChannelClaimsDisplay/index.js | 24 +++++ .../ChannelClaimsDisplay/view.jsx} | 44 ++++----- react/containers/ShowChannel/index.js | 27 +++++ .../ShowChannel/view.jsx} | 35 ++----- react/containers/ShowPage/index.js | 3 +- react/containers/ShowPage/view.jsx | 28 +++--- react/reducers/show.js | 98 +++++++------------ 9 files changed, 141 insertions(+), 135 deletions(-) create mode 100644 react/containers/ChannelClaimsDisplay/index.js rename react/{components/ChannelClaimsDisplay/index.js => containers/ChannelClaimsDisplay/view.jsx} (51%) create mode 100644 react/containers/ShowChannel/index.js rename react/{components/ShowChannel/index.js => containers/ShowChannel/view.jsx} (50%) diff --git a/react/actions/show.js b/react/actions/show.js index c756bc24..4012e50a 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -16,10 +16,22 @@ export function updateChannelRequest (channel) { }; }; -export function updateChannelData (channelData) { +export function updateChannelData (name, longId, shortId) { return { type: actions.CHANNEL_DATA_UPDATE, - channelData, + name, + longId, + shortId, + }; +}; + +export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) { + return { + type: actions.CHANNEL_CLAIMS_UPDATE, + claims, + currentPage, + totalPages, + totalClaims, }; }; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 3457d74c..7f2269d4 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,4 +1,5 @@ export const CLAIM_REQUEST_UPDATE = 'CLAIM_REQUEST_UPDATE'; export const CHANNEL_REQUEST_UPDATE = 'CHANNEL_REQUEST_UPDATE'; export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; +export const CHANNEL_CLAIMS_UPDATE = 'CHANNEL_CLAIMS_UPDATE'; export const CLAIM_DATA_UPDATE = 'CLAIM_DATA_UPDATE'; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js new file mode 100644 index 00000000..1e2f6c41 --- /dev/null +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -0,0 +1,24 @@ +import { connect } from 'react-redux'; +import View from './view'; +import {updateChannelClaimsData} from 'actions/show'; + +const mapStateToProps = ({ show }) => { + return { + name : show.channel.name, + id : show.channel.id, + claims : show.channel.claimsData.claims, + currentPage: show.channel.claimsData.currentPage, + totalPages : show.channel.claimsData.totalPages, + totalClaims: show.channel.claimsData.totalClaims, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + onClaimsDataChange: (claims, currentPage, totalPages, totalClaims) => { + dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/components/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/view.jsx similarity index 51% rename from react/components/ChannelClaimsDisplay/index.js rename to react/containers/ChannelClaimsDisplay/view.jsx index 2418a645..fdd537cf 100644 --- a/react/components/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import AssetPreview from 'components/AssetPreview'; +import AssetPreview from 'components/AssetPreview/index'; import request from 'utils/request'; class ChannelClaimsDisplay extends React.Component { @@ -12,13 +12,11 @@ class ChannelClaimsDisplay extends React.Component { this.getAndStoreChannelClaims = this.getAndStoreChannelClaims.bind(this); } componentDidMount () { - const channelName = this.props.channelName; - const channelClaimId = this.props.channelClaimId || 'none'; - const page = this.state.page; - this.getAndStoreChannelClaims(channelName, channelClaimId, page); + this.getAndStoreChannelClaims(this.props.name, this.props.id, this.state.page); } - getAndStoreChannelClaims (channelName, channelClaimId, page) { - const url = `/api/channel-claims/${channelName}/${channelClaimId}/${page}`; + getAndStoreChannelClaims (name, id, page) { + if (!id) id = 'none'; + const url = `/api/channel-claims/${name}/${id}/${page}`; const that = this; return request(url) .then(({ success, message, data }) => { @@ -26,14 +24,7 @@ class ChannelClaimsDisplay extends React.Component { if (!success) { return that.setState({error: message}); } - that.setState({ - claims : data.claims, - currentPage : data.currentPage, - nextPage : data.nextPage, - previousPage: data.previousPage, - totalPages : data.totalPages, - totalResults: data.totalResults, - }); + this.props.onClaimsDataChange(data.claims, data.currentPage, data.totalPages, data.totalResults); }) .catch((error) => { that.setState({error: error.message}); @@ -50,12 +41,19 @@ class ChannelClaimsDisplay extends React.Component {
) : (
- {this.state.claims && this.state.claims.map((claim, index) => )} + {this.props.claims && +
+ {this.props.claims.map((claim, index) => )} +

current page: {this.props.currentPage}

+

total pages: {this.props.totalPages}

+

total claims: {this.props.totalClaims}

+
+ }
)}
@@ -63,8 +61,4 @@ class ChannelClaimsDisplay extends React.Component { } }; -// required props -// channelName -// channelClaimId - export default ChannelClaimsDisplay; diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js new file mode 100644 index 00000000..6606172d --- /dev/null +++ b/react/containers/ShowChannel/index.js @@ -0,0 +1,27 @@ +import { connect } from 'react-redux'; +import View from './view'; +import {updateChannelData} from 'actions/show'; + +const mapStateToProps = ({ show }) => { + return { + request: { + name: show.request.channel.name, + id : show.request.channel.id, + }, + channel: { + name : show.channel.name, + shortId: show.channel.shortId, + longId : show.channel.longId, + }, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + onChannelDataChange: (name, longId, shortId) => { + dispatch(updateChannelData(name, longId, shortId)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/components/ShowChannel/index.js b/react/containers/ShowChannel/view.jsx similarity index 50% rename from react/components/ShowChannel/index.js rename to react/containers/ShowChannel/view.jsx index d28acaf6..2f381247 100644 --- a/react/components/ShowChannel/index.js +++ b/react/containers/ShowChannel/view.jsx @@ -1,6 +1,6 @@ import React from 'react'; import NavBar from 'containers/NavBar'; -import ChannelClaimsDisplay from 'components/ChannelClaimsDisplay'; +import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; import request from 'utils/request'; class ShowChannel extends React.Component { @@ -12,12 +12,11 @@ class ShowChannel extends React.Component { this.getAndStoreChannelData = this.getAndStoreChannelData.bind(this); } componentDidMount () { - const channelName = this.props.channelName; - const channelClaimId = this.props.channelClaimId || 'none'; - this.getAndStoreChannelData(channelName, channelClaimId); + this.getAndStoreChannelData(this.props.request.name, this.props.request.id); } - getAndStoreChannelData (channelName, channelClaimId) { - const url = `/api/channel-data/${channelName}/${channelClaimId}`; + getAndStoreChannelData (name, id) { + if (!id) id = 'none'; + const url = `/api/channel-data/${name}/${id}`; const that = this; return request(url) .then(({ success, message, data }) => { @@ -25,11 +24,7 @@ class ShowChannel extends React.Component { if (!success) { return that.setState({error: message}); } - that.setState({ - channelName : data.channelName, - longChannelClaimId : data.longChannelClaimId, - shortChannelClaimId: data.shortChannelClaimId, - }); + this.props.onChannelDataChange(data.channelName, data.longChannelClaimId, data.shortChannelClaimId); }) .catch((error) => { that.setState({error: error.message}); @@ -48,17 +43,12 @@ class ShowChannel extends React.Component { ) : (
-

channel name: {this.props.channelName}

-

full channel id: {this.state.longChannelClaimId ? this.state.longChannelClaimId : 'loading...'}

-

short channel id: {this.state.shortChannelClaimId ? this.state.shortChannelClaimId : 'loading...'}

+

channel name: {this.props.channel.name}

+

full channel id: {this.props.channel.longId ? this.props.channel.longId : 'loading...'}

+

short channel id: {this.props.channel.shortId ? this.props.channel.shortId : 'loading...'}

- { (this.state.channelName && this.state.longChannelClaimId) && - - } + {this.props.channel.name && }
)} @@ -67,9 +57,4 @@ class ShowChannel extends React.Component { } }; -// required props -// channelName -// channelClaimId - - export default ShowChannel; diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js index b3c946ad..c00adf22 100644 --- a/react/containers/ShowPage/index.js +++ b/react/containers/ShowPage/index.js @@ -4,8 +4,7 @@ import View from './view'; const mapStateToProps = ({ show }) => { return { - channel: show.request.channel, - claim : show.request.claim, + request: show.request, }; }; diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index 5a3524c9..f8e331cb 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -1,7 +1,7 @@ import React from 'react'; import ErrorPage from 'components/ErrorPage'; import ShowAsset from 'components/ShowAsset'; -import ShowChannel from 'components/ShowChannel'; +import ShowChannel from 'containers/ShowChannel'; import lbryUri from 'utils/lbryUri'; class ShowPage extends React.Component { @@ -35,7 +35,6 @@ class ShowPage extends React.Component { this.parseAndUpdateClaimOnly(claim); } parseAndUpdateIdentifierAndClaim (modifier, claim) { - // handle case of identifier and claim // this is a request for an asset // claim will be an asset claim // the identifier could be a channel or a claim id @@ -66,7 +65,6 @@ class ShowPage extends React.Component { return this.props.onClaimRequest(requestedClaim); } parseAndUpdateClaimOnly (claim) { - // handle case of just claim // this could be a request for an asset or a channel page // claim could be an asset claim or a channel claim let isChannel, channelName, channelClaimId; @@ -104,25 +102,23 @@ class ShowPage extends React.Component { ); } - if (this.state.claim) { - if (this.state.claim.isChannel) { + if (this.props.request) { + if (this.props.request.channel) { return ( - + ); + } else if (this.props.request.claim) { + return ( + ); } - return ( - - ); } return ( -

Loading...

+

loading...

); } }; diff --git a/react/reducers/show.js b/react/reducers/show.js index fb9e924f..1a12e393 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -2,71 +2,24 @@ import * as actions from 'constants/show_action_types'; const initialState = { request: { - channel: { - name: null, - id : null, - }, - claim: { - name : null, - modifier: { - id : null, - channel: { - name: null, - id : null, - }, - }, - extension: null, + channel: null, + claim : null, + }, + channel: { + name : null, + shortId : null, + longId : null, + claimsData: { + claims : null, + currentPage: null, + totalPages : null, + totalClaims: null, }, }, - channelData: { - channelName : null, - claims : null, - currentPage : null, - previousPage: null, - totalPages : null, - totalResults: null, - }, - claimData: { - FileId : null, - address : null, - amount : null, - author : null, - certificateId : null, - channelName : null, - claimId : null, - claimSequence : null, - claimType : null, - contentType : null, - createdAt : null, - decodedClaim : null, - depth : null, - description : null, - effectiveAmount: null, - fileExt : null, - hasSignature : null, - height : null, - hex : null, - host : null, - id : null, - language : null, - license : null, - licenseUrl : null, - metadataVersion: null, - name : null, - nout : null, - nsfw : null, - outpoint : null, - preview : null, - source : null, - sourceType : null, - sourceVersion : null, - streamVersion : null, - thumbnail : null, - title : null, - txid : null, - updatedAt : null, - validAtHeight : null, - valueVersion : null, + claim: { + name: null, + id : null, + data: null, }, }; @@ -92,11 +45,26 @@ export default function (state = initialState, action) { }); case actions.CHANNEL_DATA_UPDATE: return Object.assign({}, state, { - channelData: action.channelData, + channel: Object.assign({}, state.channel, { + name : action.name, + shortId: action.shortId, + longId : action.longId, + }), + }); + case actions.CHANNEL_CLAIMS_UPDATE: + return Object.assign({}, state, { + channel: Object.assign({}, state.channel, { + claimsData: { + claims : action.claims, + currentPage: action.currentPage, + totalPages : action.totalPages, + totalClaims: action.totalClaims, + }, + }), }); case actions.CLAIM_DATA_UPDATE: return Object.assign({}, state, { - claimData: action.claimData, + displayClaim: action.claimData, }); default: return state; From b7ca5ac1ac0db88e5b5d2b9515391893ee89d9b0 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 1 Feb 2018 19:36:08 -0800 Subject: [PATCH 23/96] updated show asset components to use redux state --- react/actions/show.js | 5 ++- react/components/ShowAssetDetails/index.js | 2 +- react/components/ShowAssetLite/index.js | 2 +- react/containers/ShowAsset/index.js | 24 +++++++++++ .../ShowAsset/view.jsx} | 40 +++++++++---------- react/containers/ShowPage/view.jsx | 8 +--- react/reducers/show.js | 8 +--- 7 files changed, 51 insertions(+), 38 deletions(-) create mode 100644 react/containers/ShowAsset/index.js rename react/{components/ShowAsset/index.js => containers/ShowAsset/view.jsx} (71%) diff --git a/react/actions/show.js b/react/actions/show.js index 4012e50a..61d79c6e 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -35,8 +35,9 @@ export function updateChannelClaimsData (claims, currentPage, totalPages, totalC }; }; -export function updateClaimData (claimData) { +export function updateClaimData (data) { return { - type: actions.CHANNEL_DATA_UPDATE, + type: actions.CLAIM_DATA_UPDATE, + data, }; }; diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index 3d3fa589..f4adce0c 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -27,7 +27,7 @@ class ShowDetails extends React.Component { { + return { + request: { + modifier : show.request.claim.modifier, + claim : show.request.claim.name, + extension: show.request.claim.extension, + }, + claim: show.claim, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + onClaimDataChange: (data) => { + dispatch(updateClaimData(data)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/components/ShowAsset/index.js b/react/containers/ShowAsset/view.jsx similarity index 71% rename from react/components/ShowAsset/index.js rename to react/containers/ShowAsset/view.jsx index 616ae44e..58c9a776 100644 --- a/react/components/ShowAsset/index.js +++ b/react/containers/ShowAsset/view.jsx @@ -1,14 +1,13 @@ import React from 'react'; -import ShowAssetLite from 'components/ShowAssetLite'; -import ShowAssetDetails from 'components/ShowAssetDetails'; +import ShowAssetLite from 'components/ShowAssetLite/index'; +import ShowAssetDetails from 'components/ShowAssetDetails/index'; import request from 'utils/request'; class ShowAsset extends React.Component { constructor (props) { super(props); this.state = { - claimData: null, - error : null, + error: null, }; this.getLongClaimId = this.getLongClaimId.bind(this); this.getClaimData = this.getClaimData.bind(this); @@ -16,18 +15,19 @@ class ShowAsset extends React.Component { componentDidMount () { console.log('ShowAsset did mount'); console.log('ShowAsset props', this.props); + const modifier = this.props.request.modifier; + const name = this.props.request.claim; + // create request params let body = {}; - if (this.props.identifier) { - if (this.props.identifier.isChannel) { - body['channelName'] = this.props.identifier.channelName; - body['channelClaimId'] = this.props.identifier.channelClaimId; + if (modifier) { + if (modifier.channel) { + body['channelName'] = modifier.channel.name; + body['channelClaimId'] = modifier.channel.id; } else { - body['claimId'] = this.props.identifier.claimId; + body['claimId'] = modifier.id; } } - if (this.props.claim) { - body['claimName'] = this.props.claim.claimName; - } + body['claimName'] = name; const params = { method : 'POST', headers: new Headers({ @@ -35,13 +35,14 @@ class ShowAsset extends React.Component { }), body: JSON.stringify(body), } + // make request const that = this; this.getLongClaimId(params) .then(claimLongId => { - return that.getClaimData(this.props.claim.claimName, claimLongId); + return that.getClaimData(name, claimLongId); }) .then(claimData => { - this.setState({ claimData }); + this.props.onClaimDataChange(claimData); }) .catch(error => { this.setState({error}); @@ -81,26 +82,21 @@ class ShowAsset extends React.Component { }); } render () { - if (this.props.isServeRequest) { + if (this.props.request.extension) { return ( ); } return ( ); } }; -// required props -// identifier -// claim -// isServeRequest - export default ShowAsset; diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index f8e331cb..d818d85a 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ErrorPage from 'components/ErrorPage'; -import ShowAsset from 'components/ShowAsset'; +import ShowAsset from 'containers/ShowAsset'; import ShowChannel from 'containers/ShowChannel'; import lbryUri from 'utils/lbryUri'; @@ -109,11 +109,7 @@ class ShowPage extends React.Component { ); } else if (this.props.request.claim) { return ( - + ); } } diff --git a/react/reducers/show.js b/react/reducers/show.js index 1a12e393..2c9beb9c 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -16,11 +16,7 @@ const initialState = { totalClaims: null, }, }, - claim: { - name: null, - id : null, - data: null, - }, + claim: null, }; /* @@ -64,7 +60,7 @@ export default function (state = initialState, action) { }); case actions.CLAIM_DATA_UPDATE: return Object.assign({}, state, { - displayClaim: action.claimData, + claim: action.data, }); default: return state; From 1cbe9edf21eebfcef9ed3e67cc86db9234ee2ea0 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 2 Feb 2018 11:10:58 -0800 Subject: [PATCH 24/96] updated show request reducers and actions --- react/actions/show.js | 24 +++--- react/components/ShowAssetDetails/index.js | 6 +- react/constants/show_action_types.js | 8 +- react/constants/show_request_types.js | 2 + .../containers/ChannelClaimsDisplay/index.js | 12 +-- .../containers/ChannelClaimsDisplay/view.jsx | 3 +- react/containers/ShowAsset/index.js | 16 ++-- react/containers/ShowAsset/view.jsx | 16 ++-- react/containers/ShowChannel/index.js | 12 +-- react/containers/ShowPage/index.js | 12 +-- react/containers/ShowPage/view.jsx | 56 +++--------- react/reducers/show.js | 86 ++++++++++++------- 12 files changed, 124 insertions(+), 129 deletions(-) create mode 100644 react/constants/show_request_types.js diff --git a/react/actions/show.js b/react/actions/show.js index 61d79c6e..1db4e443 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -1,18 +1,22 @@ import * as actions from 'constants/show_action_types'; - // export action creators -export function updateClaimRequest (claim) { +export function updateRequestWithChannelRequest (name, id) { return { - type: actions.CLAIM_REQUEST_UPDATE, - claim, + type: actions.REQUEST_UPDATE_CHANNEL, + name, + id, }; }; -export function updateChannelRequest (channel) { +export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) { return { - type: actions.CHANNEL_REQUEST_UPDATE, - channel, + type : actions.REQUEST_UPDATE_CLAIM, + name, + id, + channelName: null, + channelId : null, + extension, }; }; @@ -27,7 +31,7 @@ export function updateChannelData (name, longId, shortId) { export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) { return { - type: actions.CHANNEL_CLAIMS_UPDATE, + type: actions.CHANNEL_CLAIMS_DATA_UPDATE, claims, currentPage, totalPages, @@ -35,9 +39,9 @@ export function updateChannelClaimsData (claims, currentPage, totalPages, totalC }; }; -export function updateClaimData (data) { +export function updateAssetData (data) { return { - type: actions.CLAIM_DATA_UPDATE, + type: actions.ASSET_DATA_UPDATE, data, }; }; diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index f4adce0c..2972fa94 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -4,9 +4,9 @@ import AssetTitle from 'components/AssetTitle'; import AssetDisplay from 'components/AssetDisplay'; import AssetInfo from 'components/AssetInfo'; -class ShowDetails extends React.Component { +class ShowAssetDetails extends React.Component { componentDidMount () { - console.log(this.props); + console.log('ShowAssetDetails props', this.props); } render () { return ( @@ -63,4 +63,4 @@ class ShowDetails extends React.Component { // claimId // claimName -export default ShowDetails; +export default ShowAssetDetails; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 7f2269d4..acf89ae5 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,5 +1,5 @@ -export const CLAIM_REQUEST_UPDATE = 'CLAIM_REQUEST_UPDATE'; -export const CHANNEL_REQUEST_UPDATE = 'CHANNEL_REQUEST_UPDATE'; +export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL'; +export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM'; export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; -export const CHANNEL_CLAIMS_UPDATE = 'CHANNEL_CLAIMS_UPDATE'; -export const CLAIM_DATA_UPDATE = 'CLAIM_DATA_UPDATE'; +export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE'; +export const ASSET_DATA_UPDATE = 'ASSET_DATA_UPDATE'; diff --git a/react/constants/show_request_types.js b/react/constants/show_request_types.js new file mode 100644 index 00000000..82ae07cd --- /dev/null +++ b/react/constants/show_request_types.js @@ -0,0 +1,2 @@ +export const CHANNEL = 'CHANNEL'; +export const ASSET = 'ASSET'; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 1e2f6c41..2efa8468 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -4,12 +4,12 @@ import {updateChannelClaimsData} from 'actions/show'; const mapStateToProps = ({ show }) => { return { - name : show.channel.name, - id : show.channel.id, - claims : show.channel.claimsData.claims, - currentPage: show.channel.claimsData.currentPage, - totalPages : show.channel.claimsData.totalPages, - totalClaims: show.channel.claimsData.totalClaims, + name : show.channelData.name, + longId : show.channelData.longId, + claims : show.channelClaimsData.claims, + currentPage: show.channelClaimsData.currentPage, + totalPages : show.channelClaimsData.totalPages, + totalClaims: show.channelClaimsData.totalClaims, }; }; diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index fdd537cf..702794a3 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -7,12 +7,11 @@ class ChannelClaimsDisplay extends React.Component { super(props); this.state = { error: null, - page : 1, }; this.getAndStoreChannelClaims = this.getAndStoreChannelClaims.bind(this); } componentDidMount () { - this.getAndStoreChannelClaims(this.props.name, this.props.id, this.state.page); + this.getAndStoreChannelClaims(this.props.name, this.props.longId, this.props.currentPage); } getAndStoreChannelClaims (name, id, page) { if (!id) id = 'none'; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 4d394625..20866911 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -1,22 +1,20 @@ -import { updateClaimData } from 'actions/show'; import { connect } from 'react-redux'; +import { updateAssetData } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { return { - request: { - modifier : show.request.claim.modifier, - claim : show.request.claim.name, - extension: show.request.claim.extension, - }, - claim: show.claim, + modifier : show.assetRequest.modifier, + claim : show.assetRequest.name, + extension: show.assetRequest.extension, + claimData: show.assetData, }; }; const mapDispatchToProps = dispatch => { return { - onClaimDataChange: (data) => { - dispatch(updateClaimData(data)); + onAssetDataUpdate: (data) => { + dispatch(updateAssetData(data)); }, }; }; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 58c9a776..ff75100b 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -1,6 +1,6 @@ import React from 'react'; -import ShowAssetLite from 'components/ShowAssetLite/index'; -import ShowAssetDetails from 'components/ShowAssetDetails/index'; +import ShowAssetLite from 'components/ShowAssetLite'; +import ShowAssetDetails from 'components/ShowAssetDetails'; import request from 'utils/request'; class ShowAsset extends React.Component { @@ -15,8 +15,8 @@ class ShowAsset extends React.Component { componentDidMount () { console.log('ShowAsset did mount'); console.log('ShowAsset props', this.props); - const modifier = this.props.request.modifier; - const name = this.props.request.claim; + const modifier = this.props.modifier; + const name = this.props.claim; // create request params let body = {}; if (modifier) { @@ -42,7 +42,7 @@ class ShowAsset extends React.Component { return that.getClaimData(name, claimLongId); }) .then(claimData => { - this.props.onClaimDataChange(claimData); + this.props.onAssetDataUpdate(claimData); }) .catch(error => { this.setState({error}); @@ -82,18 +82,18 @@ class ShowAsset extends React.Component { }); } render () { - if (this.props.request.extension) { + if (this.props.extension) { return ( ); } return ( ); } diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 6606172d..c020cf54 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,17 +1,17 @@ import { connect } from 'react-redux'; +import { updateChannelData } from 'actions/show'; import View from './view'; -import {updateChannelData} from 'actions/show'; const mapStateToProps = ({ show }) => { return { request: { - name: show.request.channel.name, - id : show.request.channel.id, + name: show.channelRequest.name, + id : show.channelRequest.id, }, channel: { - name : show.channel.name, - shortId: show.channel.shortId, - longId : show.channel.longId, + name : show.channelData.name, + shortId: show.channelData.shortId, + longId : show.channelData.longId, }, }; }; diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js index c00adf22..c27ab8e3 100644 --- a/react/containers/ShowPage/index.js +++ b/react/containers/ShowPage/index.js @@ -1,20 +1,20 @@ -import { updateChannelRequest, updateClaimRequest } from 'actions/show'; import { connect } from 'react-redux'; +import { updateRequestWithChannelRequest, updateRequestWithAssetRequest } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { return { - request: show.request, + requestType: show.requestType, }; }; const mapDispatchToProps = dispatch => { return { - onChannelRequest: (channel) => { - dispatch(updateChannelRequest(channel)); + onChannelRequest: (name, id) => { + dispatch(updateRequestWithChannelRequest(name, id)); }, - onClaimRequest: (claim) => { - dispatch(updateClaimRequest(claim)); + onAssetRequest: (name, id, channelName, channelId, extension) => { + dispatch(updateRequestWithAssetRequest(name, id, channelName, channelId, extension)); }, }; }; diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index d818d85a..b7057031 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -4,6 +4,8 @@ import ShowAsset from 'containers/ShowAsset'; import ShowChannel from 'containers/ShowChannel'; import lbryUri from 'utils/lbryUri'; +import { CHANNEL, ASSET } from 'constants/show_request_types'; + class ShowPage extends React.Component { constructor (props) { super(props); @@ -46,23 +48,11 @@ class ShowPage extends React.Component { return this.setState({error: error.message}); } // update the store - let requestedClaim = { - name : claimName, - modifier: { - id : null, - channel: null, - }, - extension, - }; if (isChannel) { - requestedClaim['modifier']['channel'] = { - name: channelName, - id : channelClaimId, - }; + return this.props.onAssetRequest(claimName, null, channelName, channelClaimId, extension); } else { - requestedClaim['modifier']['id'] = claimId; + return this.props.onAssetRequest(claimName, claimId, null, null, extension); } - return this.props.onClaimRequest(requestedClaim); } parseAndUpdateClaimOnly (claim) { // this could be a request for an asset or a channel page @@ -75,11 +65,7 @@ class ShowPage extends React.Component { } // return early if this request is for a channel if (isChannel) { - const requestedChannel = { - name: channelName, - id : channelClaimId, - } - return this.props.onChannelRequest(requestedChannel); + return this.props.onChannelRequest(channelName, channelClaimId); } // if not for a channel, parse the claim request let claimName, extension; // if I am destructuring below, do I still need to declare these here? @@ -88,39 +74,25 @@ class ShowPage extends React.Component { } catch (error) { return this.setState({error: error.message}); } - const requestedClaim = { - name : claimName, - modifier: null, - extension, - } - this.props.onClaimRequest(requestedClaim); + this.props.onAssetRequest(claimName, null, null, null, extension); } render () { console.log('rendering ShowPage'); + console.log('ShowPage props', this.props); if (this.state.error) { return ( ); } - if (this.props.request) { - if (this.props.request.channel) { - return ( - - ); - } else if (this.props.request.claim) { - return ( - - ); - } + switch (this.props.requestType) { + case CHANNEL: + return ; + case ASSET: + return ; + default: + return

loading...

; } - return ( -

loading...

- ); } }; -// props -// channel -// show - export default ShowPage; diff --git a/react/reducers/show.js b/react/reducers/show.js index 2c9beb9c..55be0fce 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -1,22 +1,35 @@ import * as actions from 'constants/show_action_types'; +import { CHANNEL, ASSET } from 'constants/show_request_types'; const initialState = { - request: { - channel: null, - claim : null, + requestType : null, + channelRequest: { + name: null, + id : null, }, - channel: { - name : null, - shortId : null, - longId : null, - claimsData: { - claims : null, - currentPage: null, - totalPages : null, - totalClaims: null, + assetRequest: { + name : null, + modifier: { + id : null, + channel: { + name: null, + id : null, + }, }, + extension: null, }, - claim: null, + channelData: { + name : null, + shortId: null, + longId : null, + }, + channelClaimsData: { + claims : null, + currentPage: 1, + totalPages : null, + totalClaims: null, + }, + assetData: null, }; /* @@ -25,42 +38,49 @@ Reducers describe how the application's state changes in response to actions export default function (state = initialState, action) { switch (action.type) { - case actions.CLAIM_REQUEST_UPDATE: + case actions.REQUEST_UPDATE_CHANNEL: return Object.assign({}, state, { - request: { - channel: null, - claim : action.claim, + requestType : CHANNEL, + channelRequest: { + name: action.name, + id : action.id, }, }); - case actions.CHANNEL_REQUEST_UPDATE: + case actions.REQUEST_UPDATE_CLAIM: return Object.assign({}, state, { - request: { - channel: action.channel, - claim : null, + requestType : ASSET, + assetRequest: { + name : action.name, + modifier: { + id : action.id, + channel: { + name: action.channelName, + id : action.channelId, + }, + }, + extension: action.extension, }, }); case actions.CHANNEL_DATA_UPDATE: return Object.assign({}, state, { - channel: Object.assign({}, state.channel, { + channelData: Object.assign({}, state.channel, { name : action.name, shortId: action.shortId, longId : action.longId, }), }); - case actions.CHANNEL_CLAIMS_UPDATE: + case actions.CHANNEL_CLAIMS_DATA_UPDATE: return Object.assign({}, state, { - channel: Object.assign({}, state.channel, { - claimsData: { - claims : action.claims, - currentPage: action.currentPage, - totalPages : action.totalPages, - totalClaims: action.totalClaims, - }, - }), + channelClaimsData: { + claims : action.claims, + currentPage: action.currentPage, + totalPages : action.totalPages, + totalClaims: action.totalClaims, + }, }); - case actions.CLAIM_DATA_UPDATE: + case actions.ASSET_DATA_UPDATE: return Object.assign({}, state, { - claim: action.data, + assetData: action.data, }); default: return state; From 7600ff5c54d201d22c1f3ad87d256e1528c2cf8c Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 2 Feb 2018 12:46:18 -0800 Subject: [PATCH 25/96] switched show and channel components back to inernal state --- helpers/errorHandlers.js | 32 ++++---- helpers/lbryApi.js | 4 +- react/actions/show.js | 26 ------ react/components/AssetDisplay/index.js | 23 ++++-- .../components/ChannelClaimsDisplay/index.js | 79 +++++++++++++++++++ react/constants/show_action_types.js | 3 - .../containers/ChannelClaimsDisplay/index.js | 24 ------ .../containers/ChannelClaimsDisplay/view.jsx | 63 --------------- react/containers/ShowAsset/index.js | 12 +-- react/containers/ShowAsset/view.jsx | 9 ++- react/containers/ShowChannel/index.js | 22 +----- react/containers/ShowChannel/view.jsx | 28 +++++-- react/reducers/show.js | 33 -------- routes/api-routes.js | 8 +- 14 files changed, 147 insertions(+), 219 deletions(-) create mode 100644 react/components/ChannelClaimsDisplay/index.js delete mode 100644 react/containers/ChannelClaimsDisplay/index.js delete mode 100644 react/containers/ChannelClaimsDisplay/view.jsx diff --git a/helpers/errorHandlers.js b/helpers/errorHandlers.js index e170a9aa..8077cfa3 100644 --- a/helpers/errorHandlers.js +++ b/helpers/errorHandlers.js @@ -5,25 +5,25 @@ module.exports = { let status, message; // check for daemon being turned off if (error.code === 'ECONNREFUSED') { - status = 503; + status = 200; message = 'Connection refused. The daemon may not be running.'; - // check for errors from the daemon - } else if (error.response) { - status = error.response.status || 500; - if (error.response.data) { - if (error.response.data.message) { - message = error.response.data.message; - } else if (error.response.data.error) { - message = error.response.data.error.message; - } else { - message = error.response.data; - } - } else { - message = error.response; - } + // // check for errors from the daemon + // } else if (error.response) { + // status = error.response.status || 500; + // if (error.response.data) { + // if (error.response.data.message) { + // message = error.response.data.message; + // } else if (error.response.data.error) { + // message = error.response.data.error.message; + // } else { + // message = error.response.data; + // } + // } else { + // message = error.response; + // } // check for thrown errors } else if (error.message) { - status = 400; + status = 200; message = error.message; // fallback for everything else } else { diff --git a/helpers/lbryApi.js b/helpers/lbryApi.js index 25ee96cd..ac4c3280 100644 --- a/helpers/lbryApi.js +++ b/helpers/lbryApi.js @@ -10,13 +10,13 @@ function handleLbrynetResponse ({ data }, resolve, reject) { // check for an error if (data.result.error) { logger.debug('Lbrynet api error:', data.result.error); - reject(data.result.error); + reject(new Error(data.result.error)); return; }; resolve(data.result); return; } - // fallback in case the just timed out + // fallback in case it just timed out reject(JSON.stringify(data)); } diff --git a/react/actions/show.js b/react/actions/show.js index 1db4e443..ed30d7c2 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -19,29 +19,3 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension, }; }; - -export function updateChannelData (name, longId, shortId) { - return { - type: actions.CHANNEL_DATA_UPDATE, - name, - longId, - shortId, - }; -}; - -export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) { - return { - type: actions.CHANNEL_CLAIMS_DATA_UPDATE, - claims, - currentPage, - totalPages, - totalClaims, - }; -}; - -export function updateAssetData (data) { - return { - type: actions.ASSET_DATA_UPDATE, - data, - }; -}; diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 8a0ed5cc..0917c260 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -39,9 +39,12 @@ class AssetDisplay extends React.Component { const url = `/api/file-is-available/${this.props.name}/${this.props.claimId}`; return new Promise((resolve, reject) => { Request(url) - .then(isAvailable => { - console.log('/api/file-is-available response:', isAvailable); - resolve(isAvailable); + .then(({success, message, data: isAvailable}) => { + if (success) { + console.log('/api/file-is-available response:', isAvailable); + return resolve(isAvailable); + } + reject(new Error(message)); }) .catch(error => { reject(error); @@ -53,9 +56,12 @@ class AssetDisplay extends React.Component { const url = `/api/claim-get/${this.props.name}/${this.props.claimId}`; return new Promise((resolve, reject) => { Request(url) - .then(response => { - console.log('/api/claim-get response:', response); - resolve(true); + .then(({success, message}) => { + console.log('/api/claim-get response:', success, message); + if (success) { + return resolve(true); + } + reject(new Error(message)); }) .catch(error => { reject(error); @@ -65,6 +71,11 @@ class AssetDisplay extends React.Component { render () { return (
+ {(this.state.status === LOCAL_CHECK) && +
+

Checking to see if Spee.ch has your asset locally...

+
+ } {(this.state.status === SEARCHING) &&

Sit tight, we're searching the LBRY blockchain for your asset!

diff --git a/react/components/ChannelClaimsDisplay/index.js b/react/components/ChannelClaimsDisplay/index.js new file mode 100644 index 00000000..8af9ca24 --- /dev/null +++ b/react/components/ChannelClaimsDisplay/index.js @@ -0,0 +1,79 @@ +import React from 'react/index'; +import AssetPreview from 'components/AssetPreview'; +import request from 'utils/request'; + +class ChannelClaimsDisplay extends React.Component { + constructor (props) { + super(props); + this.state = { + error : null, + claims : null, + currentPage: null, + totalPages : null, + totalClaims: null, + }; + this.updateClaimsData = this.updateClaimsData.bind(this); + } + componentDidMount () { + this.updateClaimsData(1); + } + updateClaimsData (page) { + const name = this.props.name; + const longId = this.props.longId; + const url = `/api/channel-claims/${name}/${longId}/${page}`; + const that = this; + return request(url) + .then(({ success, message, data }) => { + console.log('api/channel-claims response:', data); + if (!success) { + return that.setState({error: message}); + } + this.setState({ + claims : data.claims, + currentPage: data.currentPage, + totalPages : data.totalPages, + totalClaims: data.totalResults, + }); + }) + .catch((error) => { + that.setState({error: error.message}); + }); + } + render () { + return ( +
+ {this.state.error ? ( +
+
+

{this.state.error}

+
+
+ ) : ( +
+

total pages: {this.state.totalPages}

+

total claims: {this.state.totalClaims}

+ {this.state.claims && +
+ {this.state.claims.map((claim, index) => )} + {(this.state.currentPage > 1) && } +

current page: {this.state.currentPage}

+ {(this.state.currentPage < this.state.totalPages) && } +
+ } +
+ )} +
+ ); + } +}; + +// PropTypes +// name +// id + +export default ChannelClaimsDisplay; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index acf89ae5..7e11a190 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,5 +1,2 @@ export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL'; export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM'; -export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; -export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE'; -export const ASSET_DATA_UPDATE = 'ASSET_DATA_UPDATE'; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js deleted file mode 100644 index 2efa8468..00000000 --- a/react/containers/ChannelClaimsDisplay/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import { connect } from 'react-redux'; -import View from './view'; -import {updateChannelClaimsData} from 'actions/show'; - -const mapStateToProps = ({ show }) => { - return { - name : show.channelData.name, - longId : show.channelData.longId, - claims : show.channelClaimsData.claims, - currentPage: show.channelClaimsData.currentPage, - totalPages : show.channelClaimsData.totalPages, - totalClaims: show.channelClaimsData.totalClaims, - }; -}; - -const mapDispatchToProps = dispatch => { - return { - onClaimsDataChange: (claims, currentPage, totalPages, totalClaims) => { - dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims)); - }, - }; -}; - -export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx deleted file mode 100644 index 702794a3..00000000 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import AssetPreview from 'components/AssetPreview/index'; -import request from 'utils/request'; - -class ChannelClaimsDisplay extends React.Component { - constructor (props) { - super(props); - this.state = { - error: null, - }; - this.getAndStoreChannelClaims = this.getAndStoreChannelClaims.bind(this); - } - componentDidMount () { - this.getAndStoreChannelClaims(this.props.name, this.props.longId, this.props.currentPage); - } - getAndStoreChannelClaims (name, id, page) { - if (!id) id = 'none'; - const url = `/api/channel-claims/${name}/${id}/${page}`; - const that = this; - return request(url) - .then(({ success, message, data }) => { - console.log('api/channel-claims response:', data); - if (!success) { - return that.setState({error: message}); - } - this.props.onClaimsDataChange(data.claims, data.currentPage, data.totalPages, data.totalResults); - }) - .catch((error) => { - that.setState({error: error.message}); - }); - } - render () { - return ( -
- {this.state.error ? ( -
-
-

{this.state.error}

-
-
- ) : ( -
- {this.props.claims && -
- {this.props.claims.map((claim, index) => )} -

current page: {this.props.currentPage}

-

total pages: {this.props.totalPages}

-

total claims: {this.props.totalClaims}

-
- } -
- )} -
- ); - } -}; - -export default ChannelClaimsDisplay; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 20866911..66c43970 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -1,5 +1,4 @@ import { connect } from 'react-redux'; -import { updateAssetData } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { @@ -7,16 +6,7 @@ const mapStateToProps = ({ show }) => { modifier : show.assetRequest.modifier, claim : show.assetRequest.name, extension: show.assetRequest.extension, - claimData: show.assetData, }; }; -const mapDispatchToProps = dispatch => { - return { - onAssetDataUpdate: (data) => { - dispatch(updateAssetData(data)); - }, - }; -}; - -export default connect(mapStateToProps, mapDispatchToProps)(View); +export default connect(mapStateToProps, null)(View); diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index ff75100b..1b75753a 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -7,7 +7,8 @@ class ShowAsset extends React.Component { constructor (props) { super(props); this.state = { - error: null, + error : null, + claimData: null, }; this.getLongClaimId = this.getLongClaimId.bind(this); this.getClaimData = this.getClaimData.bind(this); @@ -42,7 +43,7 @@ class ShowAsset extends React.Component { return that.getClaimData(name, claimLongId); }) .then(claimData => { - this.props.onAssetDataUpdate(claimData); + this.setState({claimData}); }) .catch(error => { this.setState({error}); @@ -86,14 +87,14 @@ class ShowAsset extends React.Component { return ( ); } return ( ); } diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index c020cf54..377d47e2 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,27 +1,11 @@ import { connect } from 'react-redux'; -import { updateChannelData } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { return { - request: { - name: show.channelRequest.name, - id : show.channelRequest.id, - }, - channel: { - name : show.channelData.name, - shortId: show.channelData.shortId, - longId : show.channelData.longId, - }, + requestName: show.channelRequest.name, + requestId : show.channelRequest.id, }; }; -const mapDispatchToProps = dispatch => { - return { - onChannelDataChange: (name, longId, shortId) => { - dispatch(updateChannelData(name, longId, shortId)); - }, - }; -}; - -export default connect(mapStateToProps, mapDispatchToProps)(View); +export default connect(mapStateToProps, null)(View); diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 2f381247..0b15ef32 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -1,18 +1,21 @@ import React from 'react'; import NavBar from 'containers/NavBar'; -import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; +import ChannelClaimsDisplay from 'components/ChannelClaimsDisplay'; import request from 'utils/request'; class ShowChannel extends React.Component { constructor (props) { super(props); this.state = { - error: null, + error : null, + name : null, + shortId: null, + longId : null, }; this.getAndStoreChannelData = this.getAndStoreChannelData.bind(this); } componentDidMount () { - this.getAndStoreChannelData(this.props.request.name, this.props.request.id); + this.getAndStoreChannelData(this.props.requestName, this.props.requestId); } getAndStoreChannelData (name, id) { if (!id) id = 'none'; @@ -24,7 +27,11 @@ class ShowChannel extends React.Component { if (!success) { return that.setState({error: message}); } - this.props.onChannelDataChange(data.channelName, data.longChannelClaimId, data.shortChannelClaimId); + this.setState({ + name : data.channelName, + longId : data.longChannelClaimId, + shortId: data.shortChannelClaimId, + }); }) .catch((error) => { that.setState({error: error.message}); @@ -43,12 +50,17 @@ class ShowChannel extends React.Component { ) : (
-

channel name: {this.props.channel.name}

-

full channel id: {this.props.channel.longId ? this.props.channel.longId : 'loading...'}

-

short channel id: {this.props.channel.shortId ? this.props.channel.shortId : 'loading...'}

+

channel name: {this.state.name ? this.state.name : 'loading...'}

+

full channel id: {this.state.longId ? this.state.longId : 'loading...'}

+

short channel id: {this.state.shortId ? this.state.shortId : 'loading...'}

- {this.props.channel.name && } + {(this.state.name && this.state.longId) && + + }
)} diff --git a/react/reducers/show.js b/react/reducers/show.js index 55be0fce..c29dfb15 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -18,18 +18,6 @@ const initialState = { }, extension: null, }, - channelData: { - name : null, - shortId: null, - longId : null, - }, - channelClaimsData: { - claims : null, - currentPage: 1, - totalPages : null, - totalClaims: null, - }, - assetData: null, }; /* @@ -61,27 +49,6 @@ export default function (state = initialState, action) { extension: action.extension, }, }); - case actions.CHANNEL_DATA_UPDATE: - return Object.assign({}, state, { - channelData: Object.assign({}, state.channel, { - name : action.name, - shortId: action.shortId, - longId : action.longId, - }), - }); - case actions.CHANNEL_CLAIMS_DATA_UPDATE: - return Object.assign({}, state, { - channelClaimsData: { - claims : action.claims, - currentPage: action.currentPage, - totalPages : action.totalPages, - totalClaims: action.totalClaims, - }, - }); - case actions.ASSET_DATA_UPDATE: - return Object.assign({}, state, { - assetData: action.data, - }); default: return state; } diff --git a/routes/api-routes.js b/routes/api-routes.js index 4cc20ba9..f8c1eb08 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -29,13 +29,13 @@ module.exports = (app) => { app.get('/api/file-is-available/:name/:claimId', ({ ip, originalUrl, params }, res) => { const name = params.name; const claimId = params.claimId; - let isLocalFileAvailable = false; + let isAvailable = false; db.File.findOne({where: {name, claimId}}) .then(result => { if (result) { - isLocalFileAvailable = true; + isAvailable = true; } - res.status(200).json({status: 'success', message: isLocalFileAvailable}); + res.status(200).json({success: true, data: isAvailable}); }) .catch(error => { errorHandlers.handleApiError(originalUrl, ip, error, res); @@ -61,7 +61,7 @@ module.exports = (app) => { return Promise.all([db.upsert(db.File, fileData, {name, claimId}, 'File'), getResult]); }) .then(([ fileRecord, {message, completed} ]) => { - res.status(200).json({ status: 'success', message, completed }); + res.status(200).json({ success: true, message, completed }); }) .catch(error => { errorHandlers.handleApiError(originalUrl, ip, error, res); From 7b4b5da4289b5f31da9459f182044e5a5d2e392c Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 2 Feb 2018 13:02:30 -0800 Subject: [PATCH 26/96] fixed identifier parse error on asset details component --- helpers/errorHandlers.js | 14 -------------- react/containers/ShowAsset/view.jsx | 6 +++--- 2 files changed, 3 insertions(+), 17 deletions(-) diff --git a/helpers/errorHandlers.js b/helpers/errorHandlers.js index 8077cfa3..9cccd7be 100644 --- a/helpers/errorHandlers.js +++ b/helpers/errorHandlers.js @@ -7,20 +7,6 @@ module.exports = { if (error.code === 'ECONNREFUSED') { status = 200; message = 'Connection refused. The daemon may not be running.'; - // // check for errors from the daemon - // } else if (error.response) { - // status = error.response.status || 500; - // if (error.response.data) { - // if (error.response.data.message) { - // message = error.response.data.message; - // } else if (error.response.data.error) { - // message = error.response.data.error.message; - // } else { - // message = error.response.data; - // } - // } else { - // message = error.response; - // } // check for thrown errors } else if (error.message) { status = 200; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 1b75753a..67fcc97f 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -21,11 +21,11 @@ class ShowAsset extends React.Component { // create request params let body = {}; if (modifier) { - if (modifier.channel) { + if (modifier.id) { + body['claimId'] = modifier.id; + } else { body['channelName'] = modifier.channel.name; body['channelClaimId'] = modifier.channel.id; - } else { - body['claimId'] = modifier.id; } } body['claimName'] = name; From ba465fdfb74905efff163ab84a6f7815497d83dd Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 2 Feb 2018 13:06:28 -0800 Subject: [PATCH 27/96] fixed undefined file extension on asset preview --- react/components/AssetPreview/index.js | 2 +- react/components/ChannelClaimsDisplay/index.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/react/components/AssetPreview/index.js b/react/components/AssetPreview/index.js index c42d8b6d..b2ec8b4a 100644 --- a/react/components/AssetPreview/index.js +++ b/react/components/AssetPreview/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Link } from 'react-router-dom' +import { Link } from 'react-router-dom'; const AssetPreview = ({ name, claimId, fileExt, contentType }) => { const directSourceLink = `${claimId}/${name}.${fileExt}`; diff --git a/react/components/ChannelClaimsDisplay/index.js b/react/components/ChannelClaimsDisplay/index.js index 8af9ca24..2912dbfa 100644 --- a/react/components/ChannelClaimsDisplay/index.js +++ b/react/components/ChannelClaimsDisplay/index.js @@ -57,6 +57,7 @@ class ChannelClaimsDisplay extends React.Component { {this.state.claims.map((claim, index) => )} From 5f70cdd979f747f10e2e3e3f1372ee769c6629f7 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 2 Feb 2018 14:24:46 -0800 Subject: [PATCH 28/96] added redirect from login page to publish page if user logs in --- .../components/ChannelClaimsDisplay/index.js | 2 +- react/containers/LoginPage/index.js | 10 +++++++++ .../LoginPage/view.jsx} | 22 +++++++++++++------ react/root.js | 2 +- task-scripts/update-password.js | 2 +- 5 files changed, 28 insertions(+), 10 deletions(-) create mode 100644 react/containers/LoginPage/index.js rename react/{components/LoginPage/index.js => containers/LoginPage/view.jsx} (62%) diff --git a/react/components/ChannelClaimsDisplay/index.js b/react/components/ChannelClaimsDisplay/index.js index 2912dbfa..4edc9c86 100644 --- a/react/components/ChannelClaimsDisplay/index.js +++ b/react/components/ChannelClaimsDisplay/index.js @@ -1,4 +1,4 @@ -import React from 'react/index'; +import React from 'react'; import AssetPreview from 'components/AssetPreview'; import request from 'utils/request'; diff --git a/react/containers/LoginPage/index.js b/react/containers/LoginPage/index.js new file mode 100644 index 00000000..2e193098 --- /dev/null +++ b/react/containers/LoginPage/index.js @@ -0,0 +1,10 @@ +import {connect} from 'react-redux'; +import View from './view'; + +const mapStateToProps = ({ channel }) => { + return { + loggedInChannelName: channel.loggedInChannel.name, + }; +}; + +export default connect(mapStateToProps, null)(View); diff --git a/react/components/LoginPage/index.js b/react/containers/LoginPage/view.jsx similarity index 62% rename from react/components/LoginPage/index.js rename to react/containers/LoginPage/view.jsx index b76f8242..dea4f950 100644 --- a/react/components/LoginPage/index.js +++ b/react/containers/LoginPage/view.jsx @@ -1,9 +1,17 @@ import React from 'react'; +import { withRouter } from 'react-router-dom'; import NavBar from 'containers/NavBar'; import ChannelLoginForm from 'containers/ChannelLoginForm'; import ChannelCreateForm from 'containers/ChannelCreateForm'; class PublishPage extends React.Component { + componentWillReceiveProps (newProps) { + // re-route the user to the homepage if the user is logged in + if (newProps.loggedInChannelName !== this.props.loggedInChannelName) { + console.log('user logged into new channel:', newProps.loggedInChannelName); + this.props.history.push(`/`); + } + } render () { return (
@@ -14,17 +22,17 @@ class PublishPage extends React.Component {

Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting important events, or making a public repository for cat gifs (password: '1234'), try creating a channel for it!

-
-

Log in to an existing channel:

- -

Create a brand new channel:

- -
+
+

Log in to an existing channel:

+ +

Create a brand new channel:

+
+
); } }; -export default PublishPage; +export default withRouter(PublishPage); diff --git a/react/root.js b/react/root.js index 170f1759..e296ea7b 100644 --- a/react/root.js +++ b/react/root.js @@ -5,7 +5,7 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'; import PublishPage from 'components/PublishPage'; import AboutPage from 'components/AboutPage'; -import LoginPage from 'components/LoginPage'; +import LoginPage from 'containers/LoginPage'; import ShowPage from 'containers/ShowPage'; const Root = ({ store }) => ( diff --git a/task-scripts/update-password.js b/task-scripts/update-password.js index 6a5176d4..89cff11f 100644 --- a/task-scripts/update-password.js +++ b/task-scripts/update-password.js @@ -1,6 +1,6 @@ // load dependencies const logger = require('winston'); -const db = require('../models/index'); // require our models for syncing +const db = require('../models'); // require our models for syncing // configure logging const config = require('../config/speechConfig.js'); const { logLevel } = config.logging; From 74b6bca16c390d829653cb1e90ee60c09861e371 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 2 Feb 2018 14:48:04 -0800 Subject: [PATCH 29/96] fixed nav bar dropdown to stay on channel when view is selected --- react/components/NavBarChannelOptionsDropdown/index.jsx | 6 +++--- react/containers/NavBar/index.js | 3 +++ react/containers/NavBar/view.jsx | 5 +++-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/react/components/NavBarChannelOptionsDropdown/index.jsx b/react/components/NavBarChannelOptionsDropdown/index.jsx index 0ea68531..08b285f0 100644 --- a/react/components/NavBarChannelOptionsDropdown/index.jsx +++ b/react/components/NavBarChannelOptionsDropdown/index.jsx @@ -1,8 +1,8 @@ import React from 'react'; -function NavBarChannelOptionsDropdown ({ channelName, handleSelection, VIEW, LOGOUT }) { +function NavBarChannelDropdown ({ channelName, handleSelection, defaultSelection, VIEW, LOGOUT }) { return ( - @@ -10,4 +10,4 @@ function NavBarChannelOptionsDropdown ({ channelName, handleSelection, VIEW, LOG ); }; -export default NavBarChannelOptionsDropdown; +export default NavBarChannelDropdown; diff --git a/react/containers/NavBar/index.js b/react/containers/NavBar/index.js index 82a6080d..80689d97 100644 --- a/react/containers/NavBar/index.js +++ b/react/containers/NavBar/index.js @@ -17,6 +17,9 @@ const mapDispatchToProps = dispatch => { dispatch(updateLoggedInChannel(name, shortId, longId)); dispatch(updateSelectedChannel(name)); }, + onChannelLogout: () => { + dispatch(updateLoggedInChannel(null, null, null)); + }, }; }; diff --git a/react/containers/NavBar/view.jsx b/react/containers/NavBar/view.jsx index 7ff11cf6..b2ff20b3 100644 --- a/react/containers/NavBar/view.jsx +++ b/react/containers/NavBar/view.jsx @@ -19,7 +19,6 @@ class NavBar extends React.Component { this.checkForLoggedInUser(); } checkForLoggedInUser () { - // check for whether a channel is already logged in const params = { credentials: 'include', } @@ -37,7 +36,8 @@ class NavBar extends React.Component { } logoutUser () { // send logout request to server - window.location.href = '/logout'; // NOTE: replace with a call to the server + window.location.href = '/logout'; // NOTE: replace with a call to the server that does not redirect + // this.props.onChannelLogout() } handleSelection (event) { console.log('handling selection', event); @@ -70,6 +70,7 @@ class NavBar extends React.Component { From b60fbab74449fc40f7d250c2aa5dd07ca30c5437 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 2 Feb 2018 15:14:57 -0800 Subject: [PATCH 30/96] fixed logout on drop down bar to stay on same page --- react/containers/NavBar/view.jsx | 27 +++++++++++++++++---------- routes/auth-routes.js | 7 ++++++- routes/page-routes.js | 5 ----- 3 files changed, 23 insertions(+), 16 deletions(-) diff --git a/react/containers/NavBar/view.jsx b/react/containers/NavBar/view.jsx index b2ff20b3..07c30dfe 100644 --- a/react/containers/NavBar/view.jsx +++ b/react/containers/NavBar/view.jsx @@ -19,25 +19,32 @@ class NavBar extends React.Component { this.checkForLoggedInUser(); } checkForLoggedInUser () { - const params = { - credentials: 'include', - } + const params = {credentials: 'include'}; request('/user', params) - .then(({success, message}) => { + .then(({success, message, data}) => { if (success) { - this.props.onChannelLogin(message.channelName, message.shortChannelId, message.channelClaimId); + this.props.onChannelLogin(data.channelName, data.shortChannelId, data.channelClaimId); } else { - console.log('user was not logged in'); + console.log(message); } }) .catch(error => { - console.log('authenticate user errored:', error); + console.log('request encountered an error', error); }); } logoutUser () { - // send logout request to server - window.location.href = '/logout'; // NOTE: replace with a call to the server that does not redirect - // this.props.onChannelLogout() + const params = {credentials: 'include'}; + request('/logout', params) + .then(({success, message}) => { + if (success) { + this.props.onChannelLogout(); + } else { + console.log(message); + } + }) + .catch(error => { + console.log('request encountered an error', error); + }); } handleSelection (event) { console.log('handling selection', event); diff --git a/routes/auth-routes.js b/routes/auth-routes.js index 62e89bf9..916a257e 100644 --- a/routes/auth-routes.js +++ b/routes/auth-routes.js @@ -39,10 +39,15 @@ module.exports = (app) => { }); })(req, res, next); }); + // route to log out + app.get('/logout', (req, res) => { + req.logout(); + res.status(200).json({success: true, message: 'you successfully logged out'}); + }); // see if user is authenticated, and return credentials if so app.get('/user', (req, res) => { if (req.user) { - res.status(200).json({success: true, message: req.user}); + res.status(200).json({success: true, data: req.user}); } else { res.status(200).json({success: false, message: 'user is not logged in'}); } diff --git a/routes/page-routes.js b/routes/page-routes.js index 6d46bf6e..fd15ca88 100644 --- a/routes/page-routes.js +++ b/routes/page-routes.js @@ -1,11 +1,6 @@ const { site } = require('../config/speechConfig.js'); module.exports = (app) => { - // route to log out - app.get('/logout', (req, res) => { - req.logout(); - res.redirect('/'); - }); // route to display login page app.get('/login', (req, res) => { res.status(200).render('index'); From 60739357322251bb81196871aabada2c468181ea Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 2 Feb 2018 16:06:21 -0800 Subject: [PATCH 31/96] updated publish redirects and channel nav buttons --- react/components/AssetDisplay/index.js | 2 +- .../components/ChannelClaimsDisplay/index.js | 21 +++++++++++++------ react/components/PublishStatus/index.jsx | 2 +- react/containers/PublishForm/view.jsx | 19 ++++++++--------- routes/api-routes.js | 8 ++++--- 5 files changed, 31 insertions(+), 21 deletions(-) diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 0917c260..4f656c56 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -127,7 +127,7 @@ AssetDisplay.propTypes = { src : PropTypes.string.isRequired, contentType: PropTypes.string.isRequired, fileExt : PropTypes.string.isRequired, - thumbnail : PropTypes.string.isRequired, + thumbnail : PropTypes.string, }; export default AssetDisplay; diff --git a/react/components/ChannelClaimsDisplay/index.js b/react/components/ChannelClaimsDisplay/index.js index 4edc9c86..8f186825 100644 --- a/react/components/ChannelClaimsDisplay/index.js +++ b/react/components/ChannelClaimsDisplay/index.js @@ -13,6 +13,8 @@ class ChannelClaimsDisplay extends React.Component { totalClaims: null, }; this.updateClaimsData = this.updateClaimsData.bind(this); + this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this); + this.showNextResultsPage = this.showNextResultsPage.bind(this); } componentDidMount () { this.updateClaimsData(1); @@ -39,6 +41,14 @@ class ChannelClaimsDisplay extends React.Component { that.setState({error: error.message}); }); } + showPreviousResultsPage () { + const previousPage = parseInt(this.state.currentPage) - 1; + this.updateClaimsData(previousPage); + } + showNextResultsPage () { + const nextPage = parseInt(this.state.currentPage) + 1; + this.updateClaimsData(nextPage); + } render () { return (
@@ -50,8 +60,6 @@ class ChannelClaimsDisplay extends React.Component {
) : (
-

total pages: {this.state.totalPages}

-

total claims: {this.state.totalClaims}

{this.state.claims &&
{this.state.claims.map((claim, index) => )} - {(this.state.currentPage > 1) && } -

current page: {this.state.currentPage}

- {(this.state.currentPage < this.state.totalPages) && } +
+ {(this.state.currentPage > 1) && } + {(this.state.currentPage < this.state.totalPages) && } +
}
diff --git a/react/components/PublishStatus/index.jsx b/react/components/PublishStatus/index.jsx index 1ed8f8dc..e20de9d6 100644 --- a/react/components/PublishStatus/index.jsx +++ b/react/components/PublishStatus/index.jsx @@ -30,7 +30,7 @@ function PublishStatus ({ status, message }) { {(status === publishStates.SUCCESS) &&

Your publish is complete! You are being redirected to it now.

-

If you are not automatically redirected, click here.

+

If you are not automatically redirected, click here.

} {(status === publishStates.FAILED) && diff --git a/react/containers/PublishForm/view.jsx b/react/containers/PublishForm/view.jsx index 86b952bc..a58ddd91 100644 --- a/react/containers/PublishForm/view.jsx +++ b/react/containers/PublishForm/view.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import { withRouter } from 'react-router-dom'; import Dropzone from 'containers/Dropzone'; import PublishTitleInput from 'containers/PublishTitleInput'; import PublishUrlInput from 'containers/PublishUrlInput'; @@ -70,16 +71,14 @@ class PublishForm extends React.Component { xhr.open('POST', uri, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { - console.log('publish response:', xhr.response); - if (xhr.status === 200) { - console.log('publish complete!'); - const url = JSON.parse(xhr.response).message.url; - that.props.onPublishStatusChange(publishStates.SUCCESS, url); - window.location = url; - } else if (xhr.status === 502) { - that.props.onPublishStatusChange(publishStates.FAILED, 'Spee.ch was not able to get a response from the LBRY network.'); + const response = JSON.parse(xhr.response); + console.log('publish response:', response); + if ((xhr.status === 200) && response.success) { + that.props.onPublishStatusChange(publishStates.SUCCESS, response.data.url); + // redirect to the published asset's show page + that.props.history.push(`/${response.data.claimId}/${response.data.name}`); } else { - that.props.onPublishStatusChange(publishStates.FAILED, JSON.parse(xhr.response).message); + that.props.onPublishStatusChange(publishStates.FAILED, response.message); } } }; @@ -176,4 +175,4 @@ class PublishForm extends React.Component { } }; -export default PublishForm; +export default withRouter(PublishForm); diff --git a/routes/api-routes.js b/routes/api-routes.js index f8c1eb08..3df769a8 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -151,10 +151,12 @@ module.exports = (app) => { .then(result => { res.status(200).json({ success: true, - message: { + message: 'publish completed successfully', + data : { name, - url : `${site.host}/${result.claim_id}/${name}`, - lbryTx: result, + claimId: result.claim_id, + url : `${site.host}/${result.claim_id}/${name}`, + lbryTx : result, }, }); // log the publish end time From fbe25e4aa18d89c19867d217727f62a991526956 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 2 Feb 2018 16:49:39 -0800 Subject: [PATCH 32/96] fixed error where channel display would not refresh --- react/components/ChannelClaimsDisplay/index.js | 11 ++++++++--- react/containers/ShowChannel/view.jsx | 6 ++++++ react/containers/ShowPage/view.jsx | 4 ++-- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/react/components/ChannelClaimsDisplay/index.js b/react/components/ChannelClaimsDisplay/index.js index 8f186825..6603cc2e 100644 --- a/react/components/ChannelClaimsDisplay/index.js +++ b/react/components/ChannelClaimsDisplay/index.js @@ -17,11 +17,16 @@ class ChannelClaimsDisplay extends React.Component { this.showNextResultsPage = this.showNextResultsPage.bind(this); } componentDidMount () { - this.updateClaimsData(1); - } - updateClaimsData (page) { const name = this.props.name; const longId = this.props.longId; + this.updateClaimsData(name, longId, 1); + } + componentWillReceiveProps (nextProps) { + if (nextProps.name !== this.props.name || nextProps.longId !== this.props.longId) { + this.updateClaimsData(nextProps.name, nextProps.longId, 1); + } + } + updateClaimsData (name, longId, page) { const url = `/api/channel-claims/${name}/${longId}/${page}`; const that = this; return request(url) diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 0b15ef32..de9d6675 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -17,6 +17,11 @@ class ShowChannel extends React.Component { componentDidMount () { this.getAndStoreChannelData(this.props.requestName, this.props.requestId); } + componentWillReceiveProps (nextProps) { + if (nextProps.requestName !== this.props.requestName || nextProps.requestId !== this.props.requestId) { + this.getAndStoreChannelData(nextProps.requestName, nextProps.requestId); + } + } getAndStoreChannelData (name, id) { if (!id) id = 'none'; const url = `/api/channel-data/${name}/${id}`; @@ -28,6 +33,7 @@ class ShowChannel extends React.Component { return that.setState({error: message}); } this.setState({ + error : null, name : data.channelName, longId : data.longChannelClaimId, shortId: data.shortChannelClaimId, diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index b7057031..c093ddd4 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -23,8 +23,8 @@ class ShowPage extends React.Component { this.parseUrlAndUpdateState(identifier, claim); } componentWillReceiveProps (nextProps) { - if (this.props.match.params !== nextProps.match.params) { - console.log('received new params props'); + if (nextProps.match.params !== this.props.match.params) { + console.log('ShowPage received new params props'); const identifier = nextProps.match.params.identifier; const claim = nextProps.match.params.claim; this.parseUrlAndUpdateState(identifier, claim); From d13f4326b5c5130a818a3d936a00c555248783d0 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 2 Feb 2018 17:20:08 -0800 Subject: [PATCH 33/96] fixed issue with channel page navigation --- react/components/ChannelClaimsDisplay/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/components/ChannelClaimsDisplay/index.js b/react/components/ChannelClaimsDisplay/index.js index 6603cc2e..3a698835 100644 --- a/react/components/ChannelClaimsDisplay/index.js +++ b/react/components/ChannelClaimsDisplay/index.js @@ -48,11 +48,11 @@ class ChannelClaimsDisplay extends React.Component { } showPreviousResultsPage () { const previousPage = parseInt(this.state.currentPage) - 1; - this.updateClaimsData(previousPage); + this.updateClaimsData(this.props.name, this.props.longId, previousPage); } showNextResultsPage () { const nextPage = parseInt(this.state.currentPage) + 1; - this.updateClaimsData(nextPage); + this.updateClaimsData(this.props.name, this.props.longId, nextPage); } render () { return ( From 320e83ca004149a8f789dc88e184110293e8f5b8 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 2 Feb 2018 18:16:18 -0800 Subject: [PATCH 34/96] moved state from components to redux --- react/actions/show.js | 26 +++++++++++ react/components/AssetDisplay/index.js | 1 + react/constants/show_action_types.js | 3 ++ .../containers/ChannelClaimsDisplay/index.js | 25 +++++++++++ .../ChannelClaimsDisplay/view.jsx} | 33 ++++++-------- react/containers/ShowAsset/index.js | 15 ++++++- react/containers/ShowAsset/view.jsx | 11 ++--- react/containers/ShowChannel/index.js | 17 +++++++- react/containers/ShowChannel/view.jsx | 31 +++++-------- react/containers/ShowPage/view.jsx | 4 +- react/reducers/show.js | 43 +++++++++++++++++++ 11 files changed, 161 insertions(+), 48 deletions(-) create mode 100644 react/containers/ChannelClaimsDisplay/index.js rename react/{components/ChannelClaimsDisplay/index.js => containers/ChannelClaimsDisplay/view.jsx} (74%) diff --git a/react/actions/show.js b/react/actions/show.js index ed30d7c2..bc1237c5 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -19,3 +19,29 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension, }; }; + +export function updateChannelData (name, longId, shortId) { + return { + type: actions.CHANNEL_DATA_UPDATE, + name, + longId, + shortId, + }; +}; + +export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) { + return { + type: actions.CHANNEL_CLAIMS_DATA_UPDATE, + claims, + currentPage, + totalPages, + totalClaims, + }; +}; + +export function updateAssetClaimData (data) { + return { + type: actions.ASSET_CLAIM_DATA_UPDATE, + data, + }; +}; diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 4f656c56..973f47c3 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -128,6 +128,7 @@ AssetDisplay.propTypes = { contentType: PropTypes.string.isRequired, fileExt : PropTypes.string.isRequired, thumbnail : PropTypes.string, + // shortId : PropTypes.string.isRequired, }; export default AssetDisplay; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 7e11a190..b8ded3d3 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,2 +1,5 @@ export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL'; export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM'; +export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; +export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE'; +export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE'; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js new file mode 100644 index 00000000..64761d44 --- /dev/null +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -0,0 +1,25 @@ +import { connect } from 'react-redux'; +import { updateChannelClaimsData } from 'actions/show'; +import View from './view'; + +const mapStateToProps = ({ show }) => { + return { + claims : show.showChannel.channelClaimsData.claims, + currentPage: show.showChannel.channelClaimsData.currentPage, + totalPages : show.showChannel.channelClaimsData.totalPages, + totalClaims: show.showChannel.channelClaimsData.totalClaims, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + onChannelClaimsDataUpdate: (claims, currentPage, totalPages, totalClaims) => { + dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims)); + }, + onChannelClaimsDataClear: () => { + dispatch(updateChannelClaimsData(null, null, null, null)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/components/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/view.jsx similarity index 74% rename from react/components/ChannelClaimsDisplay/index.js rename to react/containers/ChannelClaimsDisplay/view.jsx index 3a698835..bd6d4439 100644 --- a/react/components/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -1,16 +1,12 @@ -import React from 'react'; -import AssetPreview from 'components/AssetPreview'; +import React from 'react/index'; +import AssetPreview from 'components/AssetPreview/index'; import request from 'utils/request'; class ChannelClaimsDisplay extends React.Component { constructor (props) { super(props); this.state = { - error : null, - claims : null, - currentPage: null, - totalPages : null, - totalClaims: null, + error: null, }; this.updateClaimsData = this.updateClaimsData.bind(this); this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this); @@ -35,23 +31,22 @@ class ChannelClaimsDisplay extends React.Component { if (!success) { return that.setState({error: message}); } - this.setState({ - claims : data.claims, - currentPage: data.currentPage, - totalPages : data.totalPages, - totalClaims: data.totalResults, - }); + that.setState({error: null}); // move this error to redux state + that.props.onChannelClaimsDataUpdate(data.claims, data.currentPage, data.totalPages, data.totalResults); }) .catch((error) => { that.setState({error: error.message}); }); } + componentWillUnmount () { + this.props.onChannelClaimsDataClear(); + } showPreviousResultsPage () { - const previousPage = parseInt(this.state.currentPage) - 1; + const previousPage = parseInt(this.props.currentPage) - 1; this.updateClaimsData(this.props.name, this.props.longId, previousPage); } showNextResultsPage () { - const nextPage = parseInt(this.state.currentPage) + 1; + const nextPage = parseInt(this.props.currentPage) + 1; this.updateClaimsData(this.props.name, this.props.longId, nextPage); } render () { @@ -65,9 +60,9 @@ class ChannelClaimsDisplay extends React.Component {
) : (
- {this.state.claims && + {this.props.claims &&
- {this.state.claims.map((claim, index) => )}
- {(this.state.currentPage > 1) && } - {(this.state.currentPage < this.state.totalPages) && } + {(this.props.currentPage > 1) && } + {(this.props.currentPage < this.props.totalPages) && }
} diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 66c43970..6b60a41a 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -1,12 +1,25 @@ import { connect } from 'react-redux'; import View from './view'; +import { updateAssetClaimData } from 'actions/show'; const mapStateToProps = ({ show }) => { return { modifier : show.assetRequest.modifier, claim : show.assetRequest.name, extension: show.assetRequest.extension, + claimData: show.showAsset.claimData, }; }; -export default connect(mapStateToProps, null)(View); +const mapDispatchToProps = dispatch => { + return { + onAssetClaimDataUpdate: (claimData) => { + dispatch(updateAssetClaimData(claimData)); + }, + onAssetClaimDataClear: () => { + dispatch(updateAssetClaimData(null)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 67fcc97f..9f87cf1a 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -7,8 +7,7 @@ class ShowAsset extends React.Component { constructor (props) { super(props); this.state = { - error : null, - claimData: null, + error: null, }; this.getLongClaimId = this.getLongClaimId.bind(this); this.getClaimData = this.getClaimData.bind(this); @@ -43,7 +42,8 @@ class ShowAsset extends React.Component { return that.getClaimData(name, claimLongId); }) .then(claimData => { - this.setState({claimData}); + this.setState({error: null}); // note: move this to redux level + this.props.onAssetClaimDataUpdate(claimData); }) .catch(error => { this.setState({error}); @@ -87,14 +87,15 @@ class ShowAsset extends React.Component { return ( ); } return ( ); } diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 377d47e2..52ae3ab9 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,11 +1,26 @@ import { connect } from 'react-redux'; +import {updateChannelData} from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { return { requestName: show.channelRequest.name, requestId : show.channelRequest.id, + name : show.showChannel.channelData.name, + shortId : show.showChannel.channelData.shortId, + longId : show.showChannel.channelData.longId, }; }; -export default connect(mapStateToProps, null)(View); +const mapDispatchToProps = dispatch => { + return { + onChannelDataUpdate: (name, longId, shortId) => { + dispatch(updateChannelData(name, longId, shortId)); + }, + onChannelDataClear: () => { + dispatch(updateChannelData(null, null, null)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index de9d6675..e6329597 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -1,16 +1,13 @@ import React from 'react'; import NavBar from 'containers/NavBar'; -import ChannelClaimsDisplay from 'components/ChannelClaimsDisplay'; +import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; import request from 'utils/request'; class ShowChannel extends React.Component { constructor (props) { super(props); this.state = { - error : null, - name : null, - shortId: null, - longId : null, + error: null, }; this.getAndStoreChannelData = this.getAndStoreChannelData.bind(this); } @@ -32,17 +29,16 @@ class ShowChannel extends React.Component { if (!success) { return that.setState({error: message}); } - this.setState({ - error : null, - name : data.channelName, - longId : data.longChannelClaimId, - shortId: data.shortChannelClaimId, - }); + that.setState({error: null}); // note: store this error at app level also + that.props.onChannelDataUpdate(data.channelName, data.longChannelClaimId, data.shortChannelClaimId); }) .catch((error) => { that.setState({error: error.message}); }); } + componentWillUnmount () { + this.props.onChannelDataClear(); + } render () { return (
@@ -56,17 +52,12 @@ class ShowChannel extends React.Component { ) : (
-

channel name: {this.state.name ? this.state.name : 'loading...'}

-

full channel id: {this.state.longId ? this.state.longId : 'loading...'}

-

short channel id: {this.state.shortId ? this.state.shortId : 'loading...'}

+

channel name: {this.props.name ? this.props.name : 'loading...'}

+

full channel id: {this.props.longId ? this.props.longId : 'loading...'}

+

short channel id: {this.props.shortId ? this.props.shortId : 'loading...'}

- {(this.state.name && this.state.longId) && - - } + {(this.props.name && this.props.longId) && }
)} diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index c093ddd4..ce41aab3 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -86,9 +86,9 @@ class ShowPage extends React.Component { } switch (this.props.requestType) { case CHANNEL: - return ; + return ; case ASSET: - return ; + return ; default: return

loading...

; } diff --git a/react/reducers/show.js b/react/reducers/show.js index c29dfb15..3d024584 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -18,6 +18,22 @@ const initialState = { }, extension: null, }, + showChannel: { + channelData: { + name : null, + shortId: null, + longId : null, + }, + channelClaimsData: { + claims : null, + currentPage: null, + totalPages : null, + totalClaims: null, + }, + }, + showAsset: { + claimData: null, + }, }; /* @@ -49,6 +65,33 @@ export default function (state = initialState, action) { extension: action.extension, }, }); + case actions.CHANNEL_DATA_UPDATE: + return Object.assign({}, state, { + showChannel: Object.assign({}, state.showChannel, { + channelData: Object.assign({}, state.channel, { + name : action.name, + shortId: action.shortId, + longId : action.longId, + }), + }), + }); + case actions.CHANNEL_CLAIMS_DATA_UPDATE: + return Object.assign({}, state, { + showChannel: Object.assign({}, state.showChannel, { + channelClaimsData: { + claims : action.claims, + currentPage: action.currentPage, + totalPages : action.totalPages, + totalClaims: action.totalClaims, + }, + }), + }); + case actions.ASSET_CLAIM_DATA_UPDATE: + return Object.assign({}, state, { + showAsset: { + claimData: action.data, + }, + }); default: return state; } From 339f2134827a73d9787a009d5d08b71f6c605c26 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Sat, 3 Feb 2018 21:14:31 -0800 Subject: [PATCH 35/96] fixed ChannelClaimsDisplay props --- react/containers/ChannelClaimsDisplay/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 64761d44..0f88e9b3 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -4,6 +4,8 @@ import View from './view'; const mapStateToProps = ({ show }) => { return { + name : show.showChannel.channelData.name, + longId : show.showChannel.channelData.longId, claims : show.showChannel.channelClaimsData.claims, currentPage: show.showChannel.channelClaimsData.currentPage, totalPages : show.showChannel.channelClaimsData.totalPages, From 0a541b6dd923f0dae5fe2f76b1cb061c3e6cff41 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Sun, 4 Feb 2018 16:40:28 -0800 Subject: [PATCH 36/96] added proptype checks to components --- react/components/AssetDisplay/index.js | 3 +- react/components/AssetInfo/index.js | 17 +++++++++-- react/components/AssetPreview/index.js | 11 ++++--- react/components/ShowAssetDetails/index.js | 16 +++++----- react/components/ShowAssetLite/index.js | 6 ++++ .../containers/ChannelClaimsDisplay/view.jsx | 4 --- react/containers/ShowAsset/view.jsx | 29 ++++++++++++------- 7 files changed, 54 insertions(+), 32 deletions(-) diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 973f47c3..66b4e989 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -1,8 +1,8 @@ import React from 'react'; +import PropTypes from 'prop-types'; import ProgressBar from 'components/ProgressBar'; import Request from 'utils/request'; import { LOCAL_CHECK, SEARCHING, UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; -import PropTypes from 'prop-types'; class AssetDisplay extends React.Component { constructor (props) { @@ -128,7 +128,6 @@ AssetDisplay.propTypes = { contentType: PropTypes.string.isRequired, fileExt : PropTypes.string.isRequired, thumbnail : PropTypes.string, - // shortId : PropTypes.string.isRequired, }; export default AssetDisplay; diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index b0ab729f..1cf29044 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -1,11 +1,12 @@ import React from 'react'; +import PropTypes from 'prop-types'; class AssetInfo extends React.Component { constructor (props) { super(props); this.state = { showDetails: false, - } + }; this.toggleDetails = this.toggleDetails.bind(this); this.copyToClipboard = this.copyToClipboard.bind(this); } @@ -80,7 +81,7 @@ class AssetInfo extends React.Component { {(this.props.contentType === 'video/mp4') ? ( `}/> + value={``}/> ) : ( { const directSourceLink = `${claimId}/${name}.${fileExt}`; const showUrlLink = `${claimId}/${name}`; const previewHolderStyle = { - clear : 'both', - display : 'inline-block', - width : '31%', - padding : '0px', - margin : '1%', - backgroundColor: 'black', + clear : 'both', + display: 'inline-block', + width : '31%', + padding: '0px', + margin : '1%', }; const assetStyle = { width : '100%', diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index 2972fa94..3d3574e7 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import NavBar from 'containers/NavBar'; import AssetTitle from 'components/AssetTitle'; import AssetDisplay from 'components/AssetDisplay'; @@ -39,10 +40,10 @@ class ShowAssetDetails extends React.Component { channelName={this.props.claimData.channelName} certificateId={this.props.claimData.certificateId} description={this.props.claimData.description} - shortClaimId={this.props.claimData.shortClaimId} name={this.props.claimData.name} - fileExt={this.props.claimData.fileExt} claimId={this.props.claimData.claimId} + shortClaimId={this.props.claimData.shortClaimId} + fileExt={this.props.claimData.fileExt} contentType={this.props.claimData.contentType} thumbnail={this.props.claimData.thumbnail} host={this.props.claimData.host} @@ -56,11 +57,10 @@ class ShowAssetDetails extends React.Component { } }; -// required props -// isChannel -// channelName -// channelClaimId -// claimId -// claimName +ShowAssetDetails.propTypes = { + error : PropTypes.string, + claimData: PropTypes.object.isRequired, + // shortUrl: PropTypes.string.isRequired, +}; export default ShowAssetDetails; diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index 72b81a78..862fc2db 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import AssetDisplay from 'components/AssetDisplay'; @@ -27,4 +28,9 @@ class ShowLite extends React.Component { } }; +ShowLite.propTypes = { + error : PropTypes.string, + claimData: PropTypes.object.isRequired, +}; + export default ShowLite; diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index bd6d4439..9db4bc92 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -82,8 +82,4 @@ class ChannelClaimsDisplay extends React.Component { } }; -// PropTypes -// name -// id - export default ChannelClaimsDisplay; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 9f87cf1a..b6eff043 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -82,21 +82,30 @@ class ShowAsset extends React.Component { }); }); } + componentWillUnmount () { + this.props.onAssetClaimDataClear(); + } render () { - if (this.props.extension) { + if (this.props.claimData) { return ( - +
+ { this.props.extension ? ( + + ) : ( + + )} +
); } return ( - +
); } }; From c4a77f0317983f5ef85fdeb0d0f4d4b489cfcbb8 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Sun, 4 Feb 2018 17:43:02 -0800 Subject: [PATCH 37/96] added short id to redux --- react/actions/show.js | 3 ++- react/components/AssetInfo/index.js | 4 +-- react/components/ShowAssetDetails/index.js | 4 +-- react/containers/ShowAsset/index.js | 9 ++++--- react/containers/ShowAsset/view.jsx | 30 +++++++++++++++++----- react/reducers/show.js | 12 ++++++--- routes/api-routes.js | 6 ++--- 7 files changed, 45 insertions(+), 23 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index bc1237c5..4afdf978 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -39,9 +39,10 @@ export function updateChannelClaimsData (claims, currentPage, totalPages, totalC }; }; -export function updateAssetClaimData (data) { +export function updateAssetClaimData (data, shortId) { return { type: actions.ASSET_CLAIM_DATA_UPDATE, data, + shortId, }; }; diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 1cf29044..3c73891f 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -161,13 +161,11 @@ class AssetInfo extends React.Component { } }; -// required props -// {channelName, certificateId, description, shortClaimId, name, fileExt, claimId, contentType, thumbnail, host} AssetInfo.propTypes = { channelName : PropTypes.string, certificateId: PropTypes.string, description : PropTypes.string, - // shortClaimId : PropsTypes.string.isRequired, + shortId : PropTypes.string.isRequired, name : PropTypes.string.isRequired, claimId : PropTypes.string.isRequired, contentType : PropTypes.string.isRequired, diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index 3d3574e7..62d4d75a 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -42,11 +42,11 @@ class ShowAssetDetails extends React.Component { description={this.props.claimData.description} name={this.props.claimData.name} claimId={this.props.claimData.claimId} - shortClaimId={this.props.claimData.shortClaimId} fileExt={this.props.claimData.fileExt} contentType={this.props.claimData.contentType} thumbnail={this.props.claimData.thumbnail} host={this.props.claimData.host} + shortClaimId={this.props.shortId} />
@@ -60,7 +60,7 @@ class ShowAssetDetails extends React.Component { ShowAssetDetails.propTypes = { error : PropTypes.string, claimData: PropTypes.object.isRequired, - // shortUrl: PropTypes.string.isRequired, + shortId : PropTypes.string.isRequired, }; export default ShowAssetDetails; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 6b60a41a..672fbb1d 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -7,17 +7,18 @@ const mapStateToProps = ({ show }) => { modifier : show.assetRequest.modifier, claim : show.assetRequest.name, extension: show.assetRequest.extension, - claimData: show.showAsset.claimData, + claimData: show.showAsset.claimData.data, + shortId : show.showAsset.claimData.shortId, }; }; const mapDispatchToProps = dispatch => { return { - onAssetClaimDataUpdate: (claimData) => { - dispatch(updateAssetClaimData(claimData)); + onAssetClaimDataUpdate: (claimData, shortId) => { + dispatch(updateAssetClaimData(claimData, shortId)); }, onAssetClaimDataClear: () => { - dispatch(updateAssetClaimData(null)); + dispatch(updateAssetClaimData(null, null)); }, }; }; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index b6eff043..16f0860d 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -39,11 +39,11 @@ class ShowAsset extends React.Component { const that = this; this.getLongClaimId(params) .then(claimLongId => { - return that.getClaimData(name, claimLongId); + return Promise.all([that.getShortClaimId(claimLongId, name), that.getClaimData(claimLongId, name)]); }) - .then(claimData => { + .then(([shortId, claimData]) => { this.setState({error: null}); // note: move this to redux level - this.props.onAssetClaimDataUpdate(claimData); + this.props.onAssetClaimDataUpdate(claimData, shortId); }) .catch(error => { this.setState({error}); @@ -54,19 +54,35 @@ class ShowAsset extends React.Component { console.log('params:', params); return new Promise((resolve, reject) => { request(url, params) - .then(({ success, message }) => { + .then(({ success, message, data }) => { console.log('get long claim id response:', message); if (!success) { reject(message); } - resolve(message); + resolve(data); }) .catch((error) => { reject(error.message); }); }); } - getClaimData (claimName, claimId) { + getShortClaimId (longId, name) { + const url = `/api/claim-shorten-id/${longId}/${name}`; + return new Promise((resolve, reject) => { + request(url) + .then(({ success, message, data }) => { + console.log('get short claim id response:', data); + if (!success) { + reject(message); + } + resolve(data); + }) + .catch((error) => { + reject(error.message); + }); + }); + } + getClaimData (claimId, claimName) { return new Promise((resolve, reject) => { const url = `/api/claim-get-data/${claimName}/${claimId}`; return request(url) @@ -98,7 +114,7 @@ class ShowAsset extends React.Component { )} diff --git a/react/reducers/show.js b/react/reducers/show.js index 3d024584..ffd75b9d 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -32,7 +32,10 @@ const initialState = { }, }, showAsset: { - claimData: null, + claimData: { + data : null, + shortId: null, + }, }, }; @@ -68,7 +71,7 @@ export default function (state = initialState, action) { case actions.CHANNEL_DATA_UPDATE: return Object.assign({}, state, { showChannel: Object.assign({}, state.showChannel, { - channelData: Object.assign({}, state.channel, { + channelData: Object.assign({}, state.channelData, { name : action.name, shortId: action.shortId, longId : action.longId, @@ -89,7 +92,10 @@ export default function (state = initialState, action) { case actions.ASSET_CLAIM_DATA_UPDATE: return Object.assign({}, state, { showAsset: { - claimData: action.data, + claimData: { + data : action.data, + shortId: action.shortId, + }, }, }); default: diff --git a/routes/api-routes.js b/routes/api-routes.js index 3df769a8..1ffaed4e 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -172,11 +172,11 @@ module.exports = (app) => { app.get('/api/claim-shorten-id/:longId/:name', ({ params }, res) => { db.Claim.getShortClaimIdFromLongClaimId(params.longId, params.name) .then(shortId => { - res.status(200).json(shortId); + res.status(200).json({success: true, data: shortId}); }) .catch(error => { logger.error('api error getting short channel id', error); - res.status(400).json(error.message); + res.status(200).json({success: false, message: error.message}); }); }); // route to get a short channel id from long channel Id @@ -238,7 +238,7 @@ module.exports = (app) => { if (result === NO_CLAIM) { return res.status(200).json({success: false, message: 'No matching claim id could be found'}); } - res.status(200).json({success: true, message: result}); + res.status(200).json({success: true, data: result}); }) .catch(error => { logger.error('api error getting long claim id', error); From cb871cae366bb19c430fa95f9ea0a1b9c23e82e1 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Sun, 4 Feb 2018 17:51:17 -0800 Subject: [PATCH 38/96] centered show lite content --- react/containers/ShowAsset/view.jsx | 34 ++++++++++++++--------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 16f0860d..50f91085 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -103,23 +103,23 @@ class ShowAsset extends React.Component { } render () { if (this.props.claimData) { - return ( -
- { this.props.extension ? ( - - ) : ( - - )} -
- ); - } + if (this.props.extension) { + return ( + + ); + } else { + return ( + + ); + } + }; return (
); From 7f52c9be02b2a487a5a5440bb1bdbe07e4e28863 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 6 Feb 2018 11:55:46 -0800 Subject: [PATCH 39/96] fixed show actions to use data object --- react/actions/show.js | 49 ++++++++++++++++++++++++++---------------- react/reducers/show.js | 35 +++++------------------------- 2 files changed, 36 insertions(+), 48 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index 4afdf978..97edaeb2 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -1,48 +1,61 @@ import * as actions from 'constants/show_action_types'; -// export action creators export function updateRequestWithChannelRequest (name, id) { return { type: actions.REQUEST_UPDATE_CHANNEL, - name, - id, + data: { + name, + id, + }, }; }; export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) { return { - type : actions.REQUEST_UPDATE_CLAIM, - name, - id, - channelName: null, - channelId : null, - extension, + type: actions.REQUEST_UPDATE_CLAIM, + data: { + name, + modifier: { + id, + channel: { + name: channelName, + id : channelId, + }, + }, + extension, + }, }; }; export function updateChannelData (name, longId, shortId) { return { type: actions.CHANNEL_DATA_UPDATE, - name, - longId, - shortId, + data: { + name, + longId, + shortId, + }, }; }; export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) { return { type: actions.CHANNEL_CLAIMS_DATA_UPDATE, - claims, - currentPage, - totalPages, - totalClaims, + data: { + claims, + currentPage, + totalPages, + totalClaims, + }, }; }; export function updateAssetClaimData (data, shortId) { return { type: actions.ASSET_CLAIM_DATA_UPDATE, - data, - shortId, + data: { + data, + shortId, + }, }; }; diff --git a/react/reducers/show.js b/react/reducers/show.js index ffd75b9d..f7832aba 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -48,54 +48,29 @@ export default function (state = initialState, action) { case actions.REQUEST_UPDATE_CHANNEL: return Object.assign({}, state, { requestType : CHANNEL, - channelRequest: { - name: action.name, - id : action.id, - }, + channelRequest: action.data, }); case actions.REQUEST_UPDATE_CLAIM: return Object.assign({}, state, { requestType : ASSET, - assetRequest: { - name : action.name, - modifier: { - id : action.id, - channel: { - name: action.channelName, - id : action.channelId, - }, - }, - extension: action.extension, - }, + assetRequest: action.data, }); case actions.CHANNEL_DATA_UPDATE: return Object.assign({}, state, { showChannel: Object.assign({}, state.showChannel, { - channelData: Object.assign({}, state.channelData, { - name : action.name, - shortId: action.shortId, - longId : action.longId, - }), + channelData: action.data, }), }); case actions.CHANNEL_CLAIMS_DATA_UPDATE: return Object.assign({}, state, { showChannel: Object.assign({}, state.showChannel, { - channelClaimsData: { - claims : action.claims, - currentPage: action.currentPage, - totalPages : action.totalPages, - totalClaims: action.totalClaims, - }, + channelClaimsData: action.data, }), }); case actions.ASSET_CLAIM_DATA_UPDATE: return Object.assign({}, state, { showAsset: { - claimData: { - data : action.data, - shortId: action.shortId, - }, + claimData: action.data, }, }); default: From ca4311450d65bcc315433288a2996311891a7b21 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 6 Feb 2018 12:11:44 -0800 Subject: [PATCH 40/96] fixed other actions to use data object --- react/actions/channel.js | 8 +++++--- react/actions/publish.js | 30 ++++++++++++++++++------------ react/reducers/channel.js | 6 +----- react/reducers/publish.js | 17 +++++++---------- 4 files changed, 31 insertions(+), 30 deletions(-) diff --git a/react/actions/channel.js b/react/actions/channel.js index a1e34e71..7c17ed94 100644 --- a/react/actions/channel.js +++ b/react/actions/channel.js @@ -5,8 +5,10 @@ import * as actions from 'constants/channel_action_types'; export function updateLoggedInChannel (name, shortId, longId) { return { type: actions.CHANNEL_UPDATE, - name, - shortId, - longId, + data: { + name, + shortId, + longId, + }, }; }; diff --git a/react/actions/publish.js b/react/actions/publish.js index 603aca4e..8afd3556 100644 --- a/react/actions/publish.js +++ b/react/actions/publish.js @@ -4,7 +4,7 @@ import * as actions from 'constants/publish_action_types'; export function selectFile (file) { return { type: actions.FILE_SELECTED, - file: file, + data: file, }; }; @@ -17,15 +17,17 @@ export function clearFile () { export function updateMetadata (name, value) { return { type: actions.METADATA_UPDATE, - name, - value, + data: { + name, + value, + }, }; }; export function updateClaim (value) { return { type: actions.CLAIM_UPDATE, - value, + data: value, }; }; @@ -39,29 +41,33 @@ export function setPublishInChannel (channel) { export function updatePublishStatus (status, message) { return { type: actions.PUBLISH_STATUS_UPDATE, - status, - message, + data: { + status, + message, + }, }; }; export function updateError (name, value) { return { type: actions.ERROR_UPDATE, - name, - value, + data: { + name, + value, + }, }; }; -export function updateSelectedChannel (value) { +export function updateSelectedChannel (channelName) { return { type: actions.SELECTED_CHANNEL_UPDATE, - value, + data: channelName, }; }; -export function toggleMetadataInputs (value) { +export function toggleMetadataInputs (showMetadataInputs) { return { type: actions.TOGGLE_METADATA_INPUTS, - value, + data: showMetadataInputs, }; }; diff --git a/react/reducers/channel.js b/react/reducers/channel.js index fcf1f33c..30dd0166 100644 --- a/react/reducers/channel.js +++ b/react/reducers/channel.js @@ -16,11 +16,7 @@ export default function (state = initialState, action) { switch (action.type) { case actions.CHANNEL_UPDATE: return Object.assign({}, state, { - loggedInChannel: { - name : action.name, - shortId: action.shortId, - longId : action.longId, - }, + loggedInChannel: action.data, }); default: return state; diff --git a/react/reducers/publish.js b/react/reducers/publish.js index 1195a37d..e964fcec 100644 --- a/react/reducers/publish.js +++ b/react/reducers/publish.js @@ -34,19 +34,19 @@ export default function (state = initialState, action) { switch (action.type) { case actions.FILE_SELECTED: return Object.assign({}, state, { - file: action.file, + file: action.data, }); case actions.FILE_CLEAR: return initialState; case actions.METADATA_UPDATE: return Object.assign({}, state, { metadata: Object.assign({}, state.metadata, { - [action.name]: action.value, + [action.data.name]: action.data.value, }), }); case actions.CLAIM_UPDATE: return Object.assign({}, state, { - claim: action.value, + claim: action.data, }); case actions.SET_PUBLISH_IN_CHANNEL: return Object.assign({}, state, { @@ -54,24 +54,21 @@ export default function (state = initialState, action) { }); case actions.PUBLISH_STATUS_UPDATE: return Object.assign({}, state, { - status: Object.assign({}, state.status, { - status : action.status, - message: action.message, - }), + status: action.data, }); case actions.ERROR_UPDATE: return Object.assign({}, state, { error: Object.assign({}, state.error, { - [action.name]: action.value, + [action.data.name]: action.data.value, }), }); case actions.SELECTED_CHANNEL_UPDATE: return Object.assign({}, state, { - selectedChannel: action.value, + selectedChannel: action.data, }); case actions.TOGGLE_METADATA_INPUTS: return Object.assign({}, state, { - showMetadataInputs: action.value, + showMetadataInputs: action.data, }); default: return state; From ae5cfa39a1ab2cc4d3701a3499502052da56089d Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 6 Feb 2018 15:05:31 -0800 Subject: [PATCH 41/96] removed use of "that" where unecessary --- react/components/AssetDisplay/index.js | 12 ++---- react/components/AssetInfo/index.js | 5 ++- react/components/Preview/index.jsx | 8 ++-- .../containers/ChannelClaimsDisplay/view.jsx | 12 ++---- react/containers/ChannelCreateForm/view.jsx | 25 +++++------- react/containers/ChannelLoginForm/view.jsx | 9 ++--- react/containers/PublishForm/view.jsx | 38 ++++++++----------- .../containers/PublishThumbnailInput/view.jsx | 15 +++----- react/containers/PublishUrlInput/view.jsx | 10 ++--- react/containers/ShowAsset/view.jsx | 3 +- react/containers/ShowChannel/view.jsx | 10 ++--- 11 files changed, 57 insertions(+), 90 deletions(-) diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 66b4e989..94d83db1 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -11,24 +11,20 @@ class AssetDisplay extends React.Component { error : null, status: LOCAL_CHECK, }; - this.isLocalFileAvailableOnServer = this.isLocalFileAvailableOnServer.bind(this); - this.triggerGetAssetOnServer = this.triggerGetAssetOnServer.bind(this); } componentDidMount () { - const that = this; this.isLocalFileAvailableOnServer() .then(isAvailable => { if (!isAvailable) { - console.log('file is not yet available'); - that.setState({status: SEARCHING}); - return that.triggerGetAssetOnServer(); + this.setState({status: SEARCHING}); + return this.triggerGetAssetOnServer(); } }) .then(() => { - that.setState({status: AVAILABLE}); + this.setState({status: AVAILABLE}); }) .catch(error => { - that.setState({ + this.setState({ status: UNAVAILABLE, error : error.message, }); diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 3c73891f..fec456ce 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; class AssetInfo extends React.Component { constructor (props) { @@ -49,8 +50,8 @@ class AssetInfo extends React.Component {
- +
diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index 862fc2db..16331768 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; -import AssetDisplay from 'components/AssetDisplay'; +import AssetDisplay from 'containers/AssetDisplay'; class ShowLite extends React.Component { render () { diff --git a/react/constants/asset_display_states.js b/react/constants/asset_display_states.js index ce8530f5..910c7848 100644 --- a/react/constants/asset_display_states.js +++ b/react/constants/asset_display_states.js @@ -1,4 +1,4 @@ export const LOCAL_CHECK = 'LOCAL_CHECK'; -export const SEARCHING = 'SEARCHING'; export const UNAVAILABLE = 'UNAVAILABLE'; +export const ERROR = 'ERROR'; export const AVAILABLE = 'AVAILABLE'; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index b8ded3d3..7ade6448 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -3,3 +3,6 @@ export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM'; export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE'; export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE'; +export const FILE_REQUESTED = 'FILE_REQUESTED'; +export const FILE_IS_AVAILABLE_UPDATE = 'FILE_IS_AVAILABLE_UPDATE'; +export const SHOW_ASSET_ERROR = 'SHOW_ASSET_ERROR'; diff --git a/react/containers/AssetDisplay/index.js b/react/containers/AssetDisplay/index.js new file mode 100644 index 00000000..8b807cdc --- /dev/null +++ b/react/containers/AssetDisplay/index.js @@ -0,0 +1,21 @@ +import { connect } from 'react-redux'; +import View from './view'; +import { fileRequested } from 'actions/show'; + +const mapStateToProps = ({ show }) => { + return { + error : show.showAsset.error, + status : show.showAsset.status, + claimData: show.showAsset.claimData, + }; +}; + +const mapDispatchToProps = dispatch => { + return { + onFileRequest: (name, claimId) => { + dispatch(fileRequested(name, claimId)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/AssetDisplay/view.jsx b/react/containers/AssetDisplay/view.jsx new file mode 100644 index 00000000..f043453d --- /dev/null +++ b/react/containers/AssetDisplay/view.jsx @@ -0,0 +1,79 @@ +import React from 'react'; +import ProgressBar from 'components/ProgressBar/index'; +import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from 'constants/asset_display_states'; + +class AssetDisplay extends React.Component { + componentDidMount () { + this.props.onFileRequest(this.props.claimData.name, this.props.claimData.claimId); + } + componentWillReceiveProps (nextProps) { + // if (nextProps.name !== this.props.name && nextProps.claimId !== this.props.claimId) { + // this.props.onCheckServerForFile(nextProps.name, nextProps.claimId); + // } + } + render () { + const status = this.props.status; + const error = this.props.error; + const { name, claimId, contentType, fileExt, thumbnail } = this.props.claimData; + return ( +
+ {(status === LOCAL_CHECK) && +
+

Checking to see if Spee.ch has your asset locally...

+
+ } + {(status === UNAVAILABLE) && +
+

Sit tight, we're searching the LBRY blockchain for your asset!

+ +

Curious what magic is happening here? Learn more.

+
+ } + {(status === ERROR) && +
+

Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the below error message in the LBRY discord.

+

{error}

 +
+ } + {(status === AVAILABLE) && + (() => { + switch (contentType) { + case 'image/jpeg': + case 'image/jpg': + case 'image/png': + return ( + {name}/ + ); + case 'image/gif': + return ( + {name} + ); + case 'video/mp4': + return ( + + ); + default: + return ( +

Unsupported file type

+ ); + } + })() + } +
+ ); + } +}; + +export default AssetDisplay; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 672fbb1d..eacf3794 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -7,8 +7,8 @@ const mapStateToProps = ({ show }) => { modifier : show.assetRequest.modifier, claim : show.assetRequest.name, extension: show.assetRequest.extension, - claimData: show.showAsset.claimData.data, - shortId : show.showAsset.claimData.shortId, + claimData: show.showAsset.claimData, + shortId : show.showAsset.shortId, }; }; diff --git a/react/index.js b/react/index.js index 46be33c4..c5284dd0 100644 --- a/react/index.js +++ b/react/index.js @@ -1,14 +1,21 @@ import React from 'react'; import { render } from 'react-dom'; -import { createStore } from 'redux'; +import { createStore, applyMiddleware, compose } from 'redux'; import Reducer from 'reducers'; +import createSagaMiddleware from 'redux-saga'; +import rootSaga from 'sagas'; import Root from './root'; +const sagaMiddleware = createSagaMiddleware(); +const middleware = applyMiddleware(sagaMiddleware); + let store = createStore( Reducer, - window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() + compose(middleware, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()), ); +sagaMiddleware.run(rootSaga); + render( , document.getElementById('react-app') diff --git a/react/reducers/show.js b/react/reducers/show.js index f7832aba..d47cf666 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -1,5 +1,6 @@ import * as actions from 'constants/show_action_types'; import { CHANNEL, ASSET } from 'constants/show_request_types'; +import { LOCAL_CHECK, ERROR } from 'constants/asset_display_states'; const initialState = { requestType : null, @@ -32,10 +33,10 @@ const initialState = { }, }, showAsset: { - claimData: { - data : null, - shortId: null, - }, + error : null, + status : LOCAL_CHECK, + claimData: null, + shortId : null, }, }; @@ -69,9 +70,23 @@ export default function (state = initialState, action) { }); case actions.ASSET_CLAIM_DATA_UPDATE: return Object.assign({}, state, { - showAsset: { - claimData: action.data, - }, + showAsset: Object.assign({}, state.showAsset, { + claimData: action.data.data, + shortId : action.data.shortId, + }), + }); + case actions.FILE_IS_AVAILABLE_UPDATE: + return Object.assign({}, state, { + showAsset: Object.assign({}, state.showAsset, { + status: action.data, + }), + }); + case actions.SHOW_ASSET_ERROR: + return Object.assign({}, state, { + showAsset: Object.assign({}, state.showAsset, { + error : action.data, + status: ERROR, + }), }); default: return state; diff --git a/react/sagas/index.js b/react/sagas/index.js new file mode 100644 index 00000000..a61f88e3 --- /dev/null +++ b/react/sagas/index.js @@ -0,0 +1,57 @@ +import { call, put, all, takeLatest } from 'redux-saga/effects'; +import Request from 'utils/request'; +import * as actions from 'constants/show_action_types'; +import { updateFileIsAvailable, updateShowAssetError } from 'actions/show'; +import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; + +function* helloSaga () { + console.log('Hello Sagas!'); +} + +function* retriveFile (action) { + const name = action.data.name; + const claimId = action.data.claimId; + // see if the file is available + console.log(`checking if file is available for ${name}#${claimId}`); + let url = `/api/file-is-available/${name}/${claimId}`; + let success, message, isAvailable; + try { + ({ success, message, data: isAvailable } = yield call(Request, url)); + } catch (error) { + return yield put(updateShowAssetError(error.message)); + }; + if (success) { + console.log('/api/file-is-available response:', isAvailable); + if (isAvailable) { + return yield put(updateFileIsAvailable(AVAILABLE)); + } + yield put(updateFileIsAvailable(UNAVAILABLE)); + } else { + yield put(updateShowAssetError(message)); + } + // initiate get request for the file + console.log(`getting claim for ${name}#${claimId}`); + url = `/api/claim-get/${name}/${claimId}`; + try { + ({ success, message } = yield call(Request, url)); + } catch (error) { + return yield put(updateShowAssetError(error.message)); + }; + if (success) { + console.log('/api/glaim-get response:', message); + yield put(updateFileIsAvailable(AVAILABLE)); + } else { + yield put(updateShowAssetError(message)); + } +} + +function* watchUpdateFileIsAvailable () { + yield takeLatest(actions.FILE_REQUESTED, retriveFile); +} + +export default function* rootSaga () { + yield all([ + helloSaga(), + watchUpdateFileIsAvailable(), + ]); +} diff --git a/webpack.config.js b/webpack.config.js index b377412c..a0447013 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,7 +3,7 @@ const Path = require('path'); const REACT_ROOT = Path.resolve(__dirname, 'react/'); module.exports = { - entry : ['whatwg-fetch', './react/index.js'], + entry : ['babel-polyfill', 'whatwg-fetch', './react/index.js'], output: { path : Path.join(__dirname, '/public/bundle/'), filename: 'bundle.js', From b3f5d83f73c86cec44993b87ad97e0ce935af9db Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 6 Feb 2018 21:55:04 -0800 Subject: [PATCH 44/96] updated routes to better REST style --- README.md | 20 +- react/api/fileApi.js | 11 + .../containers/ChannelClaimsDisplay/view.jsx | 2 +- react/containers/ChannelCreateForm/view.jsx | 4 +- react/containers/PublishForm/view.jsx | 2 +- react/containers/PublishUrlInput/view.jsx | 2 +- react/containers/ShowAsset/view.jsx | 6 +- react/containers/ShowChannel/view.jsx | 2 +- react/sagas/index.js | 55 +--- react/sagas/show.js | 41 +++ routes/api-routes.js | 259 +++++++++--------- routes/serve-routes.js | 2 +- test/end-to-end/end-to-end.tests.js | 2 +- 13 files changed, 205 insertions(+), 203 deletions(-) create mode 100644 react/api/fileApi.js create mode 100644 react/sagas/show.js diff --git a/README.md b/README.md index 08b36aa7..974834d1 100644 --- a/README.md +++ b/README.md @@ -29,20 +29,20 @@ spee.ch is a single-serving site that reads and publishes images and videos to a ## API #### GET -* /api/claim-resolve/:name/:claimId - * example: `curl https://spee.ch/api/claim-resolve/doitlive/xyz` -* /api/claim-list/:name - * example: `curl https://spee.ch/api/claim-list/doitlive` -* /api/claim-is-available/:name ( +* /api/claim/resolve/:name/:claimId + * example: `curl https://spee.ch/api/claim/resolve/doitlive/xyz` +* /api/claim/list/:name + * example: `curl https://spee.ch/api/claim/list/doitlive` +* /api/claim/availability/:name ( * returns `true`/`false` for whether a name is available through spee.ch - * example: `curl https://spee.ch/api/claim-is-available/doitlive` -* /api/channel-is-available/:name ( + * example: `curl https://spee.ch/api/claim/availability/doitlive` +* /api/channel/availability/:name ( * returns `true`/`false` for whether a channel is available through spee.ch - * example: `curl https://spee.ch/api/channel-is-available/@CoolChannel` + * example: `curl https://spee.ch/api/channel/availability/@CoolChannel` #### POST -* /api/claim-publish - * example: `curl -X POST -F 'name=MyPictureName' -F 'file=@/path/to/myPicture.jpeg' https://spee.ch/api/claim-publish` +* /api/claim/publish + * example: `curl -X POST -F 'name=MyPictureName' -F 'file=@/path/to/myPicture.jpeg' https://spee.ch/api/claim/publish` * Parameters: * `name` * `file` (must be type .mp4, .jpeg, .jpg, .gif, or .png) diff --git a/react/api/fileApi.js b/react/api/fileApi.js new file mode 100644 index 00000000..ecc4a652 --- /dev/null +++ b/react/api/fileApi.js @@ -0,0 +1,11 @@ +import Request from 'utils/request'; + +export function checkFileAvailability (name, claimId) { + const url = `/api/file/availability/${name}/${claimId}`; + return Request(url); +} + +export function triggerClaimGet (name, claimId) { + const url = `/api/claim/get/${name}/${claimId}`; + return Request(url); +} diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index cddee340..ee50b0e3 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -20,7 +20,7 @@ class ChannelClaimsDisplay extends React.Component { } } updateClaimsData (name, longId, page) { - const url = `/api/channel-claims/${name}/${longId}/${page}`; + const url = `/api/channel/claims/${name}/${longId}/${page}`; return request(url) .then(({ success, message, data }) => { console.log('api/channel-claims response:', data); diff --git a/react/containers/ChannelCreateForm/view.jsx b/react/containers/ChannelCreateForm/view.jsx index dcef394b..69fed75d 100644 --- a/react/containers/ChannelCreateForm/view.jsx +++ b/react/containers/ChannelCreateForm/view.jsx @@ -37,7 +37,7 @@ class ChannelCreateForm extends React.Component { } updateIsChannelAvailable (channel) { const channelWithAtSymbol = `@${channel}`; - request(`/api/channel-is-available/${channelWithAtSymbol}`) + request(`/api/channel/availability/${channelWithAtSymbol}`) .then(isAvailable => { if (isAvailable) { this.setState({'error': null}); @@ -52,7 +52,7 @@ class ChannelCreateForm extends React.Component { checkIsChannelAvailable (channel) { const channelWithAtSymbol = `@${channel}`; return new Promise((resolve, reject) => { - request(`/api/channel-is-available/${channelWithAtSymbol}`) + request(`/api/channel/availability/${channelWithAtSymbol}`) .then(isAvailable => { console.log('checkIsChannelAvailable result:', isAvailable); if (!isAvailable) { diff --git a/react/containers/PublishForm/view.jsx b/react/containers/PublishForm/view.jsx index 2f0a4eaa..7cacfee7 100644 --- a/react/containers/PublishForm/view.jsx +++ b/react/containers/PublishForm/view.jsx @@ -48,7 +48,7 @@ class PublishForm extends React.Component { } makePublishRequest (file, metadata) { console.log('making publish request'); - const uri = '/api/claim-publish'; + const uri = '/api/claim/publish'; const xhr = new XMLHttpRequest(); const fd = this.appendDataToFormData(file, metadata); xhr.upload.addEventListener('loadstart', () => { diff --git a/react/containers/PublishUrlInput/view.jsx b/react/containers/PublishUrlInput/view.jsx index ef4d8348..38ed7c91 100644 --- a/react/containers/PublishUrlInput/view.jsx +++ b/react/containers/PublishUrlInput/view.jsx @@ -37,7 +37,7 @@ class PublishUrlInput extends React.Component { this.props.onClaimChange(cleanClaimName); } checkClaimIsAvailable (claim) { - request(`/api/claim-is-available/${claim}`) + request(`/api/claim/availability/${claim}`) .then(isAvailable => { // console.log('checkClaimIsAvailable request response:', isAvailable); if (isAvailable) { diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 9caa1451..3926200d 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -49,7 +49,7 @@ class ShowAsset extends React.Component { }); } getLongClaimId (params) { - const url = `/api/claim-get-long-id`; + const url = `/api/claim/long-id`; console.log('params:', params); return new Promise((resolve, reject) => { request(url, params) @@ -66,7 +66,7 @@ class ShowAsset extends React.Component { }); } getShortClaimId (longId, name) { - const url = `/api/claim-shorten-id/${longId}/${name}`; + const url = `/api/claim/short-id/${longId}/${name}`; return new Promise((resolve, reject) => { request(url) .then(({ success, message, data }) => { @@ -83,7 +83,7 @@ class ShowAsset extends React.Component { } getClaimData (claimId, claimName) { return new Promise((resolve, reject) => { - const url = `/api/claim-get-data/${claimName}/${claimId}`; + const url = `/api/claim/data/${claimName}/${claimId}`; return request(url) .then(({ success, message }) => { console.log('get claim data response:', message); diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 4f177c63..de79fa86 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -20,7 +20,7 @@ class ShowChannel extends React.Component { } getAndStoreChannelData (name, id) { if (!id) id = 'none'; - const url = `/api/channel-data/${name}/${id}`; + const url = `/api/channel/data/${name}/${id}`; return request(url) .then(({ success, message, data }) => { console.log('api/channel-data response:', data); diff --git a/react/sagas/index.js b/react/sagas/index.js index a61f88e3..fa8e17ff 100644 --- a/react/sagas/index.js +++ b/react/sagas/index.js @@ -1,57 +1,8 @@ -import { call, put, all, takeLatest } from 'redux-saga/effects'; -import Request from 'utils/request'; -import * as actions from 'constants/show_action_types'; -import { updateFileIsAvailable, updateShowAssetError } from 'actions/show'; -import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; - -function* helloSaga () { - console.log('Hello Sagas!'); -} - -function* retriveFile (action) { - const name = action.data.name; - const claimId = action.data.claimId; - // see if the file is available - console.log(`checking if file is available for ${name}#${claimId}`); - let url = `/api/file-is-available/${name}/${claimId}`; - let success, message, isAvailable; - try { - ({ success, message, data: isAvailable } = yield call(Request, url)); - } catch (error) { - return yield put(updateShowAssetError(error.message)); - }; - if (success) { - console.log('/api/file-is-available response:', isAvailable); - if (isAvailable) { - return yield put(updateFileIsAvailable(AVAILABLE)); - } - yield put(updateFileIsAvailable(UNAVAILABLE)); - } else { - yield put(updateShowAssetError(message)); - } - // initiate get request for the file - console.log(`getting claim for ${name}#${claimId}`); - url = `/api/claim-get/${name}/${claimId}`; - try { - ({ success, message } = yield call(Request, url)); - } catch (error) { - return yield put(updateShowAssetError(error.message)); - }; - if (success) { - console.log('/api/glaim-get response:', message); - yield put(updateFileIsAvailable(AVAILABLE)); - } else { - yield put(updateShowAssetError(message)); - } -} - -function* watchUpdateFileIsAvailable () { - yield takeLatest(actions.FILE_REQUESTED, retriveFile); -} +import { all } from 'redux-saga/effects'; +import { watchFileIsRequested } from './show'; export default function* rootSaga () { yield all([ - helloSaga(), - watchUpdateFileIsAvailable(), + watchFileIsRequested(), ]); } diff --git a/react/sagas/show.js b/react/sagas/show.js new file mode 100644 index 00000000..1a591b67 --- /dev/null +++ b/react/sagas/show.js @@ -0,0 +1,41 @@ +import { call, put, takeLatest } from 'redux-saga/effects'; +import * as actions from 'constants/show_action_types'; +import { updateFileIsAvailable, updateShowAssetError } from 'actions/show'; +import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; +import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; + +function* retriveFile (action) { + const name = action.data.name; + const claimId = action.data.claimId; + // see if the file is available + let success, message, isAvailable; + try { + ({ success, message, data: isAvailable } = yield call(checkFileAvailability, name, claimId)); + } catch (error) { + return yield put(updateShowAssetError(error.message)); + }; + if (success) { + if (isAvailable) { + return yield put(updateFileIsAvailable(AVAILABLE)); + } + yield put(updateFileIsAvailable(UNAVAILABLE)); + } else { + yield put(updateShowAssetError(message)); + } + // initiate get request for the file + try { + ({ success, message } = yield call(triggerClaimGet, name, claimId)); + } catch (error) { + return yield put(updateShowAssetError(error.message)); + }; + if (success) { + console.log('/api/glaim-get response:', message); + yield put(updateFileIsAvailable(AVAILABLE)); + } else { + yield put(updateShowAssetError(message)); + } +} + +export function* watchFileIsRequested () { + yield takeLatest(actions.FILE_REQUESTED, retriveFile); +} diff --git a/routes/api-routes.js b/routes/api-routes.js index 1ffaed4e..bd596014 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -15,34 +15,77 @@ const NO_CHANNEL = 'NO_CHANNEL'; const NO_CLAIM = 'NO_CLAIM'; module.exports = (app) => { - // route to run a claim_list request on the daemon - app.get('/api/claim-list/:name', ({ ip, originalUrl, params }, res) => { - getClaimList(params.name) - .then(claimsList => { - res.status(200).json(claimsList); - }) - .catch(error => { - errorHandlers.handleApiError(originalUrl, ip, error, res); - }); - }); - // route to see if asset is available locally - app.get('/api/file-is-available/:name/:claimId', ({ ip, originalUrl, params }, res) => { - const name = params.name; - const claimId = params.claimId; - let isAvailable = false; - db.File.findOne({where: {name, claimId}}) + // route to check whether site has published to a channel + app.get('/api/channel/availability/:name', ({ params }, res) => { + checkChannelAvailability(params.name) .then(result => { - if (result) { - isAvailable = true; + if (result === true) { + res.status(200).json(true); + } else { + res.status(200).json(false); } - res.status(200).json({success: true, data: isAvailable}); + }) + .catch(error => { + res.status(500).json(error); + }); + }); + // route to get a short channel id from long channel Id + app.get('/api/channel/short-id/:longId/:name', ({ ip, originalUrl, params }, res) => { + db.Certificate.getShortChannelIdFromLongChannelId(params.longId, params.name) + .then(shortId => { + logger.debug('sending back short channel id', shortId); + res.status(200).json(shortId); + }) + .catch(error => { + logger.error('api error getting short channel id', error); + errorHandlers.handleApiError(originalUrl, ip, error, res); + }); + }); + app.get('/api/channel/data/:channelName/:channelClaimId', ({ ip, originalUrl, body, params }, res) => { + const channelName = params.channelName; + let channelClaimId = params.channelClaimId; + if (channelClaimId === 'none') channelClaimId = null; + getChannelData(channelName, channelClaimId, 0) // getChannelViewData(channelName, channelId, 0) + .then(data => { + if (data === NO_CHANNEL) { + return res.status(200).json({success: false, message: 'No matching channel was found'}); + } + res.status(200).json({success: true, data}); + }) + .catch(error => { + logger.error('api error getting channel contents', error); + errorHandlers.handleApiError(originalUrl, ip, error, res); + }); + }); + app.get('/api/channel/claims/:channelName/:channelClaimId/:page', ({ ip, originalUrl, body, params }, res) => { + const channelName = params.channelName; + let channelClaimId = params.channelClaimId; + if (channelClaimId === 'none') channelClaimId = null; + const page = params.page; + getChannelClaims(channelName, channelClaimId, page)// getChannelViewData(channelName, channelClaimId, page) + .then(data => { + if (data === NO_CHANNEL) { + return res.status(200).json({success: false, message: 'No matching channel was found'}); + } + res.status(200).json({success: true, data}); + }) + .catch(error => { + logger.error('api error getting channel contents', error); + errorHandlers.handleApiError(originalUrl, ip, error, res); + }); + }); + // route to run a claim_list request on the daemon + app.get('/api/claim/list/:name', ({ ip, originalUrl, params }, res) => { + getClaimList(params.name) + .then(claimsList => { + res.status(200).json(claimsList); }) .catch(error => { errorHandlers.handleApiError(originalUrl, ip, error, res); }); }); // route to get an asset - app.get('/api/claim-get/:name/:claimId', ({ ip, originalUrl, params }, res) => { + app.get('/api/claim/get/:name/:claimId', ({ ip, originalUrl, params }, res) => { const name = params.name; const claimId = params.claimId; // resolve the claim @@ -67,24 +110,9 @@ module.exports = (app) => { errorHandlers.handleApiError(originalUrl, ip, error, res); }); }); - // route to check whether this site published to a claim - app.get('/api/claim-is-available/:name', ({ params }, res) => { + app.get('/api/claim/availability/:name', ({ params }, res) => { checkClaimNameAvailability(params.name) - .then(result => { - if (result === true) { - res.status(200).json(true); - } else { - res.status(200).json(false); - } - }) - .catch(error => { - res.status(500).json(error); - }); - }); - // route to check whether site has published to a channel - app.get('/api/channel-is-available/:name', ({ params }, res) => { - checkChannelAvailability(params.name) .then(result => { if (result === true) { res.status(200).json(true); @@ -97,17 +125,17 @@ module.exports = (app) => { }); }); // route to run a resolve request on the daemon - app.get('/api/claim-resolve/:name/:claimId', ({ headers, ip, originalUrl, params }, res) => { + app.get('/api/claim/resolve/:name/:claimId', ({ headers, ip, originalUrl, params }, res) => { resolveUri(`${params.name}#${params.claimId}`) - .then(resolvedUri => { - res.status(200).json(resolvedUri); - }) - .catch(error => { - errorHandlers.handleApiError(originalUrl, ip, error, res); - }); + .then(resolvedUri => { + res.status(200).json(resolvedUri); + }) + .catch(error => { + errorHandlers.handleApiError(originalUrl, ip, error, res); + }); }); // route to run a publish request on the daemon - app.post('/api/claim-publish', multipartMiddleware, ({ body, files, headers, ip, originalUrl, user }, res) => { + app.post('/api/claim/publish', multipartMiddleware, ({ body, files, headers, ip, originalUrl, user }, res) => { logger.debug('api/claim-publish body:', body); logger.debug('api/claim-publish files:', files); // record the start time of the request and create variable for storing the action type @@ -128,48 +156,48 @@ module.exports = (app) => { } // check channel authorization authenticateIfNoUserToken(channelName, channelPassword, user) - .then(authenticated => { - if (!authenticated) { - throw new Error('Authentication failed, you do not have access to that channel'); - } - // make sure the claim name is available - return checkClaimNameAvailability(name); - }) - .then(result => { - if (!result) { - throw new Error('That name is already claimed by another user.'); - } - // create publish parameters object - return createPublishParams(filePath, name, title, description, license, nsfw, thumbnail, channelName); - }) - .then(publishParams => { - // set the timing event type for reporting - timingActionType = returnPublishTimingActionType(publishParams.channel_name); - // publish the asset - return publish(publishParams, fileName, fileType); - }) - .then(result => { - res.status(200).json({ - success: true, - message: 'publish completed successfully', - data : { - name, - claimId: result.claim_id, - url : `${site.host}/${result.claim_id}/${name}`, - lbryTx : result, - }, + .then(authenticated => { + if (!authenticated) { + throw new Error('Authentication failed, you do not have access to that channel'); + } + // make sure the claim name is available + return checkClaimNameAvailability(name); + }) + .then(result => { + if (!result) { + throw new Error('That name is already claimed by another user.'); + } + // create publish parameters object + return createPublishParams(filePath, name, title, description, license, nsfw, thumbnail, channelName); + }) + .then(publishParams => { + // set the timing event type for reporting + timingActionType = returnPublishTimingActionType(publishParams.channel_name); + // publish the asset + return publish(publishParams, fileName, fileType); + }) + .then(result => { + res.status(200).json({ + success: true, + message: 'publish completed successfully', + data : { + name, + claimId: result.claim_id, + url : `${site.host}/${result.claim_id}/${name}`, + lbryTx : result, + }, + }); + // log the publish end time + const publishEndTime = Date.now(); + logger.debug('publish request completed @', publishEndTime); + sendGoogleAnalyticsTiming(timingActionType, headers, ip, originalUrl, publishStartTime, publishEndTime); + }) + .catch(error => { + errorHandlers.handleApiError(originalUrl, ip, error, res); }); - // log the publish end time - const publishEndTime = Date.now(); - logger.debug('publish request completed @', publishEndTime); - sendGoogleAnalyticsTiming(timingActionType, headers, ip, originalUrl, publishStartTime, publishEndTime); - }) - .catch(error => { - errorHandlers.handleApiError(originalUrl, ip, error, res); - }); }); // route to get a short claim id from long claim Id - app.get('/api/claim-shorten-id/:longId/:name', ({ params }, res) => { + app.get('/api/claim/short-id/:longId/:name', ({ params }, res) => { db.Claim.getShortClaimIdFromLongClaimId(params.longId, params.name) .then(shortId => { res.status(200).json({success: true, data: shortId}); @@ -179,52 +207,7 @@ module.exports = (app) => { res.status(200).json({success: false, message: error.message}); }); }); - // route to get a short channel id from long channel Id - app.get('/api/channel-shorten-id/:longId/:name', ({ ip, originalUrl, params }, res) => { - db.Certificate.getShortChannelIdFromLongChannelId(params.longId, params.name) - .then(shortId => { - logger.debug('sending back short channel id', shortId); - res.status(200).json(shortId); - }) - .catch(error => { - logger.error('api error getting short channel id', error); - errorHandlers.handleApiError(originalUrl, ip, error, res); - }); - }); - app.get('/api/channel-data/:channelName/:channelClaimId', ({ ip, originalUrl, body, params }, res) => { - const channelName = params.channelName; - let channelClaimId = params.channelClaimId; - if (channelClaimId === 'none') channelClaimId = null; - getChannelData(channelName, channelClaimId, 0) // getChannelViewData(channelName, channelId, 0) - .then(data => { - if (data === NO_CHANNEL) { - return res.status(200).json({success: false, message: 'No matching channel was found'}); - } - res.status(200).json({success: true, data}); - }) - .catch(error => { - logger.error('api error getting channel contents', error); - errorHandlers.handleApiError(originalUrl, ip, error, res); - }); - }); - app.get('/api/channel-claims/:channelName/:channelClaimId/:page', ({ ip, originalUrl, body, params }, res) => { - const channelName = params.channelName; - let channelClaimId = params.channelClaimId; - if (channelClaimId === 'none') channelClaimId = null; - const page = params.page; - getChannelClaims(channelName, channelClaimId, page)// getChannelViewData(channelName, channelClaimId, page) - .then(data => { - if (data === NO_CHANNEL) { - return res.status(200).json({success: false, message: 'No matching channel was found'}); - } - res.status(200).json({success: true, data}); - }) - .catch(error => { - logger.error('api error getting channel contents', error); - errorHandlers.handleApiError(originalUrl, ip, error, res); - }); - }); - app.post('/api/claim-get-long-id', ({ ip, originalUrl, body, params }, res) => { + app.post('/api/claim/long-id', ({ ip, originalUrl, body, params }, res) => { logger.debug('body:', body); const channelName = body.channelName; const channelClaimId = body.channelClaimId; @@ -245,7 +228,7 @@ module.exports = (app) => { errorHandlers.handleApiError(originalUrl, ip, error, res); }); }); - app.get('/api/claim-get-data/:claimName/:claimId', ({ ip, originalUrl, body, params }, res) => { + app.get('/api/claim/data/:claimName/:claimId', ({ ip, originalUrl, body, params }, res) => { const claimName = params.claimName; let claimId = params.claimId; if (claimId === 'none') claimId = null; @@ -261,4 +244,20 @@ module.exports = (app) => { errorHandlers.handleApiError(originalUrl, ip, error, res); }); }); + // route to see if asset is available locally + app.get('/api/file/availability/:name/:claimId', ({ ip, originalUrl, params }, res) => { + const name = params.name; + const claimId = params.claimId; + let isAvailable = false; + db.File.findOne({where: {name, claimId}}) + .then(result => { + if (result) { + isAvailable = true; + } + res.status(200).json({success: true, data: isAvailable}); + }) + .catch(error => { + errorHandlers.handleApiError(originalUrl, ip, error, res); + }); + }); }; diff --git a/routes/serve-routes.js b/routes/serve-routes.js index b95c564a..796f7228 100644 --- a/routes/serve-routes.js +++ b/routes/serve-routes.js @@ -58,7 +58,7 @@ function serveAssetToClient (claimId, name, res) { .then(fileInfo => { // logger.debug('fileInfo:', fileInfo); if (fileInfo === NO_FILE) { - return res.status(307).redirect(`/api/claim-get/${name}/${claimId}`); + return res.status(307).redirect(`/api/claim/get/${name}/${claimId}`); } return serveHelpers.serveFile(fileInfo, claimId, name, res); }) diff --git a/test/end-to-end/end-to-end.tests.js b/test/end-to-end/end-to-end.tests.js index 5bcf9d8e..09290733 100644 --- a/test/end-to-end/end-to-end.tests.js +++ b/test/end-to-end/end-to-end.tests.js @@ -105,7 +105,7 @@ describe('end-to-end', function () { }); describe('publish requests', function () { - const publishUrl = '/api/claim-publish'; + const publishUrl = '/api/claim/publish'; const filePath = './test/mock-data/bird.jpeg'; const fileName = 'byrd.jpeg'; const channelName = testChannel; From 1e9e9e4344383ccdf49ae3858dd07deb9c34a43b Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 6 Feb 2018 22:28:17 -0800 Subject: [PATCH 45/96] removed css from inside AssetPreview --- public/assets/css/general.css | 18 +++++++++++++++-- react/components/AssetInfo/index.js | 2 +- react/components/AssetPreview/index.js | 20 ++++--------------- react/components/Preview/index.jsx | 2 +- .../containers/ChannelClaimsDisplay/view.jsx | 10 ++++++++-- react/containers/ShowChannel/view.jsx | 4 ++-- 6 files changed, 32 insertions(+), 24 deletions(-) diff --git a/public/assets/css/general.css b/public/assets/css/general.css index 1e6d5b86..b2005bd3 100644 --- a/public/assets/css/general.css +++ b/public/assets/css/general.css @@ -276,7 +276,7 @@ a, a:visited { vertical-align: top; } -.align-content-right { +.align-content-bottom { vertical-align: bottom; } @@ -495,7 +495,7 @@ table { padding: 1em; } -#asset-preview { +#dropzone-preview { display: block; width: 100%; } @@ -506,6 +506,20 @@ table { /* Assets */ +.asset-holder { + clear : both; + display: inline-block; + width : 31%; + padding: 0px; + margin : 1%; +} + +.asset-preview { + width : 100%; + padding: 0px; + margin : 0px +} + .asset { width: 100%; } diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 30e5b0ae..79695e0e 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -155,7 +155,7 @@ class AssetInfo extends React.Component {
}
- {this.state.showDetails ? '[less]' : '[more]'} +
); diff --git a/react/components/AssetPreview/index.js b/react/components/AssetPreview/index.js index e147a57d..0afe16d4 100644 --- a/react/components/AssetPreview/index.js +++ b/react/components/AssetPreview/index.js @@ -4,20 +4,8 @@ import { Link } from 'react-router-dom'; const AssetPreview = ({ name, claimId, fileExt, contentType }) => { const directSourceLink = `${claimId}/${name}.${fileExt}`; const showUrlLink = `${claimId}/${name}`; - const previewHolderStyle = { - clear : 'both', - display: 'inline-block', - width : '31%', - padding: '0px', - margin : '1%', - }; - const assetStyle = { - width : '100%', - padding: '0px', - margin : '0px', - }; return ( -
+
{(() => { switch (contentType) { @@ -25,15 +13,15 @@ const AssetPreview = ({ name, claimId, fileExt, contentType }) => { case 'image/jpg': case 'image/png': return ( - {name}/ + {name}/ ); case 'image/gif': return ( - {name}/ + {name}/ ); case 'video/mp4': return ( -
} diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index de79fa86..abee7a98 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -51,8 +51,8 @@ class ShowChannel extends React.Component {

channel name: {this.props.name ? this.props.name : 'loading...'}

-

full channel id: {this.props.longId ? this.props.longId : 'loading...'}

-

short channel id: {this.props.shortId ? this.props.shortId : 'loading...'}

+

full channel id: {this.props.longId ? this.props.longId : 'loading...'}

+

short channel id: {this.props.shortId ? this.props.shortId : 'loading...'}

{(this.props.name && this.props.longId) && } From dbcf4e4c46d98b10bca1e5032b3a2bb821c12d80 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 6 Feb 2018 22:54:06 -0800 Subject: [PATCH 46/96] fixed button css --- public/assets/css/general.css | 14 ++++++++ react/components/AssetInfo/index.js | 35 ++++++++++--------- react/components/ErrorPage/index.js | 3 +- react/components/ShowAssetDetails/index.js | 30 ++++++++-------- react/components/ShowAssetLite/index.js | 16 +++------ .../containers/ChannelClaimsDisplay/view.jsx | 4 +-- .../containers/PublishMetadataInputs/view.jsx | 2 +- 7 files changed, 56 insertions(+), 48 deletions(-) diff --git a/public/assets/css/general.css b/public/assets/css/general.css index b2005bd3..a5761b34 100644 --- a/public/assets/css/general.css +++ b/public/assets/css/general.css @@ -427,6 +427,20 @@ button { background-color: white; } +.button--secondary { + border: 0px; + border-bottom: 1px solid black; + padding: 0.5em; + margin: 0.5em 0.3em 0.5em 0.3em; + color: black; + background-color: white; +} + +.button--secondary:hover { + border-bottom: 1px solid #9b9b9b; + color: #4156C5; +} + .button--large{ margin: 0px; width: calc(100% - 2px); diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 79695e0e..b45d60a2 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -28,29 +28,30 @@ class AssetInfo extends React.Component { } } render () { + const { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host, shortId } = this.props; return (
- {this.props.channelName && + {channelName && } - {this.props.description && + {description &&
- {this.props.description} + {description}
}
@@ -129,21 +130,21 @@ class AssetInfo extends React.Component {
Claim Name:
- {this.props.name} + {name}
Claim Id:
- {this.props.claimId} + {claimId}
File Type:
- {this.props.contentType ? `${this.props.contentType}` : 'unknown'} + {contentType ? `${contentType}` : 'unknown'}
@@ -155,7 +156,7 @@ class AssetInfo extends React.Component {
}
- +
); diff --git a/react/components/ErrorPage/index.js b/react/components/ErrorPage/index.js index f40d348a..7852d1fb 100644 --- a/react/components/ErrorPage/index.js +++ b/react/components/ErrorPage/index.js @@ -3,11 +3,12 @@ import NavBar from 'containers/NavBar'; class ErrorPage extends React.Component { render () { + const { error } = this.props; return (
-

{this.props.error}

+

{error}

); diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index 08fa80c0..0348c443 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -6,22 +6,20 @@ import AssetDisplay from 'containers/AssetDisplay'; import AssetInfo from 'components/AssetInfo'; class ShowAssetDetails extends React.Component { - componentDidMount () { - console.log('ShowAssetDetails props', this.props); - } render () { + const { error, claimData: { title, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host }, shortId } = this.props; return (
- {this.props.error && + {error &&
-

{this.props.error}

+

{error}

} {this.props.claimData &&
- +
@@ -30,16 +28,16 @@ class ShowAssetDetails extends React.Component {
diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index 16331768..024d7184 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -5,22 +5,16 @@ import AssetDisplay from 'containers/AssetDisplay'; class ShowLite extends React.Component { render () { + const { error, claimData: { name, claimId } } = this.props; return (
- {this.props.error && -

{this.props.error}

+ {error && +

{error}

} {this.props.claimData &&
- - hosted via Spee.ch + + hosted via Spee.ch
}
diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index f54beb3e..7740b6db 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -69,10 +69,10 @@ class ChannelClaimsDisplay extends React.Component { />)}
{(this.props.currentPage > 1) && - + } {(this.props.currentPage < this.props.totalPages) && - + }
diff --git a/react/containers/PublishMetadataInputs/view.jsx b/react/containers/PublishMetadataInputs/view.jsx index 8ef2d3c5..85bcb29e 100644 --- a/react/containers/PublishMetadataInputs/view.jsx +++ b/react/containers/PublishMetadataInputs/view.jsx @@ -65,7 +65,7 @@ class PublishMetadataInputs extends React.Component {
)} - {this.props.showMetadataInputs ? '[less]' : '[more]'} +
); } From d809173b00340d10f2900b6933c158ae4e33e19a Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 08:28:43 -0800 Subject: [PATCH 47/96] updated createStore to handle browsers with no webtools --- react/containers/AssetDisplay/view.jsx | 5 ----- react/containers/ChannelClaimsDisplay/index.js | 14 +++++++------- react/index.js | 4 +++- 3 files changed, 10 insertions(+), 13 deletions(-) diff --git a/react/containers/AssetDisplay/view.jsx b/react/containers/AssetDisplay/view.jsx index f043453d..c7da2366 100644 --- a/react/containers/AssetDisplay/view.jsx +++ b/react/containers/AssetDisplay/view.jsx @@ -6,11 +6,6 @@ class AssetDisplay extends React.Component { componentDidMount () { this.props.onFileRequest(this.props.claimData.name, this.props.claimData.claimId); } - componentWillReceiveProps (nextProps) { - // if (nextProps.name !== this.props.name && nextProps.claimId !== this.props.claimId) { - // this.props.onCheckServerForFile(nextProps.name, nextProps.claimId); - // } - } render () { const status = this.props.status; const error = this.props.error; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 0f88e9b3..b2d9da9a 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -2,14 +2,14 @@ import { connect } from 'react-redux'; import { updateChannelClaimsData } from 'actions/show'; import View from './view'; -const mapStateToProps = ({ show }) => { +const mapStateToProps = ({ show : { showChannel: { channelData, channelClaimsData } } }) => { return { - name : show.showChannel.channelData.name, - longId : show.showChannel.channelData.longId, - claims : show.showChannel.channelClaimsData.claims, - currentPage: show.showChannel.channelClaimsData.currentPage, - totalPages : show.showChannel.channelClaimsData.totalPages, - totalClaims: show.showChannel.channelClaimsData.totalClaims, + name : channelData.name, + longId : channelData.longId, + claims : channelClaimsData.claims, + currentPage: channelClaimsData.currentPage, + totalPages : channelClaimsData.totalPages, + totalClaims: channelClaimsData.totalClaims, }; }; diff --git a/react/index.js b/react/index.js index c5284dd0..239d0072 100644 --- a/react/index.js +++ b/react/index.js @@ -9,9 +9,11 @@ import Root from './root'; const sagaMiddleware = createSagaMiddleware(); const middleware = applyMiddleware(sagaMiddleware); +const enhancer = window.__REDUX_DEVTOOLS_EXTENSION__ ? compose(middleware, window.__REDUX_DEVTOOLS_EXTENSION__()) : middleware; + let store = createStore( Reducer, - compose(middleware, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()), + enhancer, ); sagaMiddleware.run(rootSaga); From 2744045c5cf7743cf18b641eec0387fb8a863c5e Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 10:52:09 -0800 Subject: [PATCH 48/96] connected show asset components directly to redux store --- react/actions/show.js | 22 +- .../AssetDisplay/index.js | 4 +- .../AssetDisplay/view.jsx | 6 +- react/components/AssetInfo/index.js | 192 ++---------------- react/components/AssetInfo/view.jsx | 165 +++++++++++++++ react/components/AssetTitle/index.js | 15 +- react/components/AssetTitle/view.jsx | 11 + react/components/ShowAssetDetails/index.js | 61 +----- react/components/ShowAssetDetails/view.jsx | 39 ++++ react/components/ShowAssetLite/index.js | 35 +--- react/components/ShowAssetLite/view.jsx | 21 ++ react/constants/show_action_types.js | 8 +- .../containers/ChannelClaimsDisplay/view.jsx | 4 +- react/containers/ShowAsset/index.js | 11 +- react/containers/ShowAsset/view.jsx | 34 ++-- react/containers/ShowPage/index.js | 2 +- react/reducers/show.js | 46 +++-- react/sagas/show.js | 16 +- routes/api-routes.js | 2 +- 19 files changed, 368 insertions(+), 326 deletions(-) rename react/{containers => components}/AssetDisplay/index.js (84%) rename react/{containers => components}/AssetDisplay/view.jsx (91%) create mode 100644 react/components/AssetInfo/view.jsx create mode 100644 react/components/AssetTitle/view.jsx create mode 100644 react/components/ShowAssetDetails/view.jsx create mode 100644 react/components/ShowAssetLite/view.jsx diff --git a/react/actions/show.js b/react/actions/show.js index 67bbecdd..db7e0794 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -2,7 +2,7 @@ import * as actions from 'constants/show_action_types'; export function updateRequestWithChannelRequest (name, id) { return { - type: actions.REQUEST_UPDATE_CHANNEL, + type: actions.REQUEST_CHANNEL_UPDATE, data: { name, id, @@ -12,7 +12,7 @@ export function updateRequestWithChannelRequest (name, id) { export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) { return { - type: actions.REQUEST_UPDATE_CLAIM, + type: actions.REQUEST_CLAIM_UPDATE, data: { name, modifier: { @@ -27,6 +27,13 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId, }; }; +export function updateRequestError (error) { + return { + type: actions.REQUEST_ERROR_UPDATE, + data: error, + }; +} + export function updateChannelData (name, longId, shortId) { return { type: actions.CHANNEL_DATA_UPDATE, @@ -70,9 +77,9 @@ export function fileRequested (name, claimId) { }; }; -export function updateFileIsAvailable (status) { +export function updateFileAvailability (status) { return { - type: actions.FILE_IS_AVAILABLE_UPDATE, + type: actions.FILE_AVAILABILITY_UPDATE, data: status, }; }; @@ -83,3 +90,10 @@ export function updateShowAssetError (error) { data: error, }; }; + +export function updateDisplayAssetError (error) { + return { + type: actions.DISPLAY_ASSET_ERROR, + data: error, + }; +}; diff --git a/react/containers/AssetDisplay/index.js b/react/components/AssetDisplay/index.js similarity index 84% rename from react/containers/AssetDisplay/index.js rename to react/components/AssetDisplay/index.js index 8b807cdc..1250c997 100644 --- a/react/containers/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -4,8 +4,8 @@ import { fileRequested } from 'actions/show'; const mapStateToProps = ({ show }) => { return { - error : show.showAsset.error, - status : show.showAsset.status, + error : show.displayAsset.error, + status : show.displayAsset.status, claimData: show.showAsset.claimData, }; }; diff --git a/react/containers/AssetDisplay/view.jsx b/react/components/AssetDisplay/view.jsx similarity index 91% rename from react/containers/AssetDisplay/view.jsx rename to react/components/AssetDisplay/view.jsx index c7da2366..fa719ac9 100644 --- a/react/containers/AssetDisplay/view.jsx +++ b/react/components/AssetDisplay/view.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import ProgressBar from 'components/ProgressBar/index'; +import ProgressBar from 'components/ProgressBar'; import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from 'constants/asset_display_states'; class AssetDisplay extends React.Component { @@ -7,9 +7,7 @@ class AssetDisplay extends React.Component { this.props.onFileRequest(this.props.claimData.name, this.props.claimData.claimId); } render () { - const status = this.props.status; - const error = this.props.error; - const { name, claimId, contentType, fileExt, thumbnail } = this.props.claimData; + const { status, error, claimData: { name, claimId, contentType, fileExt, thumbnail } } = this.props; return (
{(status === LOCAL_CHECK) && diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index b45d60a2..a4cd0814 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -1,179 +1,19 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; +import { connect } from 'react-redux'; +import View from './view'; -class AssetInfo extends React.Component { - constructor (props) { - super(props); - this.state = { - showDetails: false, - }; - this.toggleDetails = this.toggleDetails.bind(this); - this.copyToClipboard = this.copyToClipboard.bind(this); - } - toggleDetails () { - if (this.state.showDetails) { - return this.setState({showDetails: false}); - } - this.setState({showDetails: true}); - } - copyToClipboard (event) { - var elementToCopy = event.target.dataset.elementtocopy; - var element = document.getElementById(elementToCopy); - element.select(); - try { - document.execCommand('copy'); - } catch (err) { - this.setState({error: 'Oops, unable to copy'}); - } - } - render () { - const { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host, shortId } = this.props; - return ( -
- {channelName && -
-
- Channel: -
- -
- } - - {description && -
- {description} -
- } - -
- -
-
- Embed: -
-
-
-
- - {(contentType === 'video/mp4') ? ( - `}/> - ) : ( - `} - /> - )} -
-
-
- -
-
-
-
-
- -
-
-
- Share: -
-
- -
-
-
- - { this.state.showDetails && -
-
-
-
- Claim Name: -
- {name} -
-
-
-
- Claim Id: -
- {claimId} -
-
-
-
- File Type: -
- {contentType ? `${contentType}` : 'unknown'} -
-
-
-
-
- Report -
-
-
- } -
- -
-
- ); - } +const mapStateToProps = ({ show }) => { + return { + shortId : show.showAsset.shortId, + channelName : show.showAsset.claimData.channelName, + certificateId: show.showAsset.claimData.certificateId, + description : show.showAsset.claimData.description, + name : show.showAsset.claimData.name, + claimId : show.showAsset.claimData.claimId, + fileExt : show.showAsset.claimData.fileExt, + contentType : show.showAsset.claimData.contentType, + thumbnail : show.showAsset.claimData.thumbnail, + host : show.showAsset.claimData.host, + }; }; -AssetInfo.propTypes = { - channelName : PropTypes.string, - certificateId: PropTypes.string, - description : PropTypes.string, - shortId : PropTypes.string.isRequired, - name : PropTypes.string.isRequired, - claimId : PropTypes.string.isRequired, - contentType : PropTypes.string.isRequired, - fileExt : PropTypes.string.isRequired, - thumbnail : PropTypes.string, - host : PropTypes.string.isRequired, -}; - -export default AssetInfo; +export default connect(mapStateToProps, null)(View); diff --git a/react/components/AssetInfo/view.jsx b/react/components/AssetInfo/view.jsx new file mode 100644 index 00000000..9d53637d --- /dev/null +++ b/react/components/AssetInfo/view.jsx @@ -0,0 +1,165 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +class AssetInfo extends React.Component { + constructor (props) { + super(props); + this.state = { + showDetails: false, + }; + this.toggleDetails = this.toggleDetails.bind(this); + this.copyToClipboard = this.copyToClipboard.bind(this); + } + toggleDetails () { + if (this.state.showDetails) { + return this.setState({showDetails: false}); + } + this.setState({showDetails: true}); + } + copyToClipboard (event) { + var elementToCopy = event.target.dataset.elementtocopy; + var element = document.getElementById(elementToCopy); + element.select(); + try { + document.execCommand('copy'); + } catch (err) { + this.setState({error: 'Oops, unable to copy'}); + } + } + render () { + const { shortId, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } = this.props; + return ( +
+ {channelName && +
+
+ Channel: +
+ +
+ } + + {description && +
+ {description} +
+ } + +
+ +
+
+ Embed: +
+
+
+
+ + {(contentType === 'video/mp4') ? ( + `}/> + ) : ( + `} + /> + )} +
+
+
+ +
+
+
+
+
+ +
+
+
+ Share: +
+
+ +
+
+
+ + { this.state.showDetails && +
+
+
+
+ Claim Name: +
+ {name} +
+
+
+
+ Claim Id: +
+ {claimId} +
+
+
+
+ File Type: +
+ {contentType ? `${contentType}` : 'unknown'} +
+
+
+
+
+ Report +
+
+
+ } +
+ +
+
+ ); + } +}; + +export default AssetInfo; diff --git a/react/components/AssetTitle/index.js b/react/components/AssetTitle/index.js index f943a940..970bbe6f 100644 --- a/react/components/AssetTitle/index.js +++ b/react/components/AssetTitle/index.js @@ -1,11 +1,10 @@ -import React from 'react'; +import { connect } from 'react-redux'; +import View from './view'; -const AssetTitle = ({title}) => { - return ( -
- {title} -
- ); +const mapStateToProps = ({ show }) => { + return { + title: show.showAsset.claimData.title, + }; }; -export default AssetTitle; +export default connect(mapStateToProps, null)(View); diff --git a/react/components/AssetTitle/view.jsx b/react/components/AssetTitle/view.jsx new file mode 100644 index 00000000..f943a940 --- /dev/null +++ b/react/components/AssetTitle/view.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const AssetTitle = ({title}) => { + return ( +
+ {title} +
+ ); +}; + +export default AssetTitle; diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index 0348c443..9d3f8eb8 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -1,57 +1,10 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import NavBar from 'containers/NavBar'; -import AssetTitle from 'components/AssetTitle'; -import AssetDisplay from 'containers/AssetDisplay'; -import AssetInfo from 'components/AssetInfo'; +import { connect } from 'react-redux'; +import View from './view'; -class ShowAssetDetails extends React.Component { - render () { - const { error, claimData: { title, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host }, shortId } = this.props; - return ( -
- - {error && -
-

{error}

-
- } - {this.props.claimData && -
-
- -
-
-
- -
-
-
- -
-
-
- } -
- ); - } +const mapStateToProps = ({ show }) => { + return { + claimData: show.showAsset.claimData, + }; }; -ShowAssetDetails.propTypes = { - error : PropTypes.string, - claimData: PropTypes.object.isRequired, - shortId : PropTypes.string.isRequired, -}; - -export default ShowAssetDetails; +export default connect(mapStateToProps, null)(View); diff --git a/react/components/ShowAssetDetails/view.jsx b/react/components/ShowAssetDetails/view.jsx new file mode 100644 index 00000000..c1bf7e6a --- /dev/null +++ b/react/components/ShowAssetDetails/view.jsx @@ -0,0 +1,39 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import NavBar from 'containers/NavBar'; +import AssetTitle from 'components/AssetTitle'; +import AssetDisplay from 'components/AssetDisplay'; +import AssetInfo from 'components/AssetInfo'; + +class ShowAssetDetails extends React.Component { + render () { + const { claimData } = this.props; + return ( +
+ + {claimData && +
+
+ +
+
+
+ +
+
+
+ +
+
+
+ } +
+ ); + } +}; + +ShowAssetDetails.propTypes = { + error: PropTypes.string, +}; + +export default ShowAssetDetails; diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index 024d7184..b47c7407 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -1,30 +1,11 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; -import AssetDisplay from 'containers/AssetDisplay'; +import { connect } from 'react-redux'; +import View from './view'; -class ShowLite extends React.Component { - render () { - const { error, claimData: { name, claimId } } = this.props; - return ( -
- {error && -

{error}

- } - {this.props.claimData && -
- - hosted via Spee.ch -
- } -
- ); - } +const mapStateToProps = ({ show }) => { + return { + name : show.showAsset.claimData.name, + claimId: show.showAsset.claimData.claimId, + }; }; -ShowLite.propTypes = { - error : PropTypes.string, - claimData: PropTypes.object.isRequired, -}; - -export default ShowLite; +export default connect(mapStateToProps, null)(View); diff --git a/react/components/ShowAssetLite/view.jsx b/react/components/ShowAssetLite/view.jsx new file mode 100644 index 00000000..74dc1beb --- /dev/null +++ b/react/components/ShowAssetLite/view.jsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import AssetDisplay from 'components/AssetDisplay'; + +class ShowLite extends React.Component { + render () { + const { name, claimId } = this.props; + return ( +
+ { (name && claimId) && +
+ + hosted via Spee.ch +
+ } +
+ ); + } +}; + +export default ShowLite; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 7ade6448..b9078f96 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,8 +1,10 @@ -export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL'; -export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM'; +export const REQUEST_CHANNEL_UPDATE = 'REQUEST_CHANNEL_UPDATE'; +export const REQUEST_CLAIM_UPDATE = 'REQUEST_CLAIM_UPDATE'; +export const REQUEST_ERROR_UPDATE = 'REQUEST_ERROR_UPDATE'; export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE'; export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE'; export const FILE_REQUESTED = 'FILE_REQUESTED'; -export const FILE_IS_AVAILABLE_UPDATE = 'FILE_IS_AVAILABLE_UPDATE'; +export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE'; export const SHOW_ASSET_ERROR = 'SHOW_ASSET_ERROR'; +export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR'; diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index 7740b6db..571bbd15 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -1,5 +1,5 @@ -import React from 'react/index'; -import AssetPreview from 'components/AssetPreview/index'; +import React from 'react'; +import AssetPreview from 'components/AssetPreview'; import request from 'utils/request'; class ChannelClaimsDisplay extends React.Component { diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index eacf3794..c8949a6b 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -1,24 +1,29 @@ import { connect } from 'react-redux'; import View from './view'; -import { updateAssetClaimData } from 'actions/show'; +import { updateAssetClaimData, updateShowAssetError } from 'actions/show'; const mapStateToProps = ({ show }) => { return { modifier : show.assetRequest.modifier, - claim : show.assetRequest.name, + name : show.assetRequest.name, extension: show.assetRequest.extension, + error : show.showAsset.error, claimData: show.showAsset.claimData, - shortId : show.showAsset.shortId, }; }; const mapDispatchToProps = dispatch => { return { + onShowAssetError: (error) => { + dispatch(updateShowAssetError(error)); + }, onAssetClaimDataUpdate: (claimData, shortId) => { dispatch(updateAssetClaimData(claimData, shortId)); + dispatch(updateShowAssetError(null)); // clear any errors }, onAssetClaimDataClear: () => { dispatch(updateAssetClaimData(null, null)); + dispatch(updateShowAssetError(null)); // clear any errors }, }; }; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 3926200d..ff52c6bd 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -6,17 +6,11 @@ import request from 'utils/request'; class ShowAsset extends React.Component { constructor (props) { super(props); - this.state = { - error: null, - }; this.getLongClaimId = this.getLongClaimId.bind(this); this.getClaimData = this.getClaimData.bind(this); } componentDidMount () { - console.log('ShowAsset did mount'); - console.log('ShowAsset props', this.props); - const modifier = this.props.modifier; - const name = this.props.claim; + const { name, modifier } = this.props; // create request params let body = {}; if (modifier) { @@ -41,11 +35,10 @@ class ShowAsset extends React.Component { return Promise.all([this.getShortClaimId(claimLongId, name), this.getClaimData(claimLongId, name)]); }) .then(([shortId, claimData]) => { - this.setState({error: null}); // note: move this to redux level this.props.onAssetClaimDataUpdate(claimData, shortId); }) .catch(error => { - this.setState({error}); + this.props.onShowAssetError(error); }); } getLongClaimId (params) { @@ -101,26 +94,25 @@ class ShowAsset extends React.Component { this.props.onAssetClaimDataClear(); } render () { - if (this.props.claimData) { - if (this.props.extension) { + const { error, claimData, extension } = this.props; + if (error) { + return ( +

{error}

+ ); + } + if (claimData) { + if (extension) { return ( - + ); } else { return ( - + ); } }; return ( -
+
); } }; diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js index c27ab8e3..857bc56c 100644 --- a/react/containers/ShowPage/index.js +++ b/react/containers/ShowPage/index.js @@ -4,7 +4,7 @@ import View from './view'; const mapStateToProps = ({ show }) => { return { - requestType: show.requestType, + requestType: show.request.type, }; }; diff --git a/react/reducers/show.js b/react/reducers/show.js index d47cf666..dc5dd915 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -3,7 +3,10 @@ import { CHANNEL, ASSET } from 'constants/show_request_types'; import { LOCAL_CHECK, ERROR } from 'constants/asset_display_states'; const initialState = { - requestType : null, + request: { + error: null, + type : null, + }, channelRequest: { name: null, id : null, @@ -34,10 +37,13 @@ const initialState = { }, showAsset: { error : null, - status : LOCAL_CHECK, claimData: null, shortId : null, }, + displayAsset: { + error : null, + status: LOCAL_CHECK, + }, }; /* @@ -46,16 +52,26 @@ Reducers describe how the application's state changes in response to actions export default function (state = initialState, action) { switch (action.type) { - case actions.REQUEST_UPDATE_CHANNEL: + case actions.REQUEST_CHANNEL_UPDATE: return Object.assign({}, state, { - requestType : CHANNEL, + request: Object.assign({}, state.request, { + type: CHANNEL, + }), channelRequest: action.data, }); - case actions.REQUEST_UPDATE_CLAIM: + case actions.REQUEST_CLAIM_UPDATE: return Object.assign({}, state, { - requestType : ASSET, + request: Object.assign({}, state.request, { + type: ASSET, + }), assetRequest: action.data, }); + case actions.REQUEST_ERROR_UPDATE: + return Object.assign({}, state, { + request: Object.assign({}, state.request, { + error: action.data, + }), + }); case actions.CHANNEL_DATA_UPDATE: return Object.assign({}, state, { showChannel: Object.assign({}, state.showChannel, { @@ -75,15 +91,21 @@ export default function (state = initialState, action) { shortId : action.data.shortId, }), }); - case actions.FILE_IS_AVAILABLE_UPDATE: - return Object.assign({}, state, { - showAsset: Object.assign({}, state.showAsset, { - status: action.data, - }), - }); case actions.SHOW_ASSET_ERROR: return Object.assign({}, state, { showAsset: Object.assign({}, state.showAsset, { + error: action.data, + }), + }); + case actions.FILE_AVAILABILITY_UPDATE: + return Object.assign({}, state, { + displayAsset: Object.assign({}, state.displayAsset, { + status: action.data, + }), + }); + case actions.DISPLAY_ASSET_ERROR: + return Object.assign({}, state, { + displayAsset: Object.assign({}, state.displayAsset, { error : action.data, status: ERROR, }), diff --git a/react/sagas/show.js b/react/sagas/show.js index 1a591b67..d5798ff6 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { updateFileIsAvailable, updateShowAssetError } from 'actions/show'; +import { updateFileAvailability, updateDisplayAssetError } from 'actions/show'; import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; @@ -12,27 +12,27 @@ function* retriveFile (action) { try { ({ success, message, data: isAvailable } = yield call(checkFileAvailability, name, claimId)); } catch (error) { - return yield put(updateShowAssetError(error.message)); + return yield put(updateDisplayAssetError(error.message)); }; if (success) { if (isAvailable) { - return yield put(updateFileIsAvailable(AVAILABLE)); + return yield put(updateFileAvailability(AVAILABLE)); } - yield put(updateFileIsAvailable(UNAVAILABLE)); + yield put(updateFileAvailability(UNAVAILABLE)); } else { - yield put(updateShowAssetError(message)); + yield put(updateDisplayAssetError(message)); } // initiate get request for the file try { ({ success, message } = yield call(triggerClaimGet, name, claimId)); } catch (error) { - return yield put(updateShowAssetError(error.message)); + return yield put(updateDisplayAssetError(error.message)); }; if (success) { console.log('/api/glaim-get response:', message); - yield put(updateFileIsAvailable(AVAILABLE)); + yield put(updateFileAvailability(AVAILABLE)); } else { - yield put(updateShowAssetError(message)); + yield put(updateDisplayAssetError(message)); } } diff --git a/routes/api-routes.js b/routes/api-routes.js index bd596014..47610188 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -207,7 +207,7 @@ module.exports = (app) => { res.status(200).json({success: false, message: error.message}); }); }); - app.post('/api/claim/long-id', ({ ip, originalUrl, body, params }, res) => { + app.get('/api/claim/long-id', ({ ip, originalUrl, body, params }, res) => { logger.debug('body:', body); const channelName = body.channelName; const channelClaimId = body.channelClaimId; From ffb4466fcf9972a94b46f70dd967522e7763bdc4 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 11:30:39 -0800 Subject: [PATCH 49/96] moved request error out of show page state --- react/actions/show.js | 27 ++++++++++------ react/components/ErrorPage/index.js | 6 ++-- react/constants/show_action_types.js | 6 +++- react/containers/ShowAsset/view.jsx | 4 +-- react/containers/ShowChannel/index.js | 7 ++++- react/containers/ShowChannel/view.jsx | 44 +++++++++++---------------- react/containers/ShowPage/index.js | 6 +++- react/containers/ShowPage/view.jsx | 26 ++++++---------- react/reducers/show.js | 39 ++++++++++++++++-------- 9 files changed, 92 insertions(+), 73 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index db7e0794..6e1c65df 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -1,5 +1,12 @@ import * as actions from 'constants/show_action_types'; +export function updateRequestError (error) { + return { + type: actions.REQUEST_ERROR_UPDATE, + data: error, + }; +} + export function updateRequestWithChannelRequest (name, id) { return { type: actions.REQUEST_CHANNEL_UPDATE, @@ -27,12 +34,12 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId, }; }; -export function updateRequestError (error) { +export function updateShowChannelError (error) { return { - type: actions.REQUEST_ERROR_UPDATE, + type: actions.SHOW_CHANNEL_ERROR, data: error, }; -} +}; export function updateChannelData (name, longId, shortId) { return { @@ -57,6 +64,13 @@ export function updateChannelClaimsData (claims, currentPage, totalPages, totalC }; }; +export function updateShowAssetError (error) { + return { + type: actions.SHOW_ASSET_ERROR, + data: error, + }; +}; + export function updateAssetClaimData (data, shortId) { return { type: actions.ASSET_CLAIM_DATA_UPDATE, @@ -84,13 +98,6 @@ export function updateFileAvailability (status) { }; }; -export function updateShowAssetError (error) { - return { - type: actions.SHOW_ASSET_ERROR, - data: error, - }; -}; - export function updateDisplayAssetError (error) { return { type: actions.DISPLAY_ASSET_ERROR, diff --git a/react/components/ErrorPage/index.js b/react/components/ErrorPage/index.js index 7852d1fb..3e148105 100644 --- a/react/components/ErrorPage/index.js +++ b/react/components/ErrorPage/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import NavBar from 'containers/NavBar'; class ErrorPage extends React.Component { @@ -15,7 +16,8 @@ class ErrorPage extends React.Component { } }; -// required props -// error +ErrorPage.propTypes = { + error: PropTypes.string.isRequired, +} export default ErrorPage; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index b9078f96..788aaa4f 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,10 +1,14 @@ export const REQUEST_CHANNEL_UPDATE = 'REQUEST_CHANNEL_UPDATE'; export const REQUEST_CLAIM_UPDATE = 'REQUEST_CLAIM_UPDATE'; export const REQUEST_ERROR_UPDATE = 'REQUEST_ERROR_UPDATE'; + +export const SHOW_CHANNEL_ERROR = 'SHOW_CHANNEL_ERROR'; export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE'; + +export const SHOW_ASSET_ERROR = 'SHOW_ASSET_ERROR'; export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE'; + export const FILE_REQUESTED = 'FILE_REQUESTED'; export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE'; -export const SHOW_ASSET_ERROR = 'SHOW_ASSET_ERROR'; export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR'; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index ff52c6bd..97136a55 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import ErrorPage from 'components/ErrorPage'; import ShowAssetLite from 'components/ShowAssetLite'; import ShowAssetDetails from 'components/ShowAssetDetails'; import request from 'utils/request'; @@ -43,7 +44,6 @@ class ShowAsset extends React.Component { } getLongClaimId (params) { const url = `/api/claim/long-id`; - console.log('params:', params); return new Promise((resolve, reject) => { request(url, params) .then(({ success, message, data }) => { @@ -97,7 +97,7 @@ class ShowAsset extends React.Component { const { error, claimData, extension } = this.props; if (error) { return ( -

{error}

+ ); } if (claimData) { diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 52ae3ab9..17713cb9 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,11 +1,12 @@ import { connect } from 'react-redux'; -import {updateChannelData} from 'actions/show'; +import {updateChannelData, updateShowChannelError} from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { return { requestName: show.channelRequest.name, requestId : show.channelRequest.id, + error : show.showChannel.error, name : show.showChannel.channelData.name, shortId : show.showChannel.channelData.shortId, longId : show.showChannel.channelData.longId, @@ -14,8 +15,12 @@ const mapStateToProps = ({ show }) => { const mapDispatchToProps = dispatch => { return { + onShowChannelError: (error) => { + dispatch(updateShowChannelError(error)); + }, onChannelDataUpdate: (name, longId, shortId) => { dispatch(updateChannelData(name, longId, shortId)); + dispatch(updateShowChannelError(null)); // clear any errors }, onChannelDataClear: () => { dispatch(updateChannelData(null, null, null)); diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index abee7a98..d1d31f0f 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -1,15 +1,10 @@ import React from 'react'; +import ErrorPage from 'components/ErrorPage'; import NavBar from 'containers/NavBar'; import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; import request from 'utils/request'; class ShowChannel extends React.Component { - constructor (props) { - super(props); - this.state = { - error: null, - }; - } componentDidMount () { this.getAndStoreChannelData(this.props.requestName, this.props.requestId); } @@ -23,42 +18,39 @@ class ShowChannel extends React.Component { const url = `/api/channel/data/${name}/${id}`; return request(url) .then(({ success, message, data }) => { - console.log('api/channel-data response:', data); + console.log('api/channel/data/ response:', data); if (!success) { - return this.setState({error: message}); + return this.props.onShowChannelError(message); } - this.setState({error: null}); // note: store this error at app level also this.props.onChannelDataUpdate(data.channelName, data.longChannelClaimId, data.shortChannelClaimId); }) .catch((error) => { - this.setState({error: error.message}); + return this.props.onShowChannelError(error.message); }); } componentWillUnmount () { this.props.onChannelDataClear(); } render () { + const { error, name, longId, shortId } = this.props; + if (error) { + return ( + + ); + }; return (
- {this.state.error ? ( -
-
-

{this.state.error}

-
+
+
+

channel name: {name ? name : 'loading...'}

+

full channel id: {longId ? longId : 'loading...'}

+

short channel id: {shortId ? shortId : 'loading...'}

- ) : ( -
-
-

channel name: {this.props.name ? this.props.name : 'loading...'}

-

full channel id: {this.props.longId ? this.props.longId : 'loading...'}

-

short channel id: {this.props.shortId ? this.props.shortId : 'loading...'}

-
-
- {(this.props.name && this.props.longId) && } -
+
+ {(name && longId) && }
- )} +
); } diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js index 857bc56c..405b8244 100644 --- a/react/containers/ShowPage/index.js +++ b/react/containers/ShowPage/index.js @@ -1,15 +1,19 @@ import { connect } from 'react-redux'; -import { updateRequestWithChannelRequest, updateRequestWithAssetRequest } from 'actions/show'; +import { updateRequestError, updateRequestWithChannelRequest, updateRequestWithAssetRequest } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { return { + error : show.request.error, requestType: show.request.type, }; }; const mapDispatchToProps = dispatch => { return { + onRequestError: (error) => { + dispatch(updateRequestError(error)); + }, onChannelRequest: (name, id) => { dispatch(updateRequestWithChannelRequest(name, id)); }, diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index ce41aab3..bbfb7502 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -9,24 +9,17 @@ import { CHANNEL, ASSET } from 'constants/show_request_types'; class ShowPage extends React.Component { constructor (props) { super(props); - this.state = { - error: null, - }; this.parseUrlAndUpdateState = this.parseUrlAndUpdateState.bind(this); this.parseAndUpdateIdentifierAndClaim = this.parseAndUpdateIdentifierAndClaim.bind(this); this.parseAndUpdateClaimOnly = this.parseAndUpdateClaimOnly.bind(this); } componentDidMount () { - console.log('ShowPage did mount'); - const identifier = this.props.match.params.identifier; - const claim = this.props.match.params.claim; + const { identifier, claim } = this.props.match.params; this.parseUrlAndUpdateState(identifier, claim); } componentWillReceiveProps (nextProps) { if (nextProps.match.params !== this.props.match.params) { - console.log('ShowPage received new params props'); - const identifier = nextProps.match.params.identifier; - const claim = nextProps.match.params.claim; + const { identifier, claim } = nextProps.match.params; this.parseUrlAndUpdateState(identifier, claim); } } @@ -45,7 +38,7 @@ class ShowPage extends React.Component { ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(modifier)); ({ claimName, extension } = lbryUri.parseClaim(claim)); } catch (error) { - return this.setState({error: error.message}); + return this.props.onRequestError(error.message); } // update the store if (isChannel) { @@ -61,7 +54,7 @@ class ShowPage extends React.Component { try { ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(claim)); } catch (error) { - return this.setState({error: error.message}); + return this.props.onRequestError(error.message); } // return early if this request is for a channel if (isChannel) { @@ -72,19 +65,18 @@ class ShowPage extends React.Component { try { ({claimName, extension} = lbryUri.parseClaim(claim)); } catch (error) { - return this.setState({error: error.message}); + return this.props.onRequestError(error.message); } this.props.onAssetRequest(claimName, null, null, null, extension); } render () { - console.log('rendering ShowPage'); - console.log('ShowPage props', this.props); - if (this.state.error) { + const { error, requestType } = this.props; + if (error) { return ( - + ); } - switch (this.props.requestType) { + switch (requestType) { case CHANNEL: return ; case ASSET: diff --git a/react/reducers/show.js b/react/reducers/show.js index dc5dd915..66cf5f21 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -23,6 +23,7 @@ const initialState = { extension: null, }, showChannel: { + error : null, channelData: { name : null, shortId: null, @@ -52,23 +53,33 @@ Reducers describe how the application's state changes in response to actions export default function (state = initialState, action) { switch (action.type) { - case actions.REQUEST_CHANNEL_UPDATE: + // request cases + case actions.REQUEST_ERROR_UPDATE: return Object.assign({}, state, { request: Object.assign({}, state.request, { - type: CHANNEL, + error: action.data, }), + }); + case actions.REQUEST_CHANNEL_UPDATE: + return Object.assign({}, state, { + request: { + type : CHANNEL, + error: null, + }, channelRequest: action.data, }); case actions.REQUEST_CLAIM_UPDATE: return Object.assign({}, state, { - request: Object.assign({}, state.request, { - type: ASSET, - }), + request: { + type : ASSET, + error: null, + }, assetRequest: action.data, }); - case actions.REQUEST_ERROR_UPDATE: + // show channel cases + case actions.SHOW_CHANNEL_ERROR: return Object.assign({}, state, { - request: Object.assign({}, state.request, { + showChannel: Object.assign({}, state.showAsset, { error: action.data, }), }); @@ -84,6 +95,13 @@ export default function (state = initialState, action) { channelClaimsData: action.data, }), }); + // show asset cases + case actions.SHOW_ASSET_ERROR: + return Object.assign({}, state, { + showAsset: Object.assign({}, state.showAsset, { + error: action.data, + }), + }); case actions.ASSET_CLAIM_DATA_UPDATE: return Object.assign({}, state, { showAsset: Object.assign({}, state.showAsset, { @@ -91,12 +109,7 @@ export default function (state = initialState, action) { shortId : action.data.shortId, }), }); - case actions.SHOW_ASSET_ERROR: - return Object.assign({}, state, { - showAsset: Object.assign({}, state.showAsset, { - error: action.data, - }), - }); + // display asset cases case actions.FILE_AVAILABILITY_UPDATE: return Object.assign({}, state, { displayAsset: Object.assign({}, state.displayAsset, { From 22103081ccbf2c0b008d0260339ed6152285ebd2 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 11:36:13 -0800 Subject: [PATCH 50/96] fixed typo in show channel error reducer --- react/reducers/show.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/react/reducers/show.js b/react/reducers/show.js index 66cf5f21..781bda61 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -45,6 +45,8 @@ const initialState = { error : null, status: LOCAL_CHECK, }, + viewedChannels: [], + viewedClaims : [], }; /* @@ -79,7 +81,7 @@ export default function (state = initialState, action) { // show channel cases case actions.SHOW_CHANNEL_ERROR: return Object.assign({}, state, { - showChannel: Object.assign({}, state.showAsset, { + showChannel: Object.assign({}, state.showChannel, { error: action.data, }), }); From 6c10eeef71bb5a7c28aa53d2d97b15df8c2f4907 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 13:26:07 -0800 Subject: [PATCH 51/96] moved newAssetRequest into store --- react/actions/show.js | 23 +++++++ react/api/AssetApi.js | 26 ++++++++ react/constants/show_action_types.js | 5 ++ react/containers/ShowAsset/index.js | 15 +++-- react/containers/ShowAsset/view.jsx | 99 +++++++--------------------- react/reducers/show.js | 42 +++++++++++- react/sagas/index.js | 3 +- react/sagas/show.js | 65 +++++++++++++++++- 8 files changed, 192 insertions(+), 86 deletions(-) create mode 100644 react/api/AssetApi.js diff --git a/react/actions/show.js b/react/actions/show.js index 6e1c65df..9e6ba771 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -104,3 +104,26 @@ export function updateDisplayAssetError (error) { data: error, }; }; + +// new + +export function newAssetRequest (id, name, modifier) { + return { + type: actions.NEW_ASSET_REQUEST, + data: { id, name, modifier }, + }; +}; + +export function addAssetRequest (id, error, claimId) { + return { + type: actions.ASSET_REQUEST_ADD, + data: { id, error, claimId }, + }; +}; + +// export function addAsset (error, name, claimId, claimData, shortId, display) { +// return { +// type: actions.ASSET_ADD, +// data: { error, name, claimId, claimData, shortId, display }, +// }; +// }; diff --git a/react/api/AssetApi.js b/react/api/AssetApi.js new file mode 100644 index 00000000..3603a94b --- /dev/null +++ b/react/api/AssetApi.js @@ -0,0 +1,26 @@ +import Request from 'utils/request'; + +export function getLongClaimId (name, modifier) { + let body = {}; + // create request params + if (modifier) { + if (modifier.id) { + body['claimId'] = modifier.id; + } else { + body['channelName'] = modifier.channel.name; + body['channelClaimId'] = modifier.channel.id; + } + } + body['claimName'] = name; + const params = { + method : 'POST', + headers: new Headers({ + 'Content-Type': 'application/json', + }), + body: JSON.stringify(body), + } + // crate url + const url = `/api/claim/long-id`; + // return the request promise + return Request(url, params); +} diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 788aaa4f..fb6ae64a 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -12,3 +12,8 @@ export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE'; export const FILE_REQUESTED = 'FILE_REQUESTED'; export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE'; export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR'; + +/ new +export const NEW_ASSET_REQUEST = 'NEW_ASSET_REQUEST'; +export const ASSET_REQUEST_ADD = 'ASSET_REQUEST_ADD'; +export const ASSET_ADD = 'ASSET_ADD'; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index c8949a6b..ddcfdf06 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -1,12 +1,14 @@ import { connect } from 'react-redux'; import View from './view'; -import { updateAssetClaimData, updateShowAssetError } from 'actions/show'; +import { newAssetRequest, updateAssetClaimData, updateShowAssetError } from 'actions/show'; const mapStateToProps = ({ show }) => { return { - modifier : show.assetRequest.modifier, - name : show.assetRequest.name, - extension: show.assetRequest.extension, + // new + request : show.assetRequest, + assetRequests: show.assetRequests, + extension : show.assetRequest.extension, + // old error : show.showAsset.error, claimData: show.showAsset.claimData, }; @@ -14,6 +16,11 @@ const mapStateToProps = ({ show }) => { const mapDispatchToProps = dispatch => { return { + // new + onNewAssetRequest (name, modifier) { + dispatch(newAssetRequest(name, modifier)); + }, + // old onShowAssetError: (error) => { dispatch(updateShowAssetError(error)); }, diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 97136a55..e7ae410f 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -4,6 +4,16 @@ import ShowAssetLite from 'components/ShowAssetLite'; import ShowAssetDetails from 'components/ShowAssetDetails'; import request from 'utils/request'; +function buildIdFromModifierObject (modifier) { + if (modifier) { + if (modifier.channel.name) { + return `${modifier.channel.name}#${modifier.channel.id}`; + } + return modifier.id; + } + return ''; +} + class ShowAsset extends React.Component { constructor (props) { super(props); @@ -11,84 +21,21 @@ class ShowAsset extends React.Component { this.getClaimData = this.getClaimData.bind(this); } componentDidMount () { - const { name, modifier } = this.props; - // create request params - let body = {}; - if (modifier) { - if (modifier.id) { - body['claimId'] = modifier.id; - } else { - body['channelName'] = modifier.channel.name; - body['channelClaimId'] = modifier.channel.id; - } + const { request: { name, modifier }, assetRequests } = this.props; + const id = buildIdFromModifierObject(modifier); + // check to see if we have this asset + if (assetRequests[id]) { + // case: the assetRequest exists + this.props.onNewAssetRequest(id, name, modifier); // request the long id and update the store with a new asset request record. + } else { + // case: the asset request does not exist + this.onRepeatAssetRequest(name, modifier); // get the asset request record...? } - body['claimName'] = name; - const params = { - method : 'POST', - headers: new Headers({ - 'Content-Type': 'application/json', - }), - body: JSON.stringify(body), - } - // make request - this.getLongClaimId(params) - .then(claimLongId => { - return Promise.all([this.getShortClaimId(claimLongId, name), this.getClaimData(claimLongId, name)]); - }) - .then(([shortId, claimData]) => { - this.props.onAssetClaimDataUpdate(claimData, shortId); - }) - .catch(error => { - this.props.onShowAssetError(error); - }); } - getLongClaimId (params) { - const url = `/api/claim/long-id`; - return new Promise((resolve, reject) => { - request(url, params) - .then(({ success, message, data }) => { - console.log('get long claim id response:', message); - if (!success) { - reject(message); - } - resolve(data); - }) - .catch((error) => { - reject(error.message); - }); - }); - } - getShortClaimId (longId, name) { - const url = `/api/claim/short-id/${longId}/${name}`; - return new Promise((resolve, reject) => { - request(url) - .then(({ success, message, data }) => { - console.log('get short claim id response:', data); - if (!success) { - reject(message); - } - resolve(data); - }) - .catch((error) => { - reject(error.message); - }); - }); - } - getClaimData (claimId, claimName) { - return new Promise((resolve, reject) => { - const url = `/api/claim/data/${claimName}/${claimId}`; - return request(url) - .then(({ success, message }) => { - console.log('get claim data response:', message); - if (!success) { - reject(message); - } - resolve(message); - }) - .catch((error) => { - reject(error.message); - }); - }); + onRepeatAssetRequest (id, modifier, assetRequests) { + // get the results of the existing asset request + const {error, claimId} = assetRequests[id]; + console.log(`results form past request ${id}:`, error, claimId); } componentWillUnmount () { this.props.onAssetClaimDataClear(); diff --git a/react/reducers/show.js b/react/reducers/show.js index 781bda61..b3649af3 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -45,10 +45,31 @@ const initialState = { error : null, status: LOCAL_CHECK, }, - viewedChannels: [], - viewedClaims : [], + channelRequests: {}, + assetRequests : {}, + channels : {}, + assets : {}, }; +/* asset request schema: +name#someidfrommodifier: { + error : null + claimId: null, +} */ + +/* asset schema: +name#claimId: { + error : null, + name : null, + claimId : null, + claimData: null, + shortId : null, + display : { + error : null, + status: null, + } +} */ + /* Reducers describe how the application's state changes in response to actions */ @@ -125,6 +146,23 @@ export default function (state = initialState, action) { status: ERROR, }), }); + // new actions + case actions.ASSET_REQUEST_ADD: + return Object.assign({}, state, { + assetRequests: Object.assign({}, state.assets, { + [action.data.id]: { + error : action.data.error, + claimId: action.data.claimId, + }, + }), + }); + + // case actions.ASSET_ADD: + // return Object.assign({}, state, { + // assets: Object.assign({}, state.assets, { + // [`${action.data.name}#${action.data.claimId}`]: action.data, + // }), + // }); default: return state; } diff --git a/react/sagas/index.js b/react/sagas/index.js index fa8e17ff..bc902a20 100644 --- a/react/sagas/index.js +++ b/react/sagas/index.js @@ -1,8 +1,9 @@ import { all } from 'redux-saga/effects'; -import { watchFileIsRequested } from './show'; +import { watchNewAssetRequest, watchFileIsRequested } from './show'; export default function* rootSaga () { yield all([ + watchNewAssetRequest(), watchFileIsRequested(), ]); } diff --git a/react/sagas/show.js b/react/sagas/show.js index d5798ff6..3e46bbba 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -1,8 +1,63 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { updateFileAvailability, updateDisplayAssetError } from 'actions/show'; +import { addAssetRequest, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; +import { getLongClaimId } from 'api/AssetApi'; +import request from '../utils/request'; + +function* newAssetRequest (action) { + const { id, name, modifier } = action.data; + // get the long claim id + let success, message, longId; + try { + ({success, message, data: longId} = yield call(getLongClaimId, name, modifier)); + } catch (error) { + console.log('error making getLongClaimId call', error); + yield put(addAssetRequest(id, error.message, null)); + } + // put a new action to update the store with result + if (success) { + return yield put(addAssetRequest(id, null, longId)); + } + yield put(addAssetRequest(id, message, null)); +}; + +function* getShortId (action) { + const { longId, name } = action.data; + const url = `/api/claim/short-id/${longId}/${name}`; + return new Promise((resolve, reject) => { + request(url) + .then(({ success, message, data }) => { + console.log('get short claim id response:', data); + if (!success) { + reject(message); + } + resolve(data); + }) + .catch((error) => { + reject(error.message); + }); + }); +} + +function* getClaimData (action) { + const { claimName, claimId } = action.data; + return new Promise((resolve, reject) => { + const url = `/api/claim/data/${claimName}/${claimId}`; + return request(url) + .then(({ success, message }) => { + console.log('get claim data response:', message); + if (!success) { + reject(message); + } + resolve(message); + }) + .catch((error) => { + reject(error.message); + }); + }); +} function* retriveFile (action) { const name = action.data.name; @@ -34,8 +89,12 @@ function* retriveFile (action) { } else { yield put(updateDisplayAssetError(message)); } -} +}; + +export function* watchNewAssetRequest () { + yield takeLatest(actions.NEW_ASSET_REQUEST, newAssetRequest); +}; export function* watchFileIsRequested () { yield takeLatest(actions.FILE_REQUESTED, retriveFile); -} +}; From 489153fcde78a9c82620f86b9f37bab76223167c Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 18:01:51 -0800 Subject: [PATCH 52/96] updated to store and recall asset claim info and requests --- react/actions/show.js | 51 +++++++++--------- react/api/AssetApi.js | 12 ++++- react/components/AssetInfo/view.jsx | 2 +- react/constants/show_action_types.js | 7 +-- react/containers/ShowAsset/index.js | 37 +++++++------ react/containers/ShowAsset/view.jsx | 79 ++++++++++++++++++--------- react/reducers/show.js | 80 +++++++++++++++------------- react/sagas/index.js | 3 +- react/sagas/show.js | 76 ++++++++++++-------------- routes/api-routes.js | 4 +- 10 files changed, 196 insertions(+), 155 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index 9e6ba771..22ae75ef 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -64,23 +64,6 @@ export function updateChannelClaimsData (claims, currentPage, totalPages, totalC }; }; -export function updateShowAssetError (error) { - return { - type: actions.SHOW_ASSET_ERROR, - data: error, - }; -}; - -export function updateAssetClaimData (data, shortId) { - return { - type: actions.ASSET_CLAIM_DATA_UPDATE, - data: { - data, - shortId, - }, - }; -}; - export function fileRequested (name, claimId) { return { type: actions.FILE_REQUESTED, @@ -105,7 +88,7 @@ export function updateDisplayAssetError (error) { }; }; -// new +// new: request-related actions export function newAssetRequest (id, name, modifier) { return { @@ -114,16 +97,32 @@ export function newAssetRequest (id, name, modifier) { }; }; -export function addAssetRequest (id, error, claimId) { +export function addAssetRequest (id, error, name, claimId) { return { type: actions.ASSET_REQUEST_ADD, - data: { id, error, claimId }, + data: { id, error, name, claimId }, }; }; -// export function addAsset (error, name, claimId, claimData, shortId, display) { -// return { -// type: actions.ASSET_ADD, -// data: { error, name, claimId, claimData, shortId, display }, -// }; -// }; +// new: asset-realted actions + +export function showNewAsset (id, name, claimId) { + console.log('show new asset', id, name, claimId); + return { + type: actions.SHOW_NEW_ASSET, + data: { id, name, claimId }, + }; +}; + +export function updateShowAsset (id, error, name, claimId, shortId, claimData) { + return { + type: actions.SHOW_ASSET_UPDATE, + data: { id, error, name, claimId, shortId, claimData }, + }; +}; + +export function clearShowAsset () { + return { + type: actions.SHOW_ASSET_CLEAR, + }; +}; diff --git a/react/api/AssetApi.js b/react/api/AssetApi.js index 3603a94b..d3fbbb7f 100644 --- a/react/api/AssetApi.js +++ b/react/api/AssetApi.js @@ -23,4 +23,14 @@ export function getLongClaimId (name, modifier) { const url = `/api/claim/long-id`; // return the request promise return Request(url, params); -} +}; + +export function getShortId (name, claimId) { + const url = `/api/claim/short-id/${claimId}/${name}`; + return Request(url); +}; + +export function getClaimData (name, claimId) { + const url = `/api/claim/data/${name}/${claimId}`; + return Request(url); +}; diff --git a/react/components/AssetInfo/view.jsx b/react/components/AssetInfo/view.jsx index 9d53637d..42eaffdb 100644 --- a/react/components/AssetInfo/view.jsx +++ b/react/components/AssetInfo/view.jsx @@ -36,7 +36,7 @@ class AssetInfo extends React.Component { Channel:
- {channelName} + {channelName}
} diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index fb6ae64a..ae6d587d 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -6,14 +6,15 @@ export const SHOW_CHANNEL_ERROR = 'SHOW_CHANNEL_ERROR'; export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE'; -export const SHOW_ASSET_ERROR = 'SHOW_ASSET_ERROR'; +export const SHOW_ASSET_UPDATE = 'SHOW_ASSET_UPDATE'; export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE'; export const FILE_REQUESTED = 'FILE_REQUESTED'; export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE'; export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR'; -/ new +// new export const NEW_ASSET_REQUEST = 'NEW_ASSET_REQUEST'; export const ASSET_REQUEST_ADD = 'ASSET_REQUEST_ADD'; -export const ASSET_ADD = 'ASSET_ADD'; +export const SHOW_NEW_ASSET = 'SHOW_NEW_ASSET'; +export const SHOW_ASSET_CLEAR = 'SHOW_ASSET_CLEAR'; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index ddcfdf06..7c1ce93c 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -1,36 +1,39 @@ import { connect } from 'react-redux'; import View from './view'; -import { newAssetRequest, updateAssetClaimData, updateShowAssetError } from 'actions/show'; +import { newAssetRequest, updateRequestError, showNewAsset, updateShowAsset, clearShowAsset } from 'actions/show'; const mapStateToProps = ({ show }) => { return { // new - request : show.assetRequest, - assetRequests: show.assetRequests, - extension : show.assetRequest.extension, + requestName : show.assetRequest.name, + requestModifier : show.assetRequest.modifier, + requestExtension: show.assetRequest.extension, + assetRequests : show.assetRequests, + assets : show.assets, // old - error : show.showAsset.error, - claimData: show.showAsset.claimData, + error : show.showAsset.error, + name : show.showAsset.name, + claimData : show.showAsset.claimData, }; }; const mapDispatchToProps = dispatch => { return { // new - onNewAssetRequest (name, modifier) { - dispatch(newAssetRequest(name, modifier)); + onNewRequest: (id, name, modifier) => { + dispatch(newAssetRequest(id, name, modifier)); }, - // old - onShowAssetError: (error) => { - dispatch(updateShowAssetError(error)); + onRequestError: (error) => { + dispatch(updateRequestError(error, null, null)); }, - onAssetClaimDataUpdate: (claimData, shortId) => { - dispatch(updateAssetClaimData(claimData, shortId)); - dispatch(updateShowAssetError(null)); // clear any errors + onShowNewAsset: (id, name, claimId) => { + dispatch(showNewAsset(id, name, claimId)); }, - onAssetClaimDataClear: () => { - dispatch(updateAssetClaimData(null, null)); - dispatch(updateShowAssetError(null)); // clear any errors + onShowExistingAsset: (id, error, name, claimId, shortId, claimData) => { + dispatch(updateShowAsset(id, error, name, claimId, shortId, claimData)); + }, + onLeaveShowAsset: () => { + dispatch(clearShowAsset()); // clear any errors }, }; }; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index e7ae410f..079609ca 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -2,53 +2,80 @@ import React from 'react'; import ErrorPage from 'components/ErrorPage'; import ShowAssetLite from 'components/ShowAssetLite'; import ShowAssetDetails from 'components/ShowAssetDetails'; -import request from 'utils/request'; -function buildIdFromModifierObject (modifier) { +function buildIdFromModifierObject (name, modifier) { if (modifier) { if (modifier.channel.name) { - return `${modifier.channel.name}#${modifier.channel.id}`; + return `${name}#${modifier.channel.name}#${modifier.channel.id}`; } - return modifier.id; + return `${name}#${modifier.id}`; } - return ''; + return `${name}`; +} + +function buildIdFromNameAndClaimId (name, claimId) { + return `${name}#${claimId}`; } class ShowAsset extends React.Component { - constructor (props) { - super(props); - this.getLongClaimId = this.getLongClaimId.bind(this); - this.getClaimData = this.getClaimData.bind(this); - } componentDidMount () { - const { request: { name, modifier }, assetRequests } = this.props; - const id = buildIdFromModifierObject(modifier); + const { requestName, requestModifier, assetRequests } = this.props; + const id = buildIdFromModifierObject(requestName, requestModifier); // check to see if we have this asset - if (assetRequests[id]) { - // case: the assetRequest exists - this.props.onNewAssetRequest(id, name, modifier); // request the long id and update the store with a new asset request record. - } else { - // case: the asset request does not exist - this.onRepeatAssetRequest(name, modifier); // get the asset request record...? + if (assetRequests[id]) { // case: the assetRequest exists + const request = assetRequests[id]; + this.onRepeatRequest(id, request); + } else { // case: the asset request does not exist + this.onNewRequest(id, requestName, requestModifier); } } - onRepeatAssetRequest (id, modifier, assetRequests) { - // get the results of the existing asset request - const {error, claimId} = assetRequests[id]; - console.log(`results form past request ${id}:`, error, claimId); + componentWillReceiveProps (nextProps) { + if (nextProps.assetRequests !== this.props.assetRequests) { + console.log('assetRequests updated:'); + const { requestName, requestModifier, assetRequests } = nextProps; + const id = buildIdFromModifierObject(requestName, requestModifier); + // if the component received new assetRequests, check again to see if the current request matches one + if (assetRequests[id]) { // case: the assetRequest exists + const request = assetRequests[id]; + this.onRepeatRequest(id, request); + } else { // case: the asset request does not exist + this.onNewRequest(id, requestName, requestModifier); + } + } + } + onNewRequest (id, requestName, requestModifier) { + console.log('new request'); + this.props.onNewRequest(id, requestName, requestModifier); + } + onRepeatRequest (requestId, request) { + console.log('repeat request'); + const { assets } = this.props; + const { error: requestError, name, claimId } = request; + const assetId = buildIdFromNameAndClaimId(name, claimId); + // if error, return and update state with error + if (requestError) { + return this.props.onRequestError(requestError); + } + // update the show asset data in the store + if (assets[assetId]) { // case: the asset data already exists + let { error, name, claimId, shortId, claimData } = assets[assetId]; + this.props.onShowExistingAsset(assetId, error, name, claimId, shortId, claimData); + } else { // case: the asset data does not exist yet + this.props.onShowNewAsset(assetId, name, claimId); + } } componentWillUnmount () { - this.props.onAssetClaimDataClear(); + this.props.onLeaveShowAsset(); } render () { - const { error, claimData, extension } = this.props; + const { error, name, requestExtension } = this.props; if (error) { return ( ); } - if (claimData) { - if (extension) { + if (name) { + if (requestExtension) { return ( ); diff --git a/react/reducers/show.js b/react/reducers/show.js index b3649af3..6a1aa2fc 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -38,8 +38,10 @@ const initialState = { }, showAsset: { error : null, - claimData: null, + name : null, + claimId : null, shortId : null, + claimData: null, }, displayAsset: { error : null, @@ -48,28 +50,16 @@ const initialState = { channelRequests: {}, assetRequests : {}, channels : {}, - assets : {}, + assets : {}, // same schema as showAsset }; /* asset request schema: name#someidfrommodifier: { - error : null + error : null, + name : null, claimId: null, } */ -/* asset schema: -name#claimId: { - error : null, - name : null, - claimId : null, - claimData: null, - shortId : null, - display : { - error : null, - status: null, - } -} */ - /* Reducers describe how the application's state changes in response to actions */ @@ -119,19 +109,14 @@ export default function (state = initialState, action) { }), }); // show asset cases - case actions.SHOW_ASSET_ERROR: - return Object.assign({}, state, { - showAsset: Object.assign({}, state.showAsset, { - error: action.data, - }), - }); - case actions.ASSET_CLAIM_DATA_UPDATE: - return Object.assign({}, state, { - showAsset: Object.assign({}, state.showAsset, { - claimData: action.data.data, - shortId : action.data.shortId, - }), - }); + // case actions.SHOW_ASSET_UPDATE: + // return Object.assign({}, state, { + // showAsset: Object.assign({}, state.showAsset, { + // error : action.data.error, + // claimData: action.data.claimData, + // shortId : action.data.shortId, + // }), + // }); // display asset cases case actions.FILE_AVAILABILITY_UPDATE: return Object.assign({}, state, { @@ -152,17 +137,40 @@ export default function (state = initialState, action) { assetRequests: Object.assign({}, state.assets, { [action.data.id]: { error : action.data.error, + name : action.data.name, claimId: action.data.claimId, }, }), }); - - // case actions.ASSET_ADD: - // return Object.assign({}, state, { - // assets: Object.assign({}, state.assets, { - // [`${action.data.name}#${action.data.claimId}`]: action.data, - // }), - // }); + case actions.SHOW_ASSET_UPDATE: + return Object.assign({}, state, { + assets: Object.assign({}, state.assets, { + [action.data.id]: { + error : action.data.error, + name : action.data.name, + claimId : action.data.claimId, + shortId : action.data.shortId, + claimData: action.data.claimData, + }, + }), + showAsset: Object.assign({}, state.showAsset, { + error : action.data.error, + name : action.data.name, + claimId : action.data.claimId, + shortId : action.data.shortId, + claimData: action.data.claimData, + }), + }); + case actions.SHOW_ASSET_CLEAR: + return Object.assign({}, state, { + showAsset: Object.assign({}, state.showAsset, { + error : null, + name : null, + claimId : null, + shortId : null, + claimData: null, + }), + }); default: return state; } diff --git a/react/sagas/index.js b/react/sagas/index.js index bc902a20..e9c1e4f7 100644 --- a/react/sagas/index.js +++ b/react/sagas/index.js @@ -1,9 +1,10 @@ import { all } from 'redux-saga/effects'; -import { watchNewAssetRequest, watchFileIsRequested } from './show'; +import { watchNewAssetRequest, watchShowNewAsset, watchFileIsRequested } from './show'; export default function* rootSaga () { yield all([ watchNewAssetRequest(), + watchShowNewAsset(), watchFileIsRequested(), ]); } diff --git a/react/sagas/show.js b/react/sagas/show.js index 3e46bbba..836103d3 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -1,62 +1,50 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addAssetRequest, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; +import { addAssetRequest, updateShowAsset, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; -import { getLongClaimId } from 'api/AssetApi'; -import request from '../utils/request'; +import { getLongClaimId, getShortId, getClaimData } from 'api/AssetApi'; function* newAssetRequest (action) { const { id, name, modifier } = action.data; - // get the long claim id let success, message, longId; try { ({success, message, data: longId} = yield call(getLongClaimId, name, modifier)); } catch (error) { console.log('error making getLongClaimId call', error); - yield put(addAssetRequest(id, error.message, null)); + yield put(addAssetRequest(id, error.message, name, null)); } - // put a new action to update the store with result if (success) { - return yield put(addAssetRequest(id, null, longId)); + return yield put(addAssetRequest(id, null, name, longId)); } - yield put(addAssetRequest(id, message, null)); + yield put(addAssetRequest(id, message, name, null)); }; -function* getShortId (action) { - const { longId, name } = action.data; - const url = `/api/claim/short-id/${longId}/${name}`; - return new Promise((resolve, reject) => { - request(url) - .then(({ success, message, data }) => { - console.log('get short claim id response:', data); - if (!success) { - reject(message); - } - resolve(data); - }) - .catch((error) => { - reject(error.message); - }); - }); -} - -function* getClaimData (action) { - const { claimName, claimId } = action.data; - return new Promise((resolve, reject) => { - const url = `/api/claim/data/${claimName}/${claimId}`; - return request(url) - .then(({ success, message }) => { - console.log('get claim data response:', message); - if (!success) { - reject(message); - } - resolve(message); - }) - .catch((error) => { - reject(error.message); - }); - }); +function* getAssetDataAndShowAsset (action) { + const {id, name, claimId} = action.data; + // if no error, get short Id + let success, message, shortId; + try { + ({success, message, data: shortId} = yield call(getShortId, name, claimId)); + } catch (error) { + return yield put(updateShowAsset(id, error.message, null, null, null)); // add with error + } + if (!success) { + return yield put(updateShowAsset(id, message, null, null, null)); // add with error + } + // if no error, get claim data + success = null; + let claimData; + try { + ({success, message, data: claimData} = yield call(getClaimData, name, claimId)); + } catch (error) { + return yield put(updateShowAsset(id, error.message, null, null, null)); // add with error + } + if (!success) { + return yield put(updateShowAsset(id, message, null, null, null)); // add with error + } + // if both are successfull, add to asset list and select for showing + yield put(updateShowAsset(id, null, name, claimId, shortId, claimData)); } function* retriveFile (action) { @@ -95,6 +83,10 @@ export function* watchNewAssetRequest () { yield takeLatest(actions.NEW_ASSET_REQUEST, newAssetRequest); }; +export function* watchShowNewAsset () { + yield takeLatest(actions.SHOW_NEW_ASSET, getAssetDataAndShowAsset); +}; + export function* watchFileIsRequested () { yield takeLatest(actions.FILE_REQUESTED, retriveFile); }; diff --git a/routes/api-routes.js b/routes/api-routes.js index 47610188..7502842b 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -207,7 +207,7 @@ module.exports = (app) => { res.status(200).json({success: false, message: error.message}); }); }); - app.get('/api/claim/long-id', ({ ip, originalUrl, body, params }, res) => { + app.post('/api/claim/long-id', ({ ip, originalUrl, body, params }, res) => { logger.debug('body:', body); const channelName = body.channelName; const channelClaimId = body.channelClaimId; @@ -237,7 +237,7 @@ module.exports = (app) => { if (!claimInfo) { return res.status(200).json({success: false, message: 'No claim could be found'}); } - res.status(200).json({success: true, message: claimInfo}); + res.status(200).json({success: true, data: claimInfo}); }) .catch(error => { logger.error('api error getting long claim id', error); From d219cbf1a28d19808a0abbcaadc51bd754cd1b42 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 18:41:22 -0800 Subject: [PATCH 53/96] re-organized the actions and reducers --- react/actions/show.js | 114 ++++++++++++------------- react/api/{AssetApi.js => assetApi.js} | 0 react/api/channelApi.js | 36 ++++++++ react/reducers/show.js | 91 +++++++++----------- react/sagas/show.js | 2 +- 5 files changed, 129 insertions(+), 114 deletions(-) rename react/api/{AssetApi.js => assetApi.js} (100%) create mode 100644 react/api/channelApi.js diff --git a/react/actions/show.js b/react/actions/show.js index 22ae75ef..a945d7c6 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -1,5 +1,6 @@ import * as actions from 'constants/show_action_types'; +// basic request parsing export function updateRequestError (error) { return { type: actions.REQUEST_ERROR_UPDATE, @@ -10,10 +11,7 @@ export function updateRequestError (error) { export function updateRequestWithChannelRequest (name, id) { return { type: actions.REQUEST_CHANNEL_UPDATE, - data: { - name, - id, - }, + data: { name, id }, }; }; @@ -34,61 +32,7 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId, }; }; -export function updateShowChannelError (error) { - return { - type: actions.SHOW_CHANNEL_ERROR, - data: error, - }; -}; - -export function updateChannelData (name, longId, shortId) { - return { - type: actions.CHANNEL_DATA_UPDATE, - data: { - name, - longId, - shortId, - }, - }; -}; - -export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) { - return { - type: actions.CHANNEL_CLAIMS_DATA_UPDATE, - data: { - claims, - currentPage, - totalPages, - totalClaims, - }, - }; -}; - -export function fileRequested (name, claimId) { - return { - type: actions.FILE_REQUESTED, - data: { - name, - claimId, - }, - }; -}; - -export function updateFileAvailability (status) { - return { - type: actions.FILE_AVAILABILITY_UPDATE, - data: status, - }; -}; - -export function updateDisplayAssetError (error) { - return { - type: actions.DISPLAY_ASSET_ERROR, - data: error, - }; -}; - -// new: request-related actions +// request for an asset export function newAssetRequest (id, name, modifier) { return { @@ -104,10 +48,9 @@ export function addAssetRequest (id, error, name, claimId) { }; }; -// new: asset-realted actions +// show an asset export function showNewAsset (id, name, claimId) { - console.log('show new asset', id, name, claimId); return { type: actions.SHOW_NEW_ASSET, data: { id, name, claimId }, @@ -126,3 +69,52 @@ export function clearShowAsset () { type: actions.SHOW_ASSET_CLEAR, }; }; + +// request for a channel + + +// show a channel + +export function updateShowChannelError (error) { + return { + type: actions.SHOW_CHANNEL_ERROR, + data: error, + }; +}; + +export function updateChannelData (name, longId, shortId) { + return { + type: actions.CHANNEL_DATA_UPDATE, + data: { name, longId, shortId }, + }; +}; + +export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) { + return { + type: actions.CHANNEL_CLAIMS_DATA_UPDATE, + data: { claims, currentPage, totalPages, totalClaims }, + }; +}; + +// display a file + +export function fileRequested (name, claimId) { + return { + type: actions.FILE_REQUESTED, + data: { name, claimId }, + }; +}; + +export function updateFileAvailability (status) { + return { + type: actions.FILE_AVAILABILITY_UPDATE, + data: status, + }; +}; + +export function updateDisplayAssetError (error) { + return { + type: actions.DISPLAY_ASSET_ERROR, + data: error, + }; +}; diff --git a/react/api/AssetApi.js b/react/api/assetApi.js similarity index 100% rename from react/api/AssetApi.js rename to react/api/assetApi.js diff --git a/react/api/channelApi.js b/react/api/channelApi.js new file mode 100644 index 00000000..d3fbbb7f --- /dev/null +++ b/react/api/channelApi.js @@ -0,0 +1,36 @@ +import Request from 'utils/request'; + +export function getLongClaimId (name, modifier) { + let body = {}; + // create request params + if (modifier) { + if (modifier.id) { + body['claimId'] = modifier.id; + } else { + body['channelName'] = modifier.channel.name; + body['channelClaimId'] = modifier.channel.id; + } + } + body['claimName'] = name; + const params = { + method : 'POST', + headers: new Headers({ + 'Content-Type': 'application/json', + }), + body: JSON.stringify(body), + } + // crate url + const url = `/api/claim/long-id`; + // return the request promise + return Request(url, params); +}; + +export function getShortId (name, claimId) { + const url = `/api/claim/short-id/${claimId}/${name}`; + return Request(url); +}; + +export function getClaimData (name, claimId) { + const url = `/api/claim/data/${name}/${claimId}`; + return Request(url); +}; diff --git a/react/reducers/show.js b/react/reducers/show.js index 6a1aa2fc..129cefba 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -48,25 +48,18 @@ const initialState = { status: LOCAL_CHECK, }, channelRequests: {}, + channels : {}, // same schema as showChannel assetRequests : {}, - channels : {}, assets : {}, // same schema as showAsset }; -/* asset request schema: -name#someidfrommodifier: { - error : null, - name : null, - claimId: null, -} */ - /* Reducers describe how the application's state changes in response to actions */ export default function (state = initialState, action) { switch (action.type) { - // request cases + // handle request case actions.REQUEST_ERROR_UPDATE: return Object.assign({}, state, { request: Object.assign({}, state.request, { @@ -89,49 +82,7 @@ export default function (state = initialState, action) { }, assetRequest: action.data, }); - // show channel cases - case actions.SHOW_CHANNEL_ERROR: - return Object.assign({}, state, { - showChannel: Object.assign({}, state.showChannel, { - error: action.data, - }), - }); - case actions.CHANNEL_DATA_UPDATE: - return Object.assign({}, state, { - showChannel: Object.assign({}, state.showChannel, { - channelData: action.data, - }), - }); - case actions.CHANNEL_CLAIMS_DATA_UPDATE: - return Object.assign({}, state, { - showChannel: Object.assign({}, state.showChannel, { - channelClaimsData: action.data, - }), - }); - // show asset cases - // case actions.SHOW_ASSET_UPDATE: - // return Object.assign({}, state, { - // showAsset: Object.assign({}, state.showAsset, { - // error : action.data.error, - // claimData: action.data.claimData, - // shortId : action.data.shortId, - // }), - // }); - // display asset cases - case actions.FILE_AVAILABILITY_UPDATE: - return Object.assign({}, state, { - displayAsset: Object.assign({}, state.displayAsset, { - status: action.data, - }), - }); - case actions.DISPLAY_ASSET_ERROR: - return Object.assign({}, state, { - displayAsset: Object.assign({}, state.displayAsset, { - error : action.data, - status: ERROR, - }), - }); - // new actions + // request for an asset case actions.ASSET_REQUEST_ADD: return Object.assign({}, state, { assetRequests: Object.assign({}, state.assets, { @@ -142,6 +93,7 @@ export default function (state = initialState, action) { }, }), }); + // show an asset case actions.SHOW_ASSET_UPDATE: return Object.assign({}, state, { assets: Object.assign({}, state.assets, { @@ -171,6 +123,41 @@ export default function (state = initialState, action) { claimData: null, }), }); + // request a channel + + // show a channel + case actions.SHOW_CHANNEL_ERROR: + return Object.assign({}, state, { + showChannel: Object.assign({}, state.showChannel, { + error: action.data, + }), + }); + case actions.CHANNEL_DATA_UPDATE: + return Object.assign({}, state, { + showChannel: Object.assign({}, state.showChannel, { + channelData: action.data, + }), + }); + case actions.CHANNEL_CLAIMS_DATA_UPDATE: + return Object.assign({}, state, { + showChannel: Object.assign({}, state.showChannel, { + channelClaimsData: action.data, + }), + }); + // display an asset + case actions.FILE_AVAILABILITY_UPDATE: + return Object.assign({}, state, { + displayAsset: Object.assign({}, state.displayAsset, { + status: action.data, + }), + }); + case actions.DISPLAY_ASSET_ERROR: + return Object.assign({}, state, { + displayAsset: Object.assign({}, state.displayAsset, { + error : action.data, + status: ERROR, + }), + }); default: return state; } diff --git a/react/sagas/show.js b/react/sagas/show.js index 836103d3..90d63cd0 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -3,7 +3,7 @@ import * as actions from 'constants/show_action_types'; import { addAssetRequest, updateShowAsset, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; -import { getLongClaimId, getShortId, getClaimData } from 'api/AssetApi'; +import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; function* newAssetRequest (action) { const { id, name, modifier } = action.data; From d1a71cf74fb5b6d0144d45f5998acb2e37288254 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 20:15:44 -0800 Subject: [PATCH 54/96] debugged state mismatch --- react/actions/show.js | 5 ++- react/containers/ShowAsset/index.js | 8 +++-- react/containers/ShowAsset/view.jsx | 47 +++++++++--------------- react/containers/ShowChannel/index.js | 13 +++---- react/containers/ShowChannel/view.jsx | 10 ++++-- react/reducers/show.js | 51 ++++++++++++++++----------- 6 files changed, 71 insertions(+), 63 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index a945d7c6..f0693c2b 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -9,16 +9,19 @@ export function updateRequestError (error) { } export function updateRequestWithChannelRequest (name, id) { + const requestId = `cr#${name}#${id}`; return { type: actions.REQUEST_CHANNEL_UPDATE, - data: { name, id }, + data: { requestId, name, id }, }; }; export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) { + const requestId = `ar#${name}#${id}#${channelName}#${channelId}`; return { type: actions.REQUEST_CLAIM_UPDATE, data: { + requestId, name, modifier: { id, diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 7c1ce93c..4dc6c5ab 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -5,15 +5,17 @@ import { newAssetRequest, updateRequestError, showNewAsset, updateShowAsset, cle const mapStateToProps = ({ show }) => { return { // new - requestName : show.assetRequest.name, - requestModifier : show.assetRequest.modifier, - requestExtension: show.assetRequest.extension, + requestId : show.request.id, + requestName : show.request.data.name, + requestModifier : show.request.data.modifier, + requestExtension: show.request.data.extension, assetRequests : show.assetRequests, assets : show.assets, // old error : show.showAsset.error, name : show.showAsset.name, claimData : show.showAsset.claimData, + showAsset : show.assets[show.request.id], }; }; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 079609ca..e9a336fa 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -3,44 +3,31 @@ import ErrorPage from 'components/ErrorPage'; import ShowAssetLite from 'components/ShowAssetLite'; import ShowAssetDetails from 'components/ShowAssetDetails'; -function buildIdFromModifierObject (name, modifier) { - if (modifier) { - if (modifier.channel.name) { - return `${name}#${modifier.channel.name}#${modifier.channel.id}`; - } - return `${name}#${modifier.id}`; - } - return `${name}`; -} - -function buildIdFromNameAndClaimId (name, claimId) { - return `${name}#${claimId}`; -} - class ShowAsset extends React.Component { componentDidMount () { - const { requestName, requestModifier, assetRequests } = this.props; - const id = buildIdFromModifierObject(requestName, requestModifier); + const { requestId, requestName, requestModifier, assetRequests } = this.props; // check to see if we have this asset - if (assetRequests[id]) { // case: the assetRequest exists - const request = assetRequests[id]; - this.onRepeatRequest(id, request); + if (assetRequests[requestId]) { // case: the assetRequest exists + const request = assetRequests[requestId]; + this.onRepeatRequest(requestId, request); } else { // case: the asset request does not exist - this.onNewRequest(id, requestName, requestModifier); + this.onNewRequest(requestId, requestName, requestModifier); } } componentWillReceiveProps (nextProps) { - if (nextProps.assetRequests !== this.props.assetRequests) { - console.log('assetRequests updated:'); - const { requestName, requestModifier, assetRequests } = nextProps; - const id = buildIdFromModifierObject(requestName, requestModifier); + // case where componentDidMount triggered new props + if (nextProps.assetRequests !== this.props.assetRequests) { // note: reason for not showing small url requests? + console.log('show.assetRequests updated'); + const { requestId, requestName, requestModifier, assetRequests } = nextProps; // if the component received new assetRequests, check again to see if the current request matches one - if (assetRequests[id]) { // case: the assetRequest exists - const request = assetRequests[id]; - this.onRepeatRequest(id, request); + if (assetRequests[requestId]) { // case: the assetRequest exists + const request = assetRequests[requestId]; + this.onRepeatRequest(requestId, request); } else { // case: the asset request does not exist - this.onNewRequest(id, requestName, requestModifier); + this.onNewRequest(requestId, requestName, requestModifier); } + } else { + console.log('show.assetRequests did not update'); } } onNewRequest (id, requestName, requestModifier) { @@ -51,7 +38,7 @@ class ShowAsset extends React.Component { console.log('repeat request'); const { assets } = this.props; const { error: requestError, name, claimId } = request; - const assetId = buildIdFromNameAndClaimId(name, claimId); + const assetId = `a#${name}#${claimId}`; // if error, return and update state with error if (requestError) { return this.props.onRequestError(requestError); @@ -74,7 +61,7 @@ class ShowAsset extends React.Component { ); } - if (name) { + if (name) { // direct requests are passing because name is present so it just goes if (requestExtension) { return ( diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 17713cb9..4d0c1058 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -4,12 +4,13 @@ import View from './view'; const mapStateToProps = ({ show }) => { return { - requestName: show.channelRequest.name, - requestId : show.channelRequest.id, - error : show.showChannel.error, - name : show.showChannel.channelData.name, - shortId : show.showChannel.channelData.shortId, - longId : show.showChannel.channelData.longId, + requestId : show.request.id, + requestChannelName: show.request.data.name, + requestChannelId : show.request.data.id, + error : show.showChannel.error, + name : show.showChannel.channelData.name, + shortId : show.showChannel.channelData.shortId, + longId : show.showChannel.channelData.longId, }; }; diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index d1d31f0f..16bc7df7 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -6,14 +6,18 @@ import request from 'utils/request'; class ShowChannel extends React.Component { componentDidMount () { - this.getAndStoreChannelData(this.props.requestName, this.props.requestId); + console.log('showchannel did mount'); + const {requestChannelName, requestChannelId} = this.props; + this.getAndStoreChannelData(requestChannelName, requestChannelId); } componentWillReceiveProps (nextProps) { - if (nextProps.requestName !== this.props.requestName || nextProps.requestId !== this.props.requestId) { - this.getAndStoreChannelData(nextProps.requestName, nextProps.requestId); + if (nextProps.channelRequests !== this.props.channelRequests) { + const {requestChannelName, requestChannelId} = nextProps; + this.getAndStoreChannelData(requestChannelName, requestChannelId); } } getAndStoreChannelData (name, id) { + console.log('getting and storing channel data for channel:', name, id); if (!id) id = 'none'; const url = `/api/channel/data/${name}/${id}`; return request(url) diff --git a/react/reducers/show.js b/react/reducers/show.js index 129cefba..6694eb4e 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -4,24 +4,26 @@ import { LOCAL_CHECK, ERROR } from 'constants/asset_display_states'; const initialState = { request: { - error: null, - type : null, - }, - channelRequest: { - name: null, - id : null, - }, - assetRequest: { - name : null, - modifier: { - id : null, - channel: { - name: null, - id : null, - }, - }, - extension: null, + error : null, + type : null, + data : null, + requestId: null, }, + // channelRequest: { + // name: null, + // id : null, + // }, + // assetRequest: { + // name : null, + // modifier: { + // id : null, + // channel: { + // name: null, + // id : null, + // }, + // }, + // extension: null, + // }, showChannel: { error : null, channelData: { @@ -71,21 +73,30 @@ export default function (state = initialState, action) { request: { type : CHANNEL, error: null, + id : action.data.requestId, + data : { + name: action.data.name, + id : action.data.id, + }, }, - channelRequest: action.data, }); case actions.REQUEST_CLAIM_UPDATE: return Object.assign({}, state, { request: { type : ASSET, error: null, + id : action.data.requestId, + data : { + name : action.data.name, + modifier : action.data.modifier, + extension: action.data.extension, + }, }, - assetRequest: action.data, }); // request for an asset case actions.ASSET_REQUEST_ADD: return Object.assign({}, state, { - assetRequests: Object.assign({}, state.assets, { + assetRequests: Object.assign({}, state.assetRequests, { [action.data.id]: { error : action.data.error, name : action.data.name, From 8672f7f41a6c5345fe49f35fdc4b7f3b11f6d13a Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 21:30:32 -0800 Subject: [PATCH 55/96] added new channel request handling --- react/actions/show.js | 53 ++++++++++++++--------- react/api/channelApi.js | 6 +-- react/constants/show_action_types.js | 4 ++ react/containers/ShowAsset/view.jsx | 4 +- react/containers/ShowChannel/index.js | 28 ++++++++---- react/containers/ShowChannel/view.jsx | 54 ++++++++++++++++++++--- react/reducers/show.js | 62 ++++++++++++--------------- react/sagas/show.js | 22 +++++++++- 8 files changed, 157 insertions(+), 76 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index f0693c2b..cf6c0692 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -75,29 +75,42 @@ export function clearShowAsset () { // request for a channel +export function newChannelRequest (id, name, channelId) { + return { + type: actions.NEW_CHANNEL_REQUEST, + data: {id, name, channelId}, + }; +}; + +export function addChannelRequest (id, error, name, claimId) { + return { + type: actions.CHANNEL_REQUEST_ADD, + data: { id, error, name, claimId }, + }; +} // show a channel -export function updateShowChannelError (error) { - return { - type: actions.SHOW_CHANNEL_ERROR, - data: error, - }; -}; - -export function updateChannelData (name, longId, shortId) { - return { - type: actions.CHANNEL_DATA_UPDATE, - data: { name, longId, shortId }, - }; -}; - -export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) { - return { - type: actions.CHANNEL_CLAIMS_DATA_UPDATE, - data: { claims, currentPage, totalPages, totalClaims }, - }; -}; +// export function updateShowChannelError (error) { +// return { +// type: actions.SHOW_CHANNEL_ERROR, +// data: error, +// }; +// }; +// +// export function updateChannelData (name, longId, shortId) { +// return { +// type: actions.CHANNEL_DATA_UPDATE, +// data: { name, longId, shortId }, +// }; +// }; +// +// export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) { +// return { +// type: actions.CHANNEL_CLAIMS_DATA_UPDATE, +// data: { claims, currentPage, totalPages, totalClaims }, +// }; +// }; // display a file diff --git a/react/api/channelApi.js b/react/api/channelApi.js index d3fbbb7f..3ee06e8a 100644 --- a/react/api/channelApi.js +++ b/react/api/channelApi.js @@ -1,6 +1,6 @@ import Request from 'utils/request'; -export function getLongClaimId (name, modifier) { +export function getLongChannelClaimId (name, modifier) { let body = {}; // create request params if (modifier) { @@ -25,12 +25,12 @@ export function getLongClaimId (name, modifier) { return Request(url, params); }; -export function getShortId (name, claimId) { +export function getShortChannelId (name, claimId) { const url = `/api/claim/short-id/${claimId}/${name}`; return Request(url); }; -export function getClaimData (name, claimId) { +export function getChannelData (name, claimId) { const url = `/api/claim/data/${name}/${claimId}`; return Request(url); }; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index ae6d587d..30040607 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -18,3 +18,7 @@ export const NEW_ASSET_REQUEST = 'NEW_ASSET_REQUEST'; export const ASSET_REQUEST_ADD = 'ASSET_REQUEST_ADD'; export const SHOW_NEW_ASSET = 'SHOW_NEW_ASSET'; export const SHOW_ASSET_CLEAR = 'SHOW_ASSET_CLEAR'; + +export const NEW_CHANNEL_REQUEST = 'NEW_CHANNEL_REQUEST'; +export const CHANNEL_REQUEST_ADD = 'CHANNEL_REQUEST_ADD'; + diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index e9a336fa..fcd6e733 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -38,12 +38,12 @@ class ShowAsset extends React.Component { console.log('repeat request'); const { assets } = this.props; const { error: requestError, name, claimId } = request; - const assetId = `a#${name}#${claimId}`; // if error, return and update state with error if (requestError) { return this.props.onRequestError(requestError); } - // update the show asset data in the store + // update the showAsset data in the store + const assetId = `a#${name}#${claimId}`; if (assets[assetId]) { // case: the asset data already exists let { error, name, claimId, shortId, claimData } = assets[assetId]; this.props.onShowExistingAsset(assetId, error, name, claimId, shortId, claimData); diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 4d0c1058..0ec9bd8f 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,12 +1,15 @@ import { connect } from 'react-redux'; -import {updateChannelData, updateShowChannelError} from 'actions/show'; +import {newChannelRequest, updateRequestError} from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { return { requestId : show.request.id, + requestType : show.request.type, requestChannelName: show.request.data.name, requestChannelId : show.request.data.id, + requestList : show.channelRequests, + channels : show.channels, error : show.showChannel.error, name : show.showChannel.channelData.name, shortId : show.showChannel.channelData.shortId, @@ -16,15 +19,22 @@ const mapStateToProps = ({ show }) => { const mapDispatchToProps = dispatch => { return { - onShowChannelError: (error) => { - dispatch(updateShowChannelError(error)); + // onShowChannelError: (error) => { + // dispatch(updateShowChannelError(error)); + // }, + // onChannelDataUpdate: (name, longId, shortId) => { + // dispatch(updateChannelData(name, longId, shortId)); + // dispatch(updateShowChannelError(null)); // clear any errors + // }, + // onChannelDataClear: () => { + // dispatch(updateChannelData(null, null, null)); + // }, + // new + onNewChannelRequest (id, name, channelId) { + dispatch(newChannelRequest(id, name, channelId)); }, - onChannelDataUpdate: (name, longId, shortId) => { - dispatch(updateChannelData(name, longId, shortId)); - dispatch(updateShowChannelError(null)); // clear any errors - }, - onChannelDataClear: () => { - dispatch(updateChannelData(null, null, null)); + onRequestError: (error) => { + dispatch(updateRequestError(error, null, null)); }, }; }; diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 16bc7df7..8d40e827 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -4,17 +4,59 @@ import NavBar from 'containers/NavBar'; import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; import request from 'utils/request'; +import { CHANNEL } from 'constants/show_request_types'; + +function requestIsAChannelRequest ({ requestType }) { + return requestType === CHANNEL; +} + +function channelNameOrIdChanged (nextProps, props) { + return (nextProps.requestChannelName !== props.requestChannelName || nextProps.requestChannelName !== props.requestChannelName); +} + +function existingRequest (requestId, requestList) { + return requestList[requestId]; +} + class ShowChannel extends React.Component { componentDidMount () { console.log('showchannel did mount'); - const {requestChannelName, requestChannelId} = this.props; - this.getAndStoreChannelData(requestChannelName, requestChannelId); + const {requestId, requestName, requestChannelId, requestList} = this.props; + if (existingRequest(requestId, requestList)) { + // const validRequest = existingRequest(requestId, requestList); + // this.onRepeatChannelRequest(validRequest); + console.log('weird, we got a repeat channel request on an unmounted ShowChannel component'); + } else { + this.onNewChannelRequest(requestId, requestName, requestChannelId); + } } componentWillReceiveProps (nextProps) { - if (nextProps.channelRequests !== this.props.channelRequests) { - const {requestChannelName, requestChannelId} = nextProps; - this.getAndStoreChannelData(requestChannelName, requestChannelId); - } + console.log('showchannel will receive new props'); + if (requestIsAChannelRequest(nextProps) && channelNameOrIdChanged(nextProps, this.props)) { + const {requestId, requestList} = nextProps; + if (existingRequest(requestId, requestList)) { + const request = requestList[requestId]; + this.onRepeatChannelRequest(request); + } else { + console.log('weird, we got a new channel request on a mounted ShowChannel component'); + } + }; + } + onNewChannelRequest (requestId, requestName, requestChannelId) { + // validate the request (i.e. get channel full claim id) + // update teh request list + // if error, return early (set the request error in the store) + // if the request is valid... + // add it to the requestList + // update showChannel to reflect the channel details + this.props.onNewChannelRequest(requestId, requestName, requestChannelId); + } + onRepeatChannelRequest ({ id, error, name, claimId }) { + // if error, return early (set the request error in the store) + // if the request is valid... + // update showChannel to reflect the channel details + // see if they are available + // retrieve them if they are not available } getAndStoreChannelData (name, id) { console.log('getting and storing channel data for channel:', name, id); diff --git a/react/reducers/show.js b/react/reducers/show.js index 6694eb4e..d80e9c8e 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -9,21 +9,6 @@ const initialState = { data : null, requestId: null, }, - // channelRequest: { - // name: null, - // id : null, - // }, - // assetRequest: { - // name : null, - // modifier: { - // id : null, - // channel: { - // name: null, - // id : null, - // }, - // }, - // extension: null, - // }, showChannel: { error : null, channelData: { @@ -135,26 +120,35 @@ export default function (state = initialState, action) { }), }); // request a channel - + case actions.CHANNEL_REQUEST_ADD: + return Object.assign({}, state, { + channelRequests: Object.assign({}, state.assetRequests, { + [action.data.id]: { + error : action.data.error, + name : action.data.name, + claimId: action.data.claimId, + }, + }), + }); // show a channel - case actions.SHOW_CHANNEL_ERROR: - return Object.assign({}, state, { - showChannel: Object.assign({}, state.showChannel, { - error: action.data, - }), - }); - case actions.CHANNEL_DATA_UPDATE: - return Object.assign({}, state, { - showChannel: Object.assign({}, state.showChannel, { - channelData: action.data, - }), - }); - case actions.CHANNEL_CLAIMS_DATA_UPDATE: - return Object.assign({}, state, { - showChannel: Object.assign({}, state.showChannel, { - channelClaimsData: action.data, - }), - }); + // case actions.SHOW_CHANNEL_ERROR: + // return Object.assign({}, state, { + // showChannel: Object.assign({}, state.showChannel, { + // error: action.data, + // }), + // }); + // case actions.CHANNEL_DATA_UPDATE: + // return Object.assign({}, state, { + // showChannel: Object.assign({}, state.showChannel, { + // channelData: action.data, + // }), + // }); + // case actions.CHANNEL_CLAIMS_DATA_UPDATE: + // return Object.assign({}, state, { + // showChannel: Object.assign({}, state.showChannel, { + // channelClaimsData: action.data, + // }), + // }); // display an asset case actions.FILE_AVAILABILITY_UPDATE: return Object.assign({}, state, { diff --git a/react/sagas/show.js b/react/sagas/show.js index 90d63cd0..9ec5a24a 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -1,9 +1,10 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addAssetRequest, updateShowAsset, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; +import { addAssetRequest, updateShowAsset, addChannelRequest, updateShowChannel, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; +import { getLongChannelClaimId, getShortChannelId, getChannelData } from 'api/channelApi'; function* newAssetRequest (action) { const { id, name, modifier } = action.data; @@ -11,7 +12,6 @@ function* newAssetRequest (action) { try { ({success, message, data: longId} = yield call(getLongClaimId, name, modifier)); } catch (error) { - console.log('error making getLongClaimId call', error); yield put(addAssetRequest(id, error.message, name, null)); } if (success) { @@ -20,6 +20,20 @@ function* newAssetRequest (action) { yield put(addAssetRequest(id, message, name, null)); }; +function* newChannelRequest (action) { + const { id, name, channelId } = action.data; + let success, message, longChannelId; + try { + ({success, message, data: longChannelId} = yield call(getLongChannelClaimId, name, channelId)); + } catch (error) { + yield put(addChannelRequest(id, error.message, name, null)); + } + if (success) { + return yield put(addChannelRequest(id, null, name, longChannelId)); + } + yield put(addChannelRequest(id, message, name, null)); +} + function* getAssetDataAndShowAsset (action) { const {id, name, claimId} = action.data; // if no error, get short Id @@ -83,6 +97,10 @@ export function* watchNewAssetRequest () { yield takeLatest(actions.NEW_ASSET_REQUEST, newAssetRequest); }; +export function* watchNewChannelRequest () { + yield takeLatest(actions.NEW_CHANNEL_REQUEST, newChannelRequest); +}; + export function* watchShowNewAsset () { yield takeLatest(actions.SHOW_NEW_ASSET, getAssetDataAndShowAsset); }; From 2363fe871716c434ac8e1cb96188dcaa77af71ec Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 22:22:17 -0800 Subject: [PATCH 56/96] finished onNewChannelRequest --- react/actions/show.js | 15 +++++------ react/api/channelApi.js | 38 ++++++--------------------- react/constants/show_action_types.js | 3 +++ react/containers/ShowAsset/view.jsx | 15 +++++------ react/containers/ShowChannel/index.js | 21 +++++++-------- react/containers/ShowChannel/view.jsx | 33 ++++++----------------- react/reducers/show.js | 28 +++++++++++++------- react/sagas/show.js | 9 ++++--- 8 files changed, 67 insertions(+), 95 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index cf6c0692..dc1c8276 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -82,10 +82,10 @@ export function newChannelRequest (id, name, channelId) { }; }; -export function addChannelRequest (id, error, name, claimId) { +export function addChannelRequest (id, error, name, data) { return { type: actions.CHANNEL_REQUEST_ADD, - data: { id, error, name, claimId }, + data: { id, error, name, data }, }; } @@ -105,12 +105,11 @@ export function addChannelRequest (id, error, name, claimId) { // }; // }; // -// export function updateChannelClaimsData (claims, currentPage, totalPages, totalClaims) { -// return { -// type: actions.CHANNEL_CLAIMS_DATA_UPDATE, -// data: { claims, currentPage, totalPages, totalClaims }, -// }; -// }; +export function clearShowChannel () { + return { + type: actions.SHOW_CHANNEL_CLEAR, + }; +}; // display a file diff --git a/react/api/channelApi.js b/react/api/channelApi.js index 3ee06e8a..d2e2d821 100644 --- a/react/api/channelApi.js +++ b/react/api/channelApi.js @@ -1,36 +1,14 @@ import Request from 'utils/request'; +import request from '../utils/request'; -export function getLongChannelClaimId (name, modifier) { - let body = {}; - // create request params - if (modifier) { - if (modifier.id) { - body['claimId'] = modifier.id; - } else { - body['channelName'] = modifier.channel.name; - body['channelClaimId'] = modifier.channel.id; - } - } - body['claimName'] = name; - const params = { - method : 'POST', - headers: new Headers({ - 'Content-Type': 'application/json', - }), - body: JSON.stringify(body), - } - // crate url - const url = `/api/claim/long-id`; - // return the request promise - return Request(url, params); +export function getChannelData (name, id) { + console.log('getting and storing channel data for channel:', name, id); + if (!id) id = 'none'; + const url = `/api/channel/data/${name}/${id}`; + return request(url) }; -export function getShortChannelId (name, claimId) { - const url = `/api/claim/short-id/${claimId}/${name}`; - return Request(url); -}; - -export function getChannelData (name, claimId) { - const url = `/api/claim/data/${name}/${claimId}`; +export function getChannelClaims (name, claimId) { + return Request(url); }; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 30040607..9b61a0f7 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -16,9 +16,12 @@ export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR'; // new export const NEW_ASSET_REQUEST = 'NEW_ASSET_REQUEST'; export const ASSET_REQUEST_ADD = 'ASSET_REQUEST_ADD'; + export const SHOW_NEW_ASSET = 'SHOW_NEW_ASSET'; export const SHOW_ASSET_CLEAR = 'SHOW_ASSET_CLEAR'; export const NEW_CHANNEL_REQUEST = 'NEW_CHANNEL_REQUEST'; export const CHANNEL_REQUEST_ADD = 'CHANNEL_REQUEST_ADD'; +export const SHOW_NEW_CHANNEL = 'SHOW_NEW_CHANNEL'; +export const SHOW_CHANNEL_CLEAR = 'SHOW_CHANNEL_CLEAR'; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index fcd6e733..fd0b4f8e 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -22,7 +22,7 @@ class ShowAsset extends React.Component { // if the component received new assetRequests, check again to see if the current request matches one if (assetRequests[requestId]) { // case: the assetRequest exists const request = assetRequests[requestId]; - this.onRepeatRequest(requestId, request); + this.onRepeatRequest(request); } else { // case: the asset request does not exist this.onNewRequest(requestId, requestName, requestModifier); } @@ -34,19 +34,18 @@ class ShowAsset extends React.Component { console.log('new request'); this.props.onNewRequest(id, requestName, requestModifier); } - onRepeatRequest (requestId, request) { + onRepeatRequest ({ error, name, claimId }) { console.log('repeat request'); - const { assets } = this.props; - const { error: requestError, name, claimId } = request; // if error, return and update state with error - if (requestError) { - return this.props.onRequestError(requestError); + if (error) { + return this.props.onRequestError(error); } // update the showAsset data in the store + const { assets } = this.props; const assetId = `a#${name}#${claimId}`; if (assets[assetId]) { // case: the asset data already exists - let { error, name, claimId, shortId, claimData } = assets[assetId]; - this.props.onShowExistingAsset(assetId, error, name, claimId, shortId, claimData); + let { error: assetError, name, claimId, shortId, claimData } = assets[assetId]; + this.props.onShowExistingAsset(assetId, assetError, name, claimId, shortId, claimData); } else { // case: the asset data does not exist yet this.props.onShowNewAsset(assetId, name, claimId); } diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 0ec9bd8f..e6c1bf24 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import {newChannelRequest, updateRequestError} from 'actions/show'; +import {newChannelRequest, updateRequestError, clearShowChannel} from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { @@ -19,6 +19,15 @@ const mapStateToProps = ({ show }) => { const mapDispatchToProps = dispatch => { return { + onNewChannelRequest (id, name, channelId) { + dispatch(newChannelRequest(id, name, channelId)); + }, + onRequestError: (error) => { + dispatch(updateRequestError(error, null, null)); + }, + onShowChannelClear: () => { + dispatch(clearShowChannel()); + }, // onShowChannelError: (error) => { // dispatch(updateShowChannelError(error)); // }, @@ -26,16 +35,6 @@ const mapDispatchToProps = dispatch => { // dispatch(updateChannelData(name, longId, shortId)); // dispatch(updateShowChannelError(null)); // clear any errors // }, - // onChannelDataClear: () => { - // dispatch(updateChannelData(null, null, null)); - // }, - // new - onNewChannelRequest (id, name, channelId) { - dispatch(newChannelRequest(id, name, channelId)); - }, - onRequestError: (error) => { - dispatch(updateRequestError(error, null, null)); - }, }; }; diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 8d40e827..b0879369 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -2,7 +2,6 @@ import React from 'react'; import ErrorPage from 'components/ErrorPage'; import NavBar from 'containers/NavBar'; import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; -import request from 'utils/request'; import { CHANNEL } from 'constants/show_request_types'; @@ -25,7 +24,7 @@ class ShowChannel extends React.Component { if (existingRequest(requestId, requestList)) { // const validRequest = existingRequest(requestId, requestList); // this.onRepeatChannelRequest(validRequest); - console.log('weird, we got a repeat channel request on an unmounted ShowChannel component'); + console.log('we got a repeat channel request on an unmounted ShowChannel component'); } else { this.onNewChannelRequest(requestId, requestName, requestChannelId); } @@ -38,7 +37,7 @@ class ShowChannel extends React.Component { const request = requestList[requestId]; this.onRepeatChannelRequest(request); } else { - console.log('weird, we got a new channel request on a mounted ShowChannel component'); + console.log('we got a new channel request on a mounted ShowChannel component'); } }; } @@ -52,30 +51,14 @@ class ShowChannel extends React.Component { this.props.onNewChannelRequest(requestId, requestName, requestChannelId); } onRepeatChannelRequest ({ id, error, name, claimId }) { - // if error, return early (set the request error in the store) - // if the request is valid... - // update showChannel to reflect the channel details - // see if they are available - // retrieve them if they are not available - } - getAndStoreChannelData (name, id) { - console.log('getting and storing channel data for channel:', name, id); - if (!id) id = 'none'; - const url = `/api/channel/data/${name}/${id}`; - return request(url) - .then(({ success, message, data }) => { - console.log('api/channel/data/ response:', data); - if (!success) { - return this.props.onShowChannelError(message); - } - this.props.onChannelDataUpdate(data.channelName, data.longChannelClaimId, data.shortChannelClaimId); - }) - .catch((error) => { - return this.props.onShowChannelError(error.message); - }); + // if error, return and update state with error + if (error) { + return this.props.onRequestError(error); + } + // if no error, get the channel's claims data } componentWillUnmount () { - this.props.onChannelDataClear(); + this.props.onShowChannelClear(); } render () { const { error, name, longId, shortId } = this.props; diff --git a/react/reducers/show.js b/react/reducers/show.js index d80e9c8e..7421e288 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -124,9 +124,9 @@ export default function (state = initialState, action) { return Object.assign({}, state, { channelRequests: Object.assign({}, state.assetRequests, { [action.data.id]: { - error : action.data.error, - name : action.data.name, - claimId: action.data.claimId, + error: action.data.error, + name : action.data.name, + data : action.data.data, }, }), }); @@ -143,12 +143,22 @@ export default function (state = initialState, action) { // channelData: action.data, // }), // }); - // case actions.CHANNEL_CLAIMS_DATA_UPDATE: - // return Object.assign({}, state, { - // showChannel: Object.assign({}, state.showChannel, { - // channelClaimsData: action.data, - // }), - // }); + case actions.SHOW_CHANNEL_CLEAR: + return Object.assign({}, state, { + showChannel: { + error : null, + channelData: { + name : null, + shortId: null, + longId : null, + }, + channelClaimsData: { + claims : null, + currentPage: null, + totalPages : null, + totalClaims: null, + }, + }); // display an asset case actions.FILE_AVAILABILITY_UPDATE: return Object.assign({}, state, { diff --git a/react/sagas/show.js b/react/sagas/show.js index 9ec5a24a..7fe717fe 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -4,7 +4,7 @@ import { addAssetRequest, updateShowAsset, addChannelRequest, updateShowChannel, import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; -import { getLongChannelClaimId, getShortChannelId, getChannelData } from 'api/channelApi'; +import { getChannelData, getChannelClaims } from 'api/channelApi'; function* newAssetRequest (action) { const { id, name, modifier } = action.data; @@ -22,14 +22,15 @@ function* newAssetRequest (action) { function* newChannelRequest (action) { const { id, name, channelId } = action.data; - let success, message, longChannelId; + let success, message, data; try { - ({success, message, data: longChannelId} = yield call(getLongChannelClaimId, name, channelId)); + ({success, message, data} = yield call(getChannelData, name, channelId)); } catch (error) { yield put(addChannelRequest(id, error.message, name, null)); } if (success) { - return yield put(addChannelRequest(id, null, name, longChannelId)); + console.log('api/channel/data/ response:', data); + return yield put(addChannelRequest(id, null, name, data)); } yield put(addChannelRequest(id, message, name, null)); } From c38eeb98505db20cd6d0c2f20abdfab6af90977b Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 23:02:57 -0800 Subject: [PATCH 57/96] updated channel request storage --- react/actions/show.js | 30 +++++++++++---------------- react/constants/show_action_types.js | 4 ++-- react/containers/ShowAsset/index.js | 5 +++-- react/containers/ShowChannel/index.js | 2 ++ react/containers/ShowChannel/view.jsx | 23 +++++++++----------- react/reducers/show.js | 18 ++++------------ react/sagas/index.js | 3 ++- react/sagas/show.js | 10 ++++----- 8 files changed, 40 insertions(+), 55 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index dc1c8276..c4862c48 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -39,7 +39,7 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId, export function newAssetRequest (id, name, modifier) { return { - type: actions.NEW_ASSET_REQUEST, + type: actions.ASSET_REQUEST_NEW, data: { id, name, modifier }, }; }; @@ -55,7 +55,7 @@ export function addAssetRequest (id, error, name, claimId) { export function showNewAsset (id, name, claimId) { return { - type: actions.SHOW_NEW_ASSET, + type: actions.SHOW_ASSET_NEW, data: { id, name, claimId }, }; }; @@ -82,29 +82,23 @@ export function newChannelRequest (id, name, channelId) { }; }; -export function addChannelRequest (id, error, name, data) { +export function addChannelRequest (id, error, data) { return { type: actions.CHANNEL_REQUEST_ADD, - data: { id, error, name, data }, + data: { id, error, data }, }; } // show a channel -// export function updateShowChannelError (error) { -// return { -// type: actions.SHOW_CHANNEL_ERROR, -// data: error, -// }; -// }; -// -// export function updateChannelData (name, longId, shortId) { -// return { -// type: actions.CHANNEL_DATA_UPDATE, -// data: { name, longId, shortId }, -// }; -// }; -// +export function showNewChannel (name, longId, shortId) { + +}; + +export function updateShowChannel (name, longId, shortId) { + +}; + export function clearShowChannel () { return { type: actions.SHOW_CHANNEL_CLEAR, diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 9b61a0f7..c853706f 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -14,10 +14,10 @@ export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE'; export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR'; // new -export const NEW_ASSET_REQUEST = 'NEW_ASSET_REQUEST'; +export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW'; export const ASSET_REQUEST_ADD = 'ASSET_REQUEST_ADD'; -export const SHOW_NEW_ASSET = 'SHOW_NEW_ASSET'; +export const SHOW_ASSET_NEW = 'SHOW_ASSET_NEW'; export const SHOW_ASSET_CLEAR = 'SHOW_ASSET_CLEAR'; export const NEW_CHANNEL_REQUEST = 'NEW_CHANNEL_REQUEST'; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 4dc6c5ab..bfe4ac87 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -4,17 +4,18 @@ import { newAssetRequest, updateRequestError, showNewAsset, updateShowAsset, cle const mapStateToProps = ({ show }) => { return { - // new + // request requestId : show.request.id, requestName : show.request.data.name, requestModifier : show.request.data.modifier, requestExtension: show.request.data.extension, assetRequests : show.assetRequests, assets : show.assets, - // old + // show asset error : show.showAsset.error, name : show.showAsset.name, claimData : show.showAsset.claimData, + // test showAsset : show.assets[show.request.id], }; }; diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index e6c1bf24..de174c89 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -4,12 +4,14 @@ import View from './view'; const mapStateToProps = ({ show }) => { return { + // request requestId : show.request.id, requestType : show.request.type, requestChannelName: show.request.data.name, requestChannelId : show.request.data.id, requestList : show.channelRequests, channels : show.channels, + // show channel error : show.showChannel.error, name : show.showChannel.channelData.name, shortId : show.showChannel.channelData.shortId, diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index b0879369..1dc0fd27 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -13,31 +13,28 @@ function channelNameOrIdChanged (nextProps, props) { return (nextProps.requestChannelName !== props.requestChannelName || nextProps.requestChannelName !== props.requestChannelName); } -function existingRequest (requestId, requestList) { - return requestList[requestId]; -} - class ShowChannel extends React.Component { componentDidMount () { console.log('showchannel did mount'); - const {requestId, requestName, requestChannelId, requestList} = this.props; - if (existingRequest(requestId, requestList)) { - // const validRequest = existingRequest(requestId, requestList); - // this.onRepeatChannelRequest(validRequest); + const {requestId, requestChannelName, requestChannelId, requestList} = this.props; + const existingRequest = requestList[requestId]; + if (existingRequest) { console.log('we got a repeat channel request on an unmounted ShowChannel component'); + this.onRepeatChannelRequest(existingRequest); } else { - this.onNewChannelRequest(requestId, requestName, requestChannelId); + this.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } } componentWillReceiveProps (nextProps) { console.log('showchannel will receive new props'); if (requestIsAChannelRequest(nextProps) && channelNameOrIdChanged(nextProps, this.props)) { - const {requestId, requestList} = nextProps; - if (existingRequest(requestId, requestList)) { - const request = requestList[requestId]; - this.onRepeatChannelRequest(request); + const {requestId, requestChannelName, requestChannelId, requestList} = nextProps; + const existingRequest = requestList[requestId]; + if (existingRequest) { + this.onRepeatChannelRequest(existingRequest); } else { console.log('we got a new channel request on a mounted ShowChannel component'); + this.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } }; } diff --git a/react/reducers/show.js b/react/reducers/show.js index 7421e288..8ad899c3 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -122,27 +122,16 @@ export default function (state = initialState, action) { // request a channel case actions.CHANNEL_REQUEST_ADD: return Object.assign({}, state, { - channelRequests: Object.assign({}, state.assetRequests, { + channelRequests: Object.assign({}, state.channelRequests, { [action.data.id]: { error: action.data.error, - name : action.data.name, data : action.data.data, }, }), }); // show a channel - // case actions.SHOW_CHANNEL_ERROR: - // return Object.assign({}, state, { - // showChannel: Object.assign({}, state.showChannel, { - // error: action.data, - // }), - // }); - // case actions.CHANNEL_DATA_UPDATE: - // return Object.assign({}, state, { - // showChannel: Object.assign({}, state.showChannel, { - // channelData: action.data, - // }), - // }); + // case actions.SHOW_CHANNEL_NEW: + // case actions.SHOW_CHANNEL_UPDATE: case actions.SHOW_CHANNEL_CLEAR: return Object.assign({}, state, { showChannel: { @@ -158,6 +147,7 @@ export default function (state = initialState, action) { totalPages : null, totalClaims: null, }, + }, }); // display an asset case actions.FILE_AVAILABILITY_UPDATE: diff --git a/react/sagas/index.js b/react/sagas/index.js index e9c1e4f7..eb055fc5 100644 --- a/react/sagas/index.js +++ b/react/sagas/index.js @@ -1,10 +1,11 @@ import { all } from 'redux-saga/effects'; -import { watchNewAssetRequest, watchShowNewAsset, watchFileIsRequested } from './show'; +import { watchNewAssetRequest, watchShowNewAsset, watchNewChannelRequest, watchFileIsRequested } from './show'; export default function* rootSaga () { yield all([ watchNewAssetRequest(), watchShowNewAsset(), + watchNewChannelRequest(), watchFileIsRequested(), ]); } diff --git a/react/sagas/show.js b/react/sagas/show.js index 7fe717fe..b6b93b65 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -26,13 +26,13 @@ function* newChannelRequest (action) { try { ({success, message, data} = yield call(getChannelData, name, channelId)); } catch (error) { - yield put(addChannelRequest(id, error.message, name, null)); + yield put(addChannelRequest(id, error.message, null)); } if (success) { console.log('api/channel/data/ response:', data); - return yield put(addChannelRequest(id, null, name, data)); + return yield put(addChannelRequest(id, null, data)); } - yield put(addChannelRequest(id, message, name, null)); + yield put(addChannelRequest(id, message, null)); } function* getAssetDataAndShowAsset (action) { @@ -95,7 +95,7 @@ function* retriveFile (action) { }; export function* watchNewAssetRequest () { - yield takeLatest(actions.NEW_ASSET_REQUEST, newAssetRequest); + yield takeLatest(actions.ASSET_REQUEST_NEW, newAssetRequest); }; export function* watchNewChannelRequest () { @@ -103,7 +103,7 @@ export function* watchNewChannelRequest () { }; export function* watchShowNewAsset () { - yield takeLatest(actions.SHOW_NEW_ASSET, getAssetDataAndShowAsset); + yield takeLatest(actions.SHOW_ASSET_NEW, getAssetDataAndShowAsset); }; export function* watchFileIsRequested () { From 1a47296e24363662be03c7bd165fd3f1b10b0ee0 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 23:18:18 -0800 Subject: [PATCH 58/96] re-organized request parsing --- react/containers/ShowAsset/view.jsx | 27 +++++++++++++++++---------- react/containers/ShowChannel/view.jsx | 17 ++++------------- 2 files changed, 21 insertions(+), 23 deletions(-) diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index fd0b4f8e..fd392835 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -3,26 +3,33 @@ import ErrorPage from 'components/ErrorPage'; import ShowAssetLite from 'components/ShowAssetLite'; import ShowAssetDetails from 'components/ShowAssetDetails'; +import { ASSET } from 'constants/show_request_types'; + +function requestIsAnAssetRequest ({ requestType }) { + return requestType === ASSET; +} + +function requestIsNewRequest (nextProps, props) { + return (nextProps.requestId !== props.requestId); +} + class ShowAsset extends React.Component { componentDidMount () { const { requestId, requestName, requestModifier, assetRequests } = this.props; - // check to see if we have this asset - if (assetRequests[requestId]) { // case: the assetRequest exists - const request = assetRequests[requestId]; - this.onRepeatRequest(requestId, request); + const existingRequest = assetRequests[requestId]; + if (existingRequest) { // case: the assetRequest exists + this.onRepeatRequest(existingRequest); } else { // case: the asset request does not exist this.onNewRequest(requestId, requestName, requestModifier); } } componentWillReceiveProps (nextProps) { // case where componentDidMount triggered new props - if (nextProps.assetRequests !== this.props.assetRequests) { // note: reason for not showing small url requests? - console.log('show.assetRequests updated'); + if (requestIsAnAssetRequest(nextProps) && requestIsNewRequest(nextProps, this.props)) { const { requestId, requestName, requestModifier, assetRequests } = nextProps; - // if the component received new assetRequests, check again to see if the current request matches one - if (assetRequests[requestId]) { // case: the assetRequest exists - const request = assetRequests[requestId]; - this.onRepeatRequest(request); + const existingRequest = assetRequests[requestId]; + if (existingRequest) { // case: the assetRequest exists + this.onRepeatRequest(existingRequest); } else { // case: the asset request does not exist this.onNewRequest(requestId, requestName, requestModifier); } diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 1dc0fd27..b494c123 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -9,42 +9,33 @@ function requestIsAChannelRequest ({ requestType }) { return requestType === CHANNEL; } -function channelNameOrIdChanged (nextProps, props) { - return (nextProps.requestChannelName !== props.requestChannelName || nextProps.requestChannelName !== props.requestChannelName); +function requestIsNewRequest (nextProps, props) { + return (nextProps.requestId !== props.requestId); } class ShowChannel extends React.Component { componentDidMount () { - console.log('showchannel did mount'); const {requestId, requestChannelName, requestChannelId, requestList} = this.props; const existingRequest = requestList[requestId]; if (existingRequest) { - console.log('we got a repeat channel request on an unmounted ShowChannel component'); this.onRepeatChannelRequest(existingRequest); } else { this.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } } componentWillReceiveProps (nextProps) { - console.log('showchannel will receive new props'); - if (requestIsAChannelRequest(nextProps) && channelNameOrIdChanged(nextProps, this.props)) { + if (requestIsAChannelRequest(nextProps) && requestIsNewRequest(nextProps, this.props)) { const {requestId, requestChannelName, requestChannelId, requestList} = nextProps; const existingRequest = requestList[requestId]; if (existingRequest) { this.onRepeatChannelRequest(existingRequest); } else { - console.log('we got a new channel request on a mounted ShowChannel component'); this.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } }; } onNewChannelRequest (requestId, requestName, requestChannelId) { - // validate the request (i.e. get channel full claim id) - // update teh request list - // if error, return early (set the request error in the store) - // if the request is valid... - // add it to the requestList - // update showChannel to reflect the channel details + console.log('new request'); this.props.onNewChannelRequest(requestId, requestName, requestChannelId); } onRepeatChannelRequest ({ id, error, name, claimId }) { From 61d5feee826b3c40541f32068d44ec3203456923 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 7 Feb 2018 23:49:01 -0800 Subject: [PATCH 59/96] chained show asset to new asset request --- react/containers/ShowAsset/view.jsx | 8 +++--- react/containers/ShowChannel/view.jsx | 2 +- react/sagas/show.js | 35 ++++++++++++++------------- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index fd392835..f48e41a8 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -50,11 +50,13 @@ class ShowAsset extends React.Component { // update the showAsset data in the store const { assets } = this.props; const assetId = `a#${name}#${claimId}`; - if (assets[assetId]) { // case: the asset data already exists - let { error: assetError, name, claimId, shortId, claimData } = assets[assetId]; + const existingAssetRecord = assets[assetId]; + if (existingAssetRecord) { // case: the asset data already exists + let { error: assetError, name, claimId, shortId, claimData } = existingAssetRecord; this.props.onShowExistingAsset(assetId, assetError, name, claimId, shortId, claimData); } else { // case: the asset data does not exist yet - this.props.onShowNewAsset(assetId, name, claimId); + console.log('error: there should be an existing record'); + // this.props.onShowNewAsset(assetId, name, claimId); } } componentWillUnmount () { diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index b494c123..c9477e21 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -38,7 +38,7 @@ class ShowChannel extends React.Component { console.log('new request'); this.props.onNewChannelRequest(requestId, requestName, requestChannelId); } - onRepeatChannelRequest ({ id, error, name, claimId }) { + onRepeatChannelRequest ({ id, error, data: { channelName, longChannelClaimId} }) { // if error, return and update state with error if (error) { return this.props.onRequestError(error); diff --git a/react/sagas/show.js b/react/sagas/show.js index b6b93b65..408c316d 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addAssetRequest, updateShowAsset, addChannelRequest, updateShowChannel, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; +import { addAssetRequest, updateShowAsset, showNewAsset, addChannelRequest, updateShowChannel, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; @@ -15,26 +15,12 @@ function* newAssetRequest (action) { yield put(addAssetRequest(id, error.message, name, null)); } if (success) { - return yield put(addAssetRequest(id, null, name, longId)); + yield put(addAssetRequest(id, null, name, longId)); + return yield put(showNewAsset(id, name, longId)); } yield put(addAssetRequest(id, message, name, null)); }; -function* newChannelRequest (action) { - const { id, name, channelId } = action.data; - let success, message, data; - try { - ({success, message, data} = yield call(getChannelData, name, channelId)); - } catch (error) { - yield put(addChannelRequest(id, error.message, null)); - } - if (success) { - console.log('api/channel/data/ response:', data); - return yield put(addChannelRequest(id, null, data)); - } - yield put(addChannelRequest(id, message, null)); -} - function* getAssetDataAndShowAsset (action) { const {id, name, claimId} = action.data; // if no error, get short Id @@ -94,6 +80,21 @@ function* retriveFile (action) { } }; +function* newChannelRequest (action) { + const { id, name, channelId } = action.data; + let success, message, data; + try { + ({success, message, data} = yield call(getChannelData, name, channelId)); + } catch (error) { + yield put(addChannelRequest(id, error.message, null)); + } + if (success) { + console.log('api/channel/data/ response:', data); + return yield put(addChannelRequest(id, null, data)); + } + yield put(addChannelRequest(id, message, null)); +} + export function* watchNewAssetRequest () { yield takeLatest(actions.ASSET_REQUEST_NEW, newAssetRequest); }; From e1f07e27ee18d49b35dfc50d0cfcb8280f76804c Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 8 Feb 2018 10:02:29 -0800 Subject: [PATCH 60/96] updated how new channel requests are stored --- react/actions/show.js | 4 ++-- react/containers/ShowAsset/index.js | 2 -- react/containers/ShowAsset/view.jsx | 17 +++++++++++------ react/containers/ShowChannel/index.js | 2 +- react/containers/ShowChannel/view.jsx | 24 ++++++++++++++++++------ react/reducers/show.js | 8 ++++++-- react/sagas/show.js | 23 +++++++++++++++-------- react/utils/lbryUri.js | 4 ---- 8 files changed, 53 insertions(+), 31 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index c4862c48..caf4b13b 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -82,10 +82,10 @@ export function newChannelRequest (id, name, channelId) { }; }; -export function addChannelRequest (id, error, data) { +export function addChannelRequest (id, error, name, longId, shortId) { return { type: actions.CHANNEL_REQUEST_ADD, - data: { id, error, data }, + data: { id, error, name, longId, shortId }, }; } diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index bfe4ac87..009513ab 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -15,8 +15,6 @@ const mapStateToProps = ({ show }) => { error : show.showAsset.error, name : show.showAsset.name, claimData : show.showAsset.claimData, - // test - showAsset : show.assets[show.request.id], }; }; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index f48e41a8..3563b32e 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -25,7 +25,7 @@ class ShowAsset extends React.Component { } componentWillReceiveProps (nextProps) { // case where componentDidMount triggered new props - if (requestIsAnAssetRequest(nextProps) && requestIsNewRequest(nextProps, this.props)) { + if (requestIsNewRequest(nextProps, this.props)) { const { requestId, requestName, requestModifier, assetRequests } = nextProps; const existingRequest = assetRequests[requestId]; if (existingRequest) { // case: the assetRequest exists @@ -34,7 +34,7 @@ class ShowAsset extends React.Component { this.onNewRequest(requestId, requestName, requestModifier); } } else { - console.log('show.assetRequests did not update'); + console.log('show.assetRequestId did not update'); } } onNewRequest (id, requestName, requestModifier) { @@ -52,13 +52,18 @@ class ShowAsset extends React.Component { const assetId = `a#${name}#${claimId}`; const existingAssetRecord = assets[assetId]; if (existingAssetRecord) { // case: the asset data already exists - let { error: assetError, name, claimId, shortId, claimData } = existingAssetRecord; - this.props.onShowExistingAsset(assetId, assetError, name, claimId, shortId, claimData); + this.showExistingAsset(assetId, existingAssetRecord); } else { // case: the asset data does not exist yet - console.log('error: there should be an existing record'); - // this.props.onShowNewAsset(assetId, name, claimId); + this.showNewAsset(assetId, name, claimId); } } + showNewAsset (assetId, name, claimId) { + this.props.onShowNewAsset(assetId, name, claimId); + } + showExistingAsset (assetId, existingAssetRecord) { + let { error, name, claimId, shortId, claimData } = existingAssetRecord; + this.props.onShowExistingAsset(assetId, error, name, claimId, shortId, claimData); + } componentWillUnmount () { this.props.onLeaveShowAsset(); } diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index de174c89..c605ea01 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -10,7 +10,7 @@ const mapStateToProps = ({ show }) => { requestChannelName: show.request.data.name, requestChannelId : show.request.data.id, requestList : show.channelRequests, - channels : show.channels, + channelList : show.channels, // show channel error : show.showChannel.error, name : show.showChannel.channelData.name, diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index c9477e21..d99096ab 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -15,20 +15,20 @@ function requestIsNewRequest (nextProps, props) { class ShowChannel extends React.Component { componentDidMount () { - const {requestId, requestChannelName, requestChannelId, requestList} = this.props; + const {requestId, requestChannelName, requestChannelId, requestList, channelList} = this.props; const existingRequest = requestList[requestId]; if (existingRequest) { - this.onRepeatChannelRequest(existingRequest); + this.onRepeatChannelRequest(existingRequest, channelList); } else { this.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } } componentWillReceiveProps (nextProps) { if (requestIsAChannelRequest(nextProps) && requestIsNewRequest(nextProps, this.props)) { - const {requestId, requestChannelName, requestChannelId, requestList} = nextProps; + const {requestId, requestChannelName, requestChannelId, requestList, channelList} = nextProps; const existingRequest = requestList[requestId]; if (existingRequest) { - this.onRepeatChannelRequest(existingRequest); + this.onRepeatChannelRequest(existingRequest, channelList); } else { this.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } @@ -38,13 +38,25 @@ class ShowChannel extends React.Component { console.log('new request'); this.props.onNewChannelRequest(requestId, requestName, requestChannelId); } - onRepeatChannelRequest ({ id, error, data: { channelName, longChannelClaimId} }) { + onRepeatChannelRequest ({ id, error, channelData: { channelName, longChannelClaimId} }, channelList) { // if error, return and update state with error if (error) { return this.props.onRequestError(error); } - // if no error, get the channel's claims data + // check if the channel data is present or not + const existingChannel = channelList[id]; + if (existingChannel) { + showExistingChannel(); + } else { + showNewChannel(); + } } + showNewChannel () { + + }; + showExistingChannel () { + + }; componentWillUnmount () { this.props.onShowChannelClear(); } diff --git a/react/reducers/show.js b/react/reducers/show.js index 8ad899c3..adb936c2 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -124,8 +124,12 @@ export default function (state = initialState, action) { return Object.assign({}, state, { channelRequests: Object.assign({}, state.channelRequests, { [action.data.id]: { - error: action.data.error, - data : action.data.data, + error : action.data.error, + channelData: { + name : action.data.name, + longId : action.data.longId, + shortId: action.data.shortId, + }, }, }), }); diff --git a/react/sagas/show.js b/react/sagas/show.js index 408c316d..e50e8503 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -16,7 +16,8 @@ function* newAssetRequest (action) { } if (success) { yield put(addAssetRequest(id, null, name, longId)); - return yield put(showNewAsset(id, name, longId)); + const newAssetId = `a#${name}#${longId}`; // note move to action + return yield put(showNewAsset(newAssetId, name, longId)); } yield put(addAssetRequest(id, message, name, null)); }; @@ -48,7 +49,7 @@ function* getAssetDataAndShowAsset (action) { yield put(updateShowAsset(id, null, name, claimId, shortId, claimData)); } -function* retriveFile (action) { +function* retrieveFile (action) { const name = action.data.name; const claimId = action.data.claimId; // see if the file is available @@ -86,15 +87,17 @@ function* newChannelRequest (action) { try { ({success, message, data} = yield call(getChannelData, name, channelId)); } catch (error) { - yield put(addChannelRequest(id, error.message, null)); + yield put(addChannelRequest(id, error.message, null, null, null)); } if (success) { - console.log('api/channel/data/ response:', data); - return yield put(addChannelRequest(id, null, data)); + const { channelName, longChannelClaimId, shortChannelClaimId } = data; + return yield put(addChannelRequest(id, null, channelName, longChannelClaimId, shortChannelClaimId)); } - yield put(addChannelRequest(id, message, null)); + yield put(addChannelRequest(id, message, null, null, null)); } + + export function* watchNewAssetRequest () { yield takeLatest(actions.ASSET_REQUEST_NEW, newAssetRequest); }; @@ -107,6 +110,10 @@ export function* watchShowNewAsset () { yield takeLatest(actions.SHOW_ASSET_NEW, getAssetDataAndShowAsset); }; -export function* watchFileIsRequested () { - yield takeLatest(actions.FILE_REQUESTED, retriveFile); +export function* watchShowNewChannel () { + yield takeLatest(actions.SHOW_ASSET_NEW, getAssetDataAndShowAsset); +}; + +export function* watchFileIsRequested () { + yield takeLatest(actions.FILE_REQUESTED, retrieveFile); }; diff --git a/react/utils/lbryUri.js b/react/utils/lbryUri.js index bc40f35c..33ac7081 100644 --- a/react/utils/lbryUri.js +++ b/react/utils/lbryUri.js @@ -4,7 +4,6 @@ module.exports = { REGEXP_ADDRESS : /^b(?=[^0OIl]{32,33})[0-9A-Za-z]{32,33}$/, CHANNEL_CHAR : '@', parseIdentifier : function (identifier) { - console.log('parsing identifier:', identifier); const componentsRegex = new RegExp( '([^:$#/]*)' + // value (stops at the first separator or end) '([:$#]?)([^/]*)' // modifier separator, modifier (stops at the first path separator or end) @@ -12,7 +11,6 @@ module.exports = { const [proto, value, modifierSeperator, modifier] = componentsRegex .exec(identifier) .map(match => match || null); - console.log(`${proto}, ${value}, ${modifierSeperator}, ${modifier}`); // Validate and process name if (!value) { @@ -54,7 +52,6 @@ module.exports = { }; }, parseClaim: function (name) { - console.log('parsing name:', name); const componentsRegex = new RegExp( '([^:$#/.]*)' + // name (stops at the first extension) '([:$#.]?)([^/]*)' // extension separator, extension (stops at the first path separator or end) @@ -62,7 +59,6 @@ module.exports = { const [proto, claimName, extensionSeperator, extension] = componentsRegex .exec(name) .map(match => match || null); - console.log(`${proto}, ${claimName}, ${extensionSeperator}, ${extension}`); // Validate and process name if (!claimName) { From 0fcdba8290a36ad9a537aeb36fdb312b6edb94ee Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 8 Feb 2018 10:59:49 -0800 Subject: [PATCH 61/96] completed logic for viewing new channel --- react/actions/show.js | 30 +++++++++++++--- react/api/channelApi.js | 19 ++++++++-- react/constants/show_action_types.js | 12 +++---- .../containers/ChannelClaimsDisplay/view.jsx | 14 +------- react/containers/ShowChannel/index.js | 17 +++++---- react/containers/ShowChannel/view.jsx | 17 ++++----- react/reducers/show.js | 23 ++++++++++-- react/sagas/index.js | 3 +- react/sagas/show.js | 36 ++++++++++++++----- 9 files changed, 114 insertions(+), 57 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index caf4b13b..21603a8f 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -77,7 +77,7 @@ export function clearShowAsset () { export function newChannelRequest (id, name, channelId) { return { - type: actions.NEW_CHANNEL_REQUEST, + type: actions.CHANNEL_REQUEST_NEW, data: {id, name, channelId}, }; }; @@ -91,12 +91,25 @@ export function addChannelRequest (id, error, name, longId, shortId) { // show a channel -export function showNewChannel (name, longId, shortId) { - +export function showNewChannel (id, name, longId, channelData) { + return { + type: actions.SHOW_CHANNEL_NEW, + data: { id, name, longId, channelData}, + }; }; -export function updateShowChannel (name, longId, shortId) { +// export function showExistingChannel (existingChannel) { +// return { +// type: actions.SHOW_CHANNEL_EXISTING, +// data: { existingChannel }, +// }; +// }; +export function updateShowChannel (error, channelData, claimData) { + return { + type: actions.SHOW_CHANNEL_UPDATE, + data: { error, channelData, claimData }, + } }; export function clearShowChannel () { @@ -105,6 +118,15 @@ export function clearShowChannel () { }; }; +// add channels to channel list + +export function addNewChannelToChannelList (id, error, channelData, claimsData) { + return { + type: actions.CHANNEL_LIST_ADD, + data: { id, error, channelData, claimsData }, + }; +}; + // display a file export function fileRequested (name, claimId) { diff --git a/react/api/channelApi.js b/react/api/channelApi.js index d2e2d821..d0dd4e69 100644 --- a/react/api/channelApi.js +++ b/react/api/channelApi.js @@ -5,10 +5,23 @@ export function getChannelData (name, id) { console.log('getting and storing channel data for channel:', name, id); if (!id) id = 'none'; const url = `/api/channel/data/${name}/${id}`; - return request(url) + return request(url); }; -export function getChannelClaims (name, claimId) { - +export function getChannelClaims (name, longId, page) { + console.log('getting and storing channel claims for channel:', name, longId); + if (!page) page = 1; + const url = `/api/channel/claims/${name}/${longId}/${page}`; return Request(url); + // .then(({ success, message, data }) => { + // console.log('api/channel-claims response:', data); + // if (!success) { + // return this.setState({error: message}); + // } + // this.setState({error: null}); // move this error to redux state + // this.props.onChannelClaimsDataUpdate(data.claims, data.currentPage, data.totalPages, data.totalResults); + // }) + // .catch((error) => { + // this.setState({error: error.message}); + // }); }; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index c853706f..106867f9 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -2,12 +2,7 @@ export const REQUEST_CHANNEL_UPDATE = 'REQUEST_CHANNEL_UPDATE'; export const REQUEST_CLAIM_UPDATE = 'REQUEST_CLAIM_UPDATE'; export const REQUEST_ERROR_UPDATE = 'REQUEST_ERROR_UPDATE'; -export const SHOW_CHANNEL_ERROR = 'SHOW_CHANNEL_ERROR'; -export const CHANNEL_DATA_UPDATE = 'CHANNEL_DATA_UPDATE'; -export const CHANNEL_CLAIMS_DATA_UPDATE = 'CHANNEL_CLAIMS_DATA_UPDATE'; - export const SHOW_ASSET_UPDATE = 'SHOW_ASSET_UPDATE'; -export const ASSET_CLAIM_DATA_UPDATE = 'ASSET_CLAIM_DATA_UPDATE'; export const FILE_REQUESTED = 'FILE_REQUESTED'; export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE'; @@ -20,8 +15,11 @@ export const ASSET_REQUEST_ADD = 'ASSET_REQUEST_ADD'; export const SHOW_ASSET_NEW = 'SHOW_ASSET_NEW'; export const SHOW_ASSET_CLEAR = 'SHOW_ASSET_CLEAR'; -export const NEW_CHANNEL_REQUEST = 'NEW_CHANNEL_REQUEST'; +export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW'; export const CHANNEL_REQUEST_ADD = 'CHANNEL_REQUEST_ADD'; -export const SHOW_NEW_CHANNEL = 'SHOW_NEW_CHANNEL'; +export const SHOW_CHANNEL_NEW = 'SHOW_CHANNEL_NEW'; +export const SHOW_CHANNEL_UPDATE = 'SHOW_CHANNEL_UPDATE'; export const SHOW_CHANNEL_CLEAR = 'SHOW_CHANNEL_CLEAR'; + +export const CHANNEL_LIST_ADD = 'CHANNEL_LIST_ADD'; diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index 571bbd15..c4e3543b 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -22,19 +22,7 @@ class ChannelClaimsDisplay extends React.Component { } } updateClaimsData (name, longId, page) { - const url = `/api/channel/claims/${name}/${longId}/${page}`; - return request(url) - .then(({ success, message, data }) => { - console.log('api/channel-claims response:', data); - if (!success) { - return this.setState({error: message}); - } - this.setState({error: null}); // move this error to redux state - this.props.onChannelClaimsDataUpdate(data.claims, data.currentPage, data.totalPages, data.totalResults); - }) - .catch((error) => { - this.setState({error: error.message}); - }); + console.log('this function has been moved into the redux sagas'); } componentWillUnmount () { this.props.onChannelClaimsDataClear(); diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index c605ea01..156cb171 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import {newChannelRequest, updateRequestError, clearShowChannel} from 'actions/show'; +import {newChannelRequest, updateRequestError, showNewChannel, clearShowChannel} from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { @@ -10,7 +10,7 @@ const mapStateToProps = ({ show }) => { requestChannelName: show.request.data.name, requestChannelId : show.request.data.id, requestList : show.channelRequests, - channelList : show.channels, + channelList : show.channelList, // show channel error : show.showChannel.error, name : show.showChannel.channelData.name, @@ -26,17 +26,16 @@ const mapDispatchToProps = dispatch => { }, onRequestError: (error) => { dispatch(updateRequestError(error, null, null)); + }, + onShowNewChannel: (id, name, longId) => { + dispatch(showNewChannel(id, name, longId)); + }, + onShowExistingChannel: () => { + }, onShowChannelClear: () => { dispatch(clearShowChannel()); }, - // onShowChannelError: (error) => { - // dispatch(updateShowChannelError(error)); - // }, - // onChannelDataUpdate: (name, longId, shortId) => { - // dispatch(updateChannelData(name, longId, shortId)); - // dispatch(updateShowChannelError(null)); // clear any errors - // }, }; }; diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index d99096ab..26df9141 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -38,24 +38,25 @@ class ShowChannel extends React.Component { console.log('new request'); this.props.onNewChannelRequest(requestId, requestName, requestChannelId); } - onRepeatChannelRequest ({ id, error, channelData: { channelName, longChannelClaimId} }, channelList) { + onRepeatChannelRequest ({ error, channelData }, channelList) { // if error, return and update state with error if (error) { return this.props.onRequestError(error); } // check if the channel data is present or not - const existingChannel = channelList[id]; + const channelRecordId = `c#${channelData.name}#${channelData.longId}`; + const existingChannel = channelList[channelRecordId]; if (existingChannel) { - showExistingChannel(); + this.showExistingChannel(channelRecordId, existingChannel); } else { - showNewChannel(); + this.showNewChannel(channelRecordId, channelData.name, channelData.longId, channelData); } } - showNewChannel () { - + showNewChannel (channelRecordId, name, longId) { + this.props.onShowNewChannel(channelRecordId, name, longId); }; - showExistingChannel () { - + showExistingChannel (existingChannel) { + this.props.onShowExistingChannel(existingChannel); }; componentWillUnmount () { this.props.onShowChannelClear(); diff --git a/react/reducers/show.js b/react/reducers/show.js index adb936c2..58482387 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -35,7 +35,7 @@ const initialState = { status: LOCAL_CHECK, }, channelRequests: {}, - channels : {}, // same schema as showChannel + channelList : {}, assetRequests : {}, assets : {}, // same schema as showAsset }; @@ -134,8 +134,14 @@ export default function (state = initialState, action) { }), }); // show a channel - // case actions.SHOW_CHANNEL_NEW: - // case actions.SHOW_CHANNEL_UPDATE: + case actions.SHOW_CHANNEL_UPDATE: + return Object.assign({}, state, { + showChannel: { + error : action.error, + channelData: action.channelData, + claimData : action.claimData, + }, + }); case actions.SHOW_CHANNEL_CLEAR: return Object.assign({}, state, { showChannel: { @@ -153,6 +159,17 @@ export default function (state = initialState, action) { }, }, }); + // add channel to channel list + case actions.CHANNEL_LIST_ADD: + return Object.assign({}, state, { + channelList: Object.assign({}, state.channelList, { + [action.data.id]: { + error : action.data.error, + channelData: action.data.channelData, + claimsData : action.data.claimsData, + }, + }), + }); // display an asset case actions.FILE_AVAILABILITY_UPDATE: return Object.assign({}, state, { diff --git a/react/sagas/index.js b/react/sagas/index.js index eb055fc5..d07a71f7 100644 --- a/react/sagas/index.js +++ b/react/sagas/index.js @@ -1,11 +1,12 @@ import { all } from 'redux-saga/effects'; -import { watchNewAssetRequest, watchShowNewAsset, watchNewChannelRequest, watchFileIsRequested } from './show'; +import { watchNewAssetRequest, watchShowNewAsset, watchNewChannelRequest, watchShowNewChannel, watchFileIsRequested } from './show'; export default function* rootSaga () { yield all([ watchNewAssetRequest(), watchShowNewAsset(), watchNewChannelRequest(), + watchShowNewChannel(), watchFileIsRequested(), ]); } diff --git a/react/sagas/show.js b/react/sagas/show.js index e50e8503..3317f447 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addAssetRequest, updateShowAsset, showNewAsset, addChannelRequest, updateShowChannel, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; +import { addAssetRequest, updateShowAsset, showNewAsset, addChannelRequest, showNewChannel, updateShowChannel, addNewChannelToChannelList, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; @@ -47,6 +47,7 @@ function* getAssetDataAndShowAsset (action) { } // if both are successfull, add to asset list and select for showing yield put(updateShowAsset(id, null, name, claimId, shortId, claimData)); + // yield put(addAssetToAssetList(arg1, arg2)); } function* retrieveFile (action) { @@ -87,23 +88,40 @@ function* newChannelRequest (action) { try { ({success, message, data} = yield call(getChannelData, name, channelId)); } catch (error) { - yield put(addChannelRequest(id, error.message, null, null, null)); + return yield put(addChannelRequest(id, error.message, null, null, null)); } - if (success) { - const { channelName, longChannelClaimId, shortChannelClaimId } = data; - return yield put(addChannelRequest(id, null, channelName, longChannelClaimId, shortChannelClaimId)); + if (!success) { + return yield put(addChannelRequest(id, message, null, null, null)); } - yield put(addChannelRequest(id, message, null, null, null)); + const { channelName, longChannelClaimId, shortChannelClaimId } = data; + yield put(addChannelRequest(id, null, channelName, longChannelClaimId, shortChannelClaimId)); + const channelRecordId = `c#${channelName}#${longChannelClaimId}`; // move to the action + yield put(showNewChannel(channelRecordId, channelName, longChannelClaimId )); } - +function* getNewChannelDataAndShowChannel (action) { + const { id, name, longId, channelData } = action; + let success, message, claimsData; + try { + ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, 1)); + } catch (error) { + return yield put(updateShowChannel(error.message, channelData, null)); + // yield put(addNewChannelToChannelList(id, error.message, null, null)); + } + if (!success) { + return yield put(updateShowChannel(message, channelData, null)); + // yield put(addNewChannelToChannelList(id, message, null, null)); + } + yield put(updateShowChannel(null, channelData, claimsData)); + yield put(addNewChannelToChannelList(id, null, channelData, claimsData)); +} export function* watchNewAssetRequest () { yield takeLatest(actions.ASSET_REQUEST_NEW, newAssetRequest); }; export function* watchNewChannelRequest () { - yield takeLatest(actions.NEW_CHANNEL_REQUEST, newChannelRequest); + yield takeLatest(actions.CHANNEL_REQUEST_NEW, newChannelRequest); }; export function* watchShowNewAsset () { @@ -111,7 +129,7 @@ export function* watchShowNewAsset () { }; export function* watchShowNewChannel () { - yield takeLatest(actions.SHOW_ASSET_NEW, getAssetDataAndShowAsset); + yield takeLatest(actions.SHOW_CHANNEL_NEW, getNewChannelDataAndShowChannel); }; export function* watchFileIsRequested () { From 0a3e0525649595c7ce487bdaf70ce279a48671ce Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 8 Feb 2018 11:22:19 -0800 Subject: [PATCH 62/96] split showing asset and adding asset actions --- react/actions/show.js | 24 +++++++++++++----------- react/constants/show_action_types.js | 18 +++++++++++------- react/containers/ShowAsset/index.js | 4 ++-- react/containers/ShowAsset/view.jsx | 6 +++--- react/containers/ShowChannel/index.js | 6 +++--- react/containers/ShowChannel/view.jsx | 3 ++- react/reducers/show.js | 22 +++++++++++++--------- react/sagas/show.js | 22 +++++++++++++--------- 8 files changed, 60 insertions(+), 45 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index 21603a8f..a0ac29ef 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -60,10 +60,10 @@ export function showNewAsset (id, name, claimId) { }; }; -export function updateShowAsset (id, error, name, claimId, shortId, claimData) { +export function updateShowAsset (error, name, claimId, shortId, claimData) { return { type: actions.SHOW_ASSET_UPDATE, - data: { id, error, name, claimId, shortId, claimData }, + data: { error, name, claimId, shortId, claimData }, }; }; @@ -73,6 +73,15 @@ export function clearShowAsset () { }; }; +// add asset to asset list + +export function addAssetToAssetList (id, error, name, claimId, shortId, claimData) { + return { + type: actions.ASSET_LIST_ADD, + data: { id, error, name, claimId, shortId, claimData }, + }; +} + // request for a channel export function newChannelRequest (id, name, channelId) { @@ -94,22 +103,15 @@ export function addChannelRequest (id, error, name, longId, shortId) { export function showNewChannel (id, name, longId, channelData) { return { type: actions.SHOW_CHANNEL_NEW, - data: { id, name, longId, channelData}, + data: { id, name, longId, channelData }, }; }; -// export function showExistingChannel (existingChannel) { -// return { -// type: actions.SHOW_CHANNEL_EXISTING, -// data: { existingChannel }, -// }; -// }; - export function updateShowChannel (error, channelData, claimData) { return { type: actions.SHOW_CHANNEL_UPDATE, data: { error, channelData, claimData }, - } + }; }; export function clearShowChannel () { diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 106867f9..d4d262f8 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,20 +1,19 @@ +// request actions export const REQUEST_CHANNEL_UPDATE = 'REQUEST_CHANNEL_UPDATE'; export const REQUEST_CLAIM_UPDATE = 'REQUEST_CLAIM_UPDATE'; export const REQUEST_ERROR_UPDATE = 'REQUEST_ERROR_UPDATE'; -export const SHOW_ASSET_UPDATE = 'SHOW_ASSET_UPDATE'; - -export const FILE_REQUESTED = 'FILE_REQUESTED'; -export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE'; -export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR'; - -// new +// asset request actions export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW'; export const ASSET_REQUEST_ADD = 'ASSET_REQUEST_ADD'; export const SHOW_ASSET_NEW = 'SHOW_ASSET_NEW'; +export const SHOW_ASSET_UPDATE = 'SHOW_ASSET_UPDATE'; export const SHOW_ASSET_CLEAR = 'SHOW_ASSET_CLEAR'; +export const ASSET_LIST_ADD = `ASSET_LIST_ADD`; + +// channel request actions export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW'; export const CHANNEL_REQUEST_ADD = 'CHANNEL_REQUEST_ADD'; @@ -23,3 +22,8 @@ export const SHOW_CHANNEL_UPDATE = 'SHOW_CHANNEL_UPDATE'; export const SHOW_CHANNEL_CLEAR = 'SHOW_CHANNEL_CLEAR'; export const CHANNEL_LIST_ADD = 'CHANNEL_LIST_ADD'; + +// asset/file display actions +export const FILE_REQUESTED = 'FILE_REQUESTED'; +export const FILE_AVAILABILITY_UPDATE = 'FILE_AVAILABILITY_UPDATE'; +export const DISPLAY_ASSET_ERROR = 'DISPLAY_ASSET_ERROR'; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 009513ab..e058cb55 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -30,8 +30,8 @@ const mapDispatchToProps = dispatch => { onShowNewAsset: (id, name, claimId) => { dispatch(showNewAsset(id, name, claimId)); }, - onShowExistingAsset: (id, error, name, claimId, shortId, claimData) => { - dispatch(updateShowAsset(id, error, name, claimId, shortId, claimData)); + onShowExistingAsset: (error, name, claimId, shortId, claimData) => { + dispatch(updateShowAsset(error, name, claimId, shortId, claimData)); }, onLeaveShowAsset: () => { dispatch(clearShowAsset()); // clear any errors diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 3563b32e..40be9fb5 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -52,7 +52,7 @@ class ShowAsset extends React.Component { const assetId = `a#${name}#${claimId}`; const existingAssetRecord = assets[assetId]; if (existingAssetRecord) { // case: the asset data already exists - this.showExistingAsset(assetId, existingAssetRecord); + this.showExistingAsset(existingAssetRecord); } else { // case: the asset data does not exist yet this.showNewAsset(assetId, name, claimId); } @@ -60,9 +60,9 @@ class ShowAsset extends React.Component { showNewAsset (assetId, name, claimId) { this.props.onShowNewAsset(assetId, name, claimId); } - showExistingAsset (assetId, existingAssetRecord) { + showExistingAsset (existingAssetRecord) { let { error, name, claimId, shortId, claimData } = existingAssetRecord; - this.props.onShowExistingAsset(assetId, error, name, claimId, shortId, claimData); + this.props.onShowExistingAsset(error, name, claimId, shortId, claimData); } componentWillUnmount () { this.props.onLeaveShowAsset(); diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 156cb171..ba5f560f 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import {newChannelRequest, updateRequestError, showNewChannel, clearShowChannel} from 'actions/show'; +import {newChannelRequest, updateRequestError, showNewChannel, updateShowChannel, clearShowChannel} from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { @@ -30,8 +30,8 @@ const mapDispatchToProps = dispatch => { onShowNewChannel: (id, name, longId) => { dispatch(showNewChannel(id, name, longId)); }, - onShowExistingChannel: () => { - + onShowExistingChannel: (error, channelData, claimData) => { + dispatch(updateShowChannel(error, channelData, claimData)); }, onShowChannelClear: () => { dispatch(clearShowChannel()); diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 26df9141..47151dcc 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -56,7 +56,8 @@ class ShowChannel extends React.Component { this.props.onShowNewChannel(channelRecordId, name, longId); }; showExistingChannel (existingChannel) { - this.props.onShowExistingChannel(existingChannel); + const { error, channelData, claimData } = existingChannel; + this.props.onShowExistingChannel(error, channelData, claimData); }; componentWillUnmount () { this.props.onShowChannelClear(); diff --git a/react/reducers/show.js b/react/reducers/show.js index 58482387..e4aecb03 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -92,15 +92,6 @@ export default function (state = initialState, action) { // show an asset case actions.SHOW_ASSET_UPDATE: return Object.assign({}, state, { - assets: Object.assign({}, state.assets, { - [action.data.id]: { - error : action.data.error, - name : action.data.name, - claimId : action.data.claimId, - shortId : action.data.shortId, - claimData: action.data.claimData, - }, - }), showAsset: Object.assign({}, state.showAsset, { error : action.data.error, name : action.data.name, @@ -119,6 +110,19 @@ export default function (state = initialState, action) { claimData: null, }), }); + // add asset to asset list + case actions.ASSET_LIST_ADD: + return Object.assign({}, state, { + assetList: Object.assign({}, state.assetList, { + [action.data.id]: { + error : action.data.error, + name : action.data.name, + claimId : action.data.claimId, + shortId : action.data.shortId, + claimData: action.data.claimData, + }, + }), + }); // request a channel case actions.CHANNEL_REQUEST_ADD: return Object.assign({}, state, { diff --git a/react/sagas/show.js b/react/sagas/show.js index 3317f447..fe686f18 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addAssetRequest, updateShowAsset, showNewAsset, addChannelRequest, showNewChannel, updateShowChannel, addNewChannelToChannelList, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; +import { addAssetRequest, showNewAsset, updateShowAsset, addAssetToAssetList, addChannelRequest, showNewChannel, updateShowChannel, addNewChannelToChannelList, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; @@ -29,10 +29,12 @@ function* getAssetDataAndShowAsset (action) { try { ({success, message, data: shortId} = yield call(getShortId, name, claimId)); } catch (error) { - return yield put(updateShowAsset(id, error.message, null, null, null)); // add with error + return yield put(updateShowAsset(error.message, name, claimId)); + // yield put(addAssetToAssetList(arg1, arg2)); } if (!success) { - return yield put(updateShowAsset(id, message, null, null, null)); // add with error + return yield put(updateShowAsset(message, name, claimId)); + // yield put(addAssetToAssetList(arg1, arg2)); } // if no error, get claim data success = null; @@ -40,14 +42,16 @@ function* getAssetDataAndShowAsset (action) { try { ({success, message, data: claimData} = yield call(getClaimData, name, claimId)); } catch (error) { - return yield put(updateShowAsset(id, error.message, null, null, null)); // add with error + return yield put(updateShowAsset(error.message, name, claimId)); + // yield put(addAssetToAssetList(arg1, arg2)); } if (!success) { - return yield put(updateShowAsset(id, message, null, null, null)); // add with error + return yield put(updateShowAsset(message, name, claimId)); + // yield put(addAssetToAssetList(arg1, arg2)); } // if both are successfull, add to asset list and select for showing - yield put(updateShowAsset(id, null, name, claimId, shortId, claimData)); - // yield put(addAssetToAssetList(arg1, arg2)); + yield put(updateShowAsset(null, name, claimId, shortId, claimData)); + yield put(addAssetToAssetList(id, null, name, claimId, shortId, claimData)); } function* retrieveFile (action) { @@ -105,11 +109,11 @@ function* getNewChannelDataAndShowChannel (action) { try { ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, 1)); } catch (error) { - return yield put(updateShowChannel(error.message, channelData, null)); + return yield put(updateShowChannel(error.message, channelData)); // yield put(addNewChannelToChannelList(id, error.message, null, null)); } if (!success) { - return yield put(updateShowChannel(message, channelData, null)); + return yield put(updateShowChannel(message, channelData)); // yield put(addNewChannelToChannelList(id, message, null, null)); } yield put(updateShowChannel(null, channelData, claimsData)); From 967474bfa4c358ba75ef066249e10565a5d7a0a7 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 8 Feb 2018 11:50:30 -0800 Subject: [PATCH 63/96] debugged channel update reducer --- react/actions/show.js | 8 ++++---- react/api/channelApi.js | 15 ++------------- react/containers/ShowAsset/index.js | 2 +- react/containers/ShowAsset/view.jsx | 4 ++-- react/containers/ShowChannel/index.js | 8 ++++---- react/containers/ShowChannel/view.jsx | 11 ++++++----- react/reducers/show.js | 12 ++++++++---- react/sagas/show.js | 19 ++++++++++--------- 8 files changed, 37 insertions(+), 42 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index a0ac29ef..ae61f8e2 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -100,17 +100,17 @@ export function addChannelRequest (id, error, name, longId, shortId) { // show a channel -export function showNewChannel (id, name, longId, channelData) { +export function showNewChannel (id, channelData) { return { type: actions.SHOW_CHANNEL_NEW, - data: { id, name, longId, channelData }, + data: { id, channelData }, }; }; -export function updateShowChannel (error, channelData, claimData) { +export function updateShowChannel (error, name, shortId, longId, claimData) { return { type: actions.SHOW_CHANNEL_UPDATE, - data: { error, channelData, claimData }, + data: { error, name, shortId, longId, claimData }, }; }; diff --git a/react/api/channelApi.js b/react/api/channelApi.js index d0dd4e69..d060fe2c 100644 --- a/react/api/channelApi.js +++ b/react/api/channelApi.js @@ -2,26 +2,15 @@ import Request from 'utils/request'; import request from '../utils/request'; export function getChannelData (name, id) { - console.log('getting and storing channel data for channel:', name, id); + console.log('getting channel data for channel:', name, id); if (!id) id = 'none'; const url = `/api/channel/data/${name}/${id}`; return request(url); }; export function getChannelClaims (name, longId, page) { - console.log('getting and storing channel claims for channel:', name, longId); + console.log('getting channel claims for channel:', name, longId); if (!page) page = 1; const url = `/api/channel/claims/${name}/${longId}/${page}`; return Request(url); - // .then(({ success, message, data }) => { - // console.log('api/channel-claims response:', data); - // if (!success) { - // return this.setState({error: message}); - // } - // this.setState({error: null}); // move this error to redux state - // this.props.onChannelClaimsDataUpdate(data.claims, data.currentPage, data.totalPages, data.totalResults); - // }) - // .catch((error) => { - // this.setState({error: error.message}); - // }); }; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index e058cb55..e95d8c5e 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -10,7 +10,7 @@ const mapStateToProps = ({ show }) => { requestModifier : show.request.data.modifier, requestExtension: show.request.data.extension, assetRequests : show.assetRequests, - assets : show.assets, + assetList : show.assetList, // show asset error : show.showAsset.error, name : show.showAsset.name, diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 40be9fb5..33022761 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -48,9 +48,9 @@ class ShowAsset extends React.Component { return this.props.onRequestError(error); } // update the showAsset data in the store - const { assets } = this.props; + const { assetList } = this.props; const assetId = `a#${name}#${claimId}`; - const existingAssetRecord = assets[assetId]; + const existingAssetRecord = assetList[assetId]; if (existingAssetRecord) { // case: the asset data already exists this.showExistingAsset(existingAssetRecord); } else { // case: the asset data does not exist yet diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index ba5f560f..3415929e 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -27,11 +27,11 @@ const mapDispatchToProps = dispatch => { onRequestError: (error) => { dispatch(updateRequestError(error, null, null)); }, - onShowNewChannel: (id, name, longId) => { - dispatch(showNewChannel(id, name, longId)); + onShowNewChannel: (id, channelData) => { + dispatch(showNewChannel(id, channelData)); }, - onShowExistingChannel: (error, channelData, claimData) => { - dispatch(updateShowChannel(error, channelData, claimData)); + onShowExistingChannel: (error, name, shortId, longId, claimData) => { + dispatch(updateShowChannel(error, name, shortId, longId, claimData)); }, onShowChannelClear: () => { dispatch(clearShowChannel()); diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 47151dcc..c6a5f056 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -49,17 +49,18 @@ class ShowChannel extends React.Component { if (existingChannel) { this.showExistingChannel(channelRecordId, existingChannel); } else { - this.showNewChannel(channelRecordId, channelData.name, channelData.longId, channelData); + this.showNewChannel(channelRecordId, channelData); } } - showNewChannel (channelRecordId, name, longId) { - this.props.onShowNewChannel(channelRecordId, name, longId); + showNewChannel (channelRecordId, channelData) { + this.props.onShowNewChannel(channelRecordId, channelData); }; showExistingChannel (existingChannel) { - const { error, channelData, claimData } = existingChannel; - this.props.onShowExistingChannel(error, channelData, claimData); + const { error, channelData: {name, shortId, longId}, claimData } = existingChannel; + this.props.onShowExistingChannel(error, name, shortId, longId, claimData); }; componentWillUnmount () { + console.log('ShowChannel will unmount'); this.props.onShowChannelClear(); } render () { diff --git a/react/reducers/show.js b/react/reducers/show.js index e4aecb03..66ad4c3c 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -37,7 +37,7 @@ const initialState = { channelRequests: {}, channelList : {}, assetRequests : {}, - assets : {}, // same schema as showAsset + assetList : {}, // same schema as showAsset }; /* @@ -141,9 +141,13 @@ export default function (state = initialState, action) { case actions.SHOW_CHANNEL_UPDATE: return Object.assign({}, state, { showChannel: { - error : action.error, - channelData: action.channelData, - claimData : action.claimData, + error : action.data.error, + channelData: { + name : action.data.name, + shortId: action.data.shortId, + longId : action.data.longId, + }, + claimData: action.data.claimData, }, }); case actions.SHOW_CHANNEL_CLEAR: diff --git a/react/sagas/show.js b/react/sagas/show.js index fe686f18..2f41a510 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -97,27 +97,28 @@ function* newChannelRequest (action) { if (!success) { return yield put(addChannelRequest(id, message, null, null, null)); } - const { channelName, longChannelClaimId, shortChannelClaimId } = data; - yield put(addChannelRequest(id, null, channelName, longChannelClaimId, shortChannelClaimId)); - const channelRecordId = `c#${channelName}#${longChannelClaimId}`; // move to the action - yield put(showNewChannel(channelRecordId, channelName, longChannelClaimId )); + const { longChannelClaimId: longId, shortChannelClaimId: shortId } = data; + yield put(addChannelRequest(id, null, name, longId, shortId)); + const channelRecordId = `c#${name}#${longId}`; // move to the action + const channelData = {name, longId, shortId}; + yield put(showNewChannel(channelRecordId, channelData)); } function* getNewChannelDataAndShowChannel (action) { - const { id, name, longId, channelData } = action; + const { id, channelData: {name, shortId, longId} } = action.data; let success, message, claimsData; try { ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, 1)); } catch (error) { - return yield put(updateShowChannel(error.message, channelData)); + return yield put(updateShowChannel(error.message, name, shortId, longId)); // yield put(addNewChannelToChannelList(id, error.message, null, null)); } if (!success) { - return yield put(updateShowChannel(message, channelData)); + return yield put(updateShowChannel(message, name, shortId, longId)); // yield put(addNewChannelToChannelList(id, message, null, null)); } - yield put(updateShowChannel(null, channelData, claimsData)); - yield put(addNewChannelToChannelList(id, null, channelData, claimsData)); + yield put(updateShowChannel(null, name, shortId, longId, claimsData)); + yield put(addNewChannelToChannelList(id, null, name, shortId, longId, claimsData)); } export function* watchNewAssetRequest () { From c4042ecea977e04bd29477b1b6f3e2f7d8f9e5e0 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 8 Feb 2018 13:22:54 -0800 Subject: [PATCH 64/96] asset and channel display working --- react/actions/show.js | 4 +- react/api/assetApi.js | 3 ++ .../containers/ChannelClaimsDisplay/index.js | 33 ++++++++-------- .../containers/ChannelClaimsDisplay/view.jsx | 38 ++++++------------- react/containers/ShowAsset/view.jsx | 4 +- react/containers/ShowChannel/index.js | 4 +- react/containers/ShowChannel/view.jsx | 9 +++-- react/reducers/show.js | 6 +-- react/sagas/show.js | 3 +- 9 files changed, 48 insertions(+), 56 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index ae61f8e2..f79f3627 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -107,10 +107,10 @@ export function showNewChannel (id, channelData) { }; }; -export function updateShowChannel (error, name, shortId, longId, claimData) { +export function updateShowChannel (error, name, shortId, longId, claimsData) { return { type: actions.SHOW_CHANNEL_UPDATE, - data: { error, name, shortId, longId, claimData }, + data: { error, name, shortId, longId, claimsData }, }; }; diff --git a/react/api/assetApi.js b/react/api/assetApi.js index d3fbbb7f..b5e3b156 100644 --- a/react/api/assetApi.js +++ b/react/api/assetApi.js @@ -1,6 +1,7 @@ import Request from 'utils/request'; export function getLongClaimId (name, modifier) { + console.log('getting long claim id for asset:', name, modifier); let body = {}; // create request params if (modifier) { @@ -26,11 +27,13 @@ export function getLongClaimId (name, modifier) { }; export function getShortId (name, claimId) { + console.log('getting short id for asset:', name, claimId); const url = `/api/claim/short-id/${claimId}/${name}`; return Request(url); }; export function getClaimData (name, claimId) { + console.log('getting claim data for asset:', name, claimId); const url = `/api/claim/data/${name}/${claimId}`; return Request(url); }; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index b2d9da9a..7380e2b5 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -2,26 +2,27 @@ import { connect } from 'react-redux'; import { updateChannelClaimsData } from 'actions/show'; import View from './view'; -const mapStateToProps = ({ show : { showChannel: { channelData, channelClaimsData } } }) => { +const mapStateToProps = ({ show : { showChannel: { error, channelData, claimsData } } }) => { return { + error : error, name : channelData.name, longId : channelData.longId, - claims : channelClaimsData.claims, - currentPage: channelClaimsData.currentPage, - totalPages : channelClaimsData.totalPages, - totalClaims: channelClaimsData.totalClaims, + claims : claimsData.claims, + currentPage: claimsData.currentPage, + totalPages : claimsData.totalPages, + totalClaims: claimsData.totalClaims, }; }; -const mapDispatchToProps = dispatch => { - return { - onChannelClaimsDataUpdate: (claims, currentPage, totalPages, totalClaims) => { - dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims)); - }, - onChannelClaimsDataClear: () => { - dispatch(updateChannelClaimsData(null, null, null, null)); - }, - }; -}; +// const mapDispatchToProps = dispatch => { +// return { +// onChannelClaimsDataUpdate: (claims, currentPage, totalPages, totalClaims) => { +// dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims)); +// }, +// onChannelClaimsDataClear: () => { +// dispatch(updateChannelClaimsData(null, null, null, null)); +// }, +// }; +// }; -export default connect(mapStateToProps, mapDispatchToProps)(View); +export default connect(mapStateToProps, null)(View); diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index c4e3543b..23d5e6bf 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -1,54 +1,38 @@ import React from 'react'; import AssetPreview from 'components/AssetPreview'; -import request from 'utils/request'; class ChannelClaimsDisplay extends React.Component { constructor (props) { super(props); - this.state = { - error: null, - }; this.showNextResultsPage = this.showNextResultsPage.bind(this); this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this); } - componentDidMount () { - const name = this.props.name; - const longId = this.props.longId; - this.updateClaimsData(name, longId, 1); - } - componentWillReceiveProps (nextProps) { - if (nextProps.name !== this.props.name || nextProps.longId !== this.props.longId) { - this.updateClaimsData(nextProps.name, nextProps.longId, 1); - } - } - updateClaimsData (name, longId, page) { - console.log('this function has been moved into the redux sagas'); - } - componentWillUnmount () { - this.props.onChannelClaimsDataClear(); + showNewPage (page) { + console.log(`update claims data with new page ${page}`); } showPreviousResultsPage () { const previousPage = parseInt(this.props.currentPage) - 1; - this.updateClaimsData(this.props.name, this.props.longId, previousPage); + this.showNewPage(previousPage); } showNextResultsPage () { const nextPage = parseInt(this.props.currentPage) + 1; - this.updateClaimsData(this.props.name, this.props.longId, nextPage); + this.showNewPage(nextPage); } render () { + const { error, claims, currentPage, totalPages } = this.props; return (
- {this.state.error ? ( + {error ? (
-

{this.state.error}

+

{error}

) : (
- {this.props.claims && + {claims &&
- {this.props.claims.map((claim, index) => )}
- {(this.props.currentPage > 1) && + {(currentPage > 1) && } - {(this.props.currentPage < this.props.totalPages) && + {(currentPage < totalPages) && }
diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 33022761..ae54de93 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -25,7 +25,7 @@ class ShowAsset extends React.Component { } componentWillReceiveProps (nextProps) { // case where componentDidMount triggered new props - if (requestIsNewRequest(nextProps, this.props)) { + if (requestIsAnAssetRequest(nextProps) && requestIsNewRequest(nextProps, this.props)) { const { requestId, requestName, requestModifier, assetRequests } = nextProps; const existingRequest = assetRequests[requestId]; if (existingRequest) { // case: the assetRequest exists @@ -34,7 +34,7 @@ class ShowAsset extends React.Component { this.onNewRequest(requestId, requestName, requestModifier); } } else { - console.log('show.assetRequestId did not update'); + console.log('ShowAsset receiving new props -> request.id did not update', nextProps); } } onNewRequest (id, requestName, requestModifier) { diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 3415929e..c2fda25a 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -30,8 +30,8 @@ const mapDispatchToProps = dispatch => { onShowNewChannel: (id, channelData) => { dispatch(showNewChannel(id, channelData)); }, - onShowExistingChannel: (error, name, shortId, longId, claimData) => { - dispatch(updateShowChannel(error, name, shortId, longId, claimData)); + onShowExistingChannel: (error, name, shortId, longId, claimsData) => { + dispatch(updateShowChannel(error, name, shortId, longId, claimsData)); }, onShowChannelClear: () => { dispatch(clearShowChannel()); diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index c6a5f056..10643858 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -32,6 +32,8 @@ class ShowChannel extends React.Component { } else { this.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } + } else { + console.log('ShowChannel receiving new props -> request.id did not update', nextProps); }; } onNewChannelRequest (requestId, requestName, requestChannelId) { @@ -47,7 +49,7 @@ class ShowChannel extends React.Component { const channelRecordId = `c#${channelData.name}#${channelData.longId}`; const existingChannel = channelList[channelRecordId]; if (existingChannel) { - this.showExistingChannel(channelRecordId, existingChannel); + this.showExistingChannel(existingChannel); } else { this.showNewChannel(channelRecordId, channelData); } @@ -56,8 +58,9 @@ class ShowChannel extends React.Component { this.props.onShowNewChannel(channelRecordId, channelData); }; showExistingChannel (existingChannel) { - const { error, channelData: {name, shortId, longId}, claimData } = existingChannel; - this.props.onShowExistingChannel(error, name, shortId, longId, claimData); + console.log('showExistingChannel:', existingChannel); + const { error, channelData: {name, shortId, longId}, claimsData } = existingChannel; + this.props.onShowExistingChannel(error, name, shortId, longId, claimsData); }; componentWillUnmount () { console.log('ShowChannel will unmount'); diff --git a/react/reducers/show.js b/react/reducers/show.js index 66ad4c3c..5e1a7ac4 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -16,7 +16,7 @@ const initialState = { shortId: null, longId : null, }, - channelClaimsData: { + claimsData: { claims : null, currentPage: null, totalPages : null, @@ -147,7 +147,7 @@ export default function (state = initialState, action) { shortId: action.data.shortId, longId : action.data.longId, }, - claimData: action.data.claimData, + claimsData: action.data.claimsData, }, }); case actions.SHOW_CHANNEL_CLEAR: @@ -159,7 +159,7 @@ export default function (state = initialState, action) { shortId: null, longId : null, }, - channelClaimsData: { + claimsData: { claims : null, currentPage: null, totalPages : null, diff --git a/react/sagas/show.js b/react/sagas/show.js index 2f41a510..48cdbdd4 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -118,7 +118,8 @@ function* getNewChannelDataAndShowChannel (action) { // yield put(addNewChannelToChannelList(id, message, null, null)); } yield put(updateShowChannel(null, name, shortId, longId, claimsData)); - yield put(addNewChannelToChannelList(id, null, name, shortId, longId, claimsData)); + const channelData = {name, shortId, longId}; + yield put(addNewChannelToChannelList(id, null, channelData, claimsData)); } export function* watchNewAssetRequest () { From eb2f7ac7fc038fd0195b78612c3aa5554b2ea3cd Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 8 Feb 2018 13:39:14 -0800 Subject: [PATCH 65/96] fixed request error for broken requests --- react/sagas/show.js | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/react/sagas/show.js b/react/sagas/show.js index 48cdbdd4..20026ef3 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addAssetRequest, showNewAsset, updateShowAsset, addAssetToAssetList, addChannelRequest, showNewChannel, updateShowChannel, addNewChannelToChannelList, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; +import { addAssetRequest, updateRequestError, showNewAsset, updateShowAsset, addAssetToAssetList, addChannelRequest, showNewChannel, updateShowChannel, addNewChannelToChannelList, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; @@ -12,14 +12,16 @@ function* newAssetRequest (action) { try { ({success, message, data: longId} = yield call(getLongClaimId, name, modifier)); } catch (error) { - yield put(addAssetRequest(id, error.message, name, null)); + // yield put(addAssetRequest(id, error.message, name, null)); + return yield put(updateRequestError(error.message)); } - if (success) { - yield put(addAssetRequest(id, null, name, longId)); - const newAssetId = `a#${name}#${longId}`; // note move to action - return yield put(showNewAsset(newAssetId, name, longId)); + if (!success) { + // yield put(addAssetRequest(id, message, name, null)); + return yield put(updateRequestError(message)); } - yield put(addAssetRequest(id, message, name, null)); + yield put(addAssetRequest(id, null, name, longId)); + const newAssetId = `a#${name}#${longId}`; // note: move to action + yield put(showNewAsset(newAssetId, name, longId)); }; function* getAssetDataAndShowAsset (action) { @@ -29,12 +31,12 @@ function* getAssetDataAndShowAsset (action) { try { ({success, message, data: shortId} = yield call(getShortId, name, claimId)); } catch (error) { + // yield put(addAssetToAssetList()); return yield put(updateShowAsset(error.message, name, claimId)); - // yield put(addAssetToAssetList(arg1, arg2)); } if (!success) { + // yield put(addAssetToAssetList()); return yield put(updateShowAsset(message, name, claimId)); - // yield put(addAssetToAssetList(arg1, arg2)); } // if no error, get claim data success = null; @@ -42,12 +44,12 @@ function* getAssetDataAndShowAsset (action) { try { ({success, message, data: claimData} = yield call(getClaimData, name, claimId)); } catch (error) { + // yield put(addAssetToAssetList()); return yield put(updateShowAsset(error.message, name, claimId)); - // yield put(addAssetToAssetList(arg1, arg2)); } if (!success) { + // yield put(addAssetToAssetList()); return yield put(updateShowAsset(message, name, claimId)); - // yield put(addAssetToAssetList(arg1, arg2)); } // if both are successfull, add to asset list and select for showing yield put(updateShowAsset(null, name, claimId, shortId, claimData)); @@ -92,10 +94,12 @@ function* newChannelRequest (action) { try { ({success, message, data} = yield call(getChannelData, name, channelId)); } catch (error) { - return yield put(addChannelRequest(id, error.message, null, null, null)); + // return yield put(addChannelRequest(id, error.message, null, null, null)); + return yield put(updateRequestError(message)); } if (!success) { - return yield put(addChannelRequest(id, message, null, null, null)); + // return yield put(addChannelRequest(id, message, null, null, null)); + return yield put(updateRequestError(message)); } const { longChannelClaimId: longId, shortChannelClaimId: shortId } = data; yield put(addChannelRequest(id, null, name, longId, shortId)); @@ -110,12 +114,12 @@ function* getNewChannelDataAndShowChannel (action) { try { ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, 1)); } catch (error) { - return yield put(updateShowChannel(error.message, name, shortId, longId)); // yield put(addNewChannelToChannelList(id, error.message, null, null)); + return yield put(updateShowChannel(error.message, name, shortId, longId)); } if (!success) { - return yield put(updateShowChannel(message, name, shortId, longId)); // yield put(addNewChannelToChannelList(id, message, null, null)); + return yield put(updateShowChannel(message, name, shortId, longId)); } yield put(updateShowChannel(null, name, shortId, longId, claimsData)); const channelData = {name, shortId, longId}; From 764ce246764d24b3d98b5f0ea408dd1492281ae5 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 8 Feb 2018 14:01:45 -0800 Subject: [PATCH 66/96] moved asset and channel id out of saga to action --- react/actions/show.js | 6 +++-- react/containers/ShowAsset/index.js | 4 +-- react/containers/ShowAsset/view.jsx | 6 ++--- react/containers/ShowChannel/index.js | 4 +-- react/containers/ShowChannel/view.jsx | 8 +++--- react/sagas/show.js | 38 +++++++++------------------ 6 files changed, 26 insertions(+), 40 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index f79f3627..4a1a125a 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -53,7 +53,8 @@ export function addAssetRequest (id, error, name, claimId) { // show an asset -export function showNewAsset (id, name, claimId) { +export function showNewAsset (name, claimId) { + const id = `a#${name}#${claimId}`; return { type: actions.SHOW_ASSET_NEW, data: { id, name, claimId }, @@ -100,7 +101,8 @@ export function addChannelRequest (id, error, name, longId, shortId) { // show a channel -export function showNewChannel (id, channelData) { +export function showNewChannel (channelData) { + const id = `c#${channelData.name}#${channelData.longId}`; // move to the action return { type: actions.SHOW_CHANNEL_NEW, data: { id, channelData }, diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index e95d8c5e..6f5ce1b6 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -27,8 +27,8 @@ const mapDispatchToProps = dispatch => { onRequestError: (error) => { dispatch(updateRequestError(error, null, null)); }, - onShowNewAsset: (id, name, claimId) => { - dispatch(showNewAsset(id, name, claimId)); + onShowNewAsset: (name, claimId) => { + dispatch(showNewAsset(name, claimId)); }, onShowExistingAsset: (error, name, claimId, shortId, claimData) => { dispatch(updateShowAsset(error, name, claimId, shortId, claimData)); diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index ae54de93..123ed807 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -54,11 +54,11 @@ class ShowAsset extends React.Component { if (existingAssetRecord) { // case: the asset data already exists this.showExistingAsset(existingAssetRecord); } else { // case: the asset data does not exist yet - this.showNewAsset(assetId, name, claimId); + this.showNewAsset(name, claimId); } } - showNewAsset (assetId, name, claimId) { - this.props.onShowNewAsset(assetId, name, claimId); + showNewAsset (name, claimId) { + this.props.onShowNewAsset(name, claimId); } showExistingAsset (existingAssetRecord) { let { error, name, claimId, shortId, claimData } = existingAssetRecord; diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index c2fda25a..32469e5f 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -27,8 +27,8 @@ const mapDispatchToProps = dispatch => { onRequestError: (error) => { dispatch(updateRequestError(error, null, null)); }, - onShowNewChannel: (id, channelData) => { - dispatch(showNewChannel(id, channelData)); + onShowNewChannel: (channelData) => { + dispatch(showNewChannel(channelData)); }, onShowExistingChannel: (error, name, shortId, longId, claimsData) => { dispatch(updateShowChannel(error, name, shortId, longId, claimsData)); diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 10643858..606f9cf8 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -51,19 +51,17 @@ class ShowChannel extends React.Component { if (existingChannel) { this.showExistingChannel(existingChannel); } else { - this.showNewChannel(channelRecordId, channelData); + this.showNewChannel(channelData); } } - showNewChannel (channelRecordId, channelData) { - this.props.onShowNewChannel(channelRecordId, channelData); + showNewChannel (channelData) { + this.props.onShowNewChannel(channelData); }; showExistingChannel (existingChannel) { - console.log('showExistingChannel:', existingChannel); const { error, channelData: {name, shortId, longId}, claimsData } = existingChannel; this.props.onShowExistingChannel(error, name, shortId, longId, claimsData); }; componentWillUnmount () { - console.log('ShowChannel will unmount'); this.props.onShowChannelClear(); } render () { diff --git a/react/sagas/show.js b/react/sagas/show.js index 20026ef3..5ea1cdc1 100644 --- a/react/sagas/show.js +++ b/react/sagas/show.js @@ -12,30 +12,25 @@ function* newAssetRequest (action) { try { ({success, message, data: longId} = yield call(getLongClaimId, name, modifier)); } catch (error) { - // yield put(addAssetRequest(id, error.message, name, null)); return yield put(updateRequestError(error.message)); } if (!success) { - // yield put(addAssetRequest(id, message, name, null)); return yield put(updateRequestError(message)); } yield put(addAssetRequest(id, null, name, longId)); - const newAssetId = `a#${name}#${longId}`; // note: move to action - yield put(showNewAsset(newAssetId, name, longId)); + yield put(showNewAsset(name, longId)); }; function* getAssetDataAndShowAsset (action) { const {id, name, claimId} = action.data; - // if no error, get short Id + // get short Id let success, message, shortId; try { ({success, message, data: shortId} = yield call(getShortId, name, claimId)); } catch (error) { - // yield put(addAssetToAssetList()); return yield put(updateShowAsset(error.message, name, claimId)); } if (!success) { - // yield put(addAssetToAssetList()); return yield put(updateShowAsset(message, name, claimId)); } // if no error, get claim data @@ -44,14 +39,11 @@ function* getAssetDataAndShowAsset (action) { try { ({success, message, data: claimData} = yield call(getClaimData, name, claimId)); } catch (error) { - // yield put(addAssetToAssetList()); return yield put(updateShowAsset(error.message, name, claimId)); } if (!success) { - // yield put(addAssetToAssetList()); return yield put(updateShowAsset(message, name, claimId)); } - // if both are successfull, add to asset list and select for showing yield put(updateShowAsset(null, name, claimId, shortId, claimData)); yield put(addAssetToAssetList(id, null, name, claimId, shortId, claimData)); } @@ -66,26 +58,23 @@ function* retrieveFile (action) { } catch (error) { return yield put(updateDisplayAssetError(error.message)); }; - if (success) { - if (isAvailable) { - return yield put(updateFileAvailability(AVAILABLE)); - } - yield put(updateFileAvailability(UNAVAILABLE)); - } else { - yield put(updateDisplayAssetError(message)); + if (!success) { + return yield put(updateDisplayAssetError(message)); } + if (isAvailable) { + return yield put(updateFileAvailability(AVAILABLE)); + } + yield put(updateFileAvailability(UNAVAILABLE)); // initiate get request for the file try { ({ success, message } = yield call(triggerClaimGet, name, claimId)); } catch (error) { return yield put(updateDisplayAssetError(error.message)); }; - if (success) { - console.log('/api/glaim-get response:', message); - yield put(updateFileAvailability(AVAILABLE)); - } else { - yield put(updateDisplayAssetError(message)); + if (!success) { + return yield put(updateDisplayAssetError(message)); } + yield put(updateFileAvailability(AVAILABLE)); }; function* newChannelRequest (action) { @@ -103,9 +92,8 @@ function* newChannelRequest (action) { } const { longChannelClaimId: longId, shortChannelClaimId: shortId } = data; yield put(addChannelRequest(id, null, name, longId, shortId)); - const channelRecordId = `c#${name}#${longId}`; // move to the action const channelData = {name, longId, shortId}; - yield put(showNewChannel(channelRecordId, channelData)); + yield put(showNewChannel(channelData)); } function* getNewChannelDataAndShowChannel (action) { @@ -114,11 +102,9 @@ function* getNewChannelDataAndShowChannel (action) { try { ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, 1)); } catch (error) { - // yield put(addNewChannelToChannelList(id, error.message, null, null)); return yield put(updateShowChannel(error.message, name, shortId, longId)); } if (!success) { - // yield put(addNewChannelToChannelList(id, message, null, null)); return yield put(updateShowChannel(message, name, shortId, longId)); } yield put(updateShowChannel(null, name, shortId, longId, claimsData)); From e9baab3c6189c9d5fb4e04f8d4e99260ba4197c1 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 8 Feb 2018 14:17:03 -0800 Subject: [PATCH 67/96] split sagas into separate files --- react/sagas/file.js | 38 +++++++++++ react/sagas/index.js | 7 +- react/sagas/request.js | 47 +++++++++++++ react/sagas/show.js | 133 ------------------------------------ react/sagas/show_asset.js | 35 ++++++++++ react/sagas/show_channel.js | 24 +++++++ 6 files changed, 149 insertions(+), 135 deletions(-) create mode 100644 react/sagas/file.js create mode 100644 react/sagas/request.js delete mode 100644 react/sagas/show.js create mode 100644 react/sagas/show_asset.js create mode 100644 react/sagas/show_channel.js diff --git a/react/sagas/file.js b/react/sagas/file.js new file mode 100644 index 00000000..fd0bc4ab --- /dev/null +++ b/react/sagas/file.js @@ -0,0 +1,38 @@ +import { call, put, takeLatest } from 'redux-saga/effects'; +import * as actions from 'constants/show_action_types'; +import { updateFileAvailability, updateDisplayAssetError } from 'actions/show'; +import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; +import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; + +function* retrieveFile (action) { + const name = action.data.name; + const claimId = action.data.claimId; + // see if the file is available + let success, message, isAvailable; + try { + ({ success, message, data: isAvailable } = yield call(checkFileAvailability, name, claimId)); + } catch (error) { + return yield put(updateDisplayAssetError(error.message)); + }; + if (!success) { + return yield put(updateDisplayAssetError(message)); + } + if (isAvailable) { + return yield put(updateFileAvailability(AVAILABLE)); + } + yield put(updateFileAvailability(UNAVAILABLE)); + // initiate get request for the file + try { + ({ success, message } = yield call(triggerClaimGet, name, claimId)); + } catch (error) { + return yield put(updateDisplayAssetError(error.message)); + }; + if (!success) { + return yield put(updateDisplayAssetError(message)); + } + yield put(updateFileAvailability(AVAILABLE)); +}; + +export function* watchFileIsRequested () { + yield takeLatest(actions.FILE_REQUESTED, retrieveFile); +}; diff --git a/react/sagas/index.js b/react/sagas/index.js index d07a71f7..22b11359 100644 --- a/react/sagas/index.js +++ b/react/sagas/index.js @@ -1,11 +1,14 @@ import { all } from 'redux-saga/effects'; -import { watchNewAssetRequest, watchShowNewAsset, watchNewChannelRequest, watchShowNewChannel, watchFileIsRequested } from './show'; +import { watchNewAssetRequest, watchNewChannelRequest } from './request'; +import { watchFileIsRequested } from './file'; +import { watchShowNewChannel } from './show_channel'; +import { watchShowNewAsset } from './show_asset'; export default function* rootSaga () { yield all([ watchNewAssetRequest(), - watchShowNewAsset(), watchNewChannelRequest(), + watchShowNewAsset(), watchShowNewChannel(), watchFileIsRequested(), ]); diff --git a/react/sagas/request.js b/react/sagas/request.js new file mode 100644 index 00000000..8ebc96f9 --- /dev/null +++ b/react/sagas/request.js @@ -0,0 +1,47 @@ +import { call, put, takeLatest } from 'redux-saga/effects'; +import * as actions from 'constants/show_action_types'; +import { addAssetRequest, updateRequestError, showNewAsset, addChannelRequest, showNewChannel } from 'actions/show'; +import { getLongClaimId } from 'api/assetApi'; +import { getChannelData } from 'api/channelApi'; + +function* newAssetRequest (action) { + const { id, name, modifier } = action.data; + let success, message, longId; + try { + ({success, message, data: longId} = yield call(getLongClaimId, name, modifier)); + } catch (error) { + return yield put(updateRequestError(error.message)); + } + if (!success) { + return yield put(updateRequestError(message)); + } + yield put(addAssetRequest(id, null, name, longId)); + yield put(showNewAsset(name, longId)); +}; + +function* newChannelRequest (action) { + const { id, name, channelId } = action.data; + let success, message, data; + try { + ({success, message, data} = yield call(getChannelData, name, channelId)); + } catch (error) { + // return yield put(addChannelRequest(id, error.message, null, null, null)); + return yield put(updateRequestError(message)); + } + if (!success) { + // return yield put(addChannelRequest(id, message, null, null, null)); + return yield put(updateRequestError(message)); + } + const { longChannelClaimId: longId, shortChannelClaimId: shortId } = data; + yield put(addChannelRequest(id, null, name, longId, shortId)); + const channelData = {name, longId, shortId}; + yield put(showNewChannel(channelData)); +} + +export function* watchNewAssetRequest () { + yield takeLatest(actions.ASSET_REQUEST_NEW, newAssetRequest); +}; + +export function* watchNewChannelRequest () { + yield takeLatest(actions.CHANNEL_REQUEST_NEW, newChannelRequest); +}; diff --git a/react/sagas/show.js b/react/sagas/show.js deleted file mode 100644 index 5ea1cdc1..00000000 --- a/react/sagas/show.js +++ /dev/null @@ -1,133 +0,0 @@ -import { call, put, takeLatest } from 'redux-saga/effects'; -import * as actions from 'constants/show_action_types'; -import { addAssetRequest, updateRequestError, showNewAsset, updateShowAsset, addAssetToAssetList, addChannelRequest, showNewChannel, updateShowChannel, addNewChannelToChannelList, updateFileAvailability, updateDisplayAssetError } from 'actions/show'; -import { UNAVAILABLE, AVAILABLE } from 'constants/asset_display_states'; -import { checkFileAvailability, triggerClaimGet } from 'api/fileApi'; -import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; -import { getChannelData, getChannelClaims } from 'api/channelApi'; - -function* newAssetRequest (action) { - const { id, name, modifier } = action.data; - let success, message, longId; - try { - ({success, message, data: longId} = yield call(getLongClaimId, name, modifier)); - } catch (error) { - return yield put(updateRequestError(error.message)); - } - if (!success) { - return yield put(updateRequestError(message)); - } - yield put(addAssetRequest(id, null, name, longId)); - yield put(showNewAsset(name, longId)); -}; - -function* getAssetDataAndShowAsset (action) { - const {id, name, claimId} = action.data; - // get short Id - let success, message, shortId; - try { - ({success, message, data: shortId} = yield call(getShortId, name, claimId)); - } catch (error) { - return yield put(updateShowAsset(error.message, name, claimId)); - } - if (!success) { - return yield put(updateShowAsset(message, name, claimId)); - } - // if no error, get claim data - success = null; - let claimData; - try { - ({success, message, data: claimData} = yield call(getClaimData, name, claimId)); - } catch (error) { - return yield put(updateShowAsset(error.message, name, claimId)); - } - if (!success) { - return yield put(updateShowAsset(message, name, claimId)); - } - yield put(updateShowAsset(null, name, claimId, shortId, claimData)); - yield put(addAssetToAssetList(id, null, name, claimId, shortId, claimData)); -} - -function* retrieveFile (action) { - const name = action.data.name; - const claimId = action.data.claimId; - // see if the file is available - let success, message, isAvailable; - try { - ({ success, message, data: isAvailable } = yield call(checkFileAvailability, name, claimId)); - } catch (error) { - return yield put(updateDisplayAssetError(error.message)); - }; - if (!success) { - return yield put(updateDisplayAssetError(message)); - } - if (isAvailable) { - return yield put(updateFileAvailability(AVAILABLE)); - } - yield put(updateFileAvailability(UNAVAILABLE)); - // initiate get request for the file - try { - ({ success, message } = yield call(triggerClaimGet, name, claimId)); - } catch (error) { - return yield put(updateDisplayAssetError(error.message)); - }; - if (!success) { - return yield put(updateDisplayAssetError(message)); - } - yield put(updateFileAvailability(AVAILABLE)); -}; - -function* newChannelRequest (action) { - const { id, name, channelId } = action.data; - let success, message, data; - try { - ({success, message, data} = yield call(getChannelData, name, channelId)); - } catch (error) { - // return yield put(addChannelRequest(id, error.message, null, null, null)); - return yield put(updateRequestError(message)); - } - if (!success) { - // return yield put(addChannelRequest(id, message, null, null, null)); - return yield put(updateRequestError(message)); - } - const { longChannelClaimId: longId, shortChannelClaimId: shortId } = data; - yield put(addChannelRequest(id, null, name, longId, shortId)); - const channelData = {name, longId, shortId}; - yield put(showNewChannel(channelData)); -} - -function* getNewChannelDataAndShowChannel (action) { - const { id, channelData: {name, shortId, longId} } = action.data; - let success, message, claimsData; - try { - ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, 1)); - } catch (error) { - return yield put(updateShowChannel(error.message, name, shortId, longId)); - } - if (!success) { - return yield put(updateShowChannel(message, name, shortId, longId)); - } - yield put(updateShowChannel(null, name, shortId, longId, claimsData)); - const channelData = {name, shortId, longId}; - yield put(addNewChannelToChannelList(id, null, channelData, claimsData)); -} - -export function* watchNewAssetRequest () { - yield takeLatest(actions.ASSET_REQUEST_NEW, newAssetRequest); -}; - -export function* watchNewChannelRequest () { - yield takeLatest(actions.CHANNEL_REQUEST_NEW, newChannelRequest); -}; - -export function* watchShowNewAsset () { - yield takeLatest(actions.SHOW_ASSET_NEW, getAssetDataAndShowAsset); -}; - -export function* watchShowNewChannel () { - yield takeLatest(actions.SHOW_CHANNEL_NEW, getNewChannelDataAndShowChannel); -}; - -export function* watchFileIsRequested () { - yield takeLatest(actions.FILE_REQUESTED, retrieveFile); -}; diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js new file mode 100644 index 00000000..61761c89 --- /dev/null +++ b/react/sagas/show_asset.js @@ -0,0 +1,35 @@ +import { call, put, takeLatest } from 'redux-saga/effects'; +import * as actions from 'constants/show_action_types'; +import { updateShowAsset, addAssetToAssetList } from 'actions/show'; +import { getShortId, getClaimData } from 'api/assetApi'; + +function* getAssetDataAndShowAsset (action) { + const {id, name, claimId} = action.data; + // get short Id + let success, message, shortId; + try { + ({success, message, data: shortId} = yield call(getShortId, name, claimId)); + } catch (error) { + return yield put(updateShowAsset(error.message, name, claimId)); + } + if (!success) { + return yield put(updateShowAsset(message, name, claimId)); + } + // if no error, get claim data + success = null; + let claimData; + try { + ({success, message, data: claimData} = yield call(getClaimData, name, claimId)); + } catch (error) { + return yield put(updateShowAsset(error.message, name, claimId)); + } + if (!success) { + return yield put(updateShowAsset(message, name, claimId)); + } + yield put(updateShowAsset(null, name, claimId, shortId, claimData)); + yield put(addAssetToAssetList(id, null, name, claimId, shortId, claimData)); +} + +export function* watchShowNewAsset () { + yield takeLatest(actions.SHOW_ASSET_NEW, getAssetDataAndShowAsset); +}; diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js new file mode 100644 index 00000000..276d5f85 --- /dev/null +++ b/react/sagas/show_channel.js @@ -0,0 +1,24 @@ +import { call, put, takeLatest } from 'redux-saga/effects'; +import * as actions from 'constants/show_action_types'; +import { updateShowChannel, addNewChannelToChannelList } from 'actions/show'; +import { getChannelClaims } from 'api/channelApi'; + +function* getNewChannelDataAndShowChannel (action) { + const { id, channelData: {name, shortId, longId} } = action.data; + let success, message, claimsData; + try { + ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, 1)); + } catch (error) { + return yield put(updateShowChannel(error.message, name, shortId, longId)); + } + if (!success) { + return yield put(updateShowChannel(message, name, shortId, longId)); + } + yield put(updateShowChannel(null, name, shortId, longId, claimsData)); + const channelData = {name, shortId, longId}; + yield put(addNewChannelToChannelList(id, null, channelData, claimsData)); +} + +export function* watchShowNewChannel () { + yield takeLatest(actions.SHOW_CHANNEL_NEW, getNewChannelDataAndShowChannel); +}; From f38a4fb7e5ea10120fe3a1334d80c9415e2cd0ac Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 8 Feb 2018 15:47:10 -0800 Subject: [PATCH 68/96] preparing to refactor to use ids --- react/actions/show.js | 14 ++++++++++++++ react/containers/ChannelClaimsDisplay/index.js | 9 +++------ react/containers/ChannelClaimsDisplay/view.jsx | 1 + 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index 4a1a125a..c1b1e96e 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -122,6 +122,20 @@ export function clearShowChannel () { }; }; +// update channel data + +// export function updateChannelClaims () { +// return { +// type: actions.CHANNEL_LIST_UPDATE, // updates claims in channel in channel list +// } +// } + +// export function updateShowChannelClaims () { +// return { +// type: actions.SHOW_CHANNEL_CLAIMS_UPDATE, // update claims in show channel +// } +// } + // add channels to channel list export function addNewChannelToChannelList (id, error, channelData, claimsData) { diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 7380e2b5..4aee5e8b 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { updateChannelClaimsData } from 'actions/show'; +import { } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show : { showChannel: { error, channelData, claimsData } } }) => { @@ -16,11 +16,8 @@ const mapStateToProps = ({ show : { showChannel: { error, channelData, claimsDat // const mapDispatchToProps = dispatch => { // return { -// onChannelClaimsDataUpdate: (claims, currentPage, totalPages, totalClaims) => { -// dispatch(updateChannelClaimsData(claims, currentPage, totalPages, totalClaims)); -// }, -// onChannelClaimsDataClear: () => { -// dispatch(updateChannelClaimsData(null, null, null, null)); +// onChannelPageUpdate: (channelRecordId, name, longId, page) => { +// dispatch(updateChannelClaims(channelRecordId, name, longId, page)); // }, // }; // }; diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index 23d5e6bf..87e88ddd 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -9,6 +9,7 @@ class ChannelClaimsDisplay extends React.Component { } showNewPage (page) { console.log(`update claims data with new page ${page}`); + this.props.onChannelPageUpdate(page); } showPreviousResultsPage () { const previousPage = parseInt(this.props.currentPage) - 1; From c96c4d1fbdbda1830708408010cf1083cfe861e6 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 8 Feb 2018 16:23:09 -0800 Subject: [PATCH 69/96] updated showAsset to use an id --- react/actions/show.js | 8 ++++---- react/components/AssetDisplay/index.js | 2 +- react/components/AssetDisplay/view.jsx | 6 ++++-- react/components/AssetInfo/index.js | 11 +---------- react/components/AssetInfo/view.jsx | 2 +- react/components/AssetTitle/index.js | 2 +- react/components/ShowAssetDetails/index.js | 2 +- react/components/ShowAssetDetails/view.jsx | 4 ++-- react/components/ShowAssetLite/index.js | 3 +-- react/components/ShowAssetLite/view.jsx | 2 +- react/constants/show_action_types.js | 2 +- react/containers/ShowAsset/index.js | 10 +++++----- react/containers/ShowAsset/view.jsx | 11 +++++------ react/reducers/show.js | 23 +++++++--------------- react/sagas/show_asset.js | 14 ++++++------- 15 files changed, 42 insertions(+), 60 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index c1b1e96e..87a11aab 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -61,10 +61,10 @@ export function showNewAsset (name, claimId) { }; }; -export function updateShowAsset (error, name, claimId, shortId, claimData) { +export function updateShowAsset (error, id) { return { type: actions.SHOW_ASSET_UPDATE, - data: { error, name, claimId, shortId, claimData }, + data: { error, id }, }; }; @@ -76,9 +76,9 @@ export function clearShowAsset () { // add asset to asset list -export function addAssetToAssetList (id, error, name, claimId, shortId, claimData) { +export function upsertAssetToAssetList (id, error, name, claimId, shortId, claimData) { return { - type: actions.ASSET_LIST_ADD, + type: actions.ASSET_LIST_UPSERT, data: { id, error, name, claimId, shortId, claimData }, }; } diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 1250c997..09fbc0de 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -6,7 +6,7 @@ const mapStateToProps = ({ show }) => { return { error : show.displayAsset.error, status : show.displayAsset.status, - claimData: show.showAsset.claimData, + asset : show.assetList[show.showAsset.id], }; }; diff --git a/react/components/AssetDisplay/view.jsx b/react/components/AssetDisplay/view.jsx index fa719ac9..ecac5e6d 100644 --- a/react/components/AssetDisplay/view.jsx +++ b/react/components/AssetDisplay/view.jsx @@ -4,10 +4,12 @@ import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from 'constants/asset_disp class AssetDisplay extends React.Component { componentDidMount () { - this.props.onFileRequest(this.props.claimData.name, this.props.claimData.claimId); + const { asset: { claimData: { name, claimId } } } = this.props; + this.props.onFileRequest(name, claimId); } render () { - const { status, error, claimData: { name, claimId, contentType, fileExt, thumbnail } } = this.props; + console.log('rendering assetdisplay', this.props); + const { status, error, asset: { claimData: { name, claimId, contentType, fileExt, thumbnail } } } = this.props; return (
{(status === LOCAL_CHECK) && diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index a4cd0814..899555e6 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -3,16 +3,7 @@ import View from './view'; const mapStateToProps = ({ show }) => { return { - shortId : show.showAsset.shortId, - channelName : show.showAsset.claimData.channelName, - certificateId: show.showAsset.claimData.certificateId, - description : show.showAsset.claimData.description, - name : show.showAsset.claimData.name, - claimId : show.showAsset.claimData.claimId, - fileExt : show.showAsset.claimData.fileExt, - contentType : show.showAsset.claimData.contentType, - thumbnail : show.showAsset.claimData.thumbnail, - host : show.showAsset.claimData.host, + asset: show.assetList[show.showAsset.id], }; }; diff --git a/react/components/AssetInfo/view.jsx b/react/components/AssetInfo/view.jsx index 42eaffdb..0f1f3efe 100644 --- a/react/components/AssetInfo/view.jsx +++ b/react/components/AssetInfo/view.jsx @@ -27,7 +27,7 @@ class AssetInfo extends React.Component { } } render () { - const { shortId, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } = this.props; + const { asset: { shortId, claimData : { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } } } = this.props; return (
{channelName && diff --git a/react/components/AssetTitle/index.js b/react/components/AssetTitle/index.js index 970bbe6f..9766d497 100644 --- a/react/components/AssetTitle/index.js +++ b/react/components/AssetTitle/index.js @@ -3,7 +3,7 @@ import View from './view'; const mapStateToProps = ({ show }) => { return { - title: show.showAsset.claimData.title, + title: show.assetList[show.showAsset.id].claimData.title, }; }; diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index 9d3f8eb8..899555e6 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -3,7 +3,7 @@ import View from './view'; const mapStateToProps = ({ show }) => { return { - claimData: show.showAsset.claimData, + asset: show.assetList[show.showAsset.id], }; }; diff --git a/react/components/ShowAssetDetails/view.jsx b/react/components/ShowAssetDetails/view.jsx index c1bf7e6a..eaef0a1d 100644 --- a/react/components/ShowAssetDetails/view.jsx +++ b/react/components/ShowAssetDetails/view.jsx @@ -7,11 +7,11 @@ import AssetInfo from 'components/AssetInfo'; class ShowAssetDetails extends React.Component { render () { - const { claimData } = this.props; + const { asset } = this.props; return (
- {claimData && + {asset &&
diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index b47c7407..899555e6 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -3,8 +3,7 @@ import View from './view'; const mapStateToProps = ({ show }) => { return { - name : show.showAsset.claimData.name, - claimId: show.showAsset.claimData.claimId, + asset: show.assetList[show.showAsset.id], }; }; diff --git a/react/components/ShowAssetLite/view.jsx b/react/components/ShowAssetLite/view.jsx index 74dc1beb..d9892d90 100644 --- a/react/components/ShowAssetLite/view.jsx +++ b/react/components/ShowAssetLite/view.jsx @@ -4,7 +4,7 @@ import AssetDisplay from 'components/AssetDisplay'; class ShowLite extends React.Component { render () { - const { name, claimId } = this.props; + const { asset: { name, claimId } } = this.props; return (
{ (name && claimId) && diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index d4d262f8..26302b22 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -11,7 +11,7 @@ export const SHOW_ASSET_NEW = 'SHOW_ASSET_NEW'; export const SHOW_ASSET_UPDATE = 'SHOW_ASSET_UPDATE'; export const SHOW_ASSET_CLEAR = 'SHOW_ASSET_CLEAR'; -export const ASSET_LIST_ADD = `ASSET_LIST_ADD`; +export const ASSET_LIST_UPSERT = `ASSET_LIST_UPSERT`; // channel request actions export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW'; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 6f5ce1b6..e375e2ab 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -13,25 +13,25 @@ const mapStateToProps = ({ show }) => { assetList : show.assetList, // show asset error : show.showAsset.error, - name : show.showAsset.name, - claimData : show.showAsset.claimData, + id : show.showAsset.id, }; }; const mapDispatchToProps = dispatch => { return { - // new + // request onNewRequest: (id, name, modifier) => { dispatch(newAssetRequest(id, name, modifier)); }, onRequestError: (error) => { dispatch(updateRequestError(error, null, null)); }, + // show asset onShowNewAsset: (name, claimId) => { dispatch(showNewAsset(name, claimId)); }, - onShowExistingAsset: (error, name, claimId, shortId, claimData) => { - dispatch(updateShowAsset(error, name, claimId, shortId, claimData)); + onShowExistingAsset: (assetId) => { + dispatch(updateShowAsset(null, assetId)); }, onLeaveShowAsset: () => { dispatch(clearShowAsset()); // clear any errors diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 123ed807..3e3de33d 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -52,7 +52,7 @@ class ShowAsset extends React.Component { const assetId = `a#${name}#${claimId}`; const existingAssetRecord = assetList[assetId]; if (existingAssetRecord) { // case: the asset data already exists - this.showExistingAsset(existingAssetRecord); + this.showExistingAsset(assetId); } else { // case: the asset data does not exist yet this.showNewAsset(name, claimId); } @@ -60,21 +60,20 @@ class ShowAsset extends React.Component { showNewAsset (name, claimId) { this.props.onShowNewAsset(name, claimId); } - showExistingAsset (existingAssetRecord) { - let { error, name, claimId, shortId, claimData } = existingAssetRecord; - this.props.onShowExistingAsset(error, name, claimId, shortId, claimData); + showExistingAsset (assetId) { + this.props.onShowExistingAsset(assetId); } componentWillUnmount () { this.props.onLeaveShowAsset(); } render () { - const { error, name, requestExtension } = this.props; + const { error, id, requestExtension } = this.props; if (error) { return ( ); } - if (name) { // direct requests are passing because name is present so it just goes + if (id) { // direct requests are passing because name is present so it just goes if (requestExtension) { return ( diff --git a/react/reducers/show.js b/react/reducers/show.js index 5e1a7ac4..3a78bc2f 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -24,11 +24,8 @@ const initialState = { }, }, showAsset: { - error : null, - name : null, - claimId : null, - shortId : null, - claimData: null, + error: null, + id : null, }, displayAsset: { error : null, @@ -93,25 +90,19 @@ export default function (state = initialState, action) { case actions.SHOW_ASSET_UPDATE: return Object.assign({}, state, { showAsset: Object.assign({}, state.showAsset, { - error : action.data.error, - name : action.data.name, - claimId : action.data.claimId, - shortId : action.data.shortId, - claimData: action.data.claimData, + error: action.data.error, + id : action.data.id, }), }); case actions.SHOW_ASSET_CLEAR: return Object.assign({}, state, { showAsset: Object.assign({}, state.showAsset, { - error : null, - name : null, - claimId : null, - shortId : null, - claimData: null, + error: null, + id : null, }), }); // add asset to asset list - case actions.ASSET_LIST_ADD: + case actions.ASSET_LIST_UPSERT: return Object.assign({}, state, { assetList: Object.assign({}, state.assetList, { [action.data.id]: { diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index 61761c89..1b99e5b6 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { updateShowAsset, addAssetToAssetList } from 'actions/show'; +import { updateShowAsset, upsertAssetToAssetList } from 'actions/show'; import { getShortId, getClaimData } from 'api/assetApi'; function* getAssetDataAndShowAsset (action) { @@ -10,10 +10,10 @@ function* getAssetDataAndShowAsset (action) { try { ({success, message, data: shortId} = yield call(getShortId, name, claimId)); } catch (error) { - return yield put(updateShowAsset(error.message, name, claimId)); + return yield put(updateShowAsset(error.message, null)); } if (!success) { - return yield put(updateShowAsset(message, name, claimId)); + return yield put(updateShowAsset(message, null)); } // if no error, get claim data success = null; @@ -21,13 +21,13 @@ function* getAssetDataAndShowAsset (action) { try { ({success, message, data: claimData} = yield call(getClaimData, name, claimId)); } catch (error) { - return yield put(updateShowAsset(error.message, name, claimId)); + return yield put(updateShowAsset(error.message, null)); } if (!success) { - return yield put(updateShowAsset(message, name, claimId)); + return yield put(updateShowAsset(message, null)); } - yield put(updateShowAsset(null, name, claimId, shortId, claimData)); - yield put(addAssetToAssetList(id, null, name, claimId, shortId, claimData)); + yield put(updateShowAsset(null, id)); + yield put(upsertAssetToAssetList(id, null, name, claimId, shortId, claimData)); } export function* watchShowNewAsset () { From 75b5981e01eeb2c21bf4c225a8d6dc2e5966a199 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 8 Feb 2018 16:42:13 -0800 Subject: [PATCH 70/96] converted channel display to use id --- react/actions/show.js | 4 +- .../containers/ChannelClaimsDisplay/index.js | 10 +---- .../containers/ChannelClaimsDisplay/view.jsx | 2 +- react/containers/ShowChannel/index.js | 11 +++--- react/containers/ShowChannel/view.jsx | 39 +++++++++++-------- react/reducers/show.js | 37 +++--------------- react/sagas/show_asset.js | 2 +- react/sagas/show_channel.js | 6 +-- 8 files changed, 43 insertions(+), 68 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index 87a11aab..c39f4983 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -109,10 +109,10 @@ export function showNewChannel (channelData) { }; }; -export function updateShowChannel (error, name, shortId, longId, claimsData) { +export function updateShowChannel (error, id) { return { type: actions.SHOW_CHANNEL_UPDATE, - data: { error, name, shortId, longId, claimsData }, + data: { error, id }, }; }; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 4aee5e8b..90a5eef0 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -2,15 +2,9 @@ import { connect } from 'react-redux'; import { } from 'actions/show'; import View from './view'; -const mapStateToProps = ({ show : { showChannel: { error, channelData, claimsData } } }) => { +const mapStateToProps = ({ show }) => { return { - error : error, - name : channelData.name, - longId : channelData.longId, - claims : claimsData.claims, - currentPage: claimsData.currentPage, - totalPages : claimsData.totalPages, - totalClaims: claimsData.totalClaims, + channel: show.channelList[show.showChannel.id], }; }; diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index 87e88ddd..cf961bb8 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -20,7 +20,7 @@ class ChannelClaimsDisplay extends React.Component { this.showNewPage(nextPage); } render () { - const { error, claims, currentPage, totalPages } = this.props; + const { channel: { error, claimsData: { claims, currentPage, totalPages } } } = this.props; return (
{error ? ( diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 32469e5f..619a5966 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -13,25 +13,26 @@ const mapStateToProps = ({ show }) => { channelList : show.channelList, // show channel error : show.showChannel.error, - name : show.showChannel.channelData.name, - shortId : show.showChannel.channelData.shortId, - longId : show.showChannel.channelData.longId, + id : show.showChannel.id, + channel : show.channelList[show.showChannel.id], }; }; const mapDispatchToProps = dispatch => { return { + // request onNewChannelRequest (id, name, channelId) { dispatch(newChannelRequest(id, name, channelId)); }, onRequestError: (error) => { dispatch(updateRequestError(error, null, null)); }, + // show channel onShowNewChannel: (channelData) => { dispatch(showNewChannel(channelData)); }, - onShowExistingChannel: (error, name, shortId, longId, claimsData) => { - dispatch(updateShowChannel(error, name, shortId, longId, claimsData)); + onShowExistingChannel: (id) => { + dispatch(updateShowChannel(null, id)); }, onShowChannelClear: () => { dispatch(clearShowChannel()); diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 606f9cf8..16962e9d 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -49,7 +49,7 @@ class ShowChannel extends React.Component { const channelRecordId = `c#${channelData.name}#${channelData.longId}`; const existingChannel = channelList[channelRecordId]; if (existingChannel) { - this.showExistingChannel(existingChannel); + this.showExistingChannel(channelRecordId); } else { this.showNewChannel(channelData); } @@ -57,34 +57,39 @@ class ShowChannel extends React.Component { showNewChannel (channelData) { this.props.onShowNewChannel(channelData); }; - showExistingChannel (existingChannel) { - const { error, channelData: {name, shortId, longId}, claimsData } = existingChannel; - this.props.onShowExistingChannel(error, name, shortId, longId, claimsData); + showExistingChannel (channelRecordId) { + this.props.onShowExistingChannel(channelRecordId); }; componentWillUnmount () { this.props.onShowChannelClear(); } render () { - const { error, name, longId, shortId } = this.props; + const { error, channel } = this.props; if (error) { return ( ); }; - return ( -
- -
-
-

channel name: {name ? name : 'loading...'}

-

full channel id: {longId ? longId : 'loading...'}

-

short channel id: {shortId ? shortId : 'loading...'}

-
-
- {(name && longId) && } + if (channel) { + const { channelData: { name, longId, shortId } } = channel; + return ( +
+ +
+
+

channel name: {name ? name : 'loading...'}

+

full channel id: {longId ? longId : 'loading...'}

+

short channel id: {shortId ? shortId : 'loading...'}

+
+
+ {(name && longId) && } +
-
+ ); + }; + return ( + ); } }; diff --git a/react/reducers/show.js b/react/reducers/show.js index 3a78bc2f..d6b52024 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -10,18 +10,8 @@ const initialState = { requestId: null, }, showChannel: { - error : null, - channelData: { - name : null, - shortId: null, - longId : null, - }, - claimsData: { - claims : null, - currentPage: null, - totalPages : null, - totalClaims: null, - }, + error: null, + id : null, }, showAsset: { error: null, @@ -132,30 +122,15 @@ export default function (state = initialState, action) { case actions.SHOW_CHANNEL_UPDATE: return Object.assign({}, state, { showChannel: { - error : action.data.error, - channelData: { - name : action.data.name, - shortId: action.data.shortId, - longId : action.data.longId, - }, - claimsData: action.data.claimsData, + error: action.data.error, + id : action.data.id, }, }); case actions.SHOW_CHANNEL_CLEAR: return Object.assign({}, state, { showChannel: { - error : null, - channelData: { - name : null, - shortId: null, - longId : null, - }, - claimsData: { - claims : null, - currentPage: null, - totalPages : null, - totalClaims: null, - }, + error: null, + id : null, }, }); // add channel to channel list diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index 1b99e5b6..d9b1d991 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -26,8 +26,8 @@ function* getAssetDataAndShowAsset (action) { if (!success) { return yield put(updateShowAsset(message, null)); } - yield put(updateShowAsset(null, id)); yield put(upsertAssetToAssetList(id, null, name, claimId, shortId, claimData)); + yield put(updateShowAsset(null, id)); } export function* watchShowNewAsset () { diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index 276d5f85..6588a8eb 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -9,14 +9,14 @@ function* getNewChannelDataAndShowChannel (action) { try { ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, 1)); } catch (error) { - return yield put(updateShowChannel(error.message, name, shortId, longId)); + return yield put(updateShowChannel(error.message, null)); } if (!success) { - return yield put(updateShowChannel(message, name, shortId, longId)); + return yield put(updateShowChannel(message, null)); } - yield put(updateShowChannel(null, name, shortId, longId, claimsData)); const channelData = {name, shortId, longId}; yield put(addNewChannelToChannelList(id, null, channelData, claimsData)); + yield put(updateShowChannel(null, id)); } export function* watchShowNewChannel () { From 98992b754b670c168b87ea23b5cf35ba8f8250fb Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 9 Feb 2018 09:15:52 -0800 Subject: [PATCH 71/96] updated button css --- public/assets/css/general.css | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/public/assets/css/general.css b/public/assets/css/general.css index a5761b34..3f6d439c 100644 --- a/public/assets/css/general.css +++ b/public/assets/css/general.css @@ -407,12 +407,13 @@ button { cursor: pointer; } -.button--primary { +.button--primary, .button--primary:focus { border: 1px solid black; padding: 0.5em; margin: 0.5em 0.3em 0.5em 0.3em; color: black; background-color: white; + outline: 0px; } .button--primary:hover { @@ -422,18 +423,19 @@ button { } .button--primary:active{ - border: 1px solid #4156C5; - color: white; - background-color: white; + border: 1px solid #ffffff; + color: #d0d0d0; + background-color: #ffffff; } -.button--secondary { +.button--secondary, .button--secondary:focus { border: 0px; border-bottom: 1px solid black; padding: 0.5em; margin: 0.5em 0.3em 0.5em 0.3em; color: black; background-color: white; + outline: 0px; } .button--secondary:hover { @@ -441,6 +443,10 @@ button { color: #4156C5; } +.button--secondary:active { + color: #ffffff;; +} + .button--large{ margin: 0px; width: calc(100% - 2px); From 2781e30134c91924d09863310df04e414f9918ed Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 9 Feb 2018 10:02:13 -0800 Subject: [PATCH 72/96] added actions and saga for updating claims list --- react/actions/show.js | 22 +++++++++-------- react/constants/show_action_types.js | 2 ++ .../containers/ChannelClaimsDisplay/index.js | 21 ++++++++-------- .../containers/ChannelClaimsDisplay/view.jsx | 15 +++++++----- react/reducers/show.js | 8 +++++++ react/sagas/index.js | 3 ++- react/sagas/show_channel.js | 24 ++++++++++++++++--- 7 files changed, 65 insertions(+), 30 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index c39f4983..49a93c92 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -124,17 +124,19 @@ export function clearShowChannel () { // update channel data -// export function updateChannelClaims () { -// return { -// type: actions.CHANNEL_LIST_UPDATE, // updates claims in channel in channel list -// } -// } +export function updateChannelClaimsAsync (channelListId, name, longId, page) { + return { + type: actions.CHANNEL_LIST_CLAIMS_UPDATE_ASYNC, + data: {channelListId, name, longId, page}, + }; +}; -// export function updateShowChannelClaims () { -// return { -// type: actions.SHOW_CHANNEL_CLAIMS_UPDATE, // update claims in show channel -// } -// } +export function updateChannelClaims (channelListId, claimsData) { + return { + type: actions.CHANNEL_LIST_CLAIMS_UPDATE, + data: {channelListId, claimsData}, + }; +}; // add channels to channel list diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 26302b22..732fa8fd 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -22,6 +22,8 @@ export const SHOW_CHANNEL_UPDATE = 'SHOW_CHANNEL_UPDATE'; export const SHOW_CHANNEL_CLEAR = 'SHOW_CHANNEL_CLEAR'; export const CHANNEL_LIST_ADD = 'CHANNEL_LIST_ADD'; +export const CHANNEL_LIST_CLAIMS_UPDATE_ASYNC = 'CHANNEL_LIST_CLAIMS_UPDATE_ASYNC'; +export const CHANNEL_LIST_CLAIMS_UPDATE = 'CHANNEL_LIST_CLAIMS_UPDATE'; // asset/file display actions export const FILE_REQUESTED = 'FILE_REQUESTED'; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 90a5eef0..392f446d 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -1,19 +1,20 @@ import { connect } from 'react-redux'; -import { } from 'actions/show'; +import { updateChannelClaimsAsync } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { return { - channel: show.channelList[show.showChannel.id], + showChannelId: show.showChannel.id, + channel : show.channelList[show.showChannel.id], }; }; -// const mapDispatchToProps = dispatch => { -// return { -// onChannelPageUpdate: (channelRecordId, name, longId, page) => { -// dispatch(updateChannelClaims(channelRecordId, name, longId, page)); -// }, -// }; -// }; +const mapDispatchToProps = dispatch => { + return { + onChannelPageUpdate: (showChannelId, name, longId, page) => { + dispatch(updateChannelClaimsAsync(showChannelId, name, longId, page)); + }, + }; +}; -export default connect(mapStateToProps, null)(View); +export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index cf961bb8..0f3aacab 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -7,18 +7,21 @@ class ChannelClaimsDisplay extends React.Component { this.showNextResultsPage = this.showNextResultsPage.bind(this); this.showPreviousResultsPage = this.showPreviousResultsPage.bind(this); } - showNewPage (page) { - console.log(`update claims data with new page ${page}`); - this.props.onChannelPageUpdate(page); - } showPreviousResultsPage () { - const previousPage = parseInt(this.props.currentPage) - 1; + const { channel: { claimsData: { currentPage } } } = this.props; + const previousPage = parseInt(currentPage) - 1; this.showNewPage(previousPage); } showNextResultsPage () { - const nextPage = parseInt(this.props.currentPage) + 1; + const { channel: { claimsData: { currentPage } } } = this.props; + const nextPage = parseInt(currentPage) + 1; this.showNewPage(nextPage); } + showNewPage (page) { + const { showChannelId, channel: { channelData: { name, longId } } } = this.props; + console.log(`update claims data on channel ${showChannelId} with new page ${page}`); + this.props.onChannelPageUpdate(showChannelId, name, longId, page); + } render () { const { channel: { error, claimsData: { claims, currentPage, totalPages } } } = this.props; return ( diff --git a/react/reducers/show.js b/react/reducers/show.js index d6b52024..4ed3f0d3 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -144,6 +144,14 @@ export default function (state = initialState, action) { }, }), }); + case actions.CHANNEL_LIST_CLAIMS_UPDATE: + return Object.assign({}, state, { + channelList: Object.assign({}, state.channelList, { + [action.data.channelListId]: Object.assign({}, state.channelList[action.data.channelListId], { + claimsData: action.data.claimsData, + }), + }), + }); // display an asset case actions.FILE_AVAILABILITY_UPDATE: return Object.assign({}, state, { diff --git a/react/sagas/index.js b/react/sagas/index.js index 22b11359..79935b0f 100644 --- a/react/sagas/index.js +++ b/react/sagas/index.js @@ -1,7 +1,7 @@ import { all } from 'redux-saga/effects'; import { watchNewAssetRequest, watchNewChannelRequest } from './request'; import { watchFileIsRequested } from './file'; -import { watchShowNewChannel } from './show_channel'; +import { watchShowNewChannel, watchShowNewChannelClaimsRequest } from './show_channel'; import { watchShowNewAsset } from './show_asset'; export default function* rootSaga () { @@ -11,5 +11,6 @@ export default function* rootSaga () { watchShowNewAsset(), watchShowNewChannel(), watchFileIsRequested(), + watchShowNewChannelClaimsRequest(), ]); } diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index 6588a8eb..9b328e99 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -1,9 +1,9 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { updateShowChannel, addNewChannelToChannelList } from 'actions/show'; +import { updateShowChannel, addNewChannelToChannelList, updateChannelClaims } from 'actions/show'; import { getChannelClaims } from 'api/channelApi'; -function* getNewChannelDataAndShowChannel (action) { +function* getChannelClaimsAndShowChannel (action) { const { id, channelData: {name, shortId, longId} } = action.data; let success, message, claimsData; try { @@ -20,5 +20,23 @@ function* getNewChannelDataAndShowChannel (action) { } export function* watchShowNewChannel () { - yield takeLatest(actions.SHOW_CHANNEL_NEW, getNewChannelDataAndShowChannel); + yield takeLatest(actions.SHOW_CHANNEL_NEW, getChannelClaimsAndShowChannel); }; + +function* getNewClaimsAndUpdateClaimsList (action) { + const { channelListId, name, longId, page } = action.data; + let success, message, claimsData; + try { + ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, page)); + } catch (error) { + return yield put(updateShowChannel(error.message, null)); + } + if (!success) { + return yield put(updateShowChannel(message, null)); + } + yield put(updateChannelClaims(channelListId, claimsData)); +} + +export function* watchShowNewChannelClaimsRequest () { + yield takeLatest(actions.CHANNEL_LIST_CLAIMS_UPDATE_ASYNC, getNewClaimsAndUpdateClaimsList); +} From 7cc78e9187ddf9c596681625b9e6e4b11b63cc38 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 9 Feb 2018 10:53:59 -0800 Subject: [PATCH 73/96] added a 404 page --- react/components/FourOhFourPage/index.js | 18 ++++++++++++++++++ react/root.js | 4 +++- 2 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 react/components/FourOhFourPage/index.js diff --git a/react/components/FourOhFourPage/index.js b/react/components/FourOhFourPage/index.js new file mode 100644 index 00000000..6a7c80b9 --- /dev/null +++ b/react/components/FourOhFourPage/index.js @@ -0,0 +1,18 @@ +import React from 'react'; +import NavBar from 'containers/NavBar'; + +class FourOhForPage extends React.Component { + render () { + return ( +
+ +
+

404

+

That page does not exist

+
+
+ ); + } +}; + +export default FourOhForPage; diff --git a/react/root.js b/react/root.js index e296ea7b..86c1f53d 100644 --- a/react/root.js +++ b/react/root.js @@ -7,6 +7,7 @@ import PublishPage from 'components/PublishPage'; import AboutPage from 'components/AboutPage'; import LoginPage from 'containers/LoginPage'; import ShowPage from 'containers/ShowPage'; +import FourOhFourPage from 'components/FourOhFourPage'; const Root = ({ store }) => ( @@ -16,7 +17,8 @@ const Root = ({ store }) => ( - + + From afe95916c152e8a29d3984fd7ae41600e1142172 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 9 Feb 2018 11:29:34 -0800 Subject: [PATCH 74/96] removed unnecessary handlebars partials --- react/reducers/channel.js | 4 ---- react/reducers/publish.js | 4 ---- react/reducers/show.js | 4 ---- views/partials/asset.handlebars | 36 --------------------------------- views/partials/image.handlebars | 1 - views/partials/video.handlebars | 10 --------- views/popular.handlebars | 24 ---------------------- views/showLite.handlebars | 3 --- 8 files changed, 86 deletions(-) delete mode 100644 views/partials/asset.handlebars delete mode 100644 views/partials/image.handlebars delete mode 100644 views/partials/video.handlebars delete mode 100644 views/popular.handlebars delete mode 100644 views/showLite.handlebars diff --git a/react/reducers/channel.js b/react/reducers/channel.js index 30dd0166..a3b811c0 100644 --- a/react/reducers/channel.js +++ b/react/reducers/channel.js @@ -8,10 +8,6 @@ const initialState = { }, }; -/* -Reducers describe how the application's state changes in response to actions -*/ - export default function (state = initialState, action) { switch (action.type) { case actions.CHANNEL_UPDATE: diff --git a/react/reducers/publish.js b/react/reducers/publish.js index e964fcec..c23e6e2b 100644 --- a/react/reducers/publish.js +++ b/react/reducers/publish.js @@ -26,10 +26,6 @@ const initialState = { }, }; -/* -Reducers describe how the application's state changes in response to actions -*/ - export default function (state = initialState, action) { switch (action.type) { case actions.FILE_SELECTED: diff --git a/react/reducers/show.js b/react/reducers/show.js index 4ed3f0d3..6a1b32df 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -27,10 +27,6 @@ const initialState = { assetList : {}, // same schema as showAsset }; -/* -Reducers describe how the application's state changes in response to actions -*/ - export default function (state = initialState, action) { switch (action.type) { // handle request diff --git a/views/partials/asset.handlebars b/views/partials/asset.handlebars deleted file mode 100644 index fefe944f..00000000 --- a/views/partials/asset.handlebars +++ /dev/null @@ -1,36 +0,0 @@ -
-
- - -
- -
- - diff --git a/views/partials/image.handlebars b/views/partials/image.handlebars deleted file mode 100644 index 1091a2e5..00000000 --- a/views/partials/image.handlebars +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/views/partials/video.handlebars b/views/partials/video.handlebars deleted file mode 100644 index d968c652..00000000 --- a/views/partials/video.handlebars +++ /dev/null @@ -1,10 +0,0 @@ - - - - \ No newline at end of file diff --git a/views/popular.handlebars b/views/popular.handlebars deleted file mode 100644 index 7f3072c2..00000000 --- a/views/popular.handlebars +++ /dev/null @@ -1,24 +0,0 @@ -{{> navBar}} -
-
- {{#each trendingAssets}} - {{> gridItem}} - {{/each}} -
-
- - - - diff --git a/views/showLite.handlebars b/views/showLite.handlebars deleted file mode 100644 index 31b5ee78..00000000 --- a/views/showLite.handlebars +++ /dev/null @@ -1,3 +0,0 @@ -
- {{> asset }} -
\ No newline at end of file From 249b6c6f0f1b68204009826f5689fb885ea6462d Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 12 Feb 2018 18:18:56 -0800 Subject: [PATCH 75/96] moved channel selection logic to mapStateToProps --- react/actions/show.js | 48 +++------- react/components/AssetDisplay/index.js | 15 ++- react/components/AssetInfo/index.js | 10 +- react/components/AssetTitle/index.js | 10 +- react/components/ShowAssetDetails/index.js | 8 +- react/components/ShowAssetDetails/view.jsx | 7 -- react/components/ShowAssetLite/index.js | 11 ++- react/components/ShowAssetLite/view.jsx | 2 +- react/constants/show_action_types.js | 5 +- .../containers/ChannelClaimsDisplay/index.js | 17 +++- .../containers/ChannelClaimsDisplay/view.jsx | 53 +++++------ react/containers/ShowAsset/index.js | 40 ++++---- react/containers/ShowAsset/view.jsx | 91 +++++-------------- react/containers/ShowChannel/index.js | 51 +++++------ react/containers/ShowChannel/view.jsx | 72 ++++----------- react/reducers/show.js | 44 ++------- react/sagas/request.js | 5 +- react/sagas/show_asset.js | 14 +-- react/sagas/show_channel.js | 22 ++--- 19 files changed, 198 insertions(+), 327 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index 49a93c92..bf0d20b3 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -61,24 +61,11 @@ export function showNewAsset (name, claimId) { }; }; -export function updateShowAsset (error, id) { - return { - type: actions.SHOW_ASSET_UPDATE, - data: { error, id }, - }; -}; - -export function clearShowAsset () { - return { - type: actions.SHOW_ASSET_CLEAR, - }; -}; - // add asset to asset list -export function upsertAssetToAssetList (id, error, name, claimId, shortId, claimData) { +export function addAssetToAssetList (id, error, name, claimId, shortId, claimData) { return { - type: actions.ASSET_LIST_UPSERT, + type: actions.ASSET_LIST_ADD, data: { id, error, name, claimId, shortId, claimData }, }; } @@ -101,33 +88,29 @@ export function addChannelRequest (id, error, name, longId, shortId) { // show a channel -export function showNewChannel (channelData) { - const id = `c#${channelData.name}#${channelData.longId}`; // move to the action +export function showNewChannel (name, shortId, longId) { + const id = `c#${name}#${longId}`; // move to the action return { type: actions.SHOW_CHANNEL_NEW, - data: { id, channelData }, + data: { id, name, shortId, longId }, }; }; -export function updateShowChannel (error, id) { - return { - type: actions.SHOW_CHANNEL_UPDATE, - data: { error, id }, - }; -}; +// add channels to channel list -export function clearShowChannel () { +export function addNewChannelToChannelList (id, name, shortId, longId, claimsData) { return { - type: actions.SHOW_CHANNEL_CLEAR, + type: actions.CHANNEL_LIST_ADD, + data: { id, name, shortId, longId, claimsData }, }; }; // update channel data -export function updateChannelClaimsAsync (channelListId, name, longId, page) { +export function updateChannelClaimsAsync (channelKey, name, longId, page) { return { type: actions.CHANNEL_LIST_CLAIMS_UPDATE_ASYNC, - data: {channelListId, name, longId, page}, + data: {channelKey, name, longId, page}, }; }; @@ -138,15 +121,6 @@ export function updateChannelClaims (channelListId, claimsData) { }; }; -// add channels to channel list - -export function addNewChannelToChannelList (id, error, channelData, claimsData) { - return { - type: actions.CHANNEL_LIST_ADD, - data: { id, error, channelData, claimsData }, - }; -}; - // display a file export function fileRequested (name, claimId) { diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 09fbc0de..c22b28dc 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -3,11 +3,18 @@ import View from './view'; import { fileRequested } from 'actions/show'; const mapStateToProps = ({ show }) => { - return { - error : show.displayAsset.error, - status : show.displayAsset.status, - asset : show.assetList[show.showAsset.id], + let props = { + error : show.displayAsset.error, + status: show.displayAsset.status, }; + // select asset info + const existingRequest = show.assetRequests[show.request.id]; + const assetKey = `a#${existingRequest.name}#${existingRequest.claimId}`; + const existingAsset = show.assetList[assetKey]; + if (existingAsset) { + props['asset'] = existingAsset; + }; + return props; }; const mapDispatchToProps = dispatch => { diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 899555e6..2614577d 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -2,9 +2,15 @@ import { connect } from 'react-redux'; import View from './view'; const mapStateToProps = ({ show }) => { - return { - asset: show.assetList[show.showAsset.id], + let props = {}; + // select asset info + const request = show.assetRequests[show.request.id]; + const assetKey = `a#${request.name}#${request.claimId}`; + const asset = show.assetList[assetKey]; + if (asset) { + props['asset'] = asset; }; + return props; }; export default connect(mapStateToProps, null)(View); diff --git a/react/components/AssetTitle/index.js b/react/components/AssetTitle/index.js index 9766d497..9be82b66 100644 --- a/react/components/AssetTitle/index.js +++ b/react/components/AssetTitle/index.js @@ -2,9 +2,15 @@ import { connect } from 'react-redux'; import View from './view'; const mapStateToProps = ({ show }) => { - return { - title: show.assetList[show.showAsset.id].claimData.title, + let props = {}; + // select title + const existingRequest = show.assetRequests[show.request.id]; + const assetKey = `a#${existingRequest.name}#${existingRequest.claimId}`; + const existingAsset = show.assetList[assetKey]; + if (existingAsset) { + props['title'] = existingAsset.claimData.title; }; + return props; }; export default connect(mapStateToProps, null)(View); diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index 899555e6..8cec1202 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -1,10 +1,4 @@ import { connect } from 'react-redux'; import View from './view'; -const mapStateToProps = ({ show }) => { - return { - asset: show.assetList[show.showAsset.id], - }; -}; - -export default connect(mapStateToProps, null)(View); +export default connect(null, null)(View); diff --git a/react/components/ShowAssetDetails/view.jsx b/react/components/ShowAssetDetails/view.jsx index eaef0a1d..8a956774 100644 --- a/react/components/ShowAssetDetails/view.jsx +++ b/react/components/ShowAssetDetails/view.jsx @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import NavBar from 'containers/NavBar'; import AssetTitle from 'components/AssetTitle'; import AssetDisplay from 'components/AssetDisplay'; @@ -7,11 +6,9 @@ import AssetInfo from 'components/AssetInfo'; class ShowAssetDetails extends React.Component { render () { - const { asset } = this.props; return (
- {asset &&
@@ -32,8 +29,4 @@ class ShowAssetDetails extends React.Component { } }; -ShowAssetDetails.propTypes = { - error: PropTypes.string, -}; - export default ShowAssetDetails; diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index 899555e6..df6a3019 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -2,9 +2,16 @@ import { connect } from 'react-redux'; import View from './view'; const mapStateToProps = ({ show }) => { - return { - asset: show.assetList[show.showAsset.id], + let props = {}; + // select name and claim id + const existingRequest = show.assetRequests[show.request.id]; + const assetKey = `a#${existingRequest.name}#${existingRequest.claimId}`; + const existingAsset = show.assetList[assetKey]; + if (existingAsset) { + props['name'] = existingAsset.name; + props['claimId'] = existingAsset.claimId; }; + return props; }; export default connect(mapStateToProps, null)(View); diff --git a/react/components/ShowAssetLite/view.jsx b/react/components/ShowAssetLite/view.jsx index d9892d90..74dc1beb 100644 --- a/react/components/ShowAssetLite/view.jsx +++ b/react/components/ShowAssetLite/view.jsx @@ -4,7 +4,7 @@ import AssetDisplay from 'components/AssetDisplay'; class ShowLite extends React.Component { render () { - const { asset: { name, claimId } } = this.props; + const { name, claimId } = this.props; return (
{ (name && claimId) && diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 732fa8fd..e40455ae 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -8,10 +8,7 @@ export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW'; export const ASSET_REQUEST_ADD = 'ASSET_REQUEST_ADD'; export const SHOW_ASSET_NEW = 'SHOW_ASSET_NEW'; -export const SHOW_ASSET_UPDATE = 'SHOW_ASSET_UPDATE'; -export const SHOW_ASSET_CLEAR = 'SHOW_ASSET_CLEAR'; - -export const ASSET_LIST_UPSERT = `ASSET_LIST_UPSERT`; +export const ASSET_LIST_ADD = `ASSET_LIST_ADD`; // channel request actions export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW'; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 392f446d..4c9bd356 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -3,16 +3,23 @@ import { updateChannelClaimsAsync } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { - return { - showChannelId: show.showChannel.id, - channel : show.channelList[show.showChannel.id], + let props = {}; + // select channel key + const request = show.channelRequests[show.request.id]; + const channelKey = `c#${request.name}#${request.longId}`; + props['channelKey'] = channelKey; + // select channel claims + const channel = show.channelList[channelKey]; + if (channel) { + props['channel'] = channel; }; + return props; }; const mapDispatchToProps = dispatch => { return { - onChannelPageUpdate: (showChannelId, name, longId, page) => { - dispatch(updateChannelClaimsAsync(showChannelId, name, longId, page)); + onChannelPageUpdate: (channelKey, name, longId, page) => { + dispatch(updateChannelClaimsAsync(channelKey, name, longId, page)); }, }; }; diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index 0f3aacab..4dbcce27 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -18,43 +18,32 @@ class ChannelClaimsDisplay extends React.Component { this.showNewPage(nextPage); } showNewPage (page) { - const { showChannelId, channel: { channelData: { name, longId } } } = this.props; - console.log(`update claims data on channel ${showChannelId} with new page ${page}`); - this.props.onChannelPageUpdate(showChannelId, name, longId, page); + const { channelKey, channel: { name, longId } } = this.props; + this.props.onChannelPageUpdate(channelKey, name, longId, page); } render () { - const { channel: { error, claimsData: { claims, currentPage, totalPages } } } = this.props; + const { channel: { claimsData: { claims, currentPage, totalPages } } } = this.props; return ( -
- {error ? ( -
-
-

{error}

-
-
- ) : ( -
- {claims && -
- {claims.map((claim, index) => )} -
- {(currentPage > 1) && - - } - {(currentPage < totalPages) && - - } -
-
+
+ {claims && +
+ {claims.map((claim, index) => )} +
+ {(currentPage > 1) && + + } + {(currentPage < totalPages) && + }
- )} +
+ }
); } diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index e375e2ab..63ccfa97 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -1,20 +1,27 @@ import { connect } from 'react-redux'; import View from './view'; -import { newAssetRequest, updateRequestError, showNewAsset, updateShowAsset, clearShowAsset } from 'actions/show'; +import { newAssetRequest, showNewAsset } from 'actions/show'; const mapStateToProps = ({ show }) => { - return { - // request - requestId : show.request.id, - requestName : show.request.data.name, - requestModifier : show.request.data.modifier, - requestExtension: show.request.data.extension, - assetRequests : show.assetRequests, - assetList : show.assetList, - // show asset - error : show.showAsset.error, - id : show.showAsset.id, + let props = {}; + props['requestType'] = show.request.type; + props['requestId'] = show.request.id; + props['requestName'] = show.request.data.name; + props['requestModifier'] = show.request.data.modifier; + props['requestExtension'] = show.request.data.extension; + // select request + const existingRequest = show.assetRequests[show.request.id]; + if (existingRequest) { + props['existingRequest'] = existingRequest; + // select asset info + const assetKey = `a#${existingRequest.name}#${existingRequest.claimId}`; // note: just store this in the request + const existingAsset = show.assetList[assetKey]; + if (existingAsset) { + console.log('existing asset found', existingAsset); + props['asset'] = existingAsset; + }; }; + return props; }; const mapDispatchToProps = dispatch => { @@ -23,19 +30,10 @@ const mapDispatchToProps = dispatch => { onNewRequest: (id, name, modifier) => { dispatch(newAssetRequest(id, name, modifier)); }, - onRequestError: (error) => { - dispatch(updateRequestError(error, null, null)); - }, // show asset onShowNewAsset: (name, claimId) => { dispatch(showNewAsset(name, claimId)); }, - onShowExistingAsset: (assetId) => { - dispatch(updateShowAsset(null, assetId)); - }, - onLeaveShowAsset: () => { - dispatch(clearShowAsset()); // clear any errors - }, }; }; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 3e3de33d..87f75a91 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -9,83 +9,40 @@ function requestIsAnAssetRequest ({ requestType }) { return requestType === ASSET; } -function requestIsNewRequest (nextProps, props) { - return (nextProps.requestId !== props.requestId); -} - class ShowAsset extends React.Component { componentDidMount () { - const { requestId, requestName, requestModifier, assetRequests } = this.props; - const existingRequest = assetRequests[requestId]; - if (existingRequest) { // case: the assetRequest exists - this.onRepeatRequest(existingRequest); - } else { // case: the asset request does not exist - this.onNewRequest(requestId, requestName, requestModifier); - } + const { asset, existingRequest, requestId, requestName, requestModifier } = this.props; + if (!existingRequest) { // case: the asset request does not exist + return this.props.onNewRequest(requestId, requestName, requestModifier); + }; + if (!asset) { // case: the asset request does not exist + const { name, claimId } = existingRequest; + return this.props.onShowNewAsset(name, claimId); + }; } componentWillReceiveProps (nextProps) { - // case where componentDidMount triggered new props - if (requestIsAnAssetRequest(nextProps) && requestIsNewRequest(nextProps, this.props)) { - const { requestId, requestName, requestModifier, assetRequests } = nextProps; - const existingRequest = assetRequests[requestId]; - if (existingRequest) { // case: the assetRequest exists - this.onRepeatRequest(existingRequest); - } else { // case: the asset request does not exist - this.onNewRequest(requestId, requestName, requestModifier); - } - } else { - console.log('ShowAsset receiving new props -> request.id did not update', nextProps); + if (requestIsAnAssetRequest(nextProps)) { + const { asset, existingRequest, requestId, requestName, requestModifier } = nextProps; + if (!existingRequest) { + return this.props.onNewRequest(requestId, requestName, requestModifier); + }; + if (!asset) { + const { name, claimId } = existingRequest; + return this.props.onShowNewAsset(name, claimId); + }; } } - onNewRequest (id, requestName, requestModifier) { - console.log('new request'); - this.props.onNewRequest(id, requestName, requestModifier); - } - onRepeatRequest ({ error, name, claimId }) { - console.log('repeat request'); - // if error, return and update state with error - if (error) { - return this.props.onRequestError(error); - } - // update the showAsset data in the store - const { assetList } = this.props; - const assetId = `a#${name}#${claimId}`; - const existingAssetRecord = assetList[assetId]; - if (existingAssetRecord) { // case: the asset data already exists - this.showExistingAsset(assetId); - } else { // case: the asset data does not exist yet - this.showNewAsset(name, claimId); - } - } - showNewAsset (name, claimId) { - this.props.onShowNewAsset(name, claimId); - } - showExistingAsset (assetId) { - this.props.onShowExistingAsset(assetId); - } - componentWillUnmount () { - this.props.onLeaveShowAsset(); - } render () { - const { error, id, requestExtension } = this.props; - if (error) { - return ( - - ); - } - if (id) { // direct requests are passing because name is present so it just goes + const {asset, requestExtension} = this.props; + if (asset) { if (requestExtension) { - return ( - - ); - } else { - return ( - - ); + return ; } - }; + return ; + } + ; return ( -
+ ); } }; diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 619a5966..7ddfef82 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,41 +1,38 @@ + import { connect } from 'react-redux'; -import {newChannelRequest, updateRequestError, showNewChannel, updateShowChannel, clearShowChannel} from 'actions/show'; +import { newChannelRequest, showNewChannel } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { - return { - // request - requestId : show.request.id, - requestType : show.request.type, - requestChannelName: show.request.data.name, - requestChannelId : show.request.data.id, - requestList : show.channelRequests, - channelList : show.channelList, - // show channel - error : show.showChannel.error, - id : show.showChannel.id, - channel : show.channelList[show.showChannel.id], - }; + let props = {}; + props['requestId'] = show.request.id; + props['requestType'] = show.request.type; + props['requestChannelName'] = show.request.data.name; + props['requestChannelId'] = show.request.data.id; + // select request + const existingRequest = show.channelRequests[show.request.id]; + if (existingRequest) { + props['existingRequest'] = existingRequest; + console.log('existing channel request found', existingRequest); + // select channel info + const channelKey = `c#${existingRequest.name}#${existingRequest.longId}`; + const channel = show.channelList[channelKey]; + if (channel) { + props['channel'] = channel; + }; + } + return props; }; const mapDispatchToProps = dispatch => { return { // request - onNewChannelRequest (id, name, channelId) { - dispatch(newChannelRequest(id, name, channelId)); - }, - onRequestError: (error) => { - dispatch(updateRequestError(error, null, null)); + onNewChannelRequest (requestId, requestChannelName, requestChannelId) { + dispatch(newChannelRequest(requestId, requestChannelName, requestChannelId)); }, // show channel - onShowNewChannel: (channelData) => { - dispatch(showNewChannel(channelData)); - }, - onShowExistingChannel: (id) => { - dispatch(updateShowChannel(null, id)); - }, - onShowChannelClear: () => { - dispatch(clearShowChannel()); + onShowNewChannel: (name, shortId, longId) => { + dispatch(showNewChannel(name, shortId, longId)); }, }; }; diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 16962e9d..497faab5 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -9,69 +9,33 @@ function requestIsAChannelRequest ({ requestType }) { return requestType === CHANNEL; } -function requestIsNewRequest (nextProps, props) { - return (nextProps.requestId !== props.requestId); -} - class ShowChannel extends React.Component { componentDidMount () { - const {requestId, requestChannelName, requestChannelId, requestList, channelList} = this.props; - const existingRequest = requestList[requestId]; - if (existingRequest) { - this.onRepeatChannelRequest(existingRequest, channelList); - } else { - this.onNewChannelRequest(requestId, requestChannelName, requestChannelId); + const { existingRequest, channel, requestId, requestChannelName, requestChannelId } = this.props; + if (!existingRequest) { + return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); + } + if (!channel) { + const { name, shortId, longId } = existingRequest; + return this.props.onShowNewChannel(name, shortId, longId); } } componentWillReceiveProps (nextProps) { - if (requestIsAChannelRequest(nextProps) && requestIsNewRequest(nextProps, this.props)) { - const {requestId, requestChannelName, requestChannelId, requestList, channelList} = nextProps; - const existingRequest = requestList[requestId]; - if (existingRequest) { - this.onRepeatChannelRequest(existingRequest, channelList); - } else { - this.onNewChannelRequest(requestId, requestChannelName, requestChannelId); + if (requestIsAChannelRequest(nextProps)) { + const { existingRequest, channel, requestId, requestChannelName, requestChannelId } = nextProps; + if (!existingRequest) { + return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); + } + if (!channel) { + const { name, shortId, longId } = existingRequest; + return this.props.onShowNewChannel(name, shortId, longId); } - } else { - console.log('ShowChannel receiving new props -> request.id did not update', nextProps); - }; - } - onNewChannelRequest (requestId, requestName, requestChannelId) { - console.log('new request'); - this.props.onNewChannelRequest(requestId, requestName, requestChannelId); - } - onRepeatChannelRequest ({ error, channelData }, channelList) { - // if error, return and update state with error - if (error) { - return this.props.onRequestError(error); } - // check if the channel data is present or not - const channelRecordId = `c#${channelData.name}#${channelData.longId}`; - const existingChannel = channelList[channelRecordId]; - if (existingChannel) { - this.showExistingChannel(channelRecordId); - } else { - this.showNewChannel(channelData); - } - } - showNewChannel (channelData) { - this.props.onShowNewChannel(channelData); - }; - showExistingChannel (channelRecordId) { - this.props.onShowExistingChannel(channelRecordId); - }; - componentWillUnmount () { - this.props.onShowChannelClear(); } render () { - const { error, channel } = this.props; - if (error) { - return ( - - ); - }; + const { channel } = this.props; if (channel) { - const { channelData: { name, longId, shortId } } = channel; + const { name, longId, shortId } = channel; return (
@@ -82,7 +46,7 @@ class ShowChannel extends React.Component {

short channel id: {shortId ? shortId : 'loading...'}

- {(name && longId) && } +
diff --git a/react/reducers/show.js b/react/reducers/show.js index 6a1b32df..d5b8eb5c 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -9,14 +9,6 @@ const initialState = { data : null, requestId: null, }, - showChannel: { - error: null, - id : null, - }, - showAsset: { - error: null, - id : null, - }, displayAsset: { error : null, status: LOCAL_CHECK, @@ -24,7 +16,7 @@ const initialState = { channelRequests: {}, channelList : {}, assetRequests : {}, - assetList : {}, // same schema as showAsset + assetList : {}, }; export default function (state = initialState, action) { @@ -72,23 +64,8 @@ export default function (state = initialState, action) { }, }), }); - // show an asset - case actions.SHOW_ASSET_UPDATE: - return Object.assign({}, state, { - showAsset: Object.assign({}, state.showAsset, { - error: action.data.error, - id : action.data.id, - }), - }); - case actions.SHOW_ASSET_CLEAR: - return Object.assign({}, state, { - showAsset: Object.assign({}, state.showAsset, { - error: null, - id : null, - }), - }); // add asset to asset list - case actions.ASSET_LIST_UPSERT: + case actions.ASSET_LIST_ADD: return Object.assign({}, state, { assetList: Object.assign({}, state.assetList, { [action.data.id]: { @@ -105,12 +82,10 @@ export default function (state = initialState, action) { return Object.assign({}, state, { channelRequests: Object.assign({}, state.channelRequests, { [action.data.id]: { - error : action.data.error, - channelData: { - name : action.data.name, - longId : action.data.longId, - shortId: action.data.shortId, - }, + error : action.data.error, + name : action.data.name, + longId : action.data.longId, + shortId: action.data.shortId, }, }), }); @@ -134,9 +109,10 @@ export default function (state = initialState, action) { return Object.assign({}, state, { channelList: Object.assign({}, state.channelList, { [action.data.id]: { - error : action.data.error, - channelData: action.data.channelData, - claimsData : action.data.claimsData, + name : action.data.name, + longId : action.data.longId, + shortId : action.data.shortId, + claimsData: action.data.claimsData, }, }), }); diff --git a/react/sagas/request.js b/react/sagas/request.js index 8ebc96f9..bab66c88 100644 --- a/react/sagas/request.js +++ b/react/sagas/request.js @@ -26,7 +26,7 @@ function* newChannelRequest (action) { ({success, message, data} = yield call(getChannelData, name, channelId)); } catch (error) { // return yield put(addChannelRequest(id, error.message, null, null, null)); - return yield put(updateRequestError(message)); + return yield put(updateRequestError(error.message)); } if (!success) { // return yield put(addChannelRequest(id, message, null, null, null)); @@ -34,8 +34,7 @@ function* newChannelRequest (action) { } const { longChannelClaimId: longId, shortChannelClaimId: shortId } = data; yield put(addChannelRequest(id, null, name, longId, shortId)); - const channelData = {name, longId, shortId}; - yield put(showNewChannel(channelData)); + yield put(showNewChannel(name, shortId, longId)); } export function* watchNewAssetRequest () { diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index d9b1d991..b6931b72 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { updateShowAsset, upsertAssetToAssetList } from 'actions/show'; +import { updateRequestError, addAssetToAssetList } from 'actions/show'; import { getShortId, getClaimData } from 'api/assetApi'; function* getAssetDataAndShowAsset (action) { @@ -10,10 +10,10 @@ function* getAssetDataAndShowAsset (action) { try { ({success, message, data: shortId} = yield call(getShortId, name, claimId)); } catch (error) { - return yield put(updateShowAsset(error.message, null)); + return yield put(updateRequestError(error.message)); } if (!success) { - return yield put(updateShowAsset(message, null)); + return yield put(updateRequestError(message)); } // if no error, get claim data success = null; @@ -21,13 +21,13 @@ function* getAssetDataAndShowAsset (action) { try { ({success, message, data: claimData} = yield call(getClaimData, name, claimId)); } catch (error) { - return yield put(updateShowAsset(error.message, null)); + return yield put(updateRequestError(error.message)); } if (!success) { - return yield put(updateShowAsset(message, null)); + return yield put(updateRequestError(message)); } - yield put(upsertAssetToAssetList(id, null, name, claimId, shortId, claimData)); - yield put(updateShowAsset(null, id)); + yield put(addAssetToAssetList(id, null, name, claimId, shortId, claimData)); + yield put(updateRequestError(null)); } export function* watchShowNewAsset () { diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index 9b328e99..c86906b9 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -1,22 +1,22 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { updateShowChannel, addNewChannelToChannelList, updateChannelClaims } from 'actions/show'; +import { updateRequestError, addNewChannelToChannelList, updateChannelClaims } from 'actions/show'; import { getChannelClaims } from 'api/channelApi'; function* getChannelClaimsAndShowChannel (action) { - const { id, channelData: {name, shortId, longId} } = action.data; + const { id, name, shortId, longId } = action.data; + console.log('getchannelclaimsandshowchannel', id, name, shortId, longId); let success, message, claimsData; try { ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, 1)); } catch (error) { - return yield put(updateShowChannel(error.message, null)); + return yield put(updateRequestError(error.message)); } if (!success) { - return yield put(updateShowChannel(message, null)); + return yield put(updateRequestError(message)); } - const channelData = {name, shortId, longId}; - yield put(addNewChannelToChannelList(id, null, channelData, claimsData)); - yield put(updateShowChannel(null, id)); + yield put(addNewChannelToChannelList(id, name, shortId, longId, claimsData)); + yield put(updateRequestError(null)); } export function* watchShowNewChannel () { @@ -24,17 +24,17 @@ export function* watchShowNewChannel () { }; function* getNewClaimsAndUpdateClaimsList (action) { - const { channelListId, name, longId, page } = action.data; + const { channelKey, name, longId, page } = action.data; let success, message, claimsData; try { ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, page)); } catch (error) { - return yield put(updateShowChannel(error.message, null)); + return yield put(updateRequestError(error.message)); } if (!success) { - return yield put(updateShowChannel(message, null)); + return yield put(updateRequestError(message)); } - yield put(updateChannelClaims(channelListId, claimsData)); + yield put(updateChannelClaims(channelKey, claimsData)); } export function* watchShowNewChannelClaimsRequest () { From 0912cd45d92e89d5bb551f3021959a4eca4e6a29 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 12 Feb 2018 18:50:19 -0800 Subject: [PATCH 76/96] renamed existing asset --- react/api/assetApi.js | 2 +- react/components/AssetDisplay/index.js | 6 +++--- react/components/AssetTitle/index.js | 6 +++--- react/components/ShowAssetLite/index.js | 8 ++++---- react/containers/ShowAsset/index.js | 8 ++++---- react/sagas/show_asset.js | 2 ++ react/sagas/show_channel.js | 1 - 7 files changed, 17 insertions(+), 16 deletions(-) diff --git a/react/api/assetApi.js b/react/api/assetApi.js index b5e3b156..a53dd136 100644 --- a/react/api/assetApi.js +++ b/react/api/assetApi.js @@ -20,7 +20,7 @@ export function getLongClaimId (name, modifier) { }), body: JSON.stringify(body), } - // crate url + // create url const url = `/api/claim/long-id`; // return the request promise return Request(url, params); diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index c22b28dc..26eadbe2 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -10,9 +10,9 @@ const mapStateToProps = ({ show }) => { // select asset info const existingRequest = show.assetRequests[show.request.id]; const assetKey = `a#${existingRequest.name}#${existingRequest.claimId}`; - const existingAsset = show.assetList[assetKey]; - if (existingAsset) { - props['asset'] = existingAsset; + const asset = show.assetList[assetKey]; + if (asset) { + props['asset'] = asset; }; return props; }; diff --git a/react/components/AssetTitle/index.js b/react/components/AssetTitle/index.js index 9be82b66..abec748a 100644 --- a/react/components/AssetTitle/index.js +++ b/react/components/AssetTitle/index.js @@ -6,9 +6,9 @@ const mapStateToProps = ({ show }) => { // select title const existingRequest = show.assetRequests[show.request.id]; const assetKey = `a#${existingRequest.name}#${existingRequest.claimId}`; - const existingAsset = show.assetList[assetKey]; - if (existingAsset) { - props['title'] = existingAsset.claimData.title; + const asset = show.assetList[assetKey]; + if (asset) { + props['title'] = asset.claimData.title; }; return props; }; diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index df6a3019..61f50437 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -6,10 +6,10 @@ const mapStateToProps = ({ show }) => { // select name and claim id const existingRequest = show.assetRequests[show.request.id]; const assetKey = `a#${existingRequest.name}#${existingRequest.claimId}`; - const existingAsset = show.assetList[assetKey]; - if (existingAsset) { - props['name'] = existingAsset.name; - props['claimId'] = existingAsset.claimId; + const asset = show.assetList[assetKey]; + if (asset) { + props['name'] = asset.name; + props['claimId'] = asset.claimId; }; return props; }; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 63ccfa97..79cca1a2 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -15,10 +15,10 @@ const mapStateToProps = ({ show }) => { props['existingRequest'] = existingRequest; // select asset info const assetKey = `a#${existingRequest.name}#${existingRequest.claimId}`; // note: just store this in the request - const existingAsset = show.assetList[assetKey]; - if (existingAsset) { - console.log('existing asset found', existingAsset); - props['asset'] = existingAsset; + const asset = show.assetList[assetKey]; + if (asset) { + console.log('existing asset found', asset); + props['asset'] = asset; }; }; return props; diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index b6931b72..f4adf4cb 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -6,6 +6,7 @@ import { getShortId, getClaimData } from 'api/assetApi'; function* getAssetDataAndShowAsset (action) { const {id, name, claimId} = action.data; // get short Id + console.log('getting short id'); let success, message, shortId; try { ({success, message, data: shortId} = yield call(getShortId, name, claimId)); @@ -16,6 +17,7 @@ function* getAssetDataAndShowAsset (action) { return yield put(updateRequestError(message)); } // if no error, get claim data + console.log('getting claim data'); success = null; let claimData; try { diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index c86906b9..5dd138f8 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -5,7 +5,6 @@ import { getChannelClaims } from 'api/channelApi'; function* getChannelClaimsAndShowChannel (action) { const { id, name, shortId, longId } = action.data; - console.log('getchannelclaimsandshowchannel', id, name, shortId, longId); let success, message, claimsData; try { ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, 1)); From b1fb65b1ec9d6bcecdadb18f98629887819bf9f2 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 12 Feb 2018 19:01:29 -0800 Subject: [PATCH 77/96] renamed existing request --- react/components/AssetDisplay/index.js | 4 +- react/components/AssetTitle/index.js | 4 +- react/components/ShowAssetLite/index.js | 4 +- .../containers/ChannelClaimsDisplay/index.js | 11 +++--- react/containers/ShowAsset/index.js | 39 +++++++++++-------- react/containers/ShowAsset/view.jsx | 12 +++--- react/containers/ShowChannel/index.js | 35 +++++++++-------- react/containers/ShowChannel/view.jsx | 12 +++--- 8 files changed, 64 insertions(+), 57 deletions(-) diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 26eadbe2..54e55e71 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -8,8 +8,8 @@ const mapStateToProps = ({ show }) => { status: show.displayAsset.status, }; // select asset info - const existingRequest = show.assetRequests[show.request.id]; - const assetKey = `a#${existingRequest.name}#${existingRequest.claimId}`; + const previousRequest = show.assetRequests[show.request.id]; + const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; const asset = show.assetList[assetKey]; if (asset) { props['asset'] = asset; diff --git a/react/components/AssetTitle/index.js b/react/components/AssetTitle/index.js index abec748a..f68dab60 100644 --- a/react/components/AssetTitle/index.js +++ b/react/components/AssetTitle/index.js @@ -4,8 +4,8 @@ import View from './view'; const mapStateToProps = ({ show }) => { let props = {}; // select title - const existingRequest = show.assetRequests[show.request.id]; - const assetKey = `a#${existingRequest.name}#${existingRequest.claimId}`; + const previousRequest = show.assetRequests[show.request.id]; + const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; const asset = show.assetList[assetKey]; if (asset) { props['title'] = asset.claimData.title; diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index 61f50437..8ab7fb18 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -4,8 +4,8 @@ import View from './view'; const mapStateToProps = ({ show }) => { let props = {}; // select name and claim id - const existingRequest = show.assetRequests[show.request.id]; - const assetKey = `a#${existingRequest.name}#${existingRequest.claimId}`; + const previousRequest = show.assetRequests[show.request.id]; + const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; const asset = show.assetList[assetKey]; if (asset) { props['name'] = asset.name; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 4c9bd356..80c075dc 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -3,17 +3,16 @@ import { updateChannelClaimsAsync } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { - let props = {}; // select channel key const request = show.channelRequests[show.request.id]; const channelKey = `c#${request.name}#${request.longId}`; - props['channelKey'] = channelKey; // select channel claims - const channel = show.channelList[channelKey]; - if (channel) { - props['channel'] = channel; + const channel = show.channelList[channelKey] || null; + // return props + return { + channelKey, + channel, }; - return props; }; const mapDispatchToProps = dispatch => { diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 79cca1a2..8eb76e9d 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -3,25 +3,30 @@ import View from './view'; import { newAssetRequest, showNewAsset } from 'actions/show'; const mapStateToProps = ({ show }) => { - let props = {}; - props['requestType'] = show.request.type; - props['requestId'] = show.request.id; - props['requestName'] = show.request.data.name; - props['requestModifier'] = show.request.data.modifier; - props['requestExtension'] = show.request.data.extension; + // select request info + const requestType = show.request.type; + const requestId = show.request.id; + const requestName = show.request.data.name; + const requestModifier = show.request.data.modifier; + const requestExtension = show.request.data.extension; // select request - const existingRequest = show.assetRequests[show.request.id]; - if (existingRequest) { - props['existingRequest'] = existingRequest; - // select asset info - const assetKey = `a#${existingRequest.name}#${existingRequest.claimId}`; // note: just store this in the request - const asset = show.assetList[assetKey]; - if (asset) { - console.log('existing asset found', asset); - props['asset'] = asset; - }; + const previousRequest = show.assetRequests[show.request.id] || null; + // select asset infogit + let asset; + if (previousRequest) { + const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request + asset = show.assetList[assetKey] || null; + }; + // return props + return { + requestType, + requestId, + requestName, + requestModifier, + requestExtension, + previousRequest, + asset, }; - return props; }; const mapDispatchToProps = dispatch => { diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 87f75a91..6cf7cfb9 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -11,23 +11,23 @@ function requestIsAnAssetRequest ({ requestType }) { class ShowAsset extends React.Component { componentDidMount () { - const { asset, existingRequest, requestId, requestName, requestModifier } = this.props; - if (!existingRequest) { // case: the asset request does not exist + const { asset, previousRequest, requestId, requestName, requestModifier } = this.props; + if (!previousRequest) { // case: the asset request does not exist return this.props.onNewRequest(requestId, requestName, requestModifier); }; if (!asset) { // case: the asset request does not exist - const { name, claimId } = existingRequest; + const { name, claimId } = previousRequest; return this.props.onShowNewAsset(name, claimId); }; } componentWillReceiveProps (nextProps) { if (requestIsAnAssetRequest(nextProps)) { - const { asset, existingRequest, requestId, requestName, requestModifier } = nextProps; - if (!existingRequest) { + const { asset, previousRequest, requestId, requestName, requestModifier } = nextProps; + if (!previousRequest) { return this.props.onNewRequest(requestId, requestName, requestModifier); }; if (!asset) { - const { name, claimId } = existingRequest; + const { name, claimId } = previousRequest; return this.props.onShowNewAsset(name, claimId); }; } diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index 7ddfef82..ace8f8fb 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -4,24 +4,27 @@ import { newChannelRequest, showNewChannel } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { - let props = {}; - props['requestId'] = show.request.id; - props['requestType'] = show.request.type; - props['requestChannelName'] = show.request.data.name; - props['requestChannelId'] = show.request.data.id; + // select request info + const requestId = show.request.id; + const requestType = show.request.type; + const requestChannelName = show.request.data.name; + const requestChannelId = show.request.data.id; // select request - const existingRequest = show.channelRequests[show.request.id]; - if (existingRequest) { - props['existingRequest'] = existingRequest; - console.log('existing channel request found', existingRequest); - // select channel info - const channelKey = `c#${existingRequest.name}#${existingRequest.longId}`; - const channel = show.channelList[channelKey]; - if (channel) { - props['channel'] = channel; - }; + const previousRequest = show.channelRequests[show.request.id] || null; + // select channel info + let channel; + if (previousRequest) { + const channelKey = `c#${previousRequest.name}#${previousRequest.longId}`; + channel = show.channelList[channelKey] || null; } - return props; + return { + requestId, + requestType, + requestChannelName, + requestChannelId, + previousRequest, + channel, + }; }; const mapDispatchToProps = dispatch => { diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 497faab5..fee7afab 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -11,23 +11,23 @@ function requestIsAChannelRequest ({ requestType }) { class ShowChannel extends React.Component { componentDidMount () { - const { existingRequest, channel, requestId, requestChannelName, requestChannelId } = this.props; - if (!existingRequest) { + const { previousRequest, channel, requestId, requestChannelName, requestChannelId } = this.props; + if (!previousRequest) { return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } if (!channel) { - const { name, shortId, longId } = existingRequest; + const { name, shortId, longId } = previousRequest; return this.props.onShowNewChannel(name, shortId, longId); } } componentWillReceiveProps (nextProps) { if (requestIsAChannelRequest(nextProps)) { - const { existingRequest, channel, requestId, requestChannelName, requestChannelId } = nextProps; - if (!existingRequest) { + const { previousRequest, channel, requestId, requestChannelName, requestChannelId } = nextProps; + if (!previousRequest) { return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } if (!channel) { - const { name, shortId, longId } = existingRequest; + const { name, shortId, longId } = previousRequest; return this.props.onShowNewChannel(name, shortId, longId); } } From 4672a72d02282abd3871c37f04e09b018eddc488 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 12 Feb 2018 19:08:17 -0800 Subject: [PATCH 78/96] added default note for channels with zero claims --- .../containers/ChannelClaimsDisplay/view.jsx | 36 ++++++++++--------- react/containers/ShowAsset/index.js | 2 +- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index 4dbcce27..285886fe 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -25,25 +25,27 @@ class ChannelClaimsDisplay extends React.Component { const { channel: { claimsData: { claims, currentPage, totalPages } } } = this.props; return (
- {claims && -
- {claims.map((claim, index) => )} + {(claims.length > 0) ? (
- {(currentPage > 1) && - - } - {(currentPage < totalPages) && - - } + {claims.map((claim, index) => )} +
+ {(currentPage > 1) && + + } + {(currentPage < totalPages) && + + } +
-
- } + ) : ( +

There are no claims in this channel

+ )}
); } diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 8eb76e9d..a2cd09a4 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -11,7 +11,7 @@ const mapStateToProps = ({ show }) => { const requestExtension = show.request.data.extension; // select request const previousRequest = show.assetRequests[show.request.id] || null; - // select asset infogit + // select asset info let asset; if (previousRequest) { const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request From 295cbb64861246e2a8192f31d813f988e5d08358 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 12 Feb 2018 20:01:02 -0800 Subject: [PATCH 79/96] renamed actions --- react/actions/show.js | 26 +++++----- react/components/AssetDisplay/index.js | 21 ++++---- react/components/AssetInfo/index.js | 9 ++-- react/components/AssetTitle/index.js | 13 +++-- react/components/ShowAssetDetails/index.js | 34 +++++++++++-- react/components/ShowAssetDetails/view.jsx | 32 ------------ react/components/ShowAssetLite/index.js | 12 +++-- react/constants/show_action_types.js | 32 ++++++------ react/reducers/show.js | 58 ++++++++-------------- react/sagas/request.js | 46 ----------------- react/sagas/show_asset.js | 2 +- react/sagas/show_channel.js | 4 +- 12 files changed, 114 insertions(+), 175 deletions(-) delete mode 100644 react/components/ShowAssetDetails/view.jsx diff --git a/react/actions/show.js b/react/actions/show.js index bf0d20b3..0b162b25 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -3,7 +3,7 @@ import * as actions from 'constants/show_action_types'; // basic request parsing export function updateRequestError (error) { return { - type: actions.REQUEST_ERROR_UPDATE, + type: actions.REQUEST_ERROR, data: error, }; } @@ -11,7 +11,7 @@ export function updateRequestError (error) { export function updateRequestWithChannelRequest (name, id) { const requestId = `cr#${name}#${id}`; return { - type: actions.REQUEST_CHANNEL_UPDATE, + type: actions.REQUEST_UPDATE_CHANNEL, data: { requestId, name, id }, }; }; @@ -19,7 +19,7 @@ export function updateRequestWithChannelRequest (name, id) { export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) { const requestId = `ar#${name}#${id}#${channelName}#${channelId}`; return { - type: actions.REQUEST_CLAIM_UPDATE, + type: actions.REQUEST_UPDATE_CLAIM, data: { requestId, name, @@ -39,14 +39,14 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId, export function newAssetRequest (id, name, modifier) { return { - type: actions.ASSET_REQUEST_NEW, + type: actions.ASSET_REQUEST_ASYNC, data: { id, name, modifier }, }; }; export function addAssetRequest (id, error, name, claimId) { return { - type: actions.ASSET_REQUEST_ADD, + type: actions.ASSET_REQUEST_SUCCESS, data: { id, error, name, claimId }, }; }; @@ -56,7 +56,7 @@ export function addAssetRequest (id, error, name, claimId) { export function showNewAsset (name, claimId) { const id = `a#${name}#${claimId}`; return { - type: actions.SHOW_ASSET_NEW, + type: actions.ASSET_NEW_ASYNC, data: { id, name, claimId }, }; }; @@ -65,7 +65,7 @@ export function showNewAsset (name, claimId) { export function addAssetToAssetList (id, error, name, claimId, shortId, claimData) { return { - type: actions.ASSET_LIST_ADD, + type: actions.ASSET_NEW_SUCCESS, data: { id, error, name, claimId, shortId, claimData }, }; } @@ -74,14 +74,14 @@ export function addAssetToAssetList (id, error, name, claimId, shortId, claimDat export function newChannelRequest (id, name, channelId) { return { - type: actions.CHANNEL_REQUEST_NEW, + type: actions.CHANNEL_REQUEST_ASYNC, data: {id, name, channelId}, }; }; export function addChannelRequest (id, error, name, longId, shortId) { return { - type: actions.CHANNEL_REQUEST_ADD, + type: actions.CHANNEL_REQUEST_SUCCESS, data: { id, error, name, longId, shortId }, }; } @@ -91,7 +91,7 @@ export function addChannelRequest (id, error, name, longId, shortId) { export function showNewChannel (name, shortId, longId) { const id = `c#${name}#${longId}`; // move to the action return { - type: actions.SHOW_CHANNEL_NEW, + type: actions.CHANNEL_NEW_ASYNC, data: { id, name, shortId, longId }, }; }; @@ -100,7 +100,7 @@ export function showNewChannel (name, shortId, longId) { export function addNewChannelToChannelList (id, name, shortId, longId, claimsData) { return { - type: actions.CHANNEL_LIST_ADD, + type: actions.CHANNEL_NEW_SUCCESS, data: { id, name, shortId, longId, claimsData }, }; }; @@ -109,14 +109,14 @@ export function addNewChannelToChannelList (id, name, shortId, longId, claimsDat export function updateChannelClaimsAsync (channelKey, name, longId, page) { return { - type: actions.CHANNEL_LIST_CLAIMS_UPDATE_ASYNC, + type: actions.CHANNEL_CLAIMS_UPDATE_ASYNC, data: {channelKey, name, longId, page}, }; }; export function updateChannelClaims (channelListId, claimsData) { return { - type: actions.CHANNEL_LIST_CLAIMS_UPDATE, + type: actions.CHANNEL_CLAIMS_UPDATE_SUCCESS, data: {channelListId, claimsData}, }; }; diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 54e55e71..be3b5975 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -3,18 +3,19 @@ import View from './view'; import { fileRequested } from 'actions/show'; const mapStateToProps = ({ show }) => { - let props = { - error : show.displayAsset.error, - status: show.displayAsset.status, - }; - // select asset info - const previousRequest = show.assetRequests[show.request.id]; - const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; + // select error and status + const error = show.displayAsset.error; + const status = show.displayAsset.status; + // select asset + const request = show.assetRequests[show.request.id]; + const assetKey = `a#${request.name}#${request.claimId}`; const asset = show.assetList[assetKey]; - if (asset) { - props['asset'] = asset; + // return props + return { + error, + status, + asset, }; - return props; }; const mapDispatchToProps = dispatch => { diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 2614577d..f571574a 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -2,15 +2,14 @@ import { connect } from 'react-redux'; import View from './view'; const mapStateToProps = ({ show }) => { - let props = {}; - // select asset info + // select asset const request = show.assetRequests[show.request.id]; const assetKey = `a#${request.name}#${request.claimId}`; const asset = show.assetList[assetKey]; - if (asset) { - props['asset'] = asset; + // return props + return { + asset, }; - return props; }; export default connect(mapStateToProps, null)(View); diff --git a/react/components/AssetTitle/index.js b/react/components/AssetTitle/index.js index f68dab60..ff3b9792 100644 --- a/react/components/AssetTitle/index.js +++ b/react/components/AssetTitle/index.js @@ -2,15 +2,18 @@ import { connect } from 'react-redux'; import View from './view'; const mapStateToProps = ({ show }) => { - let props = {}; // select title - const previousRequest = show.assetRequests[show.request.id]; - const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; + const request = show.assetRequests[show.request.id]; + const assetKey = `a#${request.name}#${request.claimId}`; const asset = show.assetList[assetKey]; + let title; if (asset) { - props['title'] = asset.claimData.title; + title = asset.claimData.title; + }; + // return props + return { + title, }; - return props; }; export default connect(mapStateToProps, null)(View); diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index 8cec1202..8a956774 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -1,4 +1,32 @@ -import { connect } from 'react-redux'; -import View from './view'; +import React from 'react'; +import NavBar from 'containers/NavBar'; +import AssetTitle from 'components/AssetTitle'; +import AssetDisplay from 'components/AssetDisplay'; +import AssetInfo from 'components/AssetInfo'; -export default connect(null, null)(View); +class ShowAssetDetails extends React.Component { + render () { + return ( +
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+
+ } +
+ ); + } +}; + +export default ShowAssetDetails; diff --git a/react/components/ShowAssetDetails/view.jsx b/react/components/ShowAssetDetails/view.jsx deleted file mode 100644 index 8a956774..00000000 --- a/react/components/ShowAssetDetails/view.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import NavBar from 'containers/NavBar'; -import AssetTitle from 'components/AssetTitle'; -import AssetDisplay from 'components/AssetDisplay'; -import AssetInfo from 'components/AssetInfo'; - -class ShowAssetDetails extends React.Component { - render () { - return ( -
- -
-
- -
-
-
- -
-
-
- -
-
-
- } -
- ); - } -}; - -export default ShowAssetDetails; diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index 8ab7fb18..19c96cd1 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -2,16 +2,20 @@ import { connect } from 'react-redux'; import View from './view'; const mapStateToProps = ({ show }) => { - let props = {}; // select name and claim id + let name, claimId; const previousRequest = show.assetRequests[show.request.id]; const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; const asset = show.assetList[assetKey]; if (asset) { - props['name'] = asset.name; - props['claimId'] = asset.claimId; + name = asset.name; + claimId = asset.claimId; + }; + // return props + return { + name, + claimId, }; - return props; }; export default connect(mapStateToProps, null)(View); diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index e40455ae..4fbf942f 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,26 +1,24 @@ // request actions -export const REQUEST_CHANNEL_UPDATE = 'REQUEST_CHANNEL_UPDATE'; -export const REQUEST_CLAIM_UPDATE = 'REQUEST_CLAIM_UPDATE'; -export const REQUEST_ERROR_UPDATE = 'REQUEST_ERROR_UPDATE'; +export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL'; +export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM'; +export const REQUEST_ERROR = 'REQUEST_ERROR'; -// asset request actions -export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW'; -export const ASSET_REQUEST_ADD = 'ASSET_REQUEST_ADD'; +// asset actions +export const ASSET_REQUEST_ASYNC = 'ASSET_REQUEST_ASYNC'; +export const ASSET_REQUEST_SUCCESS = 'ASSET_REQUEST_SUCCESS'; -export const SHOW_ASSET_NEW = 'SHOW_ASSET_NEW'; -export const ASSET_LIST_ADD = `ASSET_LIST_ADD`; +export const ASSET_NEW_ASYNC = 'ASSET_NEW_ASYNC'; +export const ASSET_NEW_SUCCESS = `ASSET_NEW_SUCCESS`; -// channel request actions -export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW'; -export const CHANNEL_REQUEST_ADD = 'CHANNEL_REQUEST_ADD'; +// channel actions +export const CHANNEL_REQUEST_ASYNC = 'CHANNEL_REQUEST_ASYNC'; +export const CHANNEL_REQUEST_SUCCESS = 'CHANNEL_REQUEST_SUCCESS'; -export const SHOW_CHANNEL_NEW = 'SHOW_CHANNEL_NEW'; -export const SHOW_CHANNEL_UPDATE = 'SHOW_CHANNEL_UPDATE'; -export const SHOW_CHANNEL_CLEAR = 'SHOW_CHANNEL_CLEAR'; +export const CHANNEL_NEW_ASYNC = 'CHANNEL_NEW_ASYNC'; +export const CHANNEL_NEW_SUCCESS = 'CHANNEL_NEW_SUCCESS'; -export const CHANNEL_LIST_ADD = 'CHANNEL_LIST_ADD'; -export const CHANNEL_LIST_CLAIMS_UPDATE_ASYNC = 'CHANNEL_LIST_CLAIMS_UPDATE_ASYNC'; -export const CHANNEL_LIST_CLAIMS_UPDATE = 'CHANNEL_LIST_CLAIMS_UPDATE'; +export const CHANNEL_CLAIMS_UPDATE_ASYNC = 'CHANNEL_CLAIMS_UPDATE_ASYNC'; +export const CHANNEL_CLAIMS_UPDATE_SUCCESS = 'CHANNEL_CLAIMS_UPDATE_SUCCESS'; // asset/file display actions export const FILE_REQUESTED = 'FILE_REQUESTED'; diff --git a/react/reducers/show.js b/react/reducers/show.js index d5b8eb5c..cd6cc52a 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -22,13 +22,13 @@ const initialState = { export default function (state = initialState, action) { switch (action.type) { // handle request - case actions.REQUEST_ERROR_UPDATE: + case actions.REQUEST_ERROR: return Object.assign({}, state, { request: Object.assign({}, state.request, { error: action.data, }), }); - case actions.REQUEST_CHANNEL_UPDATE: + case actions.REQUEST_UPDATE_CHANNEL: return Object.assign({}, state, { request: { type : CHANNEL, @@ -40,7 +40,7 @@ export default function (state = initialState, action) { }, }, }); - case actions.REQUEST_CLAIM_UPDATE: + case actions.REQUEST_UPDATE_CLAIM: return Object.assign({}, state, { request: { type : ASSET, @@ -53,8 +53,8 @@ export default function (state = initialState, action) { }, }, }); - // request for an asset - case actions.ASSET_REQUEST_ADD: + // successful requests + case actions.ASSET_REQUEST_SUCCESS: return Object.assign({}, state, { assetRequests: Object.assign({}, state.assetRequests, { [action.data.id]: { @@ -64,8 +64,19 @@ export default function (state = initialState, action) { }, }), }); - // add asset to asset list - case actions.ASSET_LIST_ADD: + case actions.CHANNEL_REQUEST_SUCCESS: + return Object.assign({}, state, { + channelRequests: Object.assign({}, state.channelRequests, { + [action.data.id]: { + error : action.data.error, + name : action.data.name, + longId : action.data.longId, + shortId: action.data.shortId, + }, + }), + }); + // updates to asset list + case actions.ASSET_NEW_SUCCESS: return Object.assign({}, state, { assetList: Object.assign({}, state.assetList, { [action.data.id]: { @@ -77,35 +88,8 @@ export default function (state = initialState, action) { }, }), }); - // request a channel - case actions.CHANNEL_REQUEST_ADD: - return Object.assign({}, state, { - channelRequests: Object.assign({}, state.channelRequests, { - [action.data.id]: { - error : action.data.error, - name : action.data.name, - longId : action.data.longId, - shortId: action.data.shortId, - }, - }), - }); - // show a channel - case actions.SHOW_CHANNEL_UPDATE: - return Object.assign({}, state, { - showChannel: { - error: action.data.error, - id : action.data.id, - }, - }); - case actions.SHOW_CHANNEL_CLEAR: - return Object.assign({}, state, { - showChannel: { - error: null, - id : null, - }, - }); - // add channel to channel list - case actions.CHANNEL_LIST_ADD: + // updates to channel list + case actions.CHANNEL_NEW_SUCCESS: return Object.assign({}, state, { channelList: Object.assign({}, state.channelList, { [action.data.id]: { @@ -116,7 +100,7 @@ export default function (state = initialState, action) { }, }), }); - case actions.CHANNEL_LIST_CLAIMS_UPDATE: + case actions.CHANNEL_CLAIMS_UPDATE_SUCCESS: return Object.assign({}, state, { channelList: Object.assign({}, state.channelList, { [action.data.channelListId]: Object.assign({}, state.channelList[action.data.channelListId], { diff --git a/react/sagas/request.js b/react/sagas/request.js index bab66c88..e69de29b 100644 --- a/react/sagas/request.js +++ b/react/sagas/request.js @@ -1,46 +0,0 @@ -import { call, put, takeLatest } from 'redux-saga/effects'; -import * as actions from 'constants/show_action_types'; -import { addAssetRequest, updateRequestError, showNewAsset, addChannelRequest, showNewChannel } from 'actions/show'; -import { getLongClaimId } from 'api/assetApi'; -import { getChannelData } from 'api/channelApi'; - -function* newAssetRequest (action) { - const { id, name, modifier } = action.data; - let success, message, longId; - try { - ({success, message, data: longId} = yield call(getLongClaimId, name, modifier)); - } catch (error) { - return yield put(updateRequestError(error.message)); - } - if (!success) { - return yield put(updateRequestError(message)); - } - yield put(addAssetRequest(id, null, name, longId)); - yield put(showNewAsset(name, longId)); -}; - -function* newChannelRequest (action) { - const { id, name, channelId } = action.data; - let success, message, data; - try { - ({success, message, data} = yield call(getChannelData, name, channelId)); - } catch (error) { - // return yield put(addChannelRequest(id, error.message, null, null, null)); - return yield put(updateRequestError(error.message)); - } - if (!success) { - // return yield put(addChannelRequest(id, message, null, null, null)); - return yield put(updateRequestError(message)); - } - const { longChannelClaimId: longId, shortChannelClaimId: shortId } = data; - yield put(addChannelRequest(id, null, name, longId, shortId)); - yield put(showNewChannel(name, shortId, longId)); -} - -export function* watchNewAssetRequest () { - yield takeLatest(actions.ASSET_REQUEST_NEW, newAssetRequest); -}; - -export function* watchNewChannelRequest () { - yield takeLatest(actions.CHANNEL_REQUEST_NEW, newChannelRequest); -}; diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index f4adf4cb..44481666 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -33,5 +33,5 @@ function* getAssetDataAndShowAsset (action) { } export function* watchShowNewAsset () { - yield takeLatest(actions.SHOW_ASSET_NEW, getAssetDataAndShowAsset); + yield takeLatest(actions.ASSET_NEW_ASYNC, getAssetDataAndShowAsset); }; diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index 5dd138f8..08afb3ec 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -19,7 +19,7 @@ function* getChannelClaimsAndShowChannel (action) { } export function* watchShowNewChannel () { - yield takeLatest(actions.SHOW_CHANNEL_NEW, getChannelClaimsAndShowChannel); + yield takeLatest(actions.CHANNEL_NEW_ASYNC, getChannelClaimsAndShowChannel); }; function* getNewClaimsAndUpdateClaimsList (action) { @@ -37,5 +37,5 @@ function* getNewClaimsAndUpdateClaimsList (action) { } export function* watchShowNewChannelClaimsRequest () { - yield takeLatest(actions.CHANNEL_LIST_CLAIMS_UPDATE_ASYNC, getNewClaimsAndUpdateClaimsList); + yield takeLatest(actions.CHANNEL_CLAIMS_UPDATE_ASYNC, getNewClaimsAndUpdateClaimsList); } From 5845a07a9d8f076cffdd936b21f8c75cc7a76290 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Mon, 12 Feb 2018 20:35:45 -0800 Subject: [PATCH 80/96] added back deleted request.js --- react/sagas/request.js | 46 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/react/sagas/request.js b/react/sagas/request.js index e69de29b..99eb6878 100644 --- a/react/sagas/request.js +++ b/react/sagas/request.js @@ -0,0 +1,46 @@ +import { call, put, takeLatest } from 'redux-saga/effects'; +import * as actions from 'constants/show_action_types'; +import { addAssetRequest, updateRequestError, showNewAsset, addChannelRequest, showNewChannel } from 'actions/show'; +import { getLongClaimId } from 'api/assetApi'; +import { getChannelData } from 'api/channelApi'; + +function* newAssetRequest (action) { + const { id, name, modifier } = action.data; + let success, message, longId; + try { + ({success, message, data: longId} = yield call(getLongClaimId, name, modifier)); + } catch (error) { + return yield put(updateRequestError(error.message)); + } + if (!success) { + return yield put(updateRequestError(message)); + } + yield put(addAssetRequest(id, null, name, longId)); + yield put(showNewAsset(name, longId)); +}; + +function* newChannelRequest (action) { + const { id, name, channelId } = action.data; + let success, message, data; + try { + ({success, message, data} = yield call(getChannelData, name, channelId)); + } catch (error) { + // return yield put(addChannelRequest(id, error.message, null, null, null)); + return yield put(updateRequestError(error.message)); + } + if (!success) { + // return yield put(addChannelRequest(id, message, null, null, null)); + return yield put(updateRequestError(message)); + } + const { longChannelClaimId: longId, shortChannelClaimId: shortId } = data; + yield put(addChannelRequest(id, null, name, longId, shortId)); + yield put(showNewChannel(name, shortId, longId)); +} + +export function* watchNewAssetRequest () { + yield takeLatest(actions.ASSET_REQUEST_ASYNC, newAssetRequest); +}; + +export function* watchNewChannelRequest () { + yield takeLatest(actions.CHANNEL_REQUEST_ASYNC, newChannelRequest); +}; From aedc636241462383de36bb68e8970569dce1a6fa Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 13 Feb 2018 12:19:57 -0800 Subject: [PATCH 81/96] updated routes to return proper error codes --- helpers/errorHandlers.js | 45 ++++++++++-------------- react/containers/NavBar/view.jsx | 20 ++++------- react/sagas/file.js | 12 ++----- react/sagas/request.js | 18 ++++------ react/sagas/show_asset.js | 13 ++----- react/sagas/show_channel.js | 14 +++----- react/utils/request.js | 21 +++++++----- routes/api-routes.js | 59 ++++++++++++++------------------ routes/auth-routes.js | 4 +-- routes/serve-routes.js | 22 ++++++------ 10 files changed, 93 insertions(+), 135 deletions(-) diff --git a/helpers/errorHandlers.js b/helpers/errorHandlers.js index 9cccd7be..1c7336dd 100644 --- a/helpers/errorHandlers.js +++ b/helpers/errorHandlers.js @@ -1,37 +1,30 @@ const logger = require('winston'); module.exports = { - returnErrorMessageAndStatus: function (error) { - let status, message; - // check for daemon being turned off - if (error.code === 'ECONNREFUSED') { - status = 200; - message = 'Connection refused. The daemon may not be running.'; - // check for thrown errors - } else if (error.message) { - status = 200; - message = error.message; - // fallback for everything else - } else { - status = 400; - message = error; - } - return [status, message]; - }, - handleRequestError: function (originalUrl, ip, error, res) { - logger.error(`Request Error on ${originalUrl}`, module.exports.useObjectPropertiesIfNoKeys(error)); - const [status, message] = module.exports.returnErrorMessageAndStatus(error); - res - .status(status) - .render('requestError', module.exports.createErrorResponsePayload(status, message)); - }, - handleApiError: function (originalUrl, ip, error, res) { - logger.error(`Api Error on ${originalUrl}`, module.exports.useObjectPropertiesIfNoKeys(error)); + handleErrorResponse: function (originalUrl, ip, error, res) { + logger.error(`Error on ${originalUrl}`, module.exports.useObjectPropertiesIfNoKeys(error)); const [status, message] = module.exports.returnErrorMessageAndStatus(error); res .status(status) .json(module.exports.createErrorResponsePayload(status, message)); }, + returnErrorMessageAndStatus: function (error) { + let status, message; + // check for daemon being turned off + if (error.code === 'ECONNREFUSED') { + status = 503; + message = 'Connection refused. The daemon may not be running.'; + // fallback for everything else + } else { + status = 400; + if (error.message) { + message = error.message; + } else { + message = error; + }; + }; + return [status, message]; + }, useObjectPropertiesIfNoKeys: function (err) { if (Object.keys(err).length === 0) { let newErrorObject = {}; diff --git a/react/containers/NavBar/view.jsx b/react/containers/NavBar/view.jsx index 07c30dfe..f8546817 100644 --- a/react/containers/NavBar/view.jsx +++ b/react/containers/NavBar/view.jsx @@ -21,29 +21,21 @@ class NavBar extends React.Component { checkForLoggedInUser () { const params = {credentials: 'include'}; request('/user', params) - .then(({success, message, data}) => { - if (success) { - this.props.onChannelLogin(data.channelName, data.shortChannelId, data.channelClaimId); - } else { - console.log(message); - } + .then(({ data }) => { + this.props.onChannelLogin(data.channelName, data.shortChannelId, data.channelClaimId); }) .catch(error => { - console.log('request encountered an error', error); + console.log('/user error:', error.message); }); } logoutUser () { const params = {credentials: 'include'}; request('/logout', params) - .then(({success, message}) => { - if (success) { - this.props.onChannelLogout(); - } else { - console.log(message); - } + .then(() => { + this.props.onChannelLogout(); }) .catch(error => { - console.log('request encountered an error', error); + console.log('/logout error', error.message); }); } handleSelection (event) { diff --git a/react/sagas/file.js b/react/sagas/file.js index fd0bc4ab..263da808 100644 --- a/react/sagas/file.js +++ b/react/sagas/file.js @@ -8,28 +8,22 @@ function* retrieveFile (action) { const name = action.data.name; const claimId = action.data.claimId; // see if the file is available - let success, message, isAvailable; + let isAvailable; try { - ({ success, message, data: isAvailable } = yield call(checkFileAvailability, name, claimId)); + ({ data: isAvailable } = yield call(checkFileAvailability, name, claimId)); } catch (error) { return yield put(updateDisplayAssetError(error.message)); }; - if (!success) { - return yield put(updateDisplayAssetError(message)); - } if (isAvailable) { return yield put(updateFileAvailability(AVAILABLE)); } yield put(updateFileAvailability(UNAVAILABLE)); // initiate get request for the file try { - ({ success, message } = yield call(triggerClaimGet, name, claimId)); + yield call(triggerClaimGet, name, claimId); } catch (error) { return yield put(updateDisplayAssetError(error.message)); }; - if (!success) { - return yield put(updateDisplayAssetError(message)); - } yield put(updateFileAvailability(AVAILABLE)); }; diff --git a/react/sagas/request.js b/react/sagas/request.js index 99eb6878..4b87b454 100644 --- a/react/sagas/request.js +++ b/react/sagas/request.js @@ -6,32 +6,28 @@ import { getChannelData } from 'api/channelApi'; function* newAssetRequest (action) { const { id, name, modifier } = action.data; - let success, message, longId; + console.log('getting asset long id'); + let longId; try { - ({success, message, data: longId} = yield call(getLongClaimId, name, modifier)); + ({data: longId} = yield call(getLongClaimId, name, modifier)); } catch (error) { + console.log('error:', error); return yield put(updateRequestError(error.message)); } - if (!success) { - return yield put(updateRequestError(message)); - } yield put(addAssetRequest(id, null, name, longId)); yield put(showNewAsset(name, longId)); }; function* newChannelRequest (action) { const { id, name, channelId } = action.data; - let success, message, data; + console.log('getting channel long id'); + let data; try { - ({success, message, data} = yield call(getChannelData, name, channelId)); + ({data} = yield call(getChannelData, name, channelId)); } catch (error) { // return yield put(addChannelRequest(id, error.message, null, null, null)); return yield put(updateRequestError(error.message)); } - if (!success) { - // return yield put(addChannelRequest(id, message, null, null, null)); - return yield put(updateRequestError(message)); - } const { longChannelClaimId: longId, shortChannelClaimId: shortId } = data; yield put(addChannelRequest(id, null, name, longId, shortId)); yield put(showNewChannel(name, shortId, longId)); diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index 44481666..8f9200b8 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -7,27 +7,20 @@ function* getAssetDataAndShowAsset (action) { const {id, name, claimId} = action.data; // get short Id console.log('getting short id'); - let success, message, shortId; + let shortId; try { - ({success, message, data: shortId} = yield call(getShortId, name, claimId)); + ({data: shortId} = yield call(getShortId, name, claimId)); } catch (error) { return yield put(updateRequestError(error.message)); } - if (!success) { - return yield put(updateRequestError(message)); - } // if no error, get claim data console.log('getting claim data'); - success = null; let claimData; try { - ({success, message, data: claimData} = yield call(getClaimData, name, claimId)); + ({data: claimData} = yield call(getClaimData, name, claimId)); } catch (error) { return yield put(updateRequestError(error.message)); } - if (!success) { - return yield put(updateRequestError(message)); - } yield put(addAssetToAssetList(id, null, name, claimId, shortId, claimData)); yield put(updateRequestError(null)); } diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index 08afb3ec..ce611e2f 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -5,15 +5,12 @@ import { getChannelClaims } from 'api/channelApi'; function* getChannelClaimsAndShowChannel (action) { const { id, name, shortId, longId } = action.data; - let success, message, claimsData; + let claimsData; try { - ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, 1)); + ({ data: claimsData } = yield call(getChannelClaims, name, longId, 1)); } catch (error) { return yield put(updateRequestError(error.message)); } - if (!success) { - return yield put(updateRequestError(message)); - } yield put(addNewChannelToChannelList(id, name, shortId, longId, claimsData)); yield put(updateRequestError(null)); } @@ -24,15 +21,12 @@ export function* watchShowNewChannel () { function* getNewClaimsAndUpdateClaimsList (action) { const { channelKey, name, longId, page } = action.data; - let success, message, claimsData; + let claimsData; try { - ({ success, message, data: claimsData } = yield call(getChannelClaims, name, longId, page)); + ({ data: claimsData } = yield call(getChannelClaims, name, longId, page)); } catch (error) { return yield put(updateRequestError(error.message)); } - if (!success) { - return yield put(updateRequestError(message)); - } yield put(updateChannelClaims(channelKey, claimsData)); } diff --git a/react/utils/request.js b/react/utils/request.js index 5d836585..81674721 100644 --- a/react/utils/request.js +++ b/react/utils/request.js @@ -13,18 +13,18 @@ function parseJSON (response) { } /** - * Checks if a network request came back fine, and throws an error if not + * Parses the status returned by a network request * * @param {object} response A response from a network request + * @param {object} response The parsed JSON from the network request * - * @return {object|undefined} Returns either the response, or throws an error + * @return {object | undefined} Returns object with status and statusText, or undefined */ -function checkStatus (response) { +function checkStatus (response, jsonResponse) { if (response.status >= 200 && response.status < 300) { - return response; + return jsonResponse; } - - const error = new Error(response.statusText); + const error = new Error(jsonResponse.message); error.response = response; throw error; } @@ -37,8 +37,13 @@ function checkStatus (response) { * * @return {object} The response data */ + export default function request (url, options) { return fetch(url, options) - .then(checkStatus) - .then(parseJSON); + .then(response => { + return Promise.all([response, parseJSON(response)]); + }) + .then(([response, jsonResponse]) => { + return checkStatus(response, jsonResponse); + }); } diff --git a/routes/api-routes.js b/routes/api-routes.js index 7502842b..21e5b656 100644 --- a/routes/api-routes.js +++ b/routes/api-routes.js @@ -16,7 +16,7 @@ const NO_CLAIM = 'NO_CLAIM'; module.exports = (app) => { // route to check whether site has published to a channel - app.get('/api/channel/availability/:name', ({ params }, res) => { + app.get('/api/channel/availability/:name', ({ ip, originalUrl, params }, res) => { checkChannelAvailability(params.name) .then(result => { if (result === true) { @@ -26,35 +26,32 @@ module.exports = (app) => { } }) .catch(error => { - res.status(500).json(error); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); // route to get a short channel id from long channel Id app.get('/api/channel/short-id/:longId/:name', ({ ip, originalUrl, params }, res) => { db.Certificate.getShortChannelIdFromLongChannelId(params.longId, params.name) .then(shortId => { - logger.debug('sending back short channel id', shortId); res.status(200).json(shortId); }) .catch(error => { - logger.error('api error getting short channel id', error); - errorHandlers.handleApiError(originalUrl, ip, error, res); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); app.get('/api/channel/data/:channelName/:channelClaimId', ({ ip, originalUrl, body, params }, res) => { const channelName = params.channelName; let channelClaimId = params.channelClaimId; if (channelClaimId === 'none') channelClaimId = null; - getChannelData(channelName, channelClaimId, 0) // getChannelViewData(channelName, channelId, 0) + getChannelData(channelName, channelClaimId, 0) .then(data => { if (data === NO_CHANNEL) { - return res.status(200).json({success: false, message: 'No matching channel was found'}); + return res.status(404).json({success: false, message: 'No matching channel was found'}); } res.status(200).json({success: true, data}); }) .catch(error => { - logger.error('api error getting channel contents', error); - errorHandlers.handleApiError(originalUrl, ip, error, res); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); app.get('/api/channel/claims/:channelName/:channelClaimId/:page', ({ ip, originalUrl, body, params }, res) => { @@ -62,16 +59,15 @@ module.exports = (app) => { let channelClaimId = params.channelClaimId; if (channelClaimId === 'none') channelClaimId = null; const page = params.page; - getChannelClaims(channelName, channelClaimId, page)// getChannelViewData(channelName, channelClaimId, page) + getChannelClaims(channelName, channelClaimId, page) .then(data => { if (data === NO_CHANNEL) { - return res.status(200).json({success: false, message: 'No matching channel was found'}); + return res.status(404).json({success: false, message: 'No matching channel was found'}); } res.status(200).json({success: true, data}); }) .catch(error => { - logger.error('api error getting channel contents', error); - errorHandlers.handleApiError(originalUrl, ip, error, res); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); // route to run a claim_list request on the daemon @@ -81,7 +77,7 @@ module.exports = (app) => { res.status(200).json(claimsList); }) .catch(error => { - errorHandlers.handleApiError(originalUrl, ip, error, res); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); // route to get an asset @@ -107,11 +103,11 @@ module.exports = (app) => { res.status(200).json({ success: true, message, completed }); }) .catch(error => { - errorHandlers.handleApiError(originalUrl, ip, error, res); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); // route to check whether this site published to a claim - app.get('/api/claim/availability/:name', ({ params }, res) => { + app.get('/api/claim/availability/:name', ({ ip, originalUrl, params }, res) => { checkClaimNameAvailability(params.name) .then(result => { if (result === true) { @@ -121,7 +117,7 @@ module.exports = (app) => { } }) .catch(error => { - res.status(500).json(error); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); // route to run a resolve request on the daemon @@ -131,7 +127,7 @@ module.exports = (app) => { res.status(200).json(resolvedUri); }) .catch(error => { - errorHandlers.handleApiError(originalUrl, ip, error, res); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); // route to run a publish request on the daemon @@ -151,7 +147,6 @@ module.exports = (app) => { ({fileName, filePath, fileType} = parsePublishApiRequestFiles(files)); ({channelName, channelPassword} = parsePublishApiChannel(body, user)); } catch (error) { - logger.debug('publish request rejected, insufficient request parameters', error); return res.status(400).json({success: false, message: error.message}); } // check channel authorization @@ -193,18 +188,17 @@ module.exports = (app) => { sendGoogleAnalyticsTiming(timingActionType, headers, ip, originalUrl, publishStartTime, publishEndTime); }) .catch(error => { - errorHandlers.handleApiError(originalUrl, ip, error, res); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); // route to get a short claim id from long claim Id - app.get('/api/claim/short-id/:longId/:name', ({ params }, res) => { + app.get('/api/claim/short-id/:longId/:name', ({ ip, originalUrl, body, params }, res) => { db.Claim.getShortClaimIdFromLongClaimId(params.longId, params.name) .then(shortId => { res.status(200).json({success: true, data: shortId}); }) .catch(error => { - logger.error('api error getting short channel id', error); - res.status(200).json({success: false, message: error.message}); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); app.post('/api/claim/long-id', ({ ip, originalUrl, body, params }, res) => { @@ -216,16 +210,15 @@ module.exports = (app) => { getClaimId(channelName, channelClaimId, claimName, claimId) .then(result => { if (result === NO_CHANNEL) { - return res.status(200).json({success: false, message: 'No matching channel could be found'}); + return res.status(404).json({success: false, message: 'No matching channel could be found'}); } if (result === NO_CLAIM) { - return res.status(200).json({success: false, message: 'No matching claim id could be found'}); + return res.status(404).json({success: false, message: 'No matching claim id could be found'}); } res.status(200).json({success: true, data: result}); }) .catch(error => { - logger.error('api error getting long claim id', error); - errorHandlers.handleApiError(originalUrl, ip, error, res); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); app.get('/api/claim/data/:claimName/:claimId', ({ ip, originalUrl, body, params }, res) => { @@ -235,29 +228,27 @@ module.exports = (app) => { db.Claim.resolveClaim(claimName, claimId) .then(claimInfo => { if (!claimInfo) { - return res.status(200).json({success: false, message: 'No claim could be found'}); + return res.status(404).json({success: false, message: 'No claim could be found'}); } res.status(200).json({success: true, data: claimInfo}); }) .catch(error => { - logger.error('api error getting long claim id', error); - errorHandlers.handleApiError(originalUrl, ip, error, res); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); // route to see if asset is available locally app.get('/api/file/availability/:name/:claimId', ({ ip, originalUrl, params }, res) => { const name = params.name; const claimId = params.claimId; - let isAvailable = false; db.File.findOne({where: {name, claimId}}) .then(result => { if (result) { - isAvailable = true; + return res.status(200).json({success: true, data: true}); } - res.status(200).json({success: true, data: isAvailable}); + res.status(200).json({success: true, data: false}); }) .catch(error => { - errorHandlers.handleApiError(originalUrl, ip, error, res); + errorHandlers.handleErrorResponse(originalUrl, ip, error, res); }); }); }; diff --git a/routes/auth-routes.js b/routes/auth-routes.js index 916a257e..5c6013d7 100644 --- a/routes/auth-routes.js +++ b/routes/auth-routes.js @@ -20,7 +20,7 @@ module.exports = (app) => { return next(err); } if (!user) { - return res.status(200).json({ + return res.status(400).json({ success: false, message: info.message, }); @@ -49,7 +49,7 @@ module.exports = (app) => { if (req.user) { res.status(200).json({success: true, data: req.user}); } else { - res.status(200).json({success: false, message: 'user is not logged in'}); + res.status(401).json({success: false, message: 'user is not logged in'}); } }); }; diff --git a/routes/serve-routes.js b/routes/serve-routes.js index 796f7228..38c755ee 100644 --- a/routes/serve-routes.js +++ b/routes/serve-routes.js @@ -1,7 +1,7 @@ const logger = require('winston'); const { getClaimId, getLocalFileRecord } = require('../controllers/serveController.js'); const serveHelpers = require('../helpers/serveHelpers.js'); -const { handleRequestError } = require('../helpers/errorHandlers.js'); +const { handleErrorResponse } = require('../helpers/errorHandlers.js'); const lbryUri = require('../helpers/lbryUri.js'); const SERVE = 'SERVE'; @@ -92,7 +92,7 @@ module.exports = (app) => { try { ({ hasFileExtension } = lbryUri.parseModifier(params.claim)); } catch (error) { - return res.status(200).json({success: false, message: error.message}); + return res.status(400).json({success: false, message: error.message}); } let responseType = determineResponseType(hasFileExtension, headers); if (responseType !== SERVE) { @@ -103,14 +103,14 @@ module.exports = (app) => { try { ({ claimName } = lbryUri.parseClaim(params.claim)); } catch (error) { - return res.status(200).json({success: false, message: error.message}); + return res.status(400).json({success: false, message: error.message}); } // parse the identifier let isChannel, channelName, channelClaimId, claimId; try { ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(params.identifier)); } catch (error) { - return handleRequestError(originalUrl, ip, error, res); + return res.status(400).json({success: false, message: error.message}); } if (!isChannel) { [claimId, claimName] = flipClaimNameAndIdForBackwardsCompatibility(claimId, claimName); @@ -121,15 +121,15 @@ module.exports = (app) => { getClaimId(channelName, channelClaimId, claimName, claimId) .then(fullClaimId => { if (fullClaimId === NO_CLAIM) { - return res.status(200).json({success: false, message: 'no claim id could be found'}); + return res.status(404).json({success: false, message: 'no claim id could be found'}); } else if (fullClaimId === NO_CHANNEL) { - return res.status(200).json({success: false, message: 'no channel id could be found'}); + return res.status(404).json({success: false, message: 'no channel id could be found'}); } serveAssetToClient(fullClaimId, claimName, res); // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'success'); }) .catch(error => { - handleRequestError(originalUrl, ip, error, res); + handleErrorResponse(originalUrl, ip, error, res); // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'fail'); }); }); @@ -140,7 +140,7 @@ module.exports = (app) => { try { ({ hasFileExtension } = lbryUri.parseModifier(params.claim)); } catch (error) { - return res.status(200).json({success: false, message: error.message}); + return res.status(400).json({success: false, message: error.message}); } let responseType = determineResponseType(hasFileExtension, headers); if (responseType !== SERVE) { @@ -151,7 +151,7 @@ module.exports = (app) => { try { ({claimName} = lbryUri.parseClaim(params.claim)); } catch (error) { - return res.status(200).json({success: false, message: error.message}); + return res.status(400).json({success: false, message: error.message}); } // log the request data for debugging logRequestData(responseType, claimName, null, null); @@ -159,13 +159,13 @@ module.exports = (app) => { getClaimId(null, null, claimName, null) .then(fullClaimId => { if (fullClaimId === NO_CLAIM) { - return res.status(200).render('index'); + return res.status(404).json({success: false, message: 'no claim id could be found'}); } serveAssetToClient(fullClaimId, claimName, res); // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'success'); }) .catch(error => { - handleRequestError(originalUrl, ip, error, res); + handleErrorResponse(originalUrl, ip, error, res); // postToStats(responseType, originalUrl, ip, claimName, fullClaimId, 'fail'); }); }); From 855a7dab42aa66b408cfe543561d3a79c88e70a7 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 13 Feb 2018 15:53:27 -0800 Subject: [PATCH 82/96] removed showAsset action --- react/actions/show.js | 18 +++----------- react/api/assetApi.js | 6 ++--- react/constants/show_action_types.js | 2 +- react/containers/ShowAsset/index.js | 12 +++------ react/containers/ShowAsset/view.jsx | 16 +++--------- react/sagas/index.js | 2 -- react/sagas/request.js | 37 ++++++++++++++++++++++------ react/sagas/show_asset.js | 30 ---------------------- 8 files changed, 44 insertions(+), 79 deletions(-) delete mode 100644 react/sagas/show_asset.js diff --git a/react/actions/show.js b/react/actions/show.js index 0b162b25..f3244e8e 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -39,30 +39,18 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId, export function newAssetRequest (id, name, modifier) { return { - type: actions.ASSET_REQUEST_ASYNC, + type: actions.ASSET_REQUEST_NEW, data: { id, name, modifier }, }; }; -export function addAssetRequest (id, error, name, claimId) { +export function addRequestToAssetRequests (id, error, name, claimId) { return { type: actions.ASSET_REQUEST_SUCCESS, data: { id, error, name, claimId }, }; }; -// show an asset - -export function showNewAsset (name, claimId) { - const id = `a#${name}#${claimId}`; - return { - type: actions.ASSET_NEW_ASYNC, - data: { id, name, claimId }, - }; -}; - -// add asset to asset list - export function addAssetToAssetList (id, error, name, claimId, shortId, claimData) { return { type: actions.ASSET_NEW_SUCCESS, @@ -79,7 +67,7 @@ export function newChannelRequest (id, name, channelId) { }; }; -export function addChannelRequest (id, error, name, longId, shortId) { +export function addRequestToChannelRequests (id, error, name, longId, shortId) { return { type: actions.CHANNEL_REQUEST_SUCCESS, data: { id, error, name, longId, shortId }, diff --git a/react/api/assetApi.js b/react/api/assetApi.js index a53dd136..6664a493 100644 --- a/react/api/assetApi.js +++ b/react/api/assetApi.js @@ -1,7 +1,7 @@ import Request from 'utils/request'; export function getLongClaimId (name, modifier) { - console.log('getting long claim id for asset:', name, modifier); + // console.log('getting long claim id for asset:', name, modifier); let body = {}; // create request params if (modifier) { @@ -27,13 +27,13 @@ export function getLongClaimId (name, modifier) { }; export function getShortId (name, claimId) { - console.log('getting short id for asset:', name, claimId); + // console.log('getting short id for asset:', name, claimId); const url = `/api/claim/short-id/${claimId}/${name}`; return Request(url); }; export function getClaimData (name, claimId) { - console.log('getting claim data for asset:', name, claimId); + // console.log('getting claim data for asset:', name, claimId); const url = `/api/claim/data/${name}/${claimId}`; return Request(url); }; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 4fbf942f..169a1342 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -4,7 +4,7 @@ export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM'; export const REQUEST_ERROR = 'REQUEST_ERROR'; // asset actions -export const ASSET_REQUEST_ASYNC = 'ASSET_REQUEST_ASYNC'; +export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW'; export const ASSET_REQUEST_SUCCESS = 'ASSET_REQUEST_SUCCESS'; export const ASSET_NEW_ASYNC = 'ASSET_NEW_ASYNC'; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index a2cd09a4..43b0ca14 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -9,14 +9,15 @@ const mapStateToProps = ({ show }) => { const requestName = show.request.data.name; const requestModifier = show.request.data.modifier; const requestExtension = show.request.data.extension; - // select request - const previousRequest = show.assetRequests[show.request.id] || null; + const assetList = show.assetList; // select asset info + const previousRequest = show.assetRequests[show.request.id] || null; let asset; if (previousRequest) { const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request - asset = show.assetList[assetKey] || null; + asset = assetList[assetKey] || null; }; + // console.log('previousRequest:', previousRequest, 'asset:', asset, 'asset list', assetList); // return props return { requestType, @@ -24,7 +25,6 @@ const mapStateToProps = ({ show }) => { requestName, requestModifier, requestExtension, - previousRequest, asset, }; }; @@ -35,10 +35,6 @@ const mapDispatchToProps = dispatch => { onNewRequest: (id, name, modifier) => { dispatch(newAssetRequest(id, name, modifier)); }, - // show asset - onShowNewAsset: (name, claimId) => { - dispatch(showNewAsset(name, claimId)); - }, }; }; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index 6cf7cfb9..fad53ee1 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -11,25 +11,17 @@ function requestIsAnAssetRequest ({ requestType }) { class ShowAsset extends React.Component { componentDidMount () { - const { asset, previousRequest, requestId, requestName, requestModifier } = this.props; - if (!previousRequest) { // case: the asset request does not exist + const { asset, requestId, requestName, requestModifier } = this.props; + if (!asset) { // case: the asset info does not exist return this.props.onNewRequest(requestId, requestName, requestModifier); }; - if (!asset) { // case: the asset request does not exist - const { name, claimId } = previousRequest; - return this.props.onShowNewAsset(name, claimId); - }; } componentWillReceiveProps (nextProps) { if (requestIsAnAssetRequest(nextProps)) { - const { asset, previousRequest, requestId, requestName, requestModifier } = nextProps; - if (!previousRequest) { + const { asset, requestId, requestName, requestModifier } = nextProps; + if (!asset) { // case: the asset info does not exist return this.props.onNewRequest(requestId, requestName, requestModifier); }; - if (!asset) { - const { name, claimId } = previousRequest; - return this.props.onShowNewAsset(name, claimId); - }; } } render () { diff --git a/react/sagas/index.js b/react/sagas/index.js index 79935b0f..0c5341a9 100644 --- a/react/sagas/index.js +++ b/react/sagas/index.js @@ -2,13 +2,11 @@ import { all } from 'redux-saga/effects'; import { watchNewAssetRequest, watchNewChannelRequest } from './request'; import { watchFileIsRequested } from './file'; import { watchShowNewChannel, watchShowNewChannelClaimsRequest } from './show_channel'; -import { watchShowNewAsset } from './show_asset'; export default function* rootSaga () { yield all([ watchNewAssetRequest(), watchNewChannelRequest(), - watchShowNewAsset(), watchShowNewChannel(), watchFileIsRequested(), watchShowNewChannelClaimsRequest(), diff --git a/react/sagas/request.js b/react/sagas/request.js index 4b87b454..ab5212a8 100644 --- a/react/sagas/request.js +++ b/react/sagas/request.js @@ -1,12 +1,13 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addAssetRequest, updateRequestError, showNewAsset, addChannelRequest, showNewChannel } from 'actions/show'; -import { getLongClaimId } from 'api/assetApi'; +import { addRequestToAssetRequests, updateRequestError, addRequestToChannelRequests, showNewChannel, addAssetToAssetList } from 'actions/show'; +import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; import { getChannelData } from 'api/channelApi'; function* newAssetRequest (action) { const { id, name, modifier } = action.data; - console.log('getting asset long id'); + // get long id + console.log(`getting asset long id ${name}`); let longId; try { ({data: longId} = yield call(getLongClaimId, name, modifier)); @@ -14,8 +15,29 @@ function* newAssetRequest (action) { console.log('error:', error); return yield put(updateRequestError(error.message)); } - yield put(addAssetRequest(id, null, name, longId)); - yield put(showNewAsset(name, longId)); + // put action to add request to asset request list + yield put(addRequestToAssetRequests(id, null, name, longId)); + // get short Id + console.log(`getting asset short id ${name} ${longId}`); + let shortId; + try { + ({data: shortId} = yield call(getShortId, name, longId)); + } catch (error) { + return yield put(updateRequestError(error.message)); + } + // get claim data + console.log(`getting asset claim data ${name} ${longId}`); + let claimData; + try { + ({data: claimData} = yield call(getClaimData, name, longId)); + } catch (error) { + return yield put(updateRequestError(error.message)); + } + // put action to add asset to asset list + const assetKey = `a#${name}#${longId}`; + yield put(addAssetToAssetList(assetKey, null, name, longId, shortId, claimData)); + // clear any errors in request error + yield put(updateRequestError(null)); }; function* newChannelRequest (action) { @@ -25,16 +47,15 @@ function* newChannelRequest (action) { try { ({data} = yield call(getChannelData, name, channelId)); } catch (error) { - // return yield put(addChannelRequest(id, error.message, null, null, null)); return yield put(updateRequestError(error.message)); } const { longChannelClaimId: longId, shortChannelClaimId: shortId } = data; - yield put(addChannelRequest(id, null, name, longId, shortId)); + yield put(addRequestToChannelRequests(id, null, name, longId, shortId)); yield put(showNewChannel(name, shortId, longId)); } export function* watchNewAssetRequest () { - yield takeLatest(actions.ASSET_REQUEST_ASYNC, newAssetRequest); + yield takeLatest(actions.ASSET_REQUEST_NEW, newAssetRequest); }; export function* watchNewChannelRequest () { diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js deleted file mode 100644 index 8f9200b8..00000000 --- a/react/sagas/show_asset.js +++ /dev/null @@ -1,30 +0,0 @@ -import { call, put, takeLatest } from 'redux-saga/effects'; -import * as actions from 'constants/show_action_types'; -import { updateRequestError, addAssetToAssetList } from 'actions/show'; -import { getShortId, getClaimData } from 'api/assetApi'; - -function* getAssetDataAndShowAsset (action) { - const {id, name, claimId} = action.data; - // get short Id - console.log('getting short id'); - let shortId; - try { - ({data: shortId} = yield call(getShortId, name, claimId)); - } catch (error) { - return yield put(updateRequestError(error.message)); - } - // if no error, get claim data - console.log('getting claim data'); - let claimData; - try { - ({data: claimData} = yield call(getClaimData, name, claimId)); - } catch (error) { - return yield put(updateRequestError(error.message)); - } - yield put(addAssetToAssetList(id, null, name, claimId, shortId, claimData)); - yield put(updateRequestError(null)); -} - -export function* watchShowNewAsset () { - yield takeLatest(actions.ASSET_NEW_ASYNC, getAssetDataAndShowAsset); -}; From 55eb2dd85f2d9743f5ca8ba8be90f47a5b197924 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 13 Feb 2018 16:51:59 -0800 Subject: [PATCH 83/96] removed showChannel from actions --- react/actions/show.js | 14 +-------- react/constants/show_action_types.js | 2 +- react/containers/ShowChannel/index.js | 11 ++----- react/containers/ShowChannel/view.jsx | 16 +++-------- react/reducers/show.js | 35 +++++++++++------------ react/sagas/index.js | 7 ++--- react/sagas/{request.js => show_asset.js} | 23 ++------------- react/sagas/show_channel.js | 35 ++++++++++++++++------- 8 files changed, 55 insertions(+), 88 deletions(-) rename react/sagas/{request.js => show_asset.js} (64%) diff --git a/react/actions/show.js b/react/actions/show.js index f3244e8e..5c8b1b86 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -62,7 +62,7 @@ export function addAssetToAssetList (id, error, name, claimId, shortId, claimDat export function newChannelRequest (id, name, channelId) { return { - type: actions.CHANNEL_REQUEST_ASYNC, + type: actions.CHANNEL_REQUEST_NEW, data: {id, name, channelId}, }; }; @@ -74,18 +74,6 @@ export function addRequestToChannelRequests (id, error, name, longId, shortId) { }; } -// show a channel - -export function showNewChannel (name, shortId, longId) { - const id = `c#${name}#${longId}`; // move to the action - return { - type: actions.CHANNEL_NEW_ASYNC, - data: { id, name, shortId, longId }, - }; -}; - -// add channels to channel list - export function addNewChannelToChannelList (id, name, shortId, longId, claimsData) { return { type: actions.CHANNEL_NEW_SUCCESS, diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 169a1342..2c2e26bb 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -11,7 +11,7 @@ export const ASSET_NEW_ASYNC = 'ASSET_NEW_ASYNC'; export const ASSET_NEW_SUCCESS = `ASSET_NEW_SUCCESS`; // channel actions -export const CHANNEL_REQUEST_ASYNC = 'CHANNEL_REQUEST_ASYNC'; +export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW'; export const CHANNEL_REQUEST_SUCCESS = 'CHANNEL_REQUEST_SUCCESS'; export const CHANNEL_NEW_ASYNC = 'CHANNEL_NEW_ASYNC'; diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index ace8f8fb..ee06b0fc 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,6 +1,5 @@ - import { connect } from 'react-redux'; -import { newChannelRequest, showNewChannel } from 'actions/show'; +import { newChannelRequest } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { @@ -11,7 +10,7 @@ const mapStateToProps = ({ show }) => { const requestChannelId = show.request.data.id; // select request const previousRequest = show.channelRequests[show.request.id] || null; - // select channel info + // select channel let channel; if (previousRequest) { const channelKey = `c#${previousRequest.name}#${previousRequest.longId}`; @@ -22,21 +21,15 @@ const mapStateToProps = ({ show }) => { requestType, requestChannelName, requestChannelId, - previousRequest, channel, }; }; const mapDispatchToProps = dispatch => { return { - // request onNewChannelRequest (requestId, requestChannelName, requestChannelId) { dispatch(newChannelRequest(requestId, requestChannelName, requestChannelId)); }, - // show channel - onShowNewChannel: (name, shortId, longId) => { - dispatch(showNewChannel(name, shortId, longId)); - }, }; }; diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index fee7afab..5ffb71ef 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -11,24 +11,16 @@ function requestIsAChannelRequest ({ requestType }) { class ShowChannel extends React.Component { componentDidMount () { - const { previousRequest, channel, requestId, requestChannelName, requestChannelId } = this.props; - if (!previousRequest) { - return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); - } + const { channel, requestId, requestChannelName, requestChannelId } = this.props; if (!channel) { - const { name, shortId, longId } = previousRequest; - return this.props.onShowNewChannel(name, shortId, longId); + return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } } componentWillReceiveProps (nextProps) { if (requestIsAChannelRequest(nextProps)) { - const { previousRequest, channel, requestId, requestChannelName, requestChannelId } = nextProps; - if (!previousRequest) { - return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); - } + const { channel, requestId, requestChannelName, requestChannelId } = nextProps; if (!channel) { - const { name, shortId, longId } = previousRequest; - return this.props.onShowNewChannel(name, shortId, longId); + return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } } } diff --git a/react/reducers/show.js b/react/reducers/show.js index cd6cc52a..c9e654fb 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -9,14 +9,14 @@ const initialState = { data : null, requestId: null, }, - displayAsset: { - error : null, - status: LOCAL_CHECK, - }, channelRequests: {}, channelList : {}, assetRequests : {}, assetList : {}, + displayAsset : { + error : null, + status: LOCAL_CHECK, + }, }; export default function (state = initialState, action) { @@ -53,7 +53,7 @@ export default function (state = initialState, action) { }, }, }); - // successful requests + // asset actions case actions.ASSET_REQUEST_SUCCESS: return Object.assign({}, state, { assetRequests: Object.assign({}, state.assetRequests, { @@ -64,18 +64,6 @@ export default function (state = initialState, action) { }, }), }); - case actions.CHANNEL_REQUEST_SUCCESS: - return Object.assign({}, state, { - channelRequests: Object.assign({}, state.channelRequests, { - [action.data.id]: { - error : action.data.error, - name : action.data.name, - longId : action.data.longId, - shortId: action.data.shortId, - }, - }), - }); - // updates to asset list case actions.ASSET_NEW_SUCCESS: return Object.assign({}, state, { assetList: Object.assign({}, state.assetList, { @@ -88,7 +76,18 @@ export default function (state = initialState, action) { }, }), }); - // updates to channel list + // channel actions + case actions.CHANNEL_REQUEST_SUCCESS: + return Object.assign({}, state, { + channelRequests: Object.assign({}, state.channelRequests, { + [action.data.id]: { + error : action.data.error, + name : action.data.name, + longId : action.data.longId, + shortId: action.data.shortId, + }, + }), + }); case actions.CHANNEL_NEW_SUCCESS: return Object.assign({}, state, { channelList: Object.assign({}, state.channelList, { diff --git a/react/sagas/index.js b/react/sagas/index.js index 0c5341a9..fc8a4529 100644 --- a/react/sagas/index.js +++ b/react/sagas/index.js @@ -1,14 +1,13 @@ import { all } from 'redux-saga/effects'; -import { watchNewAssetRequest, watchNewChannelRequest } from './request'; +import { watchNewAssetRequest } from './show_asset'; +import { watchNewChannelRequest, watchUpdateChannelClaims } from './show_channel'; import { watchFileIsRequested } from './file'; -import { watchShowNewChannel, watchShowNewChannelClaimsRequest } from './show_channel'; export default function* rootSaga () { yield all([ watchNewAssetRequest(), watchNewChannelRequest(), - watchShowNewChannel(), + watchUpdateChannelClaims(), watchFileIsRequested(), - watchShowNewChannelClaimsRequest(), ]); } diff --git a/react/sagas/request.js b/react/sagas/show_asset.js similarity index 64% rename from react/sagas/request.js rename to react/sagas/show_asset.js index ab5212a8..c8a34a88 100644 --- a/react/sagas/request.js +++ b/react/sagas/show_asset.js @@ -1,8 +1,7 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addRequestToAssetRequests, updateRequestError, addRequestToChannelRequests, showNewChannel, addAssetToAssetList } from 'actions/show'; +import { addRequestToAssetRequests, updateRequestError, addAssetToAssetList } from 'actions/show'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; -import { getChannelData } from 'api/channelApi'; function* newAssetRequest (action) { const { id, name, modifier } = action.data; @@ -25,7 +24,7 @@ function* newAssetRequest (action) { } catch (error) { return yield put(updateRequestError(error.message)); } - // get claim data + // get asset claim data console.log(`getting asset claim data ${name} ${longId}`); let claimData; try { @@ -40,24 +39,6 @@ function* newAssetRequest (action) { yield put(updateRequestError(null)); }; -function* newChannelRequest (action) { - const { id, name, channelId } = action.data; - console.log('getting channel long id'); - let data; - try { - ({data} = yield call(getChannelData, name, channelId)); - } catch (error) { - return yield put(updateRequestError(error.message)); - } - const { longChannelClaimId: longId, shortChannelClaimId: shortId } = data; - yield put(addRequestToChannelRequests(id, null, name, longId, shortId)); - yield put(showNewChannel(name, shortId, longId)); -} - export function* watchNewAssetRequest () { yield takeLatest(actions.ASSET_REQUEST_NEW, newAssetRequest); }; - -export function* watchNewChannelRequest () { - yield takeLatest(actions.CHANNEL_REQUEST_ASYNC, newChannelRequest); -}; diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index ce611e2f..076f80cd 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -1,25 +1,40 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { updateRequestError, addNewChannelToChannelList, updateChannelClaims } from 'actions/show'; -import { getChannelClaims } from 'api/channelApi'; +import { addNewChannelToChannelList, addRequestToChannelRequests, updateRequestError, updateChannelClaims } from 'actions/show'; +import { getChannelClaims, getChannelData } from 'api/channelApi'; -function* getChannelClaimsAndShowChannel (action) { - const { id, name, shortId, longId } = action.data; +function* newChannelRequest (action) { + const { id, name, channelId } = action.data; + // get channel long id + console.log('getting channel long id and short id'); + let longId, shortId; + try { + ({ data: {longChannelClaimId: longId, shortChannelClaimId: shortId} } = yield call(getChannelData, name, channelId)); + } catch (error) { + return yield put(updateRequestError(error.message)); + } + // store the request in the channel requests list + yield put(addRequestToChannelRequests(id, null, name, longId, shortId)); + // get channel claims data + console.log('getting channel claims data'); let claimsData; try { ({ data: claimsData } = yield call(getChannelClaims, name, longId, 1)); } catch (error) { return yield put(updateRequestError(error.message)); } - yield put(addNewChannelToChannelList(id, name, shortId, longId, claimsData)); + // store the channel data in the channel list + const channelKey = `c#${name}#${longId}`; + yield put(addNewChannelToChannelList(channelKey, name, shortId, longId, claimsData)); + // clear any request errors yield put(updateRequestError(null)); } -export function* watchShowNewChannel () { - yield takeLatest(actions.CHANNEL_NEW_ASYNC, getChannelClaimsAndShowChannel); +export function* watchNewChannelRequest () { + yield takeLatest(actions.CHANNEL_REQUEST_NEW, newChannelRequest); }; -function* getNewClaimsAndUpdateClaimsList (action) { +function* getNewClaimsAndUpdateChannel (action) { const { channelKey, name, longId, page } = action.data; let claimsData; try { @@ -30,6 +45,6 @@ function* getNewClaimsAndUpdateClaimsList (action) { yield put(updateChannelClaims(channelKey, claimsData)); } -export function* watchShowNewChannelClaimsRequest () { - yield takeLatest(actions.CHANNEL_CLAIMS_UPDATE_ASYNC, getNewClaimsAndUpdateClaimsList); +export function* watchUpdateChannelClaims () { + yield takeLatest(actions.CHANNEL_CLAIMS_UPDATE_ASYNC, getNewClaimsAndUpdateChannel); } From 22c794a289e87fbb3036bb1304a07b86fd079928 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 13 Feb 2018 17:16:50 -0800 Subject: [PATCH 84/96] updated action names --- react/actions/show.js | 16 ++++++++-------- react/constants/show_action_types.js | 14 +++++--------- react/reducers/show.js | 10 +++++----- react/sagas/show_channel.js | 4 ++-- 4 files changed, 20 insertions(+), 24 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index 5c8b1b86..51233448 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -3,7 +3,7 @@ import * as actions from 'constants/show_action_types'; // basic request parsing export function updateRequestError (error) { return { - type: actions.REQUEST_ERROR, + type: actions.REQUEST_UPDATE_ERROR, data: error, }; } @@ -19,7 +19,7 @@ export function updateRequestWithChannelRequest (name, id) { export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) { const requestId = `ar#${name}#${id}#${channelName}#${channelId}`; return { - type: actions.REQUEST_UPDATE_CLAIM, + type: actions.REQUEST_UPDATE_ASSET, data: { requestId, name, @@ -35,7 +35,7 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId, }; }; -// request for an asset +// asset actions export function newAssetRequest (id, name, modifier) { return { @@ -53,12 +53,12 @@ export function addRequestToAssetRequests (id, error, name, claimId) { export function addAssetToAssetList (id, error, name, claimId, shortId, claimData) { return { - type: actions.ASSET_NEW_SUCCESS, + type: actions.ASSET_ADD, data: { id, error, name, claimId, shortId, claimData }, }; } -// request for a channel +// channel actions export function newChannelRequest (id, name, channelId) { return { @@ -69,14 +69,14 @@ export function newChannelRequest (id, name, channelId) { export function addRequestToChannelRequests (id, error, name, longId, shortId) { return { - type: actions.CHANNEL_REQUEST_SUCCESS, + type: actions.CHANNEL_REQUEST_ADD, data: { id, error, name, longId, shortId }, }; -} +}; export function addNewChannelToChannelList (id, name, shortId, longId, claimsData) { return { - type: actions.CHANNEL_NEW_SUCCESS, + type: actions.CHANNEL_ADD, data: { id, name, shortId, longId, claimsData }, }; }; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 2c2e26bb..8185f79e 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,21 +1,17 @@ // request actions export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL'; -export const REQUEST_UPDATE_CLAIM = 'REQUEST_UPDATE_CLAIM'; -export const REQUEST_ERROR = 'REQUEST_ERROR'; +export const REQUEST_UPDATE_ASSET = 'REQUEST_UPDATE_ASSET'; +export const REQUEST_UPDATE_ERROR = 'REQUEST_UPDATE_ERROR'; // asset actions export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW'; export const ASSET_REQUEST_SUCCESS = 'ASSET_REQUEST_SUCCESS'; - -export const ASSET_NEW_ASYNC = 'ASSET_NEW_ASYNC'; -export const ASSET_NEW_SUCCESS = `ASSET_NEW_SUCCESS`; +export const ASSET_ADD = `ASSET_ADD`; // channel actions export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW'; -export const CHANNEL_REQUEST_SUCCESS = 'CHANNEL_REQUEST_SUCCESS'; - -export const CHANNEL_NEW_ASYNC = 'CHANNEL_NEW_ASYNC'; -export const CHANNEL_NEW_SUCCESS = 'CHANNEL_NEW_SUCCESS'; +export const CHANNEL_REQUEST_ADD = 'CHANNEL_REQUEST_ADD'; +export const CHANNEL_ADD = 'CHANNEL_ADD'; export const CHANNEL_CLAIMS_UPDATE_ASYNC = 'CHANNEL_CLAIMS_UPDATE_ASYNC'; export const CHANNEL_CLAIMS_UPDATE_SUCCESS = 'CHANNEL_CLAIMS_UPDATE_SUCCESS'; diff --git a/react/reducers/show.js b/react/reducers/show.js index c9e654fb..4bbe4fdb 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -22,7 +22,7 @@ const initialState = { export default function (state = initialState, action) { switch (action.type) { // handle request - case actions.REQUEST_ERROR: + case actions.REQUEST_UPDATE_ERROR: return Object.assign({}, state, { request: Object.assign({}, state.request, { error: action.data, @@ -40,7 +40,7 @@ export default function (state = initialState, action) { }, }, }); - case actions.REQUEST_UPDATE_CLAIM: + case actions.REQUEST_UPDATE_ASSET: return Object.assign({}, state, { request: { type : ASSET, @@ -64,7 +64,7 @@ export default function (state = initialState, action) { }, }), }); - case actions.ASSET_NEW_SUCCESS: + case actions.ASSET_ADD: return Object.assign({}, state, { assetList: Object.assign({}, state.assetList, { [action.data.id]: { @@ -77,7 +77,7 @@ export default function (state = initialState, action) { }), }); // channel actions - case actions.CHANNEL_REQUEST_SUCCESS: + case actions.CHANNEL_REQUEST_ADD: return Object.assign({}, state, { channelRequests: Object.assign({}, state.channelRequests, { [action.data.id]: { @@ -88,7 +88,7 @@ export default function (state = initialState, action) { }, }), }); - case actions.CHANNEL_NEW_SUCCESS: + case actions.CHANNEL_ADD: return Object.assign({}, state, { channelList: Object.assign({}, state.channelList, { [action.data.id]: { diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index 076f80cd..b6eaa1ac 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -3,7 +3,7 @@ import * as actions from 'constants/show_action_types'; import { addNewChannelToChannelList, addRequestToChannelRequests, updateRequestError, updateChannelClaims } from 'actions/show'; import { getChannelClaims, getChannelData } from 'api/channelApi'; -function* newChannelRequest (action) { +function* getNewChannelAndUpdateChannelList (action) { const { id, name, channelId } = action.data; // get channel long id console.log('getting channel long id and short id'); @@ -31,7 +31,7 @@ function* newChannelRequest (action) { } export function* watchNewChannelRequest () { - yield takeLatest(actions.CHANNEL_REQUEST_NEW, newChannelRequest); + yield takeLatest(actions.CHANNEL_REQUEST_NEW, getNewChannelAndUpdateChannelList); }; function* getNewClaimsAndUpdateChannel (action) { From 10fdf6e6e2a01992d49263b5fde04c87d6fa0111 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 13 Feb 2018 22:29:54 -0800 Subject: [PATCH 85/96] fixed post-publish forwarding issue --- react/containers/PublishForm/view.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/containers/PublishForm/view.jsx b/react/containers/PublishForm/view.jsx index 7cacfee7..366e86ba 100644 --- a/react/containers/PublishForm/view.jsx +++ b/react/containers/PublishForm/view.jsx @@ -71,8 +71,8 @@ class PublishForm extends React.Component { const response = JSON.parse(xhr.response); console.log('publish response:', response); if ((xhr.status === 200) && response.success) { - this.props.onPublishStatusChange(publishStates.SUCCESS, response.data.url); this.props.history.push(`/${response.data.claimId}/${response.data.name}`); + this.props.onPublishStatusChange(publishStates.SUCCESS, response.data.url); } else { this.props.onPublishStatusChange(publishStates.FAILED, response.message); } From 51c50d7f5dd99f2350fca27409349ee458578224 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 14 Feb 2018 09:19:22 -0800 Subject: [PATCH 86/96] removed componentWillMount and simplified mapDispatchToProps --- react/actions/show.js | 12 ++++----- .../containers/ChannelClaimsDisplay/index.js | 8 +++--- .../containers/ChannelClaimsDisplay/view.jsx | 2 +- react/containers/ShowAsset/index.js | 12 +++------ react/containers/ShowAsset/view.jsx | 26 +++---------------- react/containers/ShowChannel/index.js | 10 +++---- react/containers/ShowChannel/view.jsx | 20 +++----------- react/containers/ShowPage/index.js | 16 ++++-------- react/containers/ShowPage/view.jsx | 8 +++--- react/sagas/show_asset.js | 10 +++---- react/sagas/show_channel.js | 10 +++---- 11 files changed, 42 insertions(+), 92 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index 51233448..a3847c6b 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -1,14 +1,14 @@ import * as actions from 'constants/show_action_types'; // basic request parsing -export function updateRequestError (error) { +export function onRequestError (error) { return { type: actions.REQUEST_UPDATE_ERROR, data: error, }; } -export function updateRequestWithChannelRequest (name, id) { +export function onParsedChannelRequest (name, id) { const requestId = `cr#${name}#${id}`; return { type: actions.REQUEST_UPDATE_CHANNEL, @@ -16,7 +16,7 @@ export function updateRequestWithChannelRequest (name, id) { }; }; -export function updateRequestWithAssetRequest (name, id, channelName, channelId, extension) { +export function onParsedAssetRequest (name, id, channelName, channelId, extension) { const requestId = `ar#${name}#${id}#${channelName}#${channelId}`; return { type: actions.REQUEST_UPDATE_ASSET, @@ -37,7 +37,7 @@ export function updateRequestWithAssetRequest (name, id, channelName, channelId, // asset actions -export function newAssetRequest (id, name, modifier) { +export function onNewAssetRequest (id, name, modifier) { return { type: actions.ASSET_REQUEST_NEW, data: { id, name, modifier }, @@ -60,7 +60,7 @@ export function addAssetToAssetList (id, error, name, claimId, shortId, claimDat // channel actions -export function newChannelRequest (id, name, channelId) { +export function onNewChannelRequest (id, name, channelId) { return { type: actions.CHANNEL_REQUEST_NEW, data: {id, name, channelId}, @@ -83,7 +83,7 @@ export function addNewChannelToChannelList (id, name, shortId, longId, claimsDat // update channel data -export function updateChannelClaimsAsync (channelKey, name, longId, page) { +export function onUpdateChannelClaims (channelKey, name, longId, page) { return { type: actions.CHANNEL_CLAIMS_UPDATE_ASYNC, data: {channelKey, name, longId, page}, diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 80c075dc..4a24968e 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { updateChannelClaimsAsync } from 'actions/show'; +import { onUpdateChannelClaims } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { @@ -15,11 +15,9 @@ const mapStateToProps = ({ show }) => { }; }; -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = () => { return { - onChannelPageUpdate: (channelKey, name, longId, page) => { - dispatch(updateChannelClaimsAsync(channelKey, name, longId, page)); - }, + onUpdateChannelClaims, }; }; diff --git a/react/containers/ChannelClaimsDisplay/view.jsx b/react/containers/ChannelClaimsDisplay/view.jsx index 285886fe..fd450268 100644 --- a/react/containers/ChannelClaimsDisplay/view.jsx +++ b/react/containers/ChannelClaimsDisplay/view.jsx @@ -19,7 +19,7 @@ class ChannelClaimsDisplay extends React.Component { } showNewPage (page) { const { channelKey, channel: { name, longId } } = this.props; - this.props.onChannelPageUpdate(channelKey, name, longId, page); + this.props.onUpdateChannelClaims(channelKey, name, longId, page); } render () { const { channel: { claimsData: { claims, currentPage, totalPages } } } = this.props; diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js index 43b0ca14..c59f6470 100644 --- a/react/containers/ShowAsset/index.js +++ b/react/containers/ShowAsset/index.js @@ -1,10 +1,9 @@ import { connect } from 'react-redux'; import View from './view'; -import { newAssetRequest, showNewAsset } from 'actions/show'; +import { onNewAssetRequest } from 'actions/show'; const mapStateToProps = ({ show }) => { // select request info - const requestType = show.request.type; const requestId = show.request.id; const requestName = show.request.data.name; const requestModifier = show.request.data.modifier; @@ -17,10 +16,8 @@ const mapStateToProps = ({ show }) => { const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request asset = assetList[assetKey] || null; }; - // console.log('previousRequest:', previousRequest, 'asset:', asset, 'asset list', assetList); // return props return { - requestType, requestId, requestName, requestModifier, @@ -29,12 +26,9 @@ const mapStateToProps = ({ show }) => { }; }; -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = () => { return { - // request - onNewRequest: (id, name, modifier) => { - dispatch(newAssetRequest(id, name, modifier)); - }, + onNewAssetRequest, }; }; diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx index fad53ee1..ddc8a07f 100644 --- a/react/containers/ShowAsset/view.jsx +++ b/react/containers/ShowAsset/view.jsx @@ -3,36 +3,18 @@ import ErrorPage from 'components/ErrorPage'; import ShowAssetLite from 'components/ShowAssetLite'; import ShowAssetDetails from 'components/ShowAssetDetails'; -import { ASSET } from 'constants/show_request_types'; - -function requestIsAnAssetRequest ({ requestType }) { - return requestType === ASSET; -} - class ShowAsset extends React.Component { componentDidMount () { const { asset, requestId, requestName, requestModifier } = this.props; - if (!asset) { // case: the asset info does not exist - return this.props.onNewRequest(requestId, requestName, requestModifier); + if (!asset) { + return this.props.onNewAssetRequest(requestId, requestName, requestModifier); }; } - componentWillReceiveProps (nextProps) { - if (requestIsAnAssetRequest(nextProps)) { - const { asset, requestId, requestName, requestModifier } = nextProps; - if (!asset) { // case: the asset info does not exist - return this.props.onNewRequest(requestId, requestName, requestModifier); - }; - } - } render () { const {asset, requestExtension} = this.props; if (asset) { - if (requestExtension) { - return ; - } - return ; - } - ; + return requestExtension ? : ; + }; return ( ); diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js index ee06b0fc..0a9c83c7 100644 --- a/react/containers/ShowChannel/index.js +++ b/react/containers/ShowChannel/index.js @@ -1,11 +1,10 @@ import { connect } from 'react-redux'; -import { newChannelRequest } from 'actions/show'; +import { onNewChannelRequest } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { // select request info const requestId = show.request.id; - const requestType = show.request.type; const requestChannelName = show.request.data.name; const requestChannelId = show.request.data.id; // select request @@ -18,18 +17,15 @@ const mapStateToProps = ({ show }) => { } return { requestId, - requestType, requestChannelName, requestChannelId, channel, }; }; -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = () => { return { - onNewChannelRequest (requestId, requestChannelName, requestChannelId) { - dispatch(newChannelRequest(requestId, requestChannelName, requestChannelId)); - }, + onNewChannelRequest, }; }; diff --git a/react/containers/ShowChannel/view.jsx b/react/containers/ShowChannel/view.jsx index 5ffb71ef..4545d1a3 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/containers/ShowChannel/view.jsx @@ -3,12 +3,6 @@ import ErrorPage from 'components/ErrorPage'; import NavBar from 'containers/NavBar'; import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; -import { CHANNEL } from 'constants/show_request_types'; - -function requestIsAChannelRequest ({ requestType }) { - return requestType === CHANNEL; -} - class ShowChannel extends React.Component { componentDidMount () { const { channel, requestId, requestChannelName, requestChannelId } = this.props; @@ -16,14 +10,6 @@ class ShowChannel extends React.Component { return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); } } - componentWillReceiveProps (nextProps) { - if (requestIsAChannelRequest(nextProps)) { - const { channel, requestId, requestChannelName, requestChannelId } = nextProps; - if (!channel) { - return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); - } - } - } render () { const { channel } = this.props; if (channel) { @@ -33,9 +19,9 @@ class ShowChannel extends React.Component {
-

channel name: {name ? name : 'loading...'}

-

full channel id: {longId ? longId : 'loading...'}

-

short channel id: {shortId ? shortId : 'loading...'}

+

channel name: {name || 'loading...'}

+

full channel id: {longId || 'loading...'}

+

short channel id: {shortId || 'loading...'}

diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js index 405b8244..6bdfd64f 100644 --- a/react/containers/ShowPage/index.js +++ b/react/containers/ShowPage/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { updateRequestError, updateRequestWithChannelRequest, updateRequestWithAssetRequest } from 'actions/show'; +import { onRequestError, onParsedChannelRequest, onParsedAssetRequest } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { @@ -9,17 +9,11 @@ const mapStateToProps = ({ show }) => { }; }; -const mapDispatchToProps = dispatch => { +const mapDispatchToProps = () => { return { - onRequestError: (error) => { - dispatch(updateRequestError(error)); - }, - onChannelRequest: (name, id) => { - dispatch(updateRequestWithChannelRequest(name, id)); - }, - onAssetRequest: (name, id, channelName, channelId, extension) => { - dispatch(updateRequestWithAssetRequest(name, id, channelName, channelId, extension)); - }, + onRequestError, + onParsedChannelRequest, + onParsedAssetRequest, }; }; diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index bbfb7502..e379113a 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -42,9 +42,9 @@ class ShowPage extends React.Component { } // update the store if (isChannel) { - return this.props.onAssetRequest(claimName, null, channelName, channelClaimId, extension); + return this.props.onParsedAssetRequest(claimName, null, channelName, channelClaimId, extension); } else { - return this.props.onAssetRequest(claimName, claimId, null, null, extension); + return this.props.onParsedAssetRequest(claimName, claimId, null, null, extension); } } parseAndUpdateClaimOnly (claim) { @@ -58,7 +58,7 @@ class ShowPage extends React.Component { } // return early if this request is for a channel if (isChannel) { - return this.props.onChannelRequest(channelName, channelClaimId); + return this.props.onParsedChannelRequest(channelName, channelClaimId); } // if not for a channel, parse the claim request let claimName, extension; // if I am destructuring below, do I still need to declare these here? @@ -67,7 +67,7 @@ class ShowPage extends React.Component { } catch (error) { return this.props.onRequestError(error.message); } - this.props.onAssetRequest(claimName, null, null, null, extension); + this.props.onParsedAssetRequest(claimName, null, null, null, extension); } render () { const { error, requestType } = this.props; diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index c8a34a88..c1174f50 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addRequestToAssetRequests, updateRequestError, addAssetToAssetList } from 'actions/show'; +import { addRequestToAssetRequests, onRequestError, addAssetToAssetList } from 'actions/show'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; function* newAssetRequest (action) { @@ -12,7 +12,7 @@ function* newAssetRequest (action) { ({data: longId} = yield call(getLongClaimId, name, modifier)); } catch (error) { console.log('error:', error); - return yield put(updateRequestError(error.message)); + return yield put(onRequestError(error.message)); } // put action to add request to asset request list yield put(addRequestToAssetRequests(id, null, name, longId)); @@ -22,7 +22,7 @@ function* newAssetRequest (action) { try { ({data: shortId} = yield call(getShortId, name, longId)); } catch (error) { - return yield put(updateRequestError(error.message)); + return yield put(onRequestError(error.message)); } // get asset claim data console.log(`getting asset claim data ${name} ${longId}`); @@ -30,13 +30,13 @@ function* newAssetRequest (action) { try { ({data: claimData} = yield call(getClaimData, name, longId)); } catch (error) { - return yield put(updateRequestError(error.message)); + return yield put(onRequestError(error.message)); } // put action to add asset to asset list const assetKey = `a#${name}#${longId}`; yield put(addAssetToAssetList(assetKey, null, name, longId, shortId, claimData)); // clear any errors in request error - yield put(updateRequestError(null)); + yield put(onRequestError(null)); }; export function* watchNewAssetRequest () { diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index b6eaa1ac..40aeddeb 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addNewChannelToChannelList, addRequestToChannelRequests, updateRequestError, updateChannelClaims } from 'actions/show'; +import { addNewChannelToChannelList, addRequestToChannelRequests, onRequestError, updateChannelClaims } from 'actions/show'; import { getChannelClaims, getChannelData } from 'api/channelApi'; function* getNewChannelAndUpdateChannelList (action) { @@ -11,7 +11,7 @@ function* getNewChannelAndUpdateChannelList (action) { try { ({ data: {longChannelClaimId: longId, shortChannelClaimId: shortId} } = yield call(getChannelData, name, channelId)); } catch (error) { - return yield put(updateRequestError(error.message)); + return yield put(onRequestError(error.message)); } // store the request in the channel requests list yield put(addRequestToChannelRequests(id, null, name, longId, shortId)); @@ -21,13 +21,13 @@ function* getNewChannelAndUpdateChannelList (action) { try { ({ data: claimsData } = yield call(getChannelClaims, name, longId, 1)); } catch (error) { - return yield put(updateRequestError(error.message)); + return yield put(onRequestError(error.message)); } // store the channel data in the channel list const channelKey = `c#${name}#${longId}`; yield put(addNewChannelToChannelList(channelKey, name, shortId, longId, claimsData)); // clear any request errors - yield put(updateRequestError(null)); + yield put(onRequestError(null)); } export function* watchNewChannelRequest () { @@ -40,7 +40,7 @@ function* getNewClaimsAndUpdateChannel (action) { try { ({ data: claimsData } = yield call(getChannelClaims, name, longId, page)); } catch (error) { - return yield put(updateRequestError(error.message)); + return yield put(onRequestError(error.message)); } yield put(updateChannelClaims(channelKey, claimsData)); } From 4a2fbb402fd8a3220d32223d5dcffd6d9cffc5cf Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 14 Feb 2018 11:39:24 -0800 Subject: [PATCH 87/96] consolidated request handling to showPage --- react/actions/show.js | 32 +++++-------- react/components/ShowAssetDetails/index.js | 48 ++++++++----------- react/components/ShowAssetDetails/view.jsx | 39 +++++++++++++++ react/components/ShowAssetLite/index.js | 22 +++++---- react/components/ShowAssetLite/view.jsx | 6 +-- react/components/ShowChannel/index.js | 20 ++++++++ .../ShowChannel/view.jsx | 12 ++--- react/constants/show_action_types.js | 6 +-- react/constants/show_request_types.js | 3 +- .../containers/ChannelClaimsDisplay/index.js | 6 +-- react/containers/ShowAsset/index.js | 35 -------------- react/containers/ShowAsset/view.jsx | 24 ---------- react/containers/ShowChannel/index.js | 32 ------------- react/containers/ShowPage/index.js | 12 ++--- react/containers/ShowPage/view.jsx | 21 ++++---- react/reducers/show.js | 37 ++++---------- react/sagas/show_asset.js | 4 +- react/sagas/show_channel.js | 12 ++--- 18 files changed, 150 insertions(+), 221 deletions(-) create mode 100644 react/components/ShowAssetDetails/view.jsx create mode 100644 react/components/ShowChannel/index.js rename react/{containers => components}/ShowChannel/view.jsx (74%) delete mode 100644 react/containers/ShowAsset/index.js delete mode 100644 react/containers/ShowAsset/view.jsx delete mode 100644 react/containers/ShowChannel/index.js diff --git a/react/actions/show.js b/react/actions/show.js index a3847c6b..cae8c4e3 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -1,5 +1,7 @@ import * as actions from 'constants/show_action_types'; +import { CHANNEL, ASSET_LITE, ASSET_DETAILS } from 'constants/show_request_types'; + // basic request parsing export function onRequestError (error) { return { @@ -8,19 +10,22 @@ export function onRequestError (error) { }; } -export function onParsedChannelRequest (name, id) { - const requestId = `cr#${name}#${id}`; +export function onNewChannelRequest (channelName, channelId) { + const requestType = CHANNEL; + const requestId = `cr#${channelName}#${channelId}`; return { - type: actions.REQUEST_UPDATE_CHANNEL, - data: { requestId, name, id }, + type: actions.CHANNEL_REQUEST_NEW, + data: { requestType, requestId, channelName, channelId }, }; }; -export function onParsedAssetRequest (name, id, channelName, channelId, extension) { +export function onNewAssetRequest (name, id, channelName, channelId, extension) { + const requestType = extension ? ASSET_LITE : ASSET_DETAILS; const requestId = `ar#${name}#${id}#${channelName}#${channelId}`; return { - type: actions.REQUEST_UPDATE_ASSET, + type: actions.ASSET_REQUEST_NEW, data: { + requestType, requestId, name, modifier: { @@ -30,20 +35,12 @@ export function onParsedAssetRequest (name, id, channelName, channelId, extensio id : channelId, }, }, - extension, }, }; }; // asset actions -export function onNewAssetRequest (id, name, modifier) { - return { - type: actions.ASSET_REQUEST_NEW, - data: { id, name, modifier }, - }; -}; - export function addRequestToAssetRequests (id, error, name, claimId) { return { type: actions.ASSET_REQUEST_SUCCESS, @@ -60,13 +57,6 @@ export function addAssetToAssetList (id, error, name, claimId, shortId, claimDat // channel actions -export function onNewChannelRequest (id, name, channelId) { - return { - type: actions.CHANNEL_REQUEST_NEW, - data: {id, name, channelId}, - }; -}; - export function addRequestToChannelRequests (id, error, name, longId, shortId) { return { type: actions.CHANNEL_REQUEST_ADD, diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index 8a956774..d8061a34 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -1,32 +1,22 @@ -import React from 'react'; -import NavBar from 'containers/NavBar'; -import AssetTitle from 'components/AssetTitle'; -import AssetDisplay from 'components/AssetDisplay'; -import AssetInfo from 'components/AssetInfo'; +import { connect } from 'react-redux'; +import View from './view'; -class ShowAssetDetails extends React.Component { - render () { - return ( -
- -
-
- -
-
-
- -
-
-
- -
-
-
- } -
- ); - } +const mapStateToProps = ({ show }) => { + console.log('mapping state to props', show); + // select request info + const requestId = show.request.id; + // select asset info + let asset; + const previousRequest = show.assetRequests[requestId] || null; + const assetList = show.assetList; + if (previousRequest) { + const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request + asset = assetList[assetKey] || null; + }; + // return props + return { + asset, + }; }; -export default ShowAssetDetails; +export default connect(mapStateToProps, null)(View); diff --git a/react/components/ShowAssetDetails/view.jsx b/react/components/ShowAssetDetails/view.jsx new file mode 100644 index 00000000..42047032 --- /dev/null +++ b/react/components/ShowAssetDetails/view.jsx @@ -0,0 +1,39 @@ +import React from 'react'; +import NavBar from 'containers/NavBar'; +import ErrorPage from 'components/ErrorPage'; +import AssetTitle from 'components/AssetTitle'; +import AssetDisplay from 'components/AssetDisplay'; +import AssetInfo from 'components/AssetInfo'; + +class ShowAssetDetails extends React.Component { + render () { + const { asset } = this.props; + if (asset) { + return ( +
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+
+ } +
+ ); + }; + return ( + + ); + } +}; + +export default ShowAssetDetails; diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index 19c96cd1..40c09afd 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -2,19 +2,21 @@ import { connect } from 'react-redux'; import View from './view'; const mapStateToProps = ({ show }) => { - // select name and claim id - let name, claimId; - const previousRequest = show.assetRequests[show.request.id]; - const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; - const asset = show.assetList[assetKey]; - if (asset) { - name = asset.name; - claimId = asset.claimId; + console.log('mapping state to props', show); + // select request info + const requestId = show.request.id; + // select asset info + let asset; + const previousRequest = show.assetRequests[requestId] || null; + console.log('previous request:', previousRequest); + const assetList = show.assetList; + if (previousRequest) { + const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request + asset = assetList[assetKey] || null; }; // return props return { - name, - claimId, + asset, }; }; diff --git a/react/components/ShowAssetLite/view.jsx b/react/components/ShowAssetLite/view.jsx index 74dc1beb..e8567fbc 100644 --- a/react/components/ShowAssetLite/view.jsx +++ b/react/components/ShowAssetLite/view.jsx @@ -4,13 +4,13 @@ import AssetDisplay from 'components/AssetDisplay'; class ShowLite extends React.Component { render () { - const { name, claimId } = this.props; + const { asset } = this.props; return (
- { (name && claimId) && + { (asset) &&
- hosted via Spee.ch + hosted via Spee.ch
}
diff --git a/react/components/ShowChannel/index.js b/react/components/ShowChannel/index.js new file mode 100644 index 00000000..8de0944f --- /dev/null +++ b/react/components/ShowChannel/index.js @@ -0,0 +1,20 @@ +import { connect } from 'react-redux'; +import View from './view'; + +const mapStateToProps = ({ show }) => { + // select request info + const requestId = show.request.id; + // select request + const previousRequest = show.channelRequests[requestId] || null; + // select channel + let channel; + if (previousRequest) { + const channelKey = `c#${previousRequest.name}#${previousRequest.longId}`; + channel = show.channelList[channelKey] || null; + } + return { + channel, + }; +}; + +export default connect(mapStateToProps, null)(View); diff --git a/react/containers/ShowChannel/view.jsx b/react/components/ShowChannel/view.jsx similarity index 74% rename from react/containers/ShowChannel/view.jsx rename to react/components/ShowChannel/view.jsx index 4545d1a3..3539cdf7 100644 --- a/react/containers/ShowChannel/view.jsx +++ b/react/components/ShowChannel/view.jsx @@ -4,12 +4,12 @@ import NavBar from 'containers/NavBar'; import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; class ShowChannel extends React.Component { - componentDidMount () { - const { channel, requestId, requestChannelName, requestChannelId } = this.props; - if (!channel) { - return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); - } - } + // componentDidMount () { + // const { channel, requestId, requestChannelName, requestChannelId } = this.props; + // if (!channel) { + // return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); // check the channel you have in the request and see you have no channel so fetch that channel? + // } + // } render () { const { channel } = this.props; if (channel) { diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 8185f79e..9927408e 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,15 +1,13 @@ // request actions -export const REQUEST_UPDATE_CHANNEL = 'REQUEST_UPDATE_CHANNEL'; -export const REQUEST_UPDATE_ASSET = 'REQUEST_UPDATE_ASSET'; export const REQUEST_UPDATE_ERROR = 'REQUEST_UPDATE_ERROR'; +export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW'; +export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW'; // asset actions -export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW'; export const ASSET_REQUEST_SUCCESS = 'ASSET_REQUEST_SUCCESS'; export const ASSET_ADD = `ASSET_ADD`; // channel actions -export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW'; export const CHANNEL_REQUEST_ADD = 'CHANNEL_REQUEST_ADD'; export const CHANNEL_ADD = 'CHANNEL_ADD'; diff --git a/react/constants/show_request_types.js b/react/constants/show_request_types.js index 82ae07cd..d5fbed67 100644 --- a/react/constants/show_request_types.js +++ b/react/constants/show_request_types.js @@ -1,2 +1,3 @@ export const CHANNEL = 'CHANNEL'; -export const ASSET = 'ASSET'; +export const ASSET_LITE = 'ASSET_LITE'; +export const ASSET_DETAILS = 'ASSET_DETAILS'; diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 4a24968e..0fd7b165 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -15,10 +15,8 @@ const mapStateToProps = ({ show }) => { }; }; -const mapDispatchToProps = () => { - return { - onUpdateChannelClaims, - }; +const mapDispatchToProps = { + onUpdateChannelClaims, }; export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ShowAsset/index.js b/react/containers/ShowAsset/index.js deleted file mode 100644 index c59f6470..00000000 --- a/react/containers/ShowAsset/index.js +++ /dev/null @@ -1,35 +0,0 @@ -import { connect } from 'react-redux'; -import View from './view'; -import { onNewAssetRequest } from 'actions/show'; - -const mapStateToProps = ({ show }) => { - // select request info - const requestId = show.request.id; - const requestName = show.request.data.name; - const requestModifier = show.request.data.modifier; - const requestExtension = show.request.data.extension; - const assetList = show.assetList; - // select asset info - const previousRequest = show.assetRequests[show.request.id] || null; - let asset; - if (previousRequest) { - const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request - asset = assetList[assetKey] || null; - }; - // return props - return { - requestId, - requestName, - requestModifier, - requestExtension, - asset, - }; -}; - -const mapDispatchToProps = () => { - return { - onNewAssetRequest, - }; -}; - -export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ShowAsset/view.jsx b/react/containers/ShowAsset/view.jsx deleted file mode 100644 index ddc8a07f..00000000 --- a/react/containers/ShowAsset/view.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import ErrorPage from 'components/ErrorPage'; -import ShowAssetLite from 'components/ShowAssetLite'; -import ShowAssetDetails from 'components/ShowAssetDetails'; - -class ShowAsset extends React.Component { - componentDidMount () { - const { asset, requestId, requestName, requestModifier } = this.props; - if (!asset) { - return this.props.onNewAssetRequest(requestId, requestName, requestModifier); - }; - } - render () { - const {asset, requestExtension} = this.props; - if (asset) { - return requestExtension ? : ; - }; - return ( - - ); - } -}; - -export default ShowAsset; diff --git a/react/containers/ShowChannel/index.js b/react/containers/ShowChannel/index.js deleted file mode 100644 index 0a9c83c7..00000000 --- a/react/containers/ShowChannel/index.js +++ /dev/null @@ -1,32 +0,0 @@ -import { connect } from 'react-redux'; -import { onNewChannelRequest } from 'actions/show'; -import View from './view'; - -const mapStateToProps = ({ show }) => { - // select request info - const requestId = show.request.id; - const requestChannelName = show.request.data.name; - const requestChannelId = show.request.data.id; - // select request - const previousRequest = show.channelRequests[show.request.id] || null; - // select channel - let channel; - if (previousRequest) { - const channelKey = `c#${previousRequest.name}#${previousRequest.longId}`; - channel = show.channelList[channelKey] || null; - } - return { - requestId, - requestChannelName, - requestChannelId, - channel, - }; -}; - -const mapDispatchToProps = () => { - return { - onNewChannelRequest, - }; -}; - -export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js index 6bdfd64f..8ba6752e 100644 --- a/react/containers/ShowPage/index.js +++ b/react/containers/ShowPage/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { onRequestError, onParsedChannelRequest, onParsedAssetRequest } from 'actions/show'; +import { onRequestError, onNewChannelRequest, onNewAssetRequest } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { @@ -9,12 +9,10 @@ const mapStateToProps = ({ show }) => { }; }; -const mapDispatchToProps = () => { - return { - onRequestError, - onParsedChannelRequest, - onParsedAssetRequest, - }; +const mapDispatchToProps = { + onRequestError, + onNewChannelRequest, + onNewAssetRequest, }; export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index e379113a..b431dd53 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -1,10 +1,11 @@ import React from 'react'; import ErrorPage from 'components/ErrorPage'; -import ShowAsset from 'containers/ShowAsset'; -import ShowChannel from 'containers/ShowChannel'; +import ShowAssetLite from 'components/ShowAssetLite'; +import ShowAssetDetails from 'components/ShowAssetDetails'; +import ShowChannel from 'components/ShowChannel'; import lbryUri from 'utils/lbryUri'; -import { CHANNEL, ASSET } from 'constants/show_request_types'; +import { CHANNEL, ASSET_LITE, ASSET_DETAILS } from 'constants/show_request_types'; class ShowPage extends React.Component { constructor (props) { @@ -42,9 +43,9 @@ class ShowPage extends React.Component { } // update the store if (isChannel) { - return this.props.onParsedAssetRequest(claimName, null, channelName, channelClaimId, extension); + return this.props.onNewAssetRequest(claimName, null, channelName, channelClaimId, extension); } else { - return this.props.onParsedAssetRequest(claimName, claimId, null, null, extension); + return this.props.onNewAssetRequest(claimName, claimId, null, null, extension); } } parseAndUpdateClaimOnly (claim) { @@ -58,7 +59,7 @@ class ShowPage extends React.Component { } // return early if this request is for a channel if (isChannel) { - return this.props.onParsedChannelRequest(channelName, channelClaimId); + return this.props.onNewChannelRequest(channelName, channelClaimId); } // if not for a channel, parse the claim request let claimName, extension; // if I am destructuring below, do I still need to declare these here? @@ -67,7 +68,7 @@ class ShowPage extends React.Component { } catch (error) { return this.props.onRequestError(error.message); } - this.props.onParsedAssetRequest(claimName, null, null, null, extension); + this.props.onNewAssetRequest(claimName, null, null, null, extension); } render () { const { error, requestType } = this.props; @@ -79,8 +80,10 @@ class ShowPage extends React.Component { switch (requestType) { case CHANNEL: return ; - case ASSET: - return ; + case ASSET_LITE: + return ; + case ASSET_DETAILS: + return ; default: return

loading...

; } diff --git a/react/reducers/show.js b/react/reducers/show.js index 4bbe4fdb..699540ec 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -1,13 +1,11 @@ import * as actions from 'constants/show_action_types'; -import { CHANNEL, ASSET } from 'constants/show_request_types'; import { LOCAL_CHECK, ERROR } from 'constants/asset_display_states'; const initialState = { request: { - error : null, - type : null, - data : null, - requestId: null, + error: null, + type : null, + id : null, }, channelRequests: {}, channelList : {}, @@ -28,30 +26,13 @@ export default function (state = initialState, action) { error: action.data, }), }); - case actions.REQUEST_UPDATE_CHANNEL: + case actions.CHANNEL_REQUEST_NEW: + case actions.ASSET_REQUEST_NEW: return Object.assign({}, state, { - request: { - type : CHANNEL, - error: null, - id : action.data.requestId, - data : { - name: action.data.name, - id : action.data.id, - }, - }, - }); - case actions.REQUEST_UPDATE_ASSET: - return Object.assign({}, state, { - request: { - type : ASSET, - error: null, - id : action.data.requestId, - data : { - name : action.data.name, - modifier : action.data.modifier, - extension: action.data.extension, - }, - }, + request: Object.assign({}, state.request, { + type: action.data.requestType, + id : action.data.requestId, + }), }); // asset actions case actions.ASSET_REQUEST_SUCCESS: diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index c1174f50..6f21b0ec 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -4,7 +4,7 @@ import { addRequestToAssetRequests, onRequestError, addAssetToAssetList } from ' import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; function* newAssetRequest (action) { - const { id, name, modifier } = action.data; + const { requestId, name, modifier } = action.data; // get long id console.log(`getting asset long id ${name}`); let longId; @@ -15,7 +15,7 @@ function* newAssetRequest (action) { return yield put(onRequestError(error.message)); } // put action to add request to asset request list - yield put(addRequestToAssetRequests(id, null, name, longId)); + yield put(addRequestToAssetRequests(requestId, null, name, longId)); // get short Id console.log(`getting asset short id ${name} ${longId}`); let shortId; diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index 40aeddeb..981d6cc7 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -4,28 +4,28 @@ import { addNewChannelToChannelList, addRequestToChannelRequests, onRequestError import { getChannelClaims, getChannelData } from 'api/channelApi'; function* getNewChannelAndUpdateChannelList (action) { - const { id, name, channelId } = action.data; + const { requestId, channelName, channelId } = action.data; // get channel long id console.log('getting channel long id and short id'); let longId, shortId; try { - ({ data: {longChannelClaimId: longId, shortChannelClaimId: shortId} } = yield call(getChannelData, name, channelId)); + ({ data: {longChannelClaimId: longId, shortChannelClaimId: shortId} } = yield call(getChannelData, channelName, channelId)); } catch (error) { return yield put(onRequestError(error.message)); } // store the request in the channel requests list - yield put(addRequestToChannelRequests(id, null, name, longId, shortId)); + yield put(addRequestToChannelRequests(requestId, null, channelName, longId, shortId)); // get channel claims data console.log('getting channel claims data'); let claimsData; try { - ({ data: claimsData } = yield call(getChannelClaims, name, longId, 1)); + ({ data: claimsData } = yield call(getChannelClaims, channelName, longId, 1)); } catch (error) { return yield put(onRequestError(error.message)); } // store the channel data in the channel list - const channelKey = `c#${name}#${longId}`; - yield put(addNewChannelToChannelList(channelKey, name, shortId, longId, claimsData)); + const channelKey = `c#${channelName}#${longId}`; + yield put(addNewChannelToChannelList(channelKey, channelName, shortId, longId, claimsData)); // clear any request errors yield put(onRequestError(null)); } From 0cecc84dde0a91a0e15d3cbfe417b5fdfbb273d5 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 14 Feb 2018 12:09:57 -0800 Subject: [PATCH 88/96] consolidated requests into one list --- react/actions/show.js | 29 ++++++++++------ react/components/AssetDisplay/index.js | 4 +-- react/components/AssetInfo/index.js | 4 +-- react/components/AssetTitle/index.js | 4 +-- react/components/ShowAssetDetails/index.js | 6 ++-- react/components/ShowAssetLite/index.js | 7 ++-- react/components/ShowChannel/index.js | 4 +-- react/constants/show_action_types.js | 2 +- .../containers/ChannelClaimsDisplay/index.js | 4 +-- react/reducers/show.js | 34 ++++++------------- react/sagas/show_asset.js | 6 ++-- react/sagas/show_channel.js | 6 ++-- 12 files changed, 52 insertions(+), 58 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index cae8c4e3..ae67e44b 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -39,15 +39,22 @@ export function onNewAssetRequest (name, id, channelName, channelId, extension) }; }; -// asset actions - -export function addRequestToAssetRequests (id, error, name, claimId) { +export function addRequestToPreviousRequests (id, error, key) { return { - type: actions.ASSET_REQUEST_SUCCESS, - data: { id, error, name, claimId }, + type: actions.PREVIOUS_REQUEST_ADD, + data: { id, error, key }, }; }; +// asset actions + +// export function addRequestToAssetRequests (id, error, name, claimId) { +// return { +// type: actions.ASSET_REQUEST_ADD, +// data: { id, error, name, claimId }, +// }; +// }; + export function addAssetToAssetList (id, error, name, claimId, shortId, claimData) { return { type: actions.ASSET_ADD, @@ -57,12 +64,12 @@ export function addAssetToAssetList (id, error, name, claimId, shortId, claimDat // channel actions -export function addRequestToChannelRequests (id, error, name, longId, shortId) { - return { - type: actions.CHANNEL_REQUEST_ADD, - data: { id, error, name, longId, shortId }, - }; -}; +// export function addRequestToChannelRequests (id, error, name, longId, shortId) { +// return { +// type: actions.CHANNEL_REQUEST_ADD, +// data: { id, error, name, longId, shortId }, +// }; +// }; export function addNewChannelToChannelList (id, name, shortId, longId, claimsData) { return { diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index be3b5975..37e09c71 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -7,8 +7,8 @@ const mapStateToProps = ({ show }) => { const error = show.displayAsset.error; const status = show.displayAsset.status; // select asset - const request = show.assetRequests[show.request.id]; - const assetKey = `a#${request.name}#${request.claimId}`; + const request = show.previousRequests[show.request.id]; + const assetKey = request.key; const asset = show.assetList[assetKey]; // return props return { diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index f571574a..712dc75c 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -3,8 +3,8 @@ import View from './view'; const mapStateToProps = ({ show }) => { // select asset - const request = show.assetRequests[show.request.id]; - const assetKey = `a#${request.name}#${request.claimId}`; + const request = show.previousRequests[show.request.id]; + const assetKey = request.key; const asset = show.assetList[assetKey]; // return props return { diff --git a/react/components/AssetTitle/index.js b/react/components/AssetTitle/index.js index ff3b9792..ea6b9a7b 100644 --- a/react/components/AssetTitle/index.js +++ b/react/components/AssetTitle/index.js @@ -3,8 +3,8 @@ import View from './view'; const mapStateToProps = ({ show }) => { // select title - const request = show.assetRequests[show.request.id]; - const assetKey = `a#${request.name}#${request.claimId}`; + const request = show.previousRequests[show.request.id]; + const assetKey = request.key; const asset = show.assetList[assetKey]; let title; if (asset) { diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index d8061a34..d50108f5 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -7,10 +7,10 @@ const mapStateToProps = ({ show }) => { const requestId = show.request.id; // select asset info let asset; - const previousRequest = show.assetRequests[requestId] || null; + const request = show.previousRequests[requestId] || null; const assetList = show.assetList; - if (previousRequest) { - const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request + if (request && assetList) { + const assetKey = request.key; // note: just store this in the request asset = assetList[assetKey] || null; }; // return props diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index 40c09afd..d50108f5 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -7,11 +7,10 @@ const mapStateToProps = ({ show }) => { const requestId = show.request.id; // select asset info let asset; - const previousRequest = show.assetRequests[requestId] || null; - console.log('previous request:', previousRequest); + const request = show.previousRequests[requestId] || null; const assetList = show.assetList; - if (previousRequest) { - const assetKey = `a#${previousRequest.name}#${previousRequest.claimId}`; // note: just store this in the request + if (request && assetList) { + const assetKey = request.key; // note: just store this in the request asset = assetList[assetKey] || null; }; // return props diff --git a/react/components/ShowChannel/index.js b/react/components/ShowChannel/index.js index 8de0944f..7c4fb492 100644 --- a/react/components/ShowChannel/index.js +++ b/react/components/ShowChannel/index.js @@ -5,11 +5,11 @@ const mapStateToProps = ({ show }) => { // select request info const requestId = show.request.id; // select request - const previousRequest = show.channelRequests[requestId] || null; + const previousRequest = show.previousRequests[requestId] || null; // select channel let channel; if (previousRequest) { - const channelKey = `c#${previousRequest.name}#${previousRequest.longId}`; + const channelKey = previousRequest.key; channel = show.channelList[channelKey] || null; } return { diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 9927408e..7abb46f6 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -4,7 +4,7 @@ export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW'; export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW'; // asset actions -export const ASSET_REQUEST_SUCCESS = 'ASSET_REQUEST_SUCCESS'; +export const PREVIOUS_REQUEST_ADD = 'PREVIOUS_REQUEST_ADD'; export const ASSET_ADD = `ASSET_ADD`; // channel actions diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 0fd7b165..46a130dc 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -4,8 +4,8 @@ import View from './view'; const mapStateToProps = ({ show }) => { // select channel key - const request = show.channelRequests[show.request.id]; - const channelKey = `c#${request.name}#${request.longId}`; + const request = show.previousRequests[show.request.id]; + const channelKey = request.key; // select channel claims const channel = show.channelList[channelKey] || null; // return props diff --git a/react/reducers/show.js b/react/reducers/show.js index 699540ec..4eeac66e 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -7,11 +7,10 @@ const initialState = { type : null, id : null, }, - channelRequests: {}, - channelList : {}, - assetRequests : {}, - assetList : {}, - displayAsset : { + previousRequests: {}, + channelList : {}, + assetList : {}, + displayAsset : { error : null, status: LOCAL_CHECK, }, @@ -34,17 +33,17 @@ export default function (state = initialState, action) { id : action.data.requestId, }), }); - // asset actions - case actions.ASSET_REQUEST_SUCCESS: + // store requests + case actions.PREVIOUS_REQUEST_ADD: return Object.assign({}, state, { - assetRequests: Object.assign({}, state.assetRequests, { + previousRequests: Object.assign({}, state.previousRequests, { [action.data.id]: { - error : action.data.error, - name : action.data.name, - claimId: action.data.claimId, + error: action.data.error, + key : action.data.key, }, }), }); + // asset data case actions.ASSET_ADD: return Object.assign({}, state, { assetList: Object.assign({}, state.assetList, { @@ -57,18 +56,7 @@ export default function (state = initialState, action) { }, }), }); - // channel actions - case actions.CHANNEL_REQUEST_ADD: - return Object.assign({}, state, { - channelRequests: Object.assign({}, state.channelRequests, { - [action.data.id]: { - error : action.data.error, - name : action.data.name, - longId : action.data.longId, - shortId: action.data.shortId, - }, - }), - }); + // channel data case actions.CHANNEL_ADD: return Object.assign({}, state, { channelList: Object.assign({}, state.channelList, { diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index 6f21b0ec..37aca36e 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addRequestToAssetRequests, onRequestError, addAssetToAssetList } from 'actions/show'; +import { addRequestToPreviousRequests, onRequestError, addAssetToAssetList } from 'actions/show'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; function* newAssetRequest (action) { @@ -15,7 +15,8 @@ function* newAssetRequest (action) { return yield put(onRequestError(error.message)); } // put action to add request to asset request list - yield put(addRequestToAssetRequests(requestId, null, name, longId)); + const assetKey = `a#${name}#${longId}`; + yield put(addRequestToPreviousRequests(requestId, null, assetKey)); // get short Id console.log(`getting asset short id ${name} ${longId}`); let shortId; @@ -33,7 +34,6 @@ function* newAssetRequest (action) { return yield put(onRequestError(error.message)); } // put action to add asset to asset list - const assetKey = `a#${name}#${longId}`; yield put(addAssetToAssetList(assetKey, null, name, longId, shortId, claimData)); // clear any errors in request error yield put(onRequestError(null)); diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index 981d6cc7..864a4b85 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addNewChannelToChannelList, addRequestToChannelRequests, onRequestError, updateChannelClaims } from 'actions/show'; +import { addNewChannelToChannelList, addRequestToPreviousRequests, onRequestError, updateChannelClaims } from 'actions/show'; import { getChannelClaims, getChannelData } from 'api/channelApi'; function* getNewChannelAndUpdateChannelList (action) { @@ -14,7 +14,8 @@ function* getNewChannelAndUpdateChannelList (action) { return yield put(onRequestError(error.message)); } // store the request in the channel requests list - yield put(addRequestToChannelRequests(requestId, null, channelName, longId, shortId)); + const channelKey = `c#${channelName}#${longId}`; + yield put(addRequestToPreviousRequests(requestId, null, channelKey)); // get channel claims data console.log('getting channel claims data'); let claimsData; @@ -24,7 +25,6 @@ function* getNewChannelAndUpdateChannelList (action) { return yield put(onRequestError(error.message)); } // store the channel data in the channel list - const channelKey = `c#${channelName}#${longId}`; yield put(addNewChannelToChannelList(channelKey, channelName, shortId, longId, claimsData)); // clear any request errors yield put(onRequestError(null)); From 0548906c4d213fef3189a7e743797f7a097fdf9b Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 14 Feb 2018 12:19:43 -0800 Subject: [PATCH 89/96] renamed previousRequests to requestList --- react/actions/show.js | 2 +- react/components/AssetDisplay/index.js | 2 +- react/components/AssetInfo/index.js | 2 +- react/components/AssetTitle/index.js | 2 +- react/components/ShowAssetDetails/index.js | 3 +-- react/components/ShowAssetLite/index.js | 3 +-- react/components/ShowChannel/index.js | 2 +- react/containers/ChannelClaimsDisplay/index.js | 2 +- react/reducers/show.js | 4 ++-- react/sagas/show_asset.js | 4 ++-- react/sagas/show_channel.js | 4 ++-- 11 files changed, 14 insertions(+), 16 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index ae67e44b..0712cb26 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -39,7 +39,7 @@ export function onNewAssetRequest (name, id, channelName, channelId, extension) }; }; -export function addRequestToPreviousRequests (id, error, key) { +export function addRequestToRequestList (id, error, key) { return { type: actions.PREVIOUS_REQUEST_ADD, data: { id, error, key }, diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 37e09c71..2b5c9e26 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -7,7 +7,7 @@ const mapStateToProps = ({ show }) => { const error = show.displayAsset.error; const status = show.displayAsset.status; // select asset - const request = show.previousRequests[show.request.id]; + const request = show.requestList[show.request.id]; const assetKey = request.key; const asset = show.assetList[assetKey]; // return props diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 712dc75c..792a8040 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -3,7 +3,7 @@ import View from './view'; const mapStateToProps = ({ show }) => { // select asset - const request = show.previousRequests[show.request.id]; + const request = show.requestList[show.request.id]; const assetKey = request.key; const asset = show.assetList[assetKey]; // return props diff --git a/react/components/AssetTitle/index.js b/react/components/AssetTitle/index.js index ea6b9a7b..c91886df 100644 --- a/react/components/AssetTitle/index.js +++ b/react/components/AssetTitle/index.js @@ -3,7 +3,7 @@ import View from './view'; const mapStateToProps = ({ show }) => { // select title - const request = show.previousRequests[show.request.id]; + const request = show.requestList[show.request.id]; const assetKey = request.key; const asset = show.assetList[assetKey]; let title; diff --git a/react/components/ShowAssetDetails/index.js b/react/components/ShowAssetDetails/index.js index d50108f5..0af0073c 100644 --- a/react/components/ShowAssetDetails/index.js +++ b/react/components/ShowAssetDetails/index.js @@ -2,12 +2,11 @@ import { connect } from 'react-redux'; import View from './view'; const mapStateToProps = ({ show }) => { - console.log('mapping state to props', show); // select request info const requestId = show.request.id; // select asset info let asset; - const request = show.previousRequests[requestId] || null; + const request = show.requestList[requestId] || null; const assetList = show.assetList; if (request && assetList) { const assetKey = request.key; // note: just store this in the request diff --git a/react/components/ShowAssetLite/index.js b/react/components/ShowAssetLite/index.js index d50108f5..0af0073c 100644 --- a/react/components/ShowAssetLite/index.js +++ b/react/components/ShowAssetLite/index.js @@ -2,12 +2,11 @@ import { connect } from 'react-redux'; import View from './view'; const mapStateToProps = ({ show }) => { - console.log('mapping state to props', show); // select request info const requestId = show.request.id; // select asset info let asset; - const request = show.previousRequests[requestId] || null; + const request = show.requestList[requestId] || null; const assetList = show.assetList; if (request && assetList) { const assetKey = request.key; // note: just store this in the request diff --git a/react/components/ShowChannel/index.js b/react/components/ShowChannel/index.js index 7c4fb492..120f75b4 100644 --- a/react/components/ShowChannel/index.js +++ b/react/components/ShowChannel/index.js @@ -5,7 +5,7 @@ const mapStateToProps = ({ show }) => { // select request info const requestId = show.request.id; // select request - const previousRequest = show.previousRequests[requestId] || null; + const previousRequest = show.requestList[requestId] || null; // select channel let channel; if (previousRequest) { diff --git a/react/containers/ChannelClaimsDisplay/index.js b/react/containers/ChannelClaimsDisplay/index.js index 46a130dc..8a943f14 100644 --- a/react/containers/ChannelClaimsDisplay/index.js +++ b/react/containers/ChannelClaimsDisplay/index.js @@ -4,7 +4,7 @@ import View from './view'; const mapStateToProps = ({ show }) => { // select channel key - const request = show.previousRequests[show.request.id]; + const request = show.requestList[show.request.id]; const channelKey = request.key; // select channel claims const channel = show.channelList[channelKey] || null; diff --git a/react/reducers/show.js b/react/reducers/show.js index 4eeac66e..afad0df1 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -7,7 +7,7 @@ const initialState = { type : null, id : null, }, - previousRequests: {}, + requestList: {}, channelList : {}, assetList : {}, displayAsset : { @@ -36,7 +36,7 @@ export default function (state = initialState, action) { // store requests case actions.PREVIOUS_REQUEST_ADD: return Object.assign({}, state, { - previousRequests: Object.assign({}, state.previousRequests, { + requestList: Object.assign({}, state.requestList, { [action.data.id]: { error: action.data.error, key : action.data.key, diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index 37aca36e..588fa9d8 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addRequestToPreviousRequests, onRequestError, addAssetToAssetList } from 'actions/show'; +import { addRequestToRequestList, onRequestError, addAssetToAssetList } from 'actions/show'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; function* newAssetRequest (action) { @@ -16,7 +16,7 @@ function* newAssetRequest (action) { } // put action to add request to asset request list const assetKey = `a#${name}#${longId}`; - yield put(addRequestToPreviousRequests(requestId, null, assetKey)); + yield put(addRequestToRequestList(requestId, null, assetKey)); // get short Id console.log(`getting asset short id ${name} ${longId}`); let shortId; diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index 864a4b85..f7ac99ef 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -1,6 +1,6 @@ import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; -import { addNewChannelToChannelList, addRequestToPreviousRequests, onRequestError, updateChannelClaims } from 'actions/show'; +import { addNewChannelToChannelList, addRequestToRequestList, onRequestError, updateChannelClaims } from 'actions/show'; import { getChannelClaims, getChannelData } from 'api/channelApi'; function* getNewChannelAndUpdateChannelList (action) { @@ -15,7 +15,7 @@ function* getNewChannelAndUpdateChannelList (action) { } // store the request in the channel requests list const channelKey = `c#${channelName}#${longId}`; - yield put(addRequestToPreviousRequests(requestId, null, channelKey)); + yield put(addRequestToRequestList(requestId, null, channelKey)); // get channel claims data console.log('getting channel claims data'); let claimsData; From 7a8466ef68ed21053c9845f6a2b90f528073c121 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 14 Feb 2018 12:30:30 -0800 Subject: [PATCH 90/96] added an asset selector --- react/components/AssetDisplay/index.js | 5 ++--- react/components/AssetInfo/index.js | 5 ++--- react/components/AssetTitle/index.js | 9 ++------- react/components/AssetTitle/view.jsx | 2 +- react/selectors/asset.js | 7 +++++++ 5 files changed, 14 insertions(+), 14 deletions(-) create mode 100644 react/selectors/asset.js diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 2b5c9e26..9a4ab58f 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -1,15 +1,14 @@ import { connect } from 'react-redux'; import View from './view'; import { fileRequested } from 'actions/show'; +import selectAsset from 'selectors/asset'; const mapStateToProps = ({ show }) => { // select error and status const error = show.displayAsset.error; const status = show.displayAsset.status; // select asset - const request = show.requestList[show.request.id]; - const assetKey = request.key; - const asset = show.assetList[assetKey]; + const asset = selectAsset(show); // return props return { error, diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 792a8040..93a17591 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -1,11 +1,10 @@ import { connect } from 'react-redux'; import View from './view'; +import selectAsset from 'selectors/asset'; const mapStateToProps = ({ show }) => { // select asset - const request = show.requestList[show.request.id]; - const assetKey = request.key; - const asset = show.assetList[assetKey]; + const asset = selectAsset(show); // return props return { asset, diff --git a/react/components/AssetTitle/index.js b/react/components/AssetTitle/index.js index c91886df..76872f6d 100644 --- a/react/components/AssetTitle/index.js +++ b/react/components/AssetTitle/index.js @@ -1,15 +1,10 @@ import { connect } from 'react-redux'; import View from './view'; +import selectAsset from 'selectors/asset'; const mapStateToProps = ({ show }) => { // select title - const request = show.requestList[show.request.id]; - const assetKey = request.key; - const asset = show.assetList[assetKey]; - let title; - if (asset) { - title = asset.claimData.title; - }; + const { claimData: { title } } = selectAsset(show); // return props return { title, diff --git a/react/components/AssetTitle/view.jsx b/react/components/AssetTitle/view.jsx index f943a940..38e59257 100644 --- a/react/components/AssetTitle/view.jsx +++ b/react/components/AssetTitle/view.jsx @@ -1,6 +1,6 @@ import React from 'react'; -const AssetTitle = ({title}) => { +const AssetTitle = ({ title }) => { return (
{title} diff --git a/react/selectors/asset.js b/react/selectors/asset.js new file mode 100644 index 00000000..bee2858c --- /dev/null +++ b/react/selectors/asset.js @@ -0,0 +1,7 @@ +const selectAsset = (show) => { + const request = show.requestList[show.request.id]; + const assetKey = request.key; + return show.assetList[assetKey]; +}; + +export default selectAsset; From 960893e7752e6adb098776e5dce11d2ea5aab70a Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 14 Feb 2018 17:10:44 -0800 Subject: [PATCH 91/96] added clearing of error to assetDisplay --- react/actions/show.js | 16 ---------------- react/sagas/file.js | 1 + 2 files changed, 1 insertion(+), 16 deletions(-) diff --git a/react/actions/show.js b/react/actions/show.js index 0712cb26..8dd6b732 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -48,13 +48,6 @@ export function addRequestToRequestList (id, error, key) { // asset actions -// export function addRequestToAssetRequests (id, error, name, claimId) { -// return { -// type: actions.ASSET_REQUEST_ADD, -// data: { id, error, name, claimId }, -// }; -// }; - export function addAssetToAssetList (id, error, name, claimId, shortId, claimData) { return { type: actions.ASSET_ADD, @@ -64,13 +57,6 @@ export function addAssetToAssetList (id, error, name, claimId, shortId, claimDat // channel actions -// export function addRequestToChannelRequests (id, error, name, longId, shortId) { -// return { -// type: actions.CHANNEL_REQUEST_ADD, -// data: { id, error, name, longId, shortId }, -// }; -// }; - export function addNewChannelToChannelList (id, name, shortId, longId, claimsData) { return { type: actions.CHANNEL_ADD, @@ -78,8 +64,6 @@ export function addNewChannelToChannelList (id, name, shortId, longId, claimsDat }; }; -// update channel data - export function onUpdateChannelClaims (channelKey, name, longId, page) { return { type: actions.CHANNEL_CLAIMS_UPDATE_ASYNC, diff --git a/react/sagas/file.js b/react/sagas/file.js index 263da808..66639b23 100644 --- a/react/sagas/file.js +++ b/react/sagas/file.js @@ -15,6 +15,7 @@ function* retrieveFile (action) { return yield put(updateDisplayAssetError(error.message)); }; if (isAvailable) { + yield put(updateDisplayAssetError(null)); return yield put(updateFileAvailability(AVAILABLE)); } yield put(updateFileAvailability(UNAVAILABLE)); From 0a228de66076ad3d55668f4531c979a3aba29187 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 14 Feb 2018 17:26:11 -0800 Subject: [PATCH 92/96] moved url parsing to its own action saga --- react/actions/show.js | 11 +++++- react/constants/show_action_types.js | 4 +- react/containers/ShowPage/index.js | 7 ++-- react/containers/ShowPage/view.jsx | 59 +--------------------------- react/reducers/show.js | 2 +- react/sagas/index.js | 2 + react/sagas/show_uri.js | 58 +++++++++++++++++++++++++++ 7 files changed, 77 insertions(+), 66 deletions(-) create mode 100644 react/sagas/show_uri.js diff --git a/react/actions/show.js b/react/actions/show.js index 8dd6b732..3a23b66d 100644 --- a/react/actions/show.js +++ b/react/actions/show.js @@ -3,12 +3,19 @@ import * as actions from 'constants/show_action_types'; import { CHANNEL, ASSET_LITE, ASSET_DETAILS } from 'constants/show_request_types'; // basic request parsing +export function handleShowPageUri (params) { + return { + type: actions.HANDLE_SHOW_URI, + data: params, + }; +}; + export function onRequestError (error) { return { type: actions.REQUEST_UPDATE_ERROR, data: error, }; -} +}; export function onNewChannelRequest (channelName, channelId) { const requestType = CHANNEL; @@ -41,7 +48,7 @@ export function onNewAssetRequest (name, id, channelName, channelId, extension) export function addRequestToRequestList (id, error, key) { return { - type: actions.PREVIOUS_REQUEST_ADD, + type: actions.REQUEST_LIST_ADD, data: { id, error, key }, }; }; diff --git a/react/constants/show_action_types.js b/react/constants/show_action_types.js index 7abb46f6..5137d13b 100644 --- a/react/constants/show_action_types.js +++ b/react/constants/show_action_types.js @@ -1,14 +1,14 @@ // request actions +export const HANDLE_SHOW_URI = 'HANDLE_SHOW_URI'; export const REQUEST_UPDATE_ERROR = 'REQUEST_UPDATE_ERROR'; export const ASSET_REQUEST_NEW = 'ASSET_REQUEST_NEW'; export const CHANNEL_REQUEST_NEW = 'CHANNEL_REQUEST_NEW'; +export const REQUEST_LIST_ADD = 'REQUEST_LIST_ADD'; // asset actions -export const PREVIOUS_REQUEST_ADD = 'PREVIOUS_REQUEST_ADD'; export const ASSET_ADD = `ASSET_ADD`; // channel actions -export const CHANNEL_REQUEST_ADD = 'CHANNEL_REQUEST_ADD'; export const CHANNEL_ADD = 'CHANNEL_ADD'; export const CHANNEL_CLAIMS_UPDATE_ASYNC = 'CHANNEL_CLAIMS_UPDATE_ASYNC'; diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js index 8ba6752e..705de666 100644 --- a/react/containers/ShowPage/index.js +++ b/react/containers/ShowPage/index.js @@ -1,5 +1,6 @@ import { connect } from 'react-redux'; -import { onRequestError, onNewChannelRequest, onNewAssetRequest } from 'actions/show'; +import { handleShowPageUri } from 'actions/show'; +// import { onRequestError, onNewChannelRequest, onNewAssetRequest } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { @@ -10,9 +11,7 @@ const mapStateToProps = ({ show }) => { }; const mapDispatchToProps = { - onRequestError, - onNewChannelRequest, - onNewAssetRequest, + handleShowPageUri, }; export default connect(mapStateToProps, mapDispatchToProps)(View); diff --git a/react/containers/ShowPage/view.jsx b/react/containers/ShowPage/view.jsx index b431dd53..cf565f02 100644 --- a/react/containers/ShowPage/view.jsx +++ b/react/containers/ShowPage/view.jsx @@ -3,73 +3,18 @@ import ErrorPage from 'components/ErrorPage'; import ShowAssetLite from 'components/ShowAssetLite'; import ShowAssetDetails from 'components/ShowAssetDetails'; import ShowChannel from 'components/ShowChannel'; -import lbryUri from 'utils/lbryUri'; import { CHANNEL, ASSET_LITE, ASSET_DETAILS } from 'constants/show_request_types'; class ShowPage extends React.Component { - constructor (props) { - super(props); - this.parseUrlAndUpdateState = this.parseUrlAndUpdateState.bind(this); - this.parseAndUpdateIdentifierAndClaim = this.parseAndUpdateIdentifierAndClaim.bind(this); - this.parseAndUpdateClaimOnly = this.parseAndUpdateClaimOnly.bind(this); - } componentDidMount () { - const { identifier, claim } = this.props.match.params; - this.parseUrlAndUpdateState(identifier, claim); + this.props.handleShowPageUri(this.props.match.params); } componentWillReceiveProps (nextProps) { if (nextProps.match.params !== this.props.match.params) { - const { identifier, claim } = nextProps.match.params; - this.parseUrlAndUpdateState(identifier, claim); + this.props.handleShowPageUri(nextProps.match.params); } } - parseUrlAndUpdateState (identifier, claim) { - if (identifier) { - return this.parseAndUpdateIdentifierAndClaim(identifier, claim); - } - this.parseAndUpdateClaimOnly(claim); - } - parseAndUpdateIdentifierAndClaim (modifier, claim) { - // this is a request for an asset - // claim will be an asset claim - // the identifier could be a channel or a claim id - let isChannel, channelName, channelClaimId, claimId, claimName, extension; - try { - ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(modifier)); - ({ claimName, extension } = lbryUri.parseClaim(claim)); - } catch (error) { - return this.props.onRequestError(error.message); - } - // update the store - if (isChannel) { - return this.props.onNewAssetRequest(claimName, null, channelName, channelClaimId, extension); - } else { - return this.props.onNewAssetRequest(claimName, claimId, null, null, extension); - } - } - parseAndUpdateClaimOnly (claim) { - // this could be a request for an asset or a channel page - // claim could be an asset claim or a channel claim - let isChannel, channelName, channelClaimId; - try { - ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(claim)); - } catch (error) { - return this.props.onRequestError(error.message); - } - // return early if this request is for a channel - if (isChannel) { - return this.props.onNewChannelRequest(channelName, channelClaimId); - } - // if not for a channel, parse the claim request - let claimName, extension; // if I am destructuring below, do I still need to declare these here? - try { - ({claimName, extension} = lbryUri.parseClaim(claim)); - } catch (error) { - return this.props.onRequestError(error.message); - } - this.props.onNewAssetRequest(claimName, null, null, null, extension); - } render () { const { error, requestType } = this.props; if (error) { diff --git a/react/reducers/show.js b/react/reducers/show.js index afad0df1..c1de617d 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -34,7 +34,7 @@ export default function (state = initialState, action) { }), }); // store requests - case actions.PREVIOUS_REQUEST_ADD: + case actions.REQUEST_LIST_ADD: return Object.assign({}, state, { requestList: Object.assign({}, state.requestList, { [action.data.id]: { diff --git a/react/sagas/index.js b/react/sagas/index.js index fc8a4529..e2b808c2 100644 --- a/react/sagas/index.js +++ b/react/sagas/index.js @@ -1,10 +1,12 @@ import { all } from 'redux-saga/effects'; +import { watchHandleShowPageUri } from './show_uri'; import { watchNewAssetRequest } from './show_asset'; import { watchNewChannelRequest, watchUpdateChannelClaims } from './show_channel'; import { watchFileIsRequested } from './file'; export default function* rootSaga () { yield all([ + watchHandleShowPageUri(), watchNewAssetRequest(), watchNewChannelRequest(), watchUpdateChannelClaims(), diff --git a/react/sagas/show_uri.js b/react/sagas/show_uri.js new file mode 100644 index 00000000..f0973d67 --- /dev/null +++ b/react/sagas/show_uri.js @@ -0,0 +1,58 @@ +import { takeLatest } from 'redux-saga/effects'; +import * as actions from 'constants/show_action_types'; +import { onRequestError, onNewChannelRequest, onNewAssetRequest } from 'actions/show'; +import lbryUri from 'utils/lbryUri'; + +function parseAndUpdateIdentifierAndClaim (modifier, claim) { + // this is a request for an asset + // claim will be an asset claim + // the identifier could be a channel or a claim id + let isChannel, channelName, channelClaimId, claimId, claimName, extension; + try { + ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(modifier)); + ({ claimName, extension } = lbryUri.parseClaim(claim)); + } catch (error) { + return onRequestError(error.message); + } + // trigger an new action to update the store + if (isChannel) { + return onNewAssetRequest(claimName, null, channelName, channelClaimId, extension); + } else { + return onNewAssetRequest(claimName, claimId, null, null, extension); + } +} +function parseAndUpdateClaimOnly (claim) { + // this could be a request for an asset or a channel page + // claim could be an asset claim or a channel claim + let isChannel, channelName, channelClaimId; + try { + ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(claim)); + } catch (error) { + return onRequestError(error.message); + } + // trigger an new action to update the store + // return early if this request is for a channel + if (isChannel) { + return onNewChannelRequest(channelName, channelClaimId); + } + // if not for a channel, parse the claim request + let claimName, extension; + try { + ({claimName, extension} = lbryUri.parseClaim(claim)); + } catch (error) { + return onRequestError(error.message); + } + onNewAssetRequest(claimName, null, null, null, extension); +} + +function* handleShowPageUri (action) { + const { params: { identifier, claim } } = action.data; + if (identifier) { + return parseAndUpdateIdentifierAndClaim(identifier, claim); + } + parseAndUpdateClaimOnly(claim); +}; + +export function* watchHandleShowPageUri () { + yield takeLatest(actions.HANDLE_SHOW_URI, handleShowPageUri); +}; From 5f60af596e81333e3ccd6c7ae6cc5268310a53c2 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 14 Feb 2018 17:40:11 -0800 Subject: [PATCH 93/96] fixed handleShowPageUri saga --- react/sagas/show_uri.js | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/react/sagas/show_uri.js b/react/sagas/show_uri.js index f0973d67..0ac519ee 100644 --- a/react/sagas/show_uri.js +++ b/react/sagas/show_uri.js @@ -1,9 +1,10 @@ -import { takeLatest } from 'redux-saga/effects'; +import { call, put, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; import { onRequestError, onNewChannelRequest, onNewAssetRequest } from 'actions/show'; import lbryUri from 'utils/lbryUri'; -function parseAndUpdateIdentifierAndClaim (modifier, claim) { +function* parseAndUpdateIdentifierAndClaim (modifier, claim) { + console.log('parseAndUpdateIdentifierAndClaim'); // this is a request for an asset // claim will be an asset claim // the identifier could be a channel or a claim id @@ -12,45 +13,46 @@ function parseAndUpdateIdentifierAndClaim (modifier, claim) { ({ isChannel, channelName, channelClaimId, claimId } = lbryUri.parseIdentifier(modifier)); ({ claimName, extension } = lbryUri.parseClaim(claim)); } catch (error) { - return onRequestError(error.message); + return yield put(onRequestError(error.message)); } // trigger an new action to update the store if (isChannel) { - return onNewAssetRequest(claimName, null, channelName, channelClaimId, extension); - } else { - return onNewAssetRequest(claimName, claimId, null, null, extension); - } + return yield put(onNewAssetRequest(claimName, null, channelName, channelClaimId, extension)); + }; + yield put(onNewAssetRequest(claimName, claimId, null, null, extension)); } -function parseAndUpdateClaimOnly (claim) { +function* parseAndUpdateClaimOnly (claim) { + console.log('parseAndUpdateIdentifierAndClaim'); // this could be a request for an asset or a channel page // claim could be an asset claim or a channel claim let isChannel, channelName, channelClaimId; try { ({ isChannel, channelName, channelClaimId } = lbryUri.parseIdentifier(claim)); } catch (error) { - return onRequestError(error.message); + return yield put(onRequestError(error.message)); } // trigger an new action to update the store // return early if this request is for a channel if (isChannel) { - return onNewChannelRequest(channelName, channelClaimId); + return yield put(onNewChannelRequest(channelName, channelClaimId)); } // if not for a channel, parse the claim request let claimName, extension; try { ({claimName, extension} = lbryUri.parseClaim(claim)); } catch (error) { - return onRequestError(error.message); + return yield put(onRequestError(error.message)); } - onNewAssetRequest(claimName, null, null, null, extension); + yield put(onNewAssetRequest(claimName, null, null, null, extension)); } function* handleShowPageUri (action) { - const { params: { identifier, claim } } = action.data; + console.log('handleShowPageUri'); + const { identifier, claim } = action.data; if (identifier) { - return parseAndUpdateIdentifierAndClaim(identifier, claim); + return yield call(parseAndUpdateIdentifierAndClaim, identifier, claim); } - parseAndUpdateClaimOnly(claim); + yield call(parseAndUpdateClaimOnly, claim); }; export function* watchHandleShowPageUri () { From 8e94d4e162e8647d4359c7daedcb427230213e27 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 14 Feb 2018 17:42:12 -0800 Subject: [PATCH 94/96] removed commented dead code --- react/components/ShowChannel/view.jsx | 6 ------ react/containers/ShowPage/index.js | 1 - 2 files changed, 7 deletions(-) diff --git a/react/components/ShowChannel/view.jsx b/react/components/ShowChannel/view.jsx index 3539cdf7..3867cde2 100644 --- a/react/components/ShowChannel/view.jsx +++ b/react/components/ShowChannel/view.jsx @@ -4,12 +4,6 @@ import NavBar from 'containers/NavBar'; import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; class ShowChannel extends React.Component { - // componentDidMount () { - // const { channel, requestId, requestChannelName, requestChannelId } = this.props; - // if (!channel) { - // return this.props.onNewChannelRequest(requestId, requestChannelName, requestChannelId); // check the channel you have in the request and see you have no channel so fetch that channel? - // } - // } render () { const { channel } = this.props; if (channel) { diff --git a/react/containers/ShowPage/index.js b/react/containers/ShowPage/index.js index 705de666..077d00c2 100644 --- a/react/containers/ShowPage/index.js +++ b/react/containers/ShowPage/index.js @@ -1,6 +1,5 @@ import { connect } from 'react-redux'; import { handleShowPageUri } from 'actions/show'; -// import { onRequestError, onNewChannelRequest, onNewAssetRequest } from 'actions/show'; import View from './view'; const mapStateToProps = ({ show }) => { From 588ebfb55a54360ee7233303f71603c6e70c1966 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 14 Feb 2018 18:02:10 -0800 Subject: [PATCH 95/96] added state checks to newAssetRequest --- react/components/AssetDisplay/index.js | 2 +- react/components/AssetInfo/index.js | 2 +- react/components/AssetTitle/index.js | 2 +- react/reducers/show.js | 8 ++++---- react/sagas/show_asset.js | 21 +++++++++++++++++---- react/selectors/{asset.js => show.js} | 6 ++++-- 6 files changed, 28 insertions(+), 13 deletions(-) rename react/selectors/{asset.js => show.js} (53%) diff --git a/react/components/AssetDisplay/index.js b/react/components/AssetDisplay/index.js index 9a4ab58f..a401f98f 100644 --- a/react/components/AssetDisplay/index.js +++ b/react/components/AssetDisplay/index.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux'; import View from './view'; import { fileRequested } from 'actions/show'; -import selectAsset from 'selectors/asset'; +import { selectAsset } from 'selectors/show'; const mapStateToProps = ({ show }) => { // select error and status diff --git a/react/components/AssetInfo/index.js b/react/components/AssetInfo/index.js index 93a17591..32fc3f2f 100644 --- a/react/components/AssetInfo/index.js +++ b/react/components/AssetInfo/index.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import View from './view'; -import selectAsset from 'selectors/asset'; +import { selectAsset } from 'selectors/show'; const mapStateToProps = ({ show }) => { // select asset diff --git a/react/components/AssetTitle/index.js b/react/components/AssetTitle/index.js index 76872f6d..537d6948 100644 --- a/react/components/AssetTitle/index.js +++ b/react/components/AssetTitle/index.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import View from './view'; -import selectAsset from 'selectors/asset'; +import { selectAsset } from 'selectors/show'; const mapStateToProps = ({ show }) => { // select title diff --git a/react/reducers/show.js b/react/reducers/show.js index c1de617d..114fe06c 100644 --- a/react/reducers/show.js +++ b/react/reducers/show.js @@ -7,10 +7,10 @@ const initialState = { type : null, id : null, }, - requestList: {}, - channelList : {}, - assetList : {}, - displayAsset : { + requestList : {}, + channelList : {}, + assetList : {}, + displayAsset: { error : null, status: LOCAL_CHECK, }, diff --git a/react/sagas/show_asset.js b/react/sagas/show_asset.js index 588fa9d8..62d9995f 100644 --- a/react/sagas/show_asset.js +++ b/react/sagas/show_asset.js @@ -1,11 +1,19 @@ -import { call, put, takeLatest } from 'redux-saga/effects'; +import { call, put, select, takeLatest } from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; import { addRequestToRequestList, onRequestError, addAssetToAssetList } from 'actions/show'; import { getLongClaimId, getShortId, getClaimData } from 'api/assetApi'; +import { selectShowState } from 'selectors/show'; function* newAssetRequest (action) { const { requestId, name, modifier } = action.data; - // get long id + const state = yield select(selectShowState); + // is this an existing request? + // If this uri is in the request list, it's already been fetched + if (state.requestList[requestId]) { + console.log('that request already exists in the request list!'); + return null; + } + // get long id && add request to request list console.log(`getting asset long id ${name}`); let longId; try { @@ -14,9 +22,14 @@ function* newAssetRequest (action) { console.log('error:', error); return yield put(onRequestError(error.message)); } - // put action to add request to asset request list const assetKey = `a#${name}#${longId}`; yield put(addRequestToRequestList(requestId, null, assetKey)); + // is this an existing asset? + // If this asset is in the asset list, it's already been fetched + if (state.assetList[assetKey]) { + console.log('that asset already exists in the asset list!'); + return null; + } // get short Id console.log(`getting asset short id ${name} ${longId}`); let shortId; @@ -33,7 +46,7 @@ function* newAssetRequest (action) { } catch (error) { return yield put(onRequestError(error.message)); } - // put action to add asset to asset list + // add asset to asset list yield put(addAssetToAssetList(assetKey, null, name, longId, shortId, claimData)); // clear any errors in request error yield put(onRequestError(null)); diff --git a/react/selectors/asset.js b/react/selectors/show.js similarity index 53% rename from react/selectors/asset.js rename to react/selectors/show.js index bee2858c..b3b5ba92 100644 --- a/react/selectors/asset.js +++ b/react/selectors/show.js @@ -1,7 +1,9 @@ -const selectAsset = (show) => { +export const selectAsset = (show) => { const request = show.requestList[show.request.id]; const assetKey = request.key; return show.assetList[assetKey]; }; -export default selectAsset; +export const selectShowState = (state) => { + return state.show; +}; From 89db6948aded30e8bfac5be47fd6c36d17a4b3dc Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 14 Feb 2018 18:08:39 -0800 Subject: [PATCH 96/96] added state checks to newChannelRequest --- react/sagas/show_channel.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/react/sagas/show_channel.js b/react/sagas/show_channel.js index f7ac99ef..34d7ecd3 100644 --- a/react/sagas/show_channel.js +++ b/react/sagas/show_channel.js @@ -1,10 +1,18 @@ -import { call, put, takeLatest } from 'redux-saga/effects'; +import {call, put, select, takeLatest} from 'redux-saga/effects'; import * as actions from 'constants/show_action_types'; import { addNewChannelToChannelList, addRequestToRequestList, onRequestError, updateChannelClaims } from 'actions/show'; import { getChannelClaims, getChannelData } from 'api/channelApi'; +import { selectShowState } from 'selectors/show'; function* getNewChannelAndUpdateChannelList (action) { const { requestId, channelName, channelId } = action.data; + const state = yield select(selectShowState); + // is this an existing request? + // If this uri is in the request list, it's already been fetched + if (state.requestList[requestId]) { + console.log('that request already exists in the request list!'); + return null; + } // get channel long id console.log('getting channel long id and short id'); let longId, shortId; @@ -16,6 +24,12 @@ function* getNewChannelAndUpdateChannelList (action) { // store the request in the channel requests list const channelKey = `c#${channelName}#${longId}`; yield put(addRequestToRequestList(requestId, null, channelKey)); + // is this an existing channel? + // If this channel is in the channel list, it's already been fetched + if (state.channelList[channelKey]) { + console.log('that channel already exists in the channel list!'); + return null; + } // get channel claims data console.log('getting channel claims data'); let claimsData;