Skip to content
This repository has been archived by the owner on Nov 5, 2019. It is now read-only.

Refactoring for "Browse datasets on Data Together" tutorial #50

Closed
wants to merge 2 commits into from
Closed

Refactoring for "Browse datasets on Data Together" tutorial #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb960f3
first cuts
b5 Aug 25, 2017
06afeb6
fix content page not loading on direct visit
b5 Aug 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/js/components/item/PrimerItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const PrimerItem = ({ data }) => {
return (
<div className="primer item col-md-4">
<div className="card">
<Link to={`/primers/${primer.id}`}>
<Link to={`/public-record/${primer.id}`}>
<header className="colorized">
<h3>{primer.shortTitle}</h3>
</header>
Expand Down
4 changes: 2 additions & 2 deletions src/js/components/item/SourceItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ const SourceItem = ({ data }) => {
<div className="source item col-md-3">
<Link to={`/sources/${source.id}`}>
<h4 className="title">{source.title}</h4>
<div className="info">
{/* <div className="info">
<ProgressBar size="micro" color="blue" total={source.stats.contentUrlCount} progress={source.stats.contentMetadataCount} />
<i>{source.stats.contentMetadataCount}/{source.stats.contentUrlCount}</i>
</div>
</div> */}
</Link>
</div>
);
Expand Down
34 changes: 26 additions & 8 deletions src/js/containers/Content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ import React, { PropTypes } from 'react';
import { connect } from 'react-redux';

import analytics from '../analytics';
import { loadConsensus } from '../actions/consensus';
import { loadContentMetadata, loadContentUrls } from '../actions/content';
import { selectConsensus } from '../selectors/consensus';
import { selectContentUrls, selectContentMetadata } from '../selectors/content';
import { selectUrlByHash } from '../selectors/url';
import { contentStats } from '../selectors/content';

import Consensus from '../components/Consensus';
import HistoryItem from '../components/item/HistoryItem';
Expand All @@ -11,20 +17,16 @@ import StatsBar from '../components/StatsBar';
import TabBar from '../components/TabBar';
import UrlItem from '../components/item/UrlItem';
import MetadataEditor from './MetadataEditor';
import Spinner from '../components/Spinner';

import { loadConsensus } from '../actions/consensus';
import { loadContentMetadata, loadContentUrls } from '../actions/content';
import { selectConsensus } from '../selectors/consensus';
import { selectContentUrls, selectContentMetadata } from '../selectors/content';
import { selectUrlByHash } from '../selectors/url';
import { contentStats } from '../selectors/content';

class Content extends React.Component {
constructor(props) {
super(props);

this.state = {
tab: "metadata",
loading: !props.url,
};

[
Expand All @@ -38,6 +40,9 @@ class Content extends React.Component {
}

componentWillReceiveProps(nextProps) {
if (nextProps.url && !this.props.url && this.state.loading) {
this.setState({ loading: false });
}
if (nextProps.hash != this.props.hash) {
this.props.loadContentUrls(nextProps.hash);
}
Expand Down Expand Up @@ -81,7 +86,17 @@ class Content extends React.Component {

render() {
const { hash, url } = this.props;
const { tab } = this.state;
const { tab, loading } = this.state;

if (loading) {
return (
<div className="content page">
<div className="container">
<Spinner />
</div>
</div>
);
}

return (
<div id="content" className="content page">
Expand All @@ -92,6 +107,7 @@ class Content extends React.Component {
<hr className="" />
<label className="label">Content</label>
<h3 className="title">{url && url.fileName ? url.fileName : "unnamed content"}</h3>
<p>{`/ipfs/${url.hash}`}</p>
{url && <a className="btn" href={url.contentUrl} download={url.fileName}>Download File</a> }
<hr />
</div>
Expand All @@ -102,7 +118,9 @@ class Content extends React.Component {
<div className="container">
<TabBar value={tab} tabs={["metadata", "urls", "history", "consensus"]} onChange={this.handleSetTab} color="yellow" />
<div className="row">
{this.renderCurrentTab()}
<div className="col-md-12">
{this.renderCurrentTab()}
</div>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/js/containers/MetadataEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,21 +72,21 @@ class MetadataEditor extends React.Component {

if (savedMetadata && !metadata) {
return (
<div className="metadata editor col-md-12">
<div className="metadata editor">
<Metadata metadata={savedMetadata.meta} />
{sessionKeyId ? <button className="btn btn-primary" onClick={this.handleEdit}>Edit</button> : <p><Link to="/signup">Signup</Link> to edit metadata.</p>}
</div>
);
} else if (!metadata) {
return (
<div className="metadata editor col-md-12">
<div className="metadata editor">
{sessionKeyId ? <button className="btn btn-primary" onClick={this.handleNew}>Add Metadata</button> : <p><Link to="/signup">Signup</Link> to add metadata.</p>}
</div>
);
}

return (
<div className="metadata editor col-md-12">
<div className="metadata editor">
<a className="helpToggle right" onClick={this.handleToggleHelp}>{showHelp ? "hide help" : "show help" }</a>
<MetadataForm
data={metadata.meta}
Expand Down
18 changes: 10 additions & 8 deletions src/js/containers/Primer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ class Primer extends React.Component {
<div className="primer container">
<div className="row">
<div className="col-md-12">
<h3 className="title">Sub-Primers:</h3>
{/* <h3 className="title">Sub-Primers:</h3> */}
<br />
</div>
</div>
Expand All @@ -65,7 +65,8 @@ class Primer extends React.Component {
<div className="source container">
<div className="row">
<div className="col-md-12">
<h3>Sources:</h3>
<hr />
{/* <h3 className="title">Sources:</h3> */}
<br />
</div>
</div>
Expand All @@ -91,7 +92,7 @@ class Primer extends React.Component {
<div className="row">
<div className="col-md-12">
<hr/>
<label className="label">Primer</label>
<label className="label">The Public Record</label>
<h1 className="title">{primer.title}</h1>
</div>
</div>
Expand All @@ -102,15 +103,16 @@ class Primer extends React.Component {
</div>
<div className="row">
<div className="col-md-12">
<ProgressBar
{/* <ProgressBar
total={primer.stats.contentUrlCount}
progress={primer.stats.contentMetadataCount}
/>
/>*/}
<hr />
<StatsBar
stats={{
urls: primer.stats.urlCount,
content: primer.stats.contentUrlCount,
documented: primer.stats.contentMetadataCount,
urls: primer.stats.urlCount || 0,
content: primer.stats.contentUrlCount || 0,
documented: primer.stats.contentMetadataCount || 0,
}}
/>
</div>
Expand Down
30 changes: 23 additions & 7 deletions src/js/containers/PublicRecord.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,14 @@ import { selectSearchQuery, selectSearchResults } from '../selectors/search';
import { selectRecentContentUrls } from '../selectors/content';
import { selectRecentSources } from '../selectors/sources';

import { selectPrimers } from '../selectors/primers';
import { loadPrimers } from '../actions/primers';

import List from '../components/List';
import SearchResultItem from '../components/item/SearchResultItem';
import ContentItem from '../components/item/ContentItem';
import SourceItem from '../components/item/SourceItem';
import PrimerItem from '../components/item/PrimerItem';

class PublicRecord extends React.Component {
constructor(props) {
Expand All @@ -32,7 +36,8 @@ class PublicRecord extends React.Component {
componentWillMount() {
analytics.page('public-record');
this.props.loadRecentContentUrls(1, 25);
this.props.loadSources(1, 3);
this.props.loadPrimers(1, 3);
// this.props.loadSources(1, 3);
}

handleSearchChange(e) {
Expand Down Expand Up @@ -69,26 +74,36 @@ class PublicRecord extends React.Component {
<div className="col-md-12">
<label className="label">results</label>
</div>
<List component={SearchResultItem} data={this.props.results} />
{this.renderArchiveUrl()}
<div className="col-md-12">
<List component={SearchResultItem} data={this.props.results} />
{this.renderArchiveUrl()}
</div>
</div>
);
}


renderRecentContent() {
return (
<div>
<div className="row">
<div className="col-md-12">
<br />
<label className="label">Collections:</label>
</div>
<List data={this.props.primers} component={PrimerItem} />
</div>
{/* <div className="row">
<div className="col-md-12">
<hr />
<label className="label">Sources</label>
</div>
<List data={this.props.sources} component={SourceItem} />
</div>
</div> */}
<div className="row">
<div className="col-md-12">
<hr />
<label className="label">New Content Needing Metadata:</label>
<label className="label">Content:</label>
</div>
<List component={ContentItem} data={this.props.recentContent} />
</div>
Expand All @@ -101,7 +116,6 @@ class PublicRecord extends React.Component {

return (
<div id="public-record" className="public-record page">
<header>
<div className="container">
<div className="row">
<div className="col-md-12">
Expand All @@ -113,7 +127,6 @@ class PublicRecord extends React.Component {
</div>
</div>
</div>
</header>
<div className="container">
{results.length ?
this.renderSearchResults() :
Expand All @@ -128,6 +141,7 @@ class PublicRecord extends React.Component {
PublicRecord.propTypes = {
// pages: PropTypes.object.isRequired,
search: PropTypes.func.isRequired,
loadPrimers: PropTypes.func.isRequired,
};

PublicRecord.defaultProps = {
Expand All @@ -141,6 +155,7 @@ function mapStateToProps(state, ownProps) {
results: selectSearchResults(state),
recentContent: selectRecentContentUrls(state),
sources: selectRecentSources(state),
primers: selectPrimers(state),
}, ownProps);
}

Expand All @@ -149,4 +164,5 @@ export default connect(mapStateToProps, {
loadRecentContentUrls,
archiveUrl,
search,
loadPrimers,
})(PublicRecord);
26 changes: 17 additions & 9 deletions src/js/containers/Source.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Link } from 'react-router';
import { connect } from 'react-redux';

import analytics from '../analytics';
import { selectSource, selectSourceUndescribedUrls, selectSourceAttributedUrls } from '../selectors/sources';
import { selectSource, selectSourceUrls, selectSourceUndescribedUrls, selectSourceAttributedUrls } from '../selectors/sources';
import { loadSource, loadSourceUrls, loadSourceAttributedUrls } from '../actions/source';

import List from '../components/List';
Expand Down Expand Up @@ -81,7 +81,7 @@ class Source extends React.Component {

render() {
const { loading, tab } = this.state;
const { source } = this.props;
const { source, urls } = this.props;

if (loading) {
return <Spinner />;
Expand All @@ -97,18 +97,19 @@ class Source extends React.Component {
<label className="label">Source</label>
<h1 className="title">{source.title}</h1>
<p>{source.url}</p>
<label className="label">Primer:</label>
<Link className="primer" to={`/primers/${source.primer.id}`}>
<label className="label">Record:</label>
<Link className="primer" to={`/public-record/${source.primer.id}`}>
<h5 className="title">{source.primer.title}</h5>
</Link>
</div>
</div>
<div className="row">
<div className="col-md-12">
<ProgressBar
{/* <ProgressBar
total={source.stats.contentUrlCount}
progress={source.stats.contentMetadataCount}
/>
/> */}
<hr />
<StatsBar
stats={{
urls: source.stats.urlCount,
Expand All @@ -121,12 +122,18 @@ class Source extends React.Component {
</div>
</header>
<div className="container">
<div className="row">
{/* <div className="row">
<div className="col-md-12">
<TabBar value={tab} tabs={["unattributed content", "attributed content"]} onChange={this.handleChangeTab} color="orange" />
</div>
</div>
{this.renderCurrentTab()}
{this.renderCurrentTab()} */}
<div className="row">
<div className="col-md-12">
<h4 className="title">Content:</h4>
</div>
<List data={urls} component={UrlItem} />
</div>
</div>
</div>
);
Expand All @@ -149,7 +156,8 @@ function mapStateToProps(state, ownProps) {
id: ownProps.params.id,
source: selectSource(state, ownProps.params.id),

urls: selectSourceUndescribedUrls(state, ownProps.params.id),
urls: selectSourceUrls(state, ownProps.params.id),
// urls: selectSourceUndescribedUrls(state, ownProps.params.id),
attributedUrls: selectSourceAttributedUrls(state, ownProps.params.id),
};
}
Expand Down
4 changes: 1 addition & 3 deletions src/js/middleware/socket.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,6 @@ function meetExpectation(action) {
}
}

console.log(__BUILD__);

// the URL to dial to
const WEBSOCKET_URL = (__BUILD__.DEVELOP) ?
`ws://${window.location.hostname}:${__BUILD__.WEBSOCKET_PORT}/ws`:
Expand Down Expand Up @@ -97,7 +95,7 @@ export function connect(dispatch, reconnectTimeout = 6500) {
console.log(e);
return;
}
console.log(res);
// console.log(res);
if (res.schema) {
try {
res.response = normalize(res.data, Schemas[res.schema]);
Expand Down
4 changes: 4 additions & 0 deletions src/js/routes.dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@ export default {
path: "/public-record",
component: PublicRecord,
},
{
path: "/public-record/:id",
component: Primer,
},
{
path: "/collections",
component: Collections,
Expand Down
6 changes: 6 additions & 0 deletions src/js/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,12 @@ export default {
import('./containers/PublicRecord').then(loadRoute(cb)).catch(errorLoading);
},
},
{
path: '/public-record/:id',
getComponent(location, cb) {
import('./containers/Primer').then(loadRoute(cb)).catch(errorLoading);
},
},
{
path: '/collections',
getComponent(location, cb) {
Expand Down
Loading