|
@ -14,17 +14,18 @@ class Topic extends Component { |
|
|
|
|
|
|
|
|
this.fetchSubject = this.fetchSubject.bind(this); |
|
|
this.fetchSubject = this.fetchSubject.bind(this); |
|
|
|
|
|
|
|
|
this.topicSubject = null; |
|
|
this.state = { |
|
|
this.topicSubjectFetchStatus = "pending"; |
|
|
topicSubject: null, |
|
|
|
|
|
topicSubjectFetchStatus: 'pending' |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async fetchSubject(topicID) { |
|
|
async fetchSubject(topicID) { |
|
|
this.topicSubjectFetchStatus = "fetching"; |
|
|
var topicSubject; |
|
|
|
|
|
|
|
|
if (this.props.topicData.value[1] === this.props.user.address) { |
|
|
if (this.props.topicData.value[1] === this.props.user.address) { |
|
|
let orbitData = this.props.orbitDB.topicsDB.get(topicID); |
|
|
let orbitData = this.props.orbitDB.topicsDB.get(topicID); |
|
|
this.topicSubject = orbitData['subject']; |
|
|
topicSubject = orbitData['subject'] |
|
|
this.topicSubjectFetchStatus = "fetched"; |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
const fullAddress = "/orbitdb/" + this.props.topicData.value[0] + "/topics"; |
|
|
const fullAddress = "/orbitdb/" + this.props.topicData.value[0] + "/topics"; |
|
|
const store = await this.props.orbitDB.orbitdb.keyvalue(fullAddress); |
|
|
const store = await this.props.orbitDB.orbitdb.keyvalue(fullAddress); |
|
@ -32,15 +33,19 @@ class Topic extends Component { |
|
|
|
|
|
|
|
|
let localOrbitData = store.get(topicID); |
|
|
let localOrbitData = store.get(topicID); |
|
|
if (localOrbitData) { |
|
|
if (localOrbitData) { |
|
|
this.topicSubject = localOrbitData['subject']; |
|
|
topicSubject = localOrbitData['subject']; |
|
|
} else { |
|
|
} else { |
|
|
// Wait until we have received something from the network
|
|
|
// Wait until we have received something from the network
|
|
|
store.events.on('replicated', () => { |
|
|
store.events.on('replicated', () => { |
|
|
this.topicSubject = store.get(topicID)['subject']; |
|
|
topicSubject = store.get(topicID)['subject']; |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
this.topicSubjectFetchStatus = "fetched"; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.setState({ |
|
|
|
|
|
topicSubject: topicSubject, |
|
|
|
|
|
topicSubjectFetchStatus: 'fetched' |
|
|
|
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
render(){ |
|
|
render(){ |
|
@ -48,9 +53,9 @@ class Topic extends Component { |
|
|
<Card link className="card" |
|
|
<Card link className="card" |
|
|
onClick={() => {this.props.history.push("/topic/" + this.props.topicID)}}> |
|
|
onClick={() => {this.props.history.push("/topic/" + this.props.topicID)}}> |
|
|
<Card.Content> |
|
|
<Card.Content> |
|
|
<div className={"topic-subject" + (this.topicSubject ? "" : " grey-text")}> |
|
|
<div className={"topic-subject" + (this.state.topicSubject ? "" : " grey-text")}> |
|
|
<p><strong> |
|
|
<p><strong> |
|
|
{this.topicSubject !== null ? this.topicSubject |
|
|
{this.state.topicSubject !== null ? this.state.topicSubject |
|
|
:<ContentLoader height={5.8} width={300} speed={2} |
|
|
:<ContentLoader height={5.8} width={300} speed={2} |
|
|
primaryColor="#b2e8e6" secondaryColor="#00b5ad" > |
|
|
primaryColor="#b2e8e6" secondaryColor="#00b5ad" > |
|
|
<rect x="0" y="0" rx="3" ry="3" width="150" height="5.5" /> |
|
|
<rect x="0" y="0" rx="3" ry="3" width="150" height="5.5" /> |
|
@ -84,9 +89,18 @@ class Topic extends Component { |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
componentDidMount() { |
|
|
|
|
|
if (this.props.topicData !== null && |
|
|
|
|
|
this.state.topicSubjectFetchStatus === "pending" && |
|
|
|
|
|
this.props.orbitDB.ipfsInitialized && |
|
|
|
|
|
this.props.orbitDB.orbitdb) { |
|
|
|
|
|
this.fetchSubject(this.props.topicID); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
componentDidUpdate() { |
|
|
componentDidUpdate() { |
|
|
if (this.props.topicData !== null && |
|
|
if (this.props.topicData !== null && |
|
|
this.topicSubjectFetchStatus === "pending" && |
|
|
this.state.topicSubjectFetchStatus === "pending" && |
|
|
this.props.orbitDB.ipfsInitialized && |
|
|
this.props.orbitDB.ipfsInitialized && |
|
|
this.props.orbitDB.orbitdb) { |
|
|
this.props.orbitDB.orbitdb) { |
|
|
this.fetchSubject(this.props.topicID); |
|
|
this.fetchSubject(this.props.topicID); |
|
|