95 lines
2.5 KiB
JavaScript
95 lines
2.5 KiB
JavaScript
import { h, Component } from 'preact';
|
|
import sendFollowUser from '../utilities/sendFollowUser';
|
|
import SidebarUser from './sidebarUser';
|
|
|
|
class SidebarWidget extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.getSuggestedUsers = this.getSuggestedUsers.bind(this);
|
|
this.getTagInfo = this.getTagInfo.bind(this);
|
|
this.followUser = this.followUser.bind(this);
|
|
this.state = {
|
|
tagInfo: {},
|
|
suggestedUsers: [],
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getTagInfo();
|
|
this.getSuggestedUsers();
|
|
}
|
|
|
|
getTagInfo() {
|
|
this.setState({
|
|
tagInfo: JSON.parse(
|
|
document.getElementById('sidebarWidget__pack').dataset.tagInfo,
|
|
),
|
|
});
|
|
}
|
|
|
|
getSuggestedUsers() {
|
|
const { tagInfo } = this.state;
|
|
fetch(`/users?state=sidebar_suggestions&tag=${tagInfo.name}`, {
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json',
|
|
},
|
|
credentials: 'same-origin',
|
|
})
|
|
.then((response) => response.json())
|
|
.then((json) => {
|
|
this.setState({ suggestedUsers: json });
|
|
})
|
|
.catch((error) => {
|
|
this.setState({ suggestedUsers: [] });
|
|
Honeybadger.notify(error);
|
|
});
|
|
}
|
|
|
|
followUser(user) {
|
|
const { suggestedUsers } = this.state;
|
|
const updatedUser = user;
|
|
const updatedSuggestedUsers = suggestedUsers;
|
|
const userIndex = suggestedUsers.indexOf(user);
|
|
|
|
const followBtn = document.getElementById(
|
|
`widget-list-item__follow-button-${updatedUser.username}`,
|
|
);
|
|
followBtn.innerText = updatedUser.following ? '+ FOLLOW' : '✓ FOLLOWING';
|
|
|
|
const toggleFollowState = (newFollowState) => {
|
|
updatedUser.following = newFollowState === 'followed';
|
|
updatedSuggestedUsers[userIndex] = updatedUser;
|
|
this.setState({ suggestedUsers: updatedSuggestedUsers });
|
|
};
|
|
sendFollowUser(user, toggleFollowState);
|
|
}
|
|
|
|
render() {
|
|
const { suggestedUsers } = this.state;
|
|
const users = suggestedUsers.map((user, index) => (
|
|
<SidebarUser
|
|
key={user.id}
|
|
user={user}
|
|
followUser={this.followUser}
|
|
index={index}
|
|
/>
|
|
));
|
|
|
|
if (suggestedUsers.length > 0) {
|
|
return (
|
|
<div className="widget" id="widget-00001">
|
|
<div className="widget-suggested-follows-container">
|
|
<header>
|
|
<h4>who to follow</h4>
|
|
</header>
|
|
<div className="widget-body">{users}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return <div />;
|
|
}
|
|
}
|
|
|
|
export default SidebarWidget;
|