diff --git a/ui/js/component/channelTile/index.js b/ui/js/component/channelTile/index.js
new file mode 100644
index 000000000..2e4c438f7
--- /dev/null
+++ b/ui/js/component/channelTile/index.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { connect } from "react-redux";
+import { doFetchClaimCountByChannel } from "actions/content";
+import { makeSelectClaimForUri } from "selectors/claims";
+import { doNavigate } from "actions/navigation";
+import { makeSelectTotalItemsForChannel } from "selectors/content";
+import ChannelTile from "./view";
+
+const select = (state, props) => ({
+ claim: makeSelectClaimForUri(props.uri)(state),
+ totalItems: makeSelectTotalItemsForChannel(props.uri)(state),
+});
+
+const perform = dispatch => ({
+ fetchClaimCount: uri => dispatch(doFetchClaimCountByChannel(uri)),
+ navigate: (path, params) => dispatch(doNavigate(path, params)),
+});
+
+export default connect(select, perform)(ChannelTile);
diff --git a/ui/js/component/channelTile/view.jsx b/ui/js/component/channelTile/view.jsx
new file mode 100644
index 000000000..973d1dff5
--- /dev/null
+++ b/ui/js/component/channelTile/view.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { TruncatedText, BusyMessage } from "component/common.js";
+
+class ChannelTile extends React.PureComponent {
+ componentDidMount() {
+ const { uri, fetchClaimCount } = this.props;
+
+ fetchClaimCount(uri);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ const { uri, fetchClaimCount } = this.props;
+
+ if (nextProps.uri != uri) {
+ fetchClaimCount(uri);
+ }
+ }
+
+ render() {
+ const { navigate, totalItems, uri } = this.props;
+
+ let onClick = () => navigate("/show", { uri });
+
+ return (
+
+
+
{__("An updated version of LBRY is now available.")} diff --git a/ui/js/selectors/content.js b/ui/js/selectors/content.js index 0818134de..8e083ca93 100644 --- a/ui/js/selectors/content.js +++ b/ui/js/selectors/content.js @@ -34,6 +34,13 @@ export const selectChannelPages = createSelector( state => state.channelPages || {} ); +export const makeSelectTotalItemsForChannel = uri => { + return createSelector( + selectChannelPages, + byUri => (byUri && byUri[uri]) * 10 + ); +}; + export const makeSelectTotalPagesForChannel = uri => { return createSelector(selectChannelPages, byUri => byUri && byUri[uri]); };