changed color if user is following the same topic

This commit is contained in:
Leon Liang 2019-12-03 19:15:23 -05:00
parent acecf704dc
commit 7141bf9000

View File

@ -21,6 +21,7 @@ import Typography from "@material-ui/core/Typography";
import AddCircle from "@material-ui/icons/AddCircle"; import AddCircle from "@material-ui/icons/AddCircle";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import VerifiedIcon from "@material-ui/icons/CheckSharp"; import VerifiedIcon from "@material-ui/icons/CheckSharp";
import DoneIcon from "@material-ui/icons/Done";
// component // component
import "../App.css"; import "../App.css";
@ -75,7 +76,8 @@ class user extends Component {
topics: null, topics: null,
user: null, user: null,
following: null, following: null,
posts: null posts: null,
myTopics: null
}; };
} }
@ -128,7 +130,10 @@ class user extends Component {
.get("/user") .get("/user")
.then(res => { .then(res => {
this.setState({ this.setState({
following: res.data.credentials.following.includes(this.state.profile) following: res.data.credentials.following.includes(
this.state.profile
),
myTopics: res.data.credentials.followedTopics
}); });
}) })
.catch(err => console.log(err)); .catch(err => console.log(err));
@ -171,9 +176,31 @@ class user extends Component {
) : ( ) : (
<p>loading username...</p> <p>loading username...</p>
); );
console.log(this.state.topics);
console.log(this.state.myTopics);
let topicsMarkup = this.state.topics ? ( let topicsMarkup = this.state.topics ? (
this.state.topics.map( this.state.topics.map(
topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id) topic =>
this.state.myTopics ? (
this.state.myTopics.includes(topic) ? (
<MyChip
label={topic}
key={{ topic }.topic.id}
onDelete
deleteIcon={<DoneIcon />}
/>
) : (
<MyChip
label={topic}
key={{ topic }.topic.id}
color="secondary"
/>
)
) : (
<p></p>
)
// topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
) )
) : ( ) : (
<p> no topic yet</p> <p> no topic yet</p>