maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Prettier linted stuff

Browse source
This commit is contained in:
Zhao-Andy 2018-04-25 13:54:58 -04:00
parent be14ed029d
commit 2f0edd1149
5 changed files with 96 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/packs/sidebarWidget.jsx
View file

@ -1,8 +1,10 @@
import { h, render } from 'preact';
import SidebarWidget from '../sidebar-widget/SidebarWidget';
HTMLDocument.prototype.ready = new Promise((resolve) => {
if (document.readyState !== 'loading') { return resolve(); }
HTMLDocument.prototype.ready = new Promise(resolve => {
if (document.readyState !== 'loading') {
return resolve();
}
document.addEventListener('DOMContentLoaded', () => resolve());
});

31
app/javascript/sidebar-widget/SidebarWidget.jsx
View file

@ -1,5 +1,4 @@
import { h, Component } from 'preact';
import PropTypes from 'prop-types';
import sendFollowUser from '../src/utils/sendFollowUser';
import SidebarUser from './sidebarUser';
@ -14,14 +13,18 @@ class SidebarWidget extends Component {
suggestedUsers: [],
};
}
componentDidMount() {
this.getTagInfo();
this.getSuggestedUsers();
}
getTagInfo() {
this.setState({ tagInfo: JSON.parse(document.getElementById('sidebarWidget__pack').dataset.tagInfo) });
this.setState({
tagInfo: JSON.parse(
document.getElementById('sidebarWidget__pack').dataset.tagInfo,
),
});
}
getSuggestedUsers() {
@ -33,16 +36,16 @@ class SidebarWidget extends Component {
credentials: 'same-origin',
})
.then(response => response.json())
.then((json) => {
.then(json => {
this.setState({ suggestedUsers: json });
})
.catch((error) => {
.catch(error => {
console.log(error);
});
}
followUser(user) {
const toggleFollowState = (newFollowState) => {
const toggleFollowState = newFollowState => {
const updatedUser = user;
const updatedSuggestedUsers = this.state.suggestedUsers;
const userIndex = this.state.suggestedUsers.indexOf(user);
@ -54,19 +57,13 @@ class SidebarWidget extends Component {
}
render() {
const users = this.state.suggestedUsers.map((user) => {
return(
<SidebarUser key={user.id} user={user} followUser={this.followUser} />
);
});
const users = this.state.suggestedUsers.map(user => (
<SidebarUser key={user.id} user={user} followUser={this.followUser} />
));
return (
<div className="widget-suggested-follows-container">
<header>
{"<WHO TO FOLLOW>"}
</header>
<div className="widget-body">
{users}
</div>
<header>{'<WHO TO FOLLOW>'}</header>
<div className="widget-body">{users}</div>
</div>
);
}

18
app/javascript/sidebar-widget/sidebarUser.jsx
View file

@ -12,20 +12,28 @@ class SidebarUser extends Component {
}
render() {
return(
return (
<div className="widget-list-item__suggestions">
<div className="widget-list-item__content">
<a href={`/${this.props.user.username}`}>
<img src={this.props.user.profile_image_url} alt={this.props.user.name} className="widget-list-item__profile-pic" />
<img
src={this.props.user.profile_image_url}
alt={this.props.user.name}
className="widget-list-item__profile-pic"
/>
{this.props.user.name}
</a>
<button className="widget-list-item__follow-button" type="button" onClick={this.onClick}>
<button
className="widget-list-item__follow-button"
type="button"
onClick={this.onClick}
>
{this.props.user.following ? '✓ FOLLOWING' : '+ FOLLOW'}
</button>
</div>
<hr />
</div>
)
);
}
}
@ -34,4 +42,4 @@ SidebarUser.propTypes = {
user: PropTypes.object.isRequired,
};
export default SidebarUser;
export default SidebarUser;

84
app/javascript/src/Onboarding.jsx
View file

@ -44,14 +44,18 @@ class Onboarding extends Component {
getUserTags() {
fetch('/api/tags/onboarding')
.then(response => response.json())
.then((json) => {
const followedTagNames = JSON.parse(document.body.getAttribute('data-user')).followed_tag_names;
.then(json => {
const followedTagNames = JSON.parse(
document.body.getAttribute('data-user'),
).followed_tag_names;
function checkFollowingStatus(followedTags, jsonTags) {
const newJSON = jsonTags;
jsonTags.map((tag, index) => {
if (followedTags.includes(tag.name)) {
newJSON[index].following = true;
} else { newJSON[index].following = false; }
} else {
newJSON[index].following = false;
}
return newJSON;
});
return newJSON;
@ -59,7 +63,7 @@ class Onboarding extends Component {
const updatedJSON = checkFollowingStatus(followedTagNames, json);
this.setState({ allTags: updatedJSON });
})
.catch((error) => {
.catch(error => {
console.log(error);
});
}
@ -73,12 +77,12 @@ class Onboarding extends Component {
credentials: 'same-origin',
})
.then(response => response.json())
.then((json) => {
.then(json => {
if (this.state.users.length === 0) {
this.setState({ users: json, checkedUsers: json });
}
})
.catch((error) => {
.catch(error => {
console.log(error);
});
}
@ -99,14 +103,15 @@ class Onboarding extends Component {
credentials: 'same-origin',
})
.then(response => response.json())
.then((json) => {
.then(json => {
this.setState({ articles: json, savedArticles: json });
});
}
handleBulkFollowUsers(users) {
if (this.state.checkedUsers.length > 0 && !this.state.followRequestSent) {
const csrfToken = document.querySelector("meta[name='csrf-token']").content;
const csrfToken = document.querySelector("meta[name='csrf-token']")
.content;
const formData = new FormData();
formData.append('users', JSON.stringify(users));
@ -118,7 +123,7 @@ class Onboarding extends Component {
},
body: formData,
credentials: 'same-origin',
}).then((response) => {
}).then(response => {
if (response.ok) {
this.setState({ followRequestSent: true });
}
@ -128,7 +133,8 @@ class Onboarding extends Component {
handleBulkSaveArticles(articles) {
if (this.state.savedArticles.length > 0 && !this.state.saveRequestSent) {
const csrfToken = document.querySelector("meta[name='csrf-token']").content;
const csrfToken = document.querySelector("meta[name='csrf-token']")
.content;
const formData = new FormData();
formData.append('articles', JSON.stringify(articles));
@ -140,7 +146,7 @@ class Onboarding extends Component {
},
body: formData,
credentials: 'same-origin',
}).then((response) => {
}).then(response => {
if (response.ok) {
this.setState({ saveRequestSent: true });
}
@ -149,7 +155,9 @@ class Onboarding extends Component {
}
updateUserData() {
this.setState({ userData: JSON.parse(document.body.getAttribute('data-user')) });
this.setState({
userData: JSON.parse(document.body.getAttribute('data-user')),
});
if (this.state.userData.saw_onboarding === true) {
this.setState({ showOnboarding: false });
} else {
@ -163,7 +171,7 @@ class Onboarding extends Component {
const formData = new FormData();
formData.append('followable_type', 'Tag');
formData.append('followable_id', tag.id);
formData.append('verb', (tag.following ? 'unfollow' : 'follow'));
formData.append('verb', tag.following ? 'unfollow' : 'follow');
fetch('/follows', {
method: 'POST',
@ -173,10 +181,9 @@ class Onboarding extends Component {
body: formData,
credentials: 'same-origin',
})
.then((response) => {
return response.json().then((json) => {
.then(response => response.json().then(json => {
this.setState({
allTags: this.state.allTags.map((currentTag) => {
allTags: this.state.allTags.map(currentTag => {
const newTag = currentTag;
if (currentTag.name === tag.name) {
newTag.following = json.outcome === 'followed';
@ -185,14 +192,12 @@ class Onboarding extends Component {
// add in optimistic rendering
}),
});
});
})
.catch((error) => {
}))
.catch(error => {
console.log(error);
});
}
handleCheckAllUsers() {
if (this.state.checkedUsers.length < this.state.users.length) {
this.setState({ checkedUsers: this.state.users.slice() });
@ -239,9 +244,11 @@ class Onboarding extends Component {
}
handleNextButton() {
if (this.state.pageNumber === 2 &&
this.state.users.length === 0 &&
this.state.articles.length === 0) {
if (
this.state.pageNumber === 2 &&
this.state.users.length === 0 &&
this.state.articles.length === 0
) {
this.getUsersToFollow();
this.getSuggestedArticles();
}
@ -249,7 +256,10 @@ class Onboarding extends Component {
this.setState({ pageNumber: this.state.pageNumber + 1 });
if (this.state.pageNumber === 4 && this.state.checkedUsers.length > 0) {
this.handleBulkFollowUsers(this.state.checkedUsers);
} else if (this.state.pageNumber === 5 && this.state.savedArticles.length > 0) {
} else if (
this.state.pageNumber === 5 &&
this.state.savedArticles.length > 0
) {
this.handleBulkSaveArticles(this.state.savedArticles);
}
} else if (this.state.pageNumber === 5) {
@ -278,12 +288,12 @@ class Onboarding extends Component {
credentials: 'same-origin',
})
.then(response => response.json())
.then((json) => {
.then(json => {
this.setState({ showOnboarding: json.outcome === 'onboarding opened' });
// console.log('this is special')
// console.log(this.state)
})
.catch((error) => {
.catch(error => {
console.log(error);
});
}
@ -319,16 +329,17 @@ class Onboarding extends Component {
/>
);
} else if (this.state.pageNumber === 5) {
return (
<OnboardingWelcomeThread />
);
return <OnboardingWelcomeThread />;
}
}
renderBackButton() {
if (this.state.pageNumber > 1) {
return (
<button className="button cta" onClick={this.handleBackButton}> BACK </button>
<button className="button cta" onClick={this.handleBackButton}>
{' '}
BACK{' '}
</button>
);
}
}
@ -374,16 +385,15 @@ class Onboarding extends Component {
</div>
<div className="modal-body">
<div className="sloan-bar">
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iiubRINO--/c_imagga_scale,f_auto,fl_progressive,q_auto,w_300/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/sloan.png" className="sloan-img"/>
</div>
<div className="body-message">
{this.toggleOnboardingSlide()}
<img
src="https://res.cloudinary.com/practicaldev/image/fetch/s--iiubRINO--/c_imagga_scale,f_auto,fl_progressive,q_auto,w_300/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/sloan.png"
className="sloan-img"
/>
</div>
<div className="body-message">{this.toggleOnboardingSlide()}</div>
</div>
<div className="modal-footer">
<div className="modal-footer-left">
{this.renderBackButton()}
</div>
<div className="modal-footer-left">{this.renderBackButton()}</div>
<div className="modal-footer-center" />
<div className="modal-footer-right">
{this.renderNextButton()}

35
app/javascript/src/utils/sendFollowUser.js
View file

@ -1,25 +1,26 @@
export default function sendFollowUser(user, successCb, failureCb) {
const csrfToken = document.querySelector("meta[name='csrf-token']").content;
const csrfToken = document.querySelector("meta[name='csrf-token']").content;
const formData = new FormData();
formData.append('followable_type', 'User');
formData.append('followable_id', user.id);
formData.append('verb', (user.following ? 'unfollow' : 'follow'));
const formData = new FormData();
formData.append('followable_type', 'User');
formData.append('followable_id', user.id);
formData.append('verb', user.following ? 'unfollow' : 'follow');
fetch('/follows', {
method: 'POST',
headers: {
'X-CSRF-Token': csrfToken,
},
body: formData,
credentials: 'same-origin',
}).then((response) => {
return response.json();
}).then((json) => {
console.log('in fetch request: ' + json.outcome)
fetch('/follows', {
method: 'POST',
headers: {
'X-CSRF-Token': csrfToken,
},
body: formData,
credentials: 'same-origin',
})
.then(response => response.json())
.then(json => {
console.log(`in fetch request: ${ json.outcome}`);
successCb(json.outcome);
// json is followed or unfollowed
}).catch((error) => {
})
.catch(error => {
console.log(error);
});
}