fetch featured channels #1064
19155
package-lock.json
generated
Normal file
|
@ -33,7 +33,9 @@ class UserPhoneVerify extends React.PureComponent {
|
||||||
<Form onSubmit={this.handleSubmit.bind(this)}>
|
<Form onSubmit={this.handleSubmit.bind(this)}>
|
||||||
<p>
|
<p>
|
||||||
{__(
|
{__(
|
||||||
`Please enter the verification code sent to +${countryCode}${phone}. Didn't receive it? `
|
`Please enter the verification code sent to +${countryCode}${
|
||||||
|
phone
|
||||||
|
}. Didn't receive it? `
|
||||||
)}
|
)}
|
||||||
<Link onClick={this.reset.bind(this)} label="Go back." />
|
<Link onClick={this.reset.bind(this)} label="Go back." />
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -2,11 +2,18 @@ import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { doFetchFeaturedUris } from 'redux/actions/content';
|
import { doFetchFeaturedUris } from 'redux/actions/content';
|
||||||
import { selectFeaturedUris, selectFetchingFeaturedUris } from 'redux/selectors/content';
|
import { selectFeaturedUris, selectFetchingFeaturedUris } from 'redux/selectors/content';
|
||||||
|
|||||||
|
import { selectClaimsById, selectAllClaimsByChannel } from 'redux/selectors/claims';
|
||||||
|
import { selectDiscover } from 'redux/selectors/discover';
|
||||||
import DiscoverPage from './view';
|
import DiscoverPage from './view';
|
||||||
|
|
||||||
const select = state => ({
|
const select = state => ({
|
||||||
featuredUris: selectFeaturedUris(state),
|
|
||||||
fetchingFeaturedUris: selectFetchingFeaturedUris(state),
|
fetchingFeaturedUris: selectFetchingFeaturedUris(state),
|
||||||
|
categories: selectDiscover(state),
|
||||||
|
|
||||||
|
// we shouldn't need these
|
||||||
|
featuredUris: selectFeaturedUris(state),
|
||||||
if we don't need them, can you take them out? if we don't need them, can you take them out?
|
|||||||
|
claimsById: selectClaimsById(state),
|
||||||
|
claimsByChannel: selectAllClaimsByChannel(state),
|
||||||
});
|
});
|
||||||
|
|
||||||
const perform = dispatch => ({
|
const perform = dispatch => ({
|
||||||
|
|
|
@ -222,13 +222,21 @@ export class FeaturedCategory extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
class DiscoverPage extends React.PureComponent {
|
class DiscoverPage extends React.PureComponent {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
Can this logic be either moved into Can this logic be either moved into `<FeaturedCategory>` and/or moved into a selector that is called by `<FeaturedCategory>`?
I moved all this logic into I can kind of see doing to logic for each category separately but I would need to think about it and it doesn't seem like it will be nearly as clean as this. I moved all this logic into `selectDiscover` and am calling it from the `Discover` page and it's working correctly. Calling it from `<FeaturedCategory>` doesn't make sense to me because the selector returns an object which is mapped to many `<FeaturedCategory>`s in the view.
I can kind of see doing to logic for each category separately but I would need to think about it and it doesn't seem like it will be nearly as clean as this.
|
|||||||
|
super(props);
|
||||||
|
}
|
||||||
componentWillMount() {
|
componentWillMount() {
|
||||||
this.props.fetchFeaturedUris();
|
this.props.fetchFeaturedUris();
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { featuredUris, fetchingFeaturedUris } = this.props;
|
const {
|
||||||
const hasContent = typeof featuredUris === 'object' && Object.keys(featuredUris).length,
|
fetchingFeaturedUris,
|
||||||
|
categories
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const hasContent = typeof categories === 'object' && Object.keys(categories).length,
|
||||||
failedToLoad = !fetchingFeaturedUris && !hasContent;
|
failedToLoad = !fetchingFeaturedUris && !hasContent;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -240,14 +248,23 @@ class DiscoverPage extends React.PureComponent {
|
||||||
<SubHeader fullWidth smallMargin />
|
<SubHeader fullWidth smallMargin />
|
||||||
{!hasContent && fetchingFeaturedUris && <BusyMessage message={__('Fetching content')} />}
|
{!hasContent && fetchingFeaturedUris && <BusyMessage message={__('Fetching content')} />}
|
||||||
{hasContent &&
|
{hasContent &&
|
||||||
Object.keys(featuredUris).map(
|
Object.keys(categories).map(
|
||||||
category =>
|
category =>
|
||||||
featuredUris[category].length ? (
|
categories[category].length ? (
|
||||||
<FeaturedCategory
|
category.indexOf('@') === 0 ? (
|
||||||
key={category}
|
<FeaturedCategory
|
||||||
category={category}
|
key={category}
|
||||||
names={featuredUris[category]}
|
category={category.split('#')[0]}
|
||||||
/>
|
categoryLink={category}
|
||||||
|
names={categories[category]}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<FeaturedCategory
|
||||||
|
key={category}
|
||||||
|
category={category}
|
||||||
|
names={categories[category]}
|
||||||
|
/>
|
||||||
|
)
|
||||||
) : (
|
) : (
|
||||||
''
|
''
|
||||||
)
|
)
|
||||||
|
|
|
@ -78,21 +78,25 @@ export function doFetchFeaturedUris() {
|
||||||
});
|
});
|
||||||
|
|
||||||
const success = ({ Uris }) => {
|
const success = ({ Uris }) => {
|
||||||
|
Uris['@LupoTV'] = [];
|
||||||
I appreciate you leaving this in for testing purposes, obviously remove this when it is ready to merge I appreciate you leaving this in for testing purposes, obviously remove this when it is ready to merge
|
|||||||
let urisToResolve = [];
|
let urisToResolve = [];
|
||||||
|
let actions = [];
|
||||||
use const, when possible use const, when possible
|
|||||||
Object.keys(Uris).forEach(category => {
|
Object.keys(Uris).forEach(category => {
|
||||||
urisToResolve = [...urisToResolve, ...Uris[category]];
|
if (category.indexOf('@') === 0 && !Uris[category].length) {
|
||||||
|
actions.push(doFetchClaimsByChannel(category, 1));
|
||||||
|
} else {
|
||||||
|
urisToResolve = [...urisToResolve, ...Uris[category]];
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const actions = [
|
actions.push(doResolveUris(urisToResolve));
|
||||||
doResolveUris(urisToResolve),
|
actions.push({
|
||||||
{
|
type: ACTIONS.FETCH_FEATURED_CONTENT_COMPLETED,
|
||||||
type: ACTIONS.FETCH_FEATURED_CONTENT_COMPLETED,
|
data: {
|
||||||
data: {
|
uris: Uris,
|
||||||
uris: Uris,
|
success: true,
|
||||||
success: true,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
];
|
});
|
||||||
dispatch(batchActions(...actions));
|
dispatch(batchActions(...actions));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -277,7 +281,9 @@ export function doLoadVideo(uri) {
|
||||||
});
|
});
|
||||||
dispatch(
|
dispatch(
|
||||||
doAlertError(
|
doAlertError(
|
||||||
`Failed to download ${uri}, please try again. If this problem persists, visit https://lbry.io/faq/support for support.`
|
`Failed to download ${
|
||||||
|
uri
|
||||||
|
}, please try again. If this problem persists, visit https://lbry.io/faq/support for support.`
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
35
src/renderer/redux/selectors/discover.js
Normal file
|
@ -0,0 +1,35 @@
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import { selectFeaturedUris } from './content';
|
||||||
|
import { selectClaimsById, selectAllClaimsByChannel } from './claims';
|
||||||
|
|
||||||
|
export const selectDiscover = createSelector(
|
||||||
|
[selectFeaturedUris, selectClaimsById, selectAllClaimsByChannel],
|
||||||
|
(featuredUris, claimsById, claimsByChannel) => {
|
||||||
|
let categories = featuredUris;
|
||||||
|
if (!!categories && !!claimsByChannel) {
|
||||||
unnecessary to do unnecessary to do `!!`
|
|||||||
|
let channels = [];
|
||||||
|
Object.keys(categories).forEach(key => {
|
||||||
|
if (key.indexOf('@') === 0) {
|
||||||
|
channels.push(key);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
Object.keys(claimsByChannel).forEach(key => {
|
||||||
|
if (channels.includes(key)) {
|
||||||
you could take out the other forEach loop if you change this line to you could take out the other forEach loop if you change this line to
`if(categories[key].indexOf('@') === 0)`
|
|||||||
|
delete categories[key];
|
||||||
|
const ids = claimsByChannel[key][1];
|
||||||
|
let uris = [];
|
||||||
|
const newKey = `${key}#${claimsById[ids[0]].value.publisherSignature.certificateId}`;
|
||||||
instead of using string interpolation, the proper way to do with is with the (I know I told you this method was fine earlier, sorry about that) instead of using string interpolation, the proper way to do with is with the `buildURI` function
(I know I told you this method was fine earlier, sorry about that)
|
|||||||
|
ids.forEach(id => {
|
||||||
instead of all of these loops, you should learn how to use i dont think this would block merging, however, here is a rough sketch of how i would do this
and in fact you could even set
this could cut out a lot of this code and make it shorter. It's something you should play around with. instead of all of these loops, you should learn how to use `map`, `reduce`, `filter`, etc.
i dont think this would block merging, however, here is a rough sketch of how i would do this
```
uri = ids.filter(id => claimsById[id]).map(id => `${claimsById[id.name}#${claimsById[id.claim_id}`);
```
and in fact you could even set
```
categories[newKey] = ids.filter(id => claimsById[id]).map(id => `${claimsById[id.name}#${claimsById[id.claim_id}`);
```
this could cut out a lot of this code and make it shorter. It's something you should play around with.
|
|||||||
|
const claim = claimsById[id] ? claimsById[id] : null;
|
||||||
|
if (claim) {
|
||||||
|
uris.push(`${claim.name}#${claim.claim_id}`);
|
||||||
same here, use buildURI same here, use buildURI
|
|||||||
|
}
|
||||||
|
});
|
||||||
|
categories[newKey] = uris;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
console.log("select:", categories);
|
||||||
obviously remove when ready to merge :) obviously remove when ready to merge :)
|
|||||||
|
return categories;
|
||||||
|
}
|
||||||
|
);
|
you don't use this