canonical_url
- {' '}
-if this post was first published elsewhere
- (like your own blog)
+ Change meta tag canonical_url if this post was first
+ published elsewhere (like your own blog)
diff --git a/app/javascript/article-form/elements/orgSettings.jsx b/app/javascript/article-form/elements/orgSettings.jsx
index c73551e0a..cf7862d4c 100644
--- a/app/javascript/article-form/elements/orgSettings.jsx
+++ b/app/javascript/article-form/elements/orgSettings.jsx
@@ -2,25 +2,36 @@ import { h } from 'preact';
import PropTypes from 'prop-types';
const orgOptions = (organizations, organizationId) => {
- const orgs = organizations.map((organization) => {
- if(organizationId === organization.id) {
- return(
-
- )
+ const orgs = organizations.map(organization => {
+ if (organizationId === organization.id) {
+ return (
+
+ );
}
- return (
-
- )
- })
- const nullOrgOption = organizationId === null ? :
- orgs.unshift(nullOrgOption) // make first option as "None"
- return orgs
-}
+ return ;
+ });
+ const nullOrgOption =
+ organizationId === null ? (
+
+ ) : (
+
+ );
+ orgs.unshift(nullOrgOption); // make first option as "None"
+ return orgs;
+};
const OrgSettings = ({ organizations, organizationId, onToggle }) => (
![{`${curType[1]}]({curType[2]})
+
- )
+ );
};
-
render() {
const article = this.props.resource;
let heartReactedClass = '';
@@ -161,15 +168,10 @@ export default class Article extends Component {
src={article.user.profile_image_90}
alt={article.user.username}
/>
-
- {article.user.name}
- {' '}
-
+ {article.user.name}
{' '}
- |
- {' '}
- {article.readable_publish_date}
+ | {article.readable_publish_date}
@@ -179,9 +181,18 @@ export default class Article extends Component {
Publish under an organization:
-
diff --git a/app/javascript/chat/actions.js b/app/javascript/chat/actions.js
index 6d1fb0a23..915c81537 100644
--- a/app/javascript/chat/actions.js
+++ b/app/javascript/chat/actions.js
@@ -98,16 +98,19 @@ export function getChannels(
) {
successCb(channels, query);
} else {
- fetch(`/chat_channel_memberships/find_by_chat_channel_id?chat_channel_id=${retrievalID}`, {
- Accept: 'application/json',
- 'Content-Type': 'application/json',
- credentials: 'same-origin',
- })
- .then(response => response.json())
- .then(json => {
- channels.unshift(json);
- successCb(channels, query);
- })
+ fetch(
+ `/chat_channel_memberships/find_by_chat_channel_id?chat_channel_id=${retrievalID}`,
+ {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ credentials: 'same-origin',
+ },
+ )
+ .then(response => response.json())
+ .then(json => {
+ channels.unshift(json);
+ successCb(channels, query);
+ });
}
});
}
diff --git a/app/javascript/chat/article.jsx b/app/javascript/chat/article.jsx
index 5ed396b89..b94cd3db5 100644
--- a/app/javascript/chat/article.jsx
+++ b/app/javascript/chat/article.jsx
@@ -79,11 +79,15 @@ export default class Article extends Component {
.catch(this.handleNewReactionFailure);
};
- actionButton = (props) => {
+ actionButton = props => {
const types = {
- "heart": ["heart-reaction-button", "like", heartImage],
- "unicorn": ["unicorn-reaction-button", "unicorn", unicornImage],
- "readinglist": ["readinglist-reaction-button", "readinglist", bookmarkImage]
+ heart: ['heart-reaction-button', 'like', heartImage],
+ unicorn: ['unicorn-reaction-button', 'unicorn', unicornImage],
+ readinglist: [
+ 'readinglist-reaction-button',
+ 'readinglist',
+ bookmarkImage,
+ ],
};
const curType = types[props.reaction];
@@ -94,12 +98,15 @@ export default class Article extends Component {
onClick={this.handleReactionClick}
data-category={curType[1]}
>
-
-
);
diff --git a/app/javascript/chat/channelDetails.jsx b/app/javascript/chat/channelDetails.jsx
index 981ee8f2b..380daffd3 100644
--- a/app/javascript/chat/channelDetails.jsx
+++ b/app/javascript/chat/channelDetails.jsx
@@ -144,24 +144,16 @@ class ChannelDetails extends Component {
if (this.userInList(channel.channel_users, user)) {
invite = (
- is already in
- {' '}
- {channel.channel_name}
+ is already in {channel.channel_name}
);
}
return (
- 
- @
- {user.user.username}
- {' '}
- -
- {' '}
- {user.title}
-
- {' '}
+ @
+ {user.user.username} - {user.title}
+ {' '}
{invite}
);
@@ -175,12 +167,7 @@ class ChannelDetails extends Component {
rel="noopener noreferrer"
data-content={`users/${user.id}`}
>
- @
- {user.username}
- {' '}
- -
- {' '}
- {user.name}
+ @{user.username} - {user.name}
));
@@ -201,8 +188,7 @@ class ChannelDetails extends Component {
Danger Zone
- You have left this channel
- {' '}
+ You have left this channel{' '}
😢😢😢
diff --git a/app/javascript/chat/channels.jsx b/app/javascript/chat/channels.jsx
index 625472ded..6fd63bdf5 100644
--- a/app/javascript/chat/channels.jsx
+++ b/app/javascript/chat/channels.jsx
@@ -18,13 +18,13 @@ const Channels = ({
const isUnopened =
new Date(channel.channel_last_message_at) > new Date(lastOpened) &&
channel.channel_messages_count > 0;
- let newMessagesIndicator = isUnopened ? 'new' : 'old';
+ let newMessagesIndicator = isUnopened ? 'new' : 'old';
if (incomingVideoCallChannelIds.indexOf(channel.chat_channel_id) > -1) {
newMessagesIndicator = 'video';
}
const otherClassname = isActive
- ? 'chatchanneltab--active'
- : 'chatchanneltab--inactive';
+ ? 'chatchanneltab--active'
+ : 'chatchanneltab--inactive';
return (
- )
- })
+ );
+ });
let topNotice = '';
if (
expanded &&
@@ -66,11 +70,9 @@ const Channels = ({
👋
-
- {' '}
+ {' '}
Welcome to
- DEV Connect
- ! You may message anyone you mutually follow.
+ DEV Connect! You may message anyone you mutually follow.
);
}
@@ -105,7 +107,7 @@ const Channels = ({
{configFooter}
- You and
- {' '}
+ You and{' '}
{activeChannel.channel_modified_slug}
-
- {' '}
-are
- connected because you both follow each other. All interactions
- {' '}
+ {' '}
+ are connected because you both follow each other. All interactions{' '}
must
-
- {' '}
- abide by the
- {' '}
- code of conduct
-.
+ {' '}
+ abide by the code of conduct.
- You have joined
- {' '}
- {activeChannel.channel_name}
-! All interactions
- {' '}
+ You have joined {activeChannel.channel_name}! All interactions{' '}
must
-
- {' '}
- abide by the
- {' '}
- code of conduct
-.
+ {' '}
+ abide by the code of conduct.
- {channelHeaderInner}
- {' '}
- {channelConfigImage}
+ {channelHeaderInner} {channelConfigImage}
);
}
@@ -946,8 +946,7 @@ are
className="activechatchannel__incomingcall"
onClick={this.answerVideoCall}
>
- 👋 Incoming Video Call
- {' '}
+ 👋 Incoming Video Call{' '}
);
}
diff --git a/app/javascript/chat/githubRepo.jsx b/app/javascript/chat/githubRepo.jsx
index da1fbd735..0bb212e9a 100644
--- a/app/javascript/chat/githubRepo.jsx
+++ b/app/javascript/chat/githubRepo.jsx
@@ -20,16 +20,12 @@ export default class GithubRepo extends Component {
componentDidMount() {
if (this.state.token) {
getJSONContents(
- `https://api.github.com/repos/${
- this.props.resource.args
- }/contents?access_token=${this.state.token}`,
+ `https://api.github.com/repos/${this.props.resource.args}/contents?access_token=${this.state.token}`,
this.loadContent,
this.loadFailure,
);
getJSONContents(
- `https://api.github.com/repos/${
- this.props.resource.args
- }/readme?access_token=${this.state.token}`,
+ `https://api.github.com/repos/${this.props.resource.args}/readme?access_token=${this.state.token}`,
this.loadContent,
this.loadFailure,
);
@@ -91,9 +87,7 @@ export default class GithubRepo extends Component {
Authentication required
- - This feature is in internal alpha testing mode. -
+This feature is in internal alpha testing mode.
); } @@ -115,9 +109,7 @@ export default class GithubRepo extends Component { data-path={item.path} onClick={this.handleItemClick} > - 📁 - {' '} - {item.name} + 📁 {item.name} )); diff --git a/app/javascript/chat/userDetails.jsx b/app/javascript/chat/userDetails.jsx index eef79fd92..543101d55 100644 --- a/app/javascript/chat/userDetails.jsx +++ b/app/javascript/chat/userDetails.jsx @@ -13,7 +13,7 @@ function blockChat(activeChannelId) { export default class UserDetails extends Component { render() { - const { user} = this.props; + const { user } = this.props; const channelId = this.props.activeChannelId; const channel = this.props.activeChannel || {}; const socialIcons = []; @@ -65,24 +65,26 @@ export default class UserDetails extends Component { } let blockButton = ''; if (channel.channel_type === 'direct' && window.currentUser.id != user.id) { - blockButton = + blockButton = ( + + ); } return (
diff --git a/app/javascript/chat/video.jsx b/app/javascript/chat/video.jsx
index 661e1356d..0b093ca49 100644
--- a/app/javascript/chat/video.jsx
+++ b/app/javascript/chat/video.jsx
@@ -8,11 +8,11 @@ export default class Video extends Component {
let leftPx = 40;
let topPx = 70;
if (window.innerWidth > 1500) {
- leftPx = window.innerWidth/5 + 200;
- topPx = window.innerHeight/10;
+ leftPx = window.innerWidth / 5 + 200;
+ topPx = window.innerHeight / 10;
} else if (window.innerWidth > 641) {
- leftPx = window.innerWidth/6;
- topPx = window.innerHeight/10;
+ leftPx = window.innerWidth / 6;
+ topPx = window.innerHeight / 10;
}
this.state = {
leftPx,
@@ -55,26 +55,29 @@ export default class Video extends Component {
'videolocalscreen',
);
localMediaContainer.appendChild(track.attach());
- });
- const roomParticipants = [];
- room.participants.forEach(participant => {
- component.triggerRemoteJoin(participant);
- roomParticipants.push(participant);
- });
- component.setState({ participants: roomParticipants });
- room.on('participantConnected', function(participant) {
+ });
+ const roomParticipants = [];
+ room.participants.forEach(participant => {
+ component.triggerRemoteJoin(participant);
+ roomParticipants.push(participant);
+ });
+ component.setState({ participants: roomParticipants });
+ room.on('participantConnected', function(participant) {
component.props.onParticipantChange(room.participants);
component.triggerRemoteJoin(participant);
room.participants.forEach(p => {
roomParticipants.push(p);
});
component.setState({ participants: roomParticipants });
- room.on('participantDisconnected', function() {
- component.props.onParticipantChange(room.participants)
+ room.on('participantDisconnected', function() {
+ component.props.onParticipantChange(room.participants);
});
participant.on('dominantSpeakerChanged', participant => {
- console.log('The new dominant speaker in the Room is:', participant);
- })
+ console.log(
+ 'The new dominant speaker in the Room is:',
+ participant,
+ );
+ });
});
},
function(error) {
@@ -89,15 +92,17 @@ export default class Video extends Component {
participant.on('trackAdded', track => {
if (!document.getElementById(`${track.kind}-${track.id}`)) {
const trackDiv = document.createElement('div');
- trackDiv.className = `chat__videocalltrackdiv--${track.kind}`
- trackDiv.appendChild(track.attach())
+ trackDiv.className = `chat__videocalltrackdiv--${track.kind}`;
+ trackDiv.appendChild(track.attach());
document.getElementById('videoremotescreen').appendChild(trackDiv);
- document.getElementById('videoremotescreen').lastChild.id = `${track.kind}-${track.id}`
+ document.getElementById(
+ 'videoremotescreen',
+ ).lastChild.id = `${track.kind}-${track.id}`;
}
});
participant.on('trackRemoved', track => {
if (document.getElementById(track.id)) {
- document.getElementById(track.id).outerHTML = ''
+ document.getElementById(track.id).outerHTML = '';
}
});
// participant.on('trackDisabled', track => {
@@ -144,7 +149,7 @@ export default class Video extends Component {
};
toggleSound = () => {
- const { room } = this.state
+ const { room } = this.state;
if (room) {
room.localParticipant.audioTracks.forEach(track => {
if (track.isEnabled) {
@@ -152,13 +157,13 @@ export default class Video extends Component {
} else {
track.enable();
}
- })
+ });
}
- this.props.onToggleSound()
- }
+ this.props.onToggleSound();
+ };
toggleVideo = () => {
- const { room } = this.state
+ const { room } = this.state;
if (room) {
room.localParticipant.videoTracks.forEach(track => {
if (track.isEnabled) {
@@ -166,11 +171,10 @@ export default class Video extends Component {
} else {
track.enable();
}
- })
+ });
}
- this.props.onToggleVideo()
-
- }
+ this.props.onToggleVideo();
+ };
render() {
return (
@@ -183,9 +187,7 @@ export default class Video extends Component {
>
-
);
diff --git a/app/javascript/listings/dashboard/listingRow.jsx b/app/javascript/listings/dashboard/listingRow.jsx
index 7f33ef7d2..d720a0f58 100644
--- a/app/javascript/listings/dashboard/listingRow.jsx
+++ b/app/javascript/listings/dashboard/listingRow.jsx
@@ -4,9 +4,7 @@ import { h } from 'preact';
export const ListingRow = ({ listing }) => {
const tagLinks = listing.tag_list.map(tag => (
- #
- {tag}
- {' '}
+ #{tag}{' '}
));
diff --git a/app/javascript/listings/elements/orgSettings.jsx b/app/javascript/listings/elements/orgSettings.jsx
index 1e9f16a4a..ba2adbfa8 100644
--- a/app/javascript/listings/elements/orgSettings.jsx
+++ b/app/javascript/listings/elements/orgSettings.jsx
@@ -3,28 +3,41 @@ import { h } from 'preact';
import PropTypes from 'prop-types';
const orgOptions = (organizations, organizationId) => {
- const orgs = organizations.map((organization) => {
+ const orgs = organizations.map(organization => {
if (organizationId === organization.id) {
return (
-
- )
+
+ );
}
- return (
-
- )
- })
- const nullOrgOption = organizationId === null ? :
- orgs.unshift(nullOrgOption) // make first option as "None"
- return orgs
-}
+ return ;
+ });
+ const nullOrgOption =
+ organizationId === null ? (
+
+ ) : (
+
+ );
+ orgs.unshift(nullOrgOption); // make first option as "None"
+ return orgs;
+};
const OrgSettings = ({ organizations, organizationId, onToggle }) => (
-
);
diff --git a/app/javascript/listings/listingDashboard.jsx b/app/javascript/listings/listingDashboard.jsx
index 6f2842808..a5cee57b6 100644
--- a/app/javascript/listings/listingDashboard.jsx
+++ b/app/javascript/listings/listingDashboard.jsx
@@ -69,15 +69,10 @@ export class ListingDashboard extends Component {
const listingLength = (selected, userListings, organizationListings) => {
return selected === 'user' ? (
- - Listings Made: - {' '} - {userListings.length} -
+Listings Made: {userListings.length}
) : (
- Listings Made:
- {' '}
+ Listings Made:{' '}
{
organizationListings.filter(
listing => listing.organization_id === selected,
@@ -89,15 +84,10 @@ export class ListingDashboard extends Component {
const creditCount = (selected, userCreds, organizations) => {
return selected === 'user' ? (
-
- Credits Available:
- {' '}
- {userCredits}
-
+ Credits Available: {userCredits}
) : (
- Credits Available:
- {' '}
+ Credits Available:{' '}
{organizations.find(org => org.id === selected).unspent_credits_count}
);
diff --git a/app/javascript/listings/listingForm.jsx b/app/javascript/listings/listingForm.jsx
index e14f520cb..d02d988b0 100644
--- a/app/javascript/listings/listingForm.jsx
+++ b/app/javascript/listings/listingForm.jsx
@@ -28,13 +28,13 @@ export default class ListingForm extends Component {
categoriesForDetails: this.categoriesForDetails,
organizations,
organizationId: null, // change this for /edit later
- }
+ };
}
handleOrgIdChange = e => {
const organizationId = e.target.selectedOptions[0].value;
- this.setState({ organizationId })
- }
+ this.setState({ organizationId });
+ };
render() {
const {
@@ -48,36 +48,52 @@ export default class ListingForm extends Component {
organizations,
organizationId,
} = this.state;
- const orgArea = (organizations && organizations.length > 0) ? (
-
- - Contact - {' '} - {openedListing.author.name} - {' '} - via DEV Connect - + Contact {openedListing.author.name} via DEV Connect
+ + + + + + + +`; + +exports[`
+
+
+`;
+
+exports[`
+
+
+
+ + You‘re part of the community! + + 🎉 + +
+What next?
+ +
+
+
+`;
+
+exports[`
+
+
+
+
+
+
+`;
+
+exports[`
+
+
+
+
+ Follow tags to customize your feed
+
+
+
+
+
+
+
+
+`;
+
+exports[`
+
+
+
+
+ + Ok, here are some people we picked for you +
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`
+
+
+
+ Welcome to the
+
+
+
+
+ Welcome to the
+ 
+ community!
+
+ + DEV is where programmers share ideas and help each other grow. It’s a global community for contributing and discovering great ideas, having debates, and making friends. +
++ A couple quick questions for you before you get started... +
+
+
+
+`;
diff --git a/app/javascript/onboarding/components/BioForm.jsx b/app/javascript/onboarding/components/BioForm.jsx
new file mode 100644
index 000000000..9a30f36dc
--- /dev/null
+++ b/app/javascript/onboarding/components/BioForm.jsx
@@ -0,0 +1,88 @@
+import { h, Component } from 'preact';
+import PropTypes from 'prop-types';
+
+import Navigation from './Navigation';
+import { getContentOfToken } from '../utilities';
+
+class BioForm extends Component {
+ constructor(props) {
+ super(props);
+
+ this.handleChange = this.handleChange.bind(this);
+ this.onSubmit = this.onSubmit.bind(this);
+
+ this.state = {
+ summary: '',
+ };
+ }
+
+ componentDidMount() {
+ const csrfToken = getContentOfToken('csrf-token');
+ fetch('/onboarding_update', {
+ method: 'PATCH',
+ headers: {
+ 'X-CSRF-Token': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ user: { last_onboarding_page: 'bio form' } }),
+ credentials: 'same-origin',
+ });
+ }
+
+ onSubmit() {
+ const csrfToken = getContentOfToken('csrf-token');
+ const { summary } = this.state;
+ fetch('/onboarding_update', {
+ method: 'PATCH',
+ headers: {
+ 'X-CSRF-Token': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ user: { summary } }),
+ credentials: 'same-origin',
+ }).then(response => {
+ if (response.ok) {
+ const { next } = this.props;
+ next();
+ }
+ });
+ }
+
+ handleChange(e) {
+ const { value } = e.target;
+
+ this.setState({
+ summary: value,
+ });
+ }
+
+ render() {
+ const { prev } = this.props;
+ return (
+
+
+
+
+
+ About You!
+ +
+
+ );
+ }
+}
+
+BioForm.propTypes = {
+ prev: PropTypes.func.isRequired,
+ next: PropTypes.string.isRequired,
+};
+
+export default BioForm;
diff --git a/app/javascript/onboarding/components/ClosingSlide.jsx b/app/javascript/onboarding/components/ClosingSlide.jsx
new file mode 100644
index 000000000..4b679ba12
--- /dev/null
+++ b/app/javascript/onboarding/components/ClosingSlide.jsx
@@ -0,0 +1,94 @@
+import { h, Component } from 'preact';
+import PropTypes from 'prop-types';
+
+import Navigation from './Navigation';
+import { getContentOfToken } from '../utilities';
+
+class ClosingSlide extends Component {
+ componentDidMount() {
+ const csrfToken = getContentOfToken('csrf-token');
+ fetch('/onboarding_update', {
+ method: 'PATCH',
+ headers: {
+ 'X-CSRF-Token': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ user: { last_onboarding_page: 'closing slide' } }),
+ credentials: 'same-origin',
+ });
+ }
+
+ render() {
+ const { previousLocation, prev, next } = this.props;
+
+ const previousLocationListElement = () => {
+ if (previousLocation !== 'none' && previousLocation !== null) {
+ return (
+
+
+
+ About You!
+ +Or go back to the page you were on before you signed up
+ {previousLocation}
+
+ );
+ }
+ return null;
+ };
+
+ return (
+
+
+ );
+ }
+}
+
+ClosingSlide.propTypes = {
+ prev: PropTypes.func.isRequired,
+ next: PropTypes.string.isRequired,
+ previousLocation: PropTypes.string.isRequired,
+};
+
+export default ClosingSlide;
diff --git a/app/javascript/onboarding/components/EmailListTermsConditionsForm.jsx b/app/javascript/onboarding/components/EmailListTermsConditionsForm.jsx
new file mode 100644
index 000000000..d5a77825b
--- /dev/null
+++ b/app/javascript/onboarding/components/EmailListTermsConditionsForm.jsx
@@ -0,0 +1,197 @@
+import { h, Component } from 'preact';
+import PropTypes from 'prop-types';
+
+import Navigation from './Navigation';
+import { getContentOfToken } from '../utilities';
+
+class EmailTermsConditionsForm extends Component {
+ constructor(props) {
+ super(props);
+
+ this.handleChange = this.handleChange.bind(this);
+ this.onSubmit = this.onSubmit.bind(this);
+ this.checkRequirements = this.checkRequirements.bind(this);
+
+ this.state = {
+ checked_code_of_conduct: false,
+ checked_terms_and_conditions: false,
+ email_membership_newsletter: true,
+ email_digest_periodic: true,
+ message: '',
+ textShowing: null,
+ };
+ }
+
+ componentDidMount() {
+ const csrfToken = getContentOfToken('csrf-token');
+ fetch('/onboarding_update', {
+ method: 'PATCH',
+ headers: {
+ 'X-CSRF-Token': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ user: { last_onboarding_page: 'emails, COC and T&C form' },
+ }),
+ credentials: 'same-origin',
+ });
+ }
+
+ onSubmit() {
+ if (!this.checkRequirements()) return;
+ const csrfToken = getContentOfToken('csrf-token');
+
+ fetch('/onboarding_checkbox_update', {
+ method: 'PATCH',
+ headers: {
+ 'X-CSRF-Token': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ user: this.state }),
+ credentials: 'same-origin',
+ }).then(response => {
+ if (response.ok) {
+ localStorage.setItem('shouldRedirectToOnboarding', false);
+ const { next } = this.props;
+ next();
+ }
+ });
+ }
+
+ checkRequirements() {
+ const {
+ checked_code_of_conduct,
+ checked_terms_and_conditions,
+ } = this.state;
+ if (!checked_code_of_conduct) {
+ this.setState({
+ message: 'You must agree to our Code of Conduct before continuing!',
+ });
+ return;
+ }
+ if (!checked_terms_and_conditions) {
+ this.setState({
+ message:
+ 'You must agree to our Terms and Conditions before continuing!',
+ });
+ return;
+ }
+ return true;
+ }
+
+ handleChange(event) {
+ const { name } = event.target;
+ this.setState(currentState => ({
+ [name]: !currentState[name],
+ }));
+ }
+
+ handleShowText(event, id) {
+ event.preventDefault();
+ this.setState({ textShowing: document.getElementById(id).innerHTML });
+ }
+
+ backToSlide() {
+ this.setState({ textShowing: null });
+ }
+
+ render() {
+ const {
+ message,
+ checked_code_of_conduct,
+ checked_terms_and_conditions,
+ email_membership_newsletter,
+ email_digest_periodic,
+ textShowing,
+ } = this.state;
+ const { prev } = this.props;
+ if (textShowing) {
+ return (
+
+
+ + You‘re part of the community! + + {' '} + 🎉 + +
+What next?
+ + {previousLocationListElement()} +
+
+ );
+ }
+ return (
+
+
+
+
+
+
+ );
+ }
+}
+
+EmailTermsConditionsForm.propTypes = {
+ prev: PropTypes.func.isRequired,
+ next: PropTypes.string.isRequired,
+};
+
+export default EmailTermsConditionsForm;
diff --git a/app/javascript/onboarding/components/FollowTags.jsx b/app/javascript/onboarding/components/FollowTags.jsx
new file mode 100644
index 000000000..ad163b739
--- /dev/null
+++ b/app/javascript/onboarding/components/FollowTags.jsx
@@ -0,0 +1,123 @@
+import { h, Component } from 'preact';
+import PropTypes from 'prop-types';
+
+import Navigation from './Navigation';
+import { getContentOfToken } from '../utilities';
+
+class FollowTags extends Component {
+ constructor(props) {
+ super(props);
+
+ this.handleClick = this.handleClick.bind(this);
+ this.handleComplete = this.handleComplete.bind(this);
+
+ this.state = {
+ allTags: [],
+ selectedTags: [],
+ };
+ }
+
+ componentDidMount() {
+ fetch('/api/tags/onboarding')
+ .then(response => response.json())
+ .then(data => {
+ this.setState({ allTags: data });
+ });
+
+ const csrfToken = getContentOfToken('csrf-token');
+ fetch('/onboarding_update', {
+ method: 'PATCH',
+ headers: {
+ 'X-CSRF-Token': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ user: { last_onboarding_page: 'follow tags page' },
+ }),
+ credentials: 'same-origin',
+ });
+ }
+
+ handleClick(tag) {
+ let { selectedTags } = this.state;
+ if (!selectedTags.includes(tag)) {
+ this.setState(prevState => ({
+ selectedTags: [...prevState.selectedTags, tag],
+ }));
+ } else {
+ selectedTags = [...selectedTags];
+ const indexToRemove = selectedTags.indexOf(tag);
+ selectedTags.splice(indexToRemove, 1);
+ this.setState({
+ selectedTags,
+ });
+ }
+ }
+
+ handleComplete() {
+ const csrfToken = getContentOfToken('csrf-token');
+ const { selectedTags } = this.state;
+
+ Promise.all(
+ selectedTags.map(tag =>
+ fetch('/follows', {
+ method: 'POST',
+ headers: {
+ 'X-CSRF-Token': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ followable_type: 'Tag',
+ followable_id: tag.id,
+ verb: 'follow',
+ }),
+ credentials: 'same-origin',
+ }),
+ ),
+ ).then(_ => {
+ const { next } = this.props;
+ next();
+ });
+ }
+
+ render() {
+ const { prev } = this.props;
+ const { selectedTags, allTags } = this.state;
+ return (
+
+
+ Some things to check off!
+ {message && {message}} + +
+
+ );
+ }
+}
+
+FollowTags.propTypes = {
+ prev: PropTypes.func.isRequired,
+ next: PropTypes.string.isRequired,
+};
+
+export default FollowTags;
diff --git a/app/javascript/onboarding/components/FollowUsers.jsx b/app/javascript/onboarding/components/FollowUsers.jsx
new file mode 100644
index 000000000..e76b9608c
--- /dev/null
+++ b/app/javascript/onboarding/components/FollowUsers.jsx
@@ -0,0 +1,143 @@
+import { h, Component } from 'preact';
+import PropTypes from 'prop-types';
+
+import { userInfo } from 'os';
+import Navigation from './Navigation';
+import { getContentOfToken } from '../utilities';
+
+class FollowUsers extends Component {
+ constructor(props) {
+ super(props);
+
+ this.handleClick = this.handleClick.bind(this);
+ this.handleComplete = this.handleComplete.bind(this);
+
+ this.state = {
+ users: [],
+ selectedUsers: [],
+ };
+ }
+
+ componentDidMount() {
+ fetch('/api/users?state=follow_suggestions', {
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ credentials: 'same-origin',
+ })
+ .then(response => response.json())
+ .then(data => {
+ this.setState({ users: data, selectedUsers: data });
+ });
+
+ const csrfToken = getContentOfToken('csrf-token');
+ fetch('/onboarding_update', {
+ method: 'PATCH',
+ headers: {
+ 'X-CSRF-Token': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ user: { last_onboarding_page: 'follow users page' },
+ }),
+ credentials: 'same-origin',
+ });
+ }
+
+ handleComplete() {
+ const csrfToken = getContentOfToken('csrf-token');
+ const { selectedUsers } = this.state;
+ const { next } = this.props;
+
+ fetch('/api/follows', {
+ method: 'POST',
+ headers: {
+ 'X-CSRF-Token': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({users:selectedUsers}),
+ credentials: 'same-origin',
+ })
+
+ next();
+ }
+
+ handleSelectAll() {
+ const { selectedUsers, users } = this.state;
+ if (selectedUsers.length === users.length) {
+ this.setState({
+ selectedUsers: [],
+ });
+ } else {
+ this.setState({
+ selectedUsers: users,
+ });
+ }
+ }
+
+ handleClick(user) {
+ let { selectedUsers } = this.state;
+
+ if (!selectedUsers.includes(user)) {
+ this.setState(prevState => ({
+ selectedUsers: [...prevState.selectedUsers, user],
+ }));
+ } else {
+ selectedUsers = [...selectedUsers];
+ const indexToRemove = selectedUsers.indexOf(user);
+ selectedUsers.splice(indexToRemove, 1);
+ this.setState({
+ selectedUsers,
+ });
+ }
+ }
+
+ render() {
+ const { users, selectedUsers } = this.state;
+ const { prev } = this.props;
+ return (
+
+
+ Follow tags to customize your feed
+
+ {allTags.map(tag => (
+
+ ))}
+
+
+
+ );
+ }
+}
+
+FollowUsers.propTypes = {
+ prev: PropTypes.func.isRequired,
+ next: PropTypes.string.isRequired,
+};
+
+export default FollowUsers;
diff --git a/app/javascript/onboarding/components/IntroSlide.jsx b/app/javascript/onboarding/components/IntroSlide.jsx
new file mode 100644
index 000000000..06dfa5bcf
--- /dev/null
+++ b/app/javascript/onboarding/components/IntroSlide.jsx
@@ -0,0 +1,68 @@
+import { h, Component } from 'preact';
+import PropTypes from 'prop-types';
+
+import Navigation from './Navigation';
+import { getContentOfToken } from '../utilities';
+
+class IntroSlide extends Component {
+ constructor(props) {
+ super(props);
+
+ this.onSubmit = this.onSubmit.bind(this);
+ }
+
+ componentDidMount() {
+ const csrfToken = getContentOfToken('csrf-token');
+ fetch('/onboarding_update', {
+ method: 'PATCH',
+ headers: {
+ 'X-CSRF-Token': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ user: { last_onboarding_page: 'intro slide' } }),
+ credentials: 'same-origin',
+ });
+ }
+
+ onSubmit() {
+ const { next } = this.props;
+ next();
+ }
+
+ render() {
+ const { prev } = this.props;
+ return (
+
+
+ Ok, here are some people we picked for you
+
+
+
+
+
+ {users.map(user => (
+
+ ))}
+
+
+ );
+ }
+}
+
+// const IntroSlide = ({ prev, next }) => (
+
+// );
+
+IntroSlide.propTypes = {
+ prev: PropTypes.func.isRequired,
+ next: PropTypes.string.isRequired,
+};
+
+export default IntroSlide;
diff --git a/app/javascript/onboarding/components/Navigation.jsx b/app/javascript/onboarding/components/Navigation.jsx
new file mode 100644
index 000000000..e266adaf9
--- /dev/null
+++ b/app/javascript/onboarding/components/Navigation.jsx
@@ -0,0 +1,31 @@
+import { h } from 'preact';
+import PropTypes from 'prop-types';
+
+const Navigation = ({ next, prev, hideNext, hidePrev }) => (
+
+);
+
+Navigation.propTypes = {
+ prev: PropTypes.func.isRequired,
+ next: PropTypes.string.isRequired,
+ hideNext: PropTypes.bool,
+ hidePrev: PropTypes.bool,
+};
+
+Navigation.defaultProps = {
+ hideNext: false,
+ hidePrev: false,
+};
+
+export default Navigation;
diff --git a/app/javascript/onboarding/components/PersonalInfoForm.jsx b/app/javascript/onboarding/components/PersonalInfoForm.jsx
new file mode 100644
index 000000000..56560176e
--- /dev/null
+++ b/app/javascript/onboarding/components/PersonalInfoForm.jsx
@@ -0,0 +1,129 @@
+import { h, Component } from 'preact';
+import PropTypes from 'prop-types';
+
+import Navigation from './Navigation';
+import { getContentOfToken } from '../utilities';
+
+class PersonalInfoForm extends Component {
+ constructor(props) {
+ super(props);
+
+ this.handleChange = this.handleChange.bind(this);
+ this.onSubmit = this.onSubmit.bind(this);
+
+ this.state = {
+ location: '',
+ employment_title: '',
+ employer_name: '',
+ last_onboarding_page: 'personal info form',
+ };
+ }
+
+ componentDidMount() {
+ const csrfToken = getContentOfToken('csrf-token');
+ const { last_onboarding_page } = this.state;
+ fetch('/onboarding_update', {
+ method: 'PATCH',
+ headers: {
+ 'X-CSRF-Token': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ user: { last_onboarding_page } }),
+ credentials: 'same-origin',
+ });
+ }
+
+ onSubmit() {
+ const csrfToken = getContentOfToken('csrf-token');
+
+ const {
+ last_onboarding_page,
+ location,
+ employer_name,
+ employment_title,
+ } = this.state;
+
+ fetch('/onboarding_update', {
+ method: 'PATCH',
+ headers: {
+ 'X-CSRF-Token': csrfToken,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ user: {
+ last_onboarding_page,
+ location,
+ employer_name,
+ employment_title,
+ },
+ }),
+ credentials: 'same-origin',
+ }).then(response => {
+ if (response.ok) {
+ const { next } = this.props;
+ next();
+ }
+ });
+ }
+
+ handleChange(e) {
+ const { name, value } = e.target;
+
+ this.setState({
+ [name]: value,
+ });
+ }
+
+ render() {
+ const { prev } = this.props;
+ return (
+
+
+ Welcome to the
+
+
+
+ Welcome to the
+
+ community!
+
+ + DEV is where programmers share ideas and help each other grow. It’s + a global community for contributing and discovering great ideas, + having debates, and making friends. +
+A couple quick questions for you before you get started...
+
+
+ );
+ }
+}
+
+PersonalInfoForm.propTypes = {
+ prev: PropTypes.func.isRequired,
+ next: PropTypes.string.isRequired,
+};
+
+export default PersonalInfoForm;
diff --git a/app/javascript/onboarding/utilities.js b/app/javascript/onboarding/utilities.js
new file mode 100644
index 000000000..b0bbae10c
--- /dev/null
+++ b/app/javascript/onboarding/utilities.js
@@ -0,0 +1,8 @@
+export const jsonToForm = data => {
+ const form = new FormData();
+ data.forEach(item => form.append(item.key, item.value));
+ return form;
+};
+
+export const getContentOfToken = token =>
+ document.querySelector(`meta[name='${token}']`).content;
diff --git a/app/javascript/packs/Onboarding.jsx b/app/javascript/packs/Onboarding.jsx
index 42f16aca8..ace1a5934 100644
--- a/app/javascript/packs/Onboarding.jsx
+++ b/app/javascript/packs/Onboarding.jsx
@@ -19,14 +19,9 @@ function isUserSignedIn() {
}
function renderPage() {
- import('../src/Onboarding')
+ import('../onboarding/Onboarding')
.then(({ default: Onboarding }) => {
- const waitingForOnboarding = setInterval(function() {
- if (document.getElementById('main-head-stylesheet')) {
- render(
+
+ About You!
+ +
-
-
-
+
+
+
);
}
@@ -437,46 +438,37 @@ class Onboarding extends Component {
render() {
const { showOnboarding } = this.state;
- if (showOnboarding) {
- return (
- 