From bf6878237430be28b48e0d1f0ba9950f9554e02d Mon Sep 17 00:00:00 2001 From: Tim Lange Date: Tue, 16 Apr 2019 23:28:19 +0200 Subject: [PATCH] REF: React eslint (#2432) --- .eslintignore | 1 + .../article-form/elements/bodyPreview.jsx | 69 ++++---- .../article-form/elements/errors.jsx | 16 +- .../article-form/elements/moreConfig.jsx | 113 ++++++++----- .../article-form/elements/notice.jsx | 8 +- .../article-form/elements/orgSettings.jsx | 16 +- app/javascript/article-form/elements/tags.jsx | 2 +- .../chat/__tests__/channelDetails.test.jsx | 15 +- app/javascript/chat/__tests__/view.test.jsx | 14 +- app/javascript/chat/actions.js | 43 +++-- app/javascript/chat/channelDetails.jsx | 19 +-- app/javascript/chat/codeEditor.jsx | 45 +++--- app/javascript/chat/compose.jsx | 2 +- app/javascript/chat/video.jsx | 143 +++++++++------- app/javascript/chat/view.jsx | 64 +++++--- app/javascript/packs/Onboarding.jsx | 8 +- app/javascript/packs/articleForm.jsx | 10 +- app/javascript/packs/githubRepos.jsx | 2 +- .../sidebar-widget/SidebarWidget.jsx | 4 +- app/javascript/src/Onboarding.jsx | 11 +- .../src/components/OnboardingArticle.jsx | 6 +- .../src/components/OnboardingArticles.jsx | 7 +- .../src/components/OnboardingProfile.jsx | 62 +++++-- .../src/components/OnboardingSingleTag.jsx | 19 ++- .../src/components/OnboardingTags.jsx | 17 +- .../src/components/OnboardingUsers.jsx | 45 +++--- .../src/components/OnboardingWelcome.jsx | 16 +- .../components/OnboardingWelcomeThread.jsx | 10 +- .../src/components/Search/Search.jsx | 7 +- .../src/components/UnopenedChannelNotice.jsx | 5 +- .../__stories__/OnboardingWelcome.stories.jsx | 2 +- .../OnboardingWelcomeThread.stories.jsx | 2 +- .../src/utils/getUnopenedChannels.jsx | 153 ++++++++++-------- package.json | 2 +- 34 files changed, 586 insertions(+), 372 deletions(-) create mode 100644 .eslintignore diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000000..ec6d3cdd7f5b0 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +package.json diff --git a/app/javascript/article-form/elements/bodyPreview.jsx b/app/javascript/article-form/elements/bodyPreview.jsx index e08635017b9c8..2427ffb2b4540 100644 --- a/app/javascript/article-form/elements/bodyPreview.jsx +++ b/app/javascript/article-form/elements/bodyPreview.jsx @@ -2,34 +2,54 @@ import { h } from 'preact'; import PropTypes from 'prop-types'; const BodyPreview = ({ previewHTML, version, articleState }) => ( -
+
{titleArea(version, articleState)} -
-
+
); - function titleArea(version, articleState) { - if(version === 'help'){ - //possibly something different here in future. - return '' - } else { - const tags = articleState.tagList.split(", ").map(tag => { - return
{tag}
 - }) - return
-

{articleState.title}

-

- image  - {window.currentUser.name} -

-
- {tags} -
-
+ if (version === 'help') { + // possibly something different here in future. + return ''; + } + const tags = articleState.tagList.split(', ').map(tag => { + return ( + +
{tag}
+ {' '} + + ); + }); + return ( +
+

{articleState.title}

+

+ image +   + {window.currentUser.name} +

+
{tags}
+
+ ); } -}; BodyPreview.propTypes = { previewHTML: PropTypes.string.isRequired, @@ -37,8 +57,3 @@ BodyPreview.propTypes = { }; export default BodyPreview; - - - - - diff --git a/app/javascript/article-form/elements/errors.jsx b/app/javascript/article-form/elements/errors.jsx index 746631760a206..5c25ff25a0cea 100644 --- a/app/javascript/article-form/elements/errors.jsx +++ b/app/javascript/article-form/elements/errors.jsx @@ -2,11 +2,19 @@ import { h } from 'preact'; import PropTypes from 'prop-types'; const Errors = ({ errorsList }) => ( -
+

😱 Heads up:

-
    {Object.keys(errorsList).map((key) => { - return
  • {key}: {errorsList[key]}
    • - })}
+
    + {Object.keys(errorsList).map(key => { + return ( +
  • + {key} +: + {errorsList[key]} +
    • + ); + })} +
); diff --git a/app/javascript/article-form/elements/moreConfig.jsx b/app/javascript/article-form/elements/moreConfig.jsx index 1c321e24c5e10..7961fc619b901 100644 --- a/app/javascript/article-form/elements/moreConfig.jsx +++ b/app/javascript/article-form/elements/moreConfig.jsx @@ -1,8 +1,6 @@ import { h, Component } from 'preact'; import PropTypes from 'prop-types'; -import { generateMainImage } from '../actions' - - +import { generateMainImage } from '../actions'; // const ImageManagement = ({ onExit }) => ( export default class MoreConfig extends Component { @@ -14,50 +12,91 @@ export default class MoreConfig extends Component { handleSeriesButtonClick = e => { e.preventDefault(); this.props.onConfigChange(e); - } + }; render() { const { onExit, passedData, onSaveDraft } = this.props; let publishedField = ''; - let seriesTip = Will this post be part of a series? Give the series a unique name. (Series visible once it has multiple posts) + let seriesTip = ( + + Will this post be part of a series? Give the series a unique name. + (Series visible once it has multiple posts) + + ); if (passedData.allSeries.length > 0) { - const seriesNames = passedData.allSeries.map( name => { - return - }) - seriesTip = Existing series: {seriesNames} + const seriesNames = passedData.allSeries.map(name => { + return ( + + ); + }); + seriesTip = ( + + Existing series: + {seriesNames} + + ); } if (passedData.published) { - publishedField =
-

Danger Zone

- -
- + publishedField = ( +
+

Danger Zone

+ +
+ ); } - return
-

Additional Config/Settings

- -
- - -
- Change meta tag canonical_url if this post was first published elsewhere (like your own blog) -
- - -
- {seriesTip} -
- {publishedField} -
+ return ( +
+

Additional Config/Settings

+ +
+ + +
+ + Change meta tag + canonical_url + {' '} +if this post was first published elsewhere + (like your own blog) + +
+ + +
+ {seriesTip} +
+ +
+ {publishedField} +
+ ); } } MoreConfig.propTypes = { onExit: PropTypes.func.isRequired, -}; \ No newline at end of file +}; diff --git a/app/javascript/article-form/elements/notice.jsx b/app/javascript/article-form/elements/notice.jsx index 8036b310dca90..bd0462134f4e6 100644 --- a/app/javascript/article-form/elements/notice.jsx +++ b/app/javascript/article-form/elements/notice.jsx @@ -2,7 +2,13 @@ import { h } from 'preact'; import PropTypes from 'prop-types'; const Notice = ({ published }) => ( -
{published ? "Publishing..." : "Saving Draft..."}
+
+ {published ? 'Publishing...' : 'Saving Draft...'} +
); Notice.propTypes = { diff --git a/app/javascript/article-form/elements/orgSettings.jsx b/app/javascript/article-form/elements/orgSettings.jsx index cb63265ab2966..adde2eb4254e8 100644 --- a/app/javascript/article-form/elements/orgSettings.jsx +++ b/app/javascript/article-form/elements/orgSettings.jsx @@ -2,11 +2,17 @@ import { h } from 'preact'; import PropTypes from 'prop-types'; const OrgSettings = ({ organization, postUnderOrg, onToggle }) => ( -
- {organization.name} +
+ + {' '} + {organization.name} + {' '} +
); diff --git a/app/javascript/article-form/elements/tags.jsx b/app/javascript/article-form/elements/tags.jsx index a78d1b09c203c..9a16cfcde5690 100644 --- a/app/javascript/article-form/elements/tags.jsx +++ b/app/javascript/article-form/elements/tags.jsx @@ -100,7 +100,7 @@ class Tags extends Component { }; handleInput = e => { - let value = e.target.value; + let { value } = e.target; // If we start typing immediately after a comma, add a space // before what we typed. // e.g. If value = "javascript," and we type a "p", diff --git a/app/javascript/chat/__tests__/channelDetails.test.jsx b/app/javascript/chat/__tests__/channelDetails.test.jsx index b7b2a2e0754ee..a06cfa0d0685e 100644 --- a/app/javascript/chat/__tests__/channelDetails.test.jsx +++ b/app/javascript/chat/__tests__/channelDetails.test.jsx @@ -199,16 +199,19 @@ describe('', () => { let inviteAttrAns; const included = (list, el) => { const keys = Object.keys(list); - for (var key of keys) { + for (const key of keys) { if (list[key].id === el.id) { return true; } } }; for (let i = 0; i < searchedusersdivs.length; i += 1) { - if (!included( + if ( + !included( moddetails.pending_users_select_fields, - searchedusers.searchedUsers[i])) { + searchedusers.searchedUsers[i], + ) + ) { expect( searchedusersdivs .at(i) @@ -226,7 +229,9 @@ describe('', () => { }`, ); - if (included(moddetails.channel_users, searchedusers.searchedUsers[i])) { + if ( + included(moddetails.channel_users, searchedusers.searchedUsers[i]) + ) { inviteMessage = `is already in ${moddetails.channel_name}`; inviteAttr = 'className'; inviteAttrAns = 'channel__member'; @@ -247,8 +252,8 @@ describe('', () => { .childAt(2) .attr(inviteAttr), ).toEqual(inviteAttrAns); - } } + } const tree = render(context); expect(tree).toMatchSnapshot(); }); diff --git a/app/javascript/chat/__tests__/view.test.jsx b/app/javascript/chat/__tests__/view.test.jsx index eda9760cc3cd6..fd4cb6f89e64b 100644 --- a/app/javascript/chat/__tests__/view.test.jsx +++ b/app/javascript/chat/__tests__/view.test.jsx @@ -1,6 +1,6 @@ import { h } from 'preact'; import render from 'preact-render-to-json'; -import { shallow } from 'preact-render-spy'; +import { deep } from 'preact-render-spy'; import View from '../view'; let exited = false; @@ -43,12 +43,12 @@ describe('', () => { }); it('should render and test snapshot (with channel)', () => { - const tree = shallow(getView(sampleChannel)); + const tree = deep(getView(sampleChannel), { depth: 2 }); expect(tree).toMatchSnapshot(); }); it('should have the proper attributes and text values (no channel provided)', () => { - const context = shallow(getView([])); + const context = deep(getView([]), { depth: 2 }); expect(context.find('.chatNonChatView').exists()).toEqual(true); expect(context.find('.container').exists()).toEqual(true); @@ -64,7 +64,7 @@ describe('', () => { }); it('should have the proper attributes and text values (with channel provided)', () => { - const context = shallow(getView(sampleChannel)); + const context = deep(getView(sampleChannel), { depth: 2 }); expect(context.find('.chatNonChatView_contentblock').exists()).toEqual( true, ); @@ -103,14 +103,14 @@ describe('', () => { }); it('should trigger exit', () => { - const context = shallow(getView([])); + const context = deep(getView([]), { depth: 2 }); context.find('.chatNonChatView_exitbutton').simulate('click'); expect(exited).toEqual(true); exited = false; }); it('should trigger accept', () => { - const context = shallow(getView(sampleChannel)); + const context = deep(getView(sampleChannel), { depth: 2 }); context .find('.cta') .at(0) @@ -124,7 +124,7 @@ describe('', () => { }); it('should trigger decline', () => { - const context = shallow(getView(sampleChannel)); + const context = deep(getView(sampleChannel), { depth: 2 }); context .find('.cta') .at(1) diff --git a/app/javascript/chat/actions.js b/app/javascript/chat/actions.js index 742ce70003e09..3b2018501cae4 100644 --- a/app/javascript/chat/actions.js +++ b/app/javascript/chat/actions.js @@ -72,18 +72,31 @@ export function conductModeration( .catch(failureCb); } -export function getChannels(query,retrievalID, props, paginationNumber, additionalFilters, successCb, failureCb) { +export function getChannels( + query, + retrievalID, + props, + paginationNumber, + additionalFilters, + successCb, + failureCb, +) { const client = algoliasearch(props.algoliaId, props.algoliaKey); const index = client.initIndex(props.algoliaIndex); - let filters = {...{ - hitsPerPage: 30 + paginationNumber, - page: paginationNumber - }, ...additionalFilters}; - index.search(query, filters) - .then(function(content) { - let channels = content.hits - if (retrievalID === null || content.hits.filter(e => e.id === retrievalID).length === 1) { - successCb(channels, query) + const filters = { + ...{ + hitsPerPage: 30 + paginationNumber, + page: paginationNumber, + }, + ...additionalFilters, + }; + index.search(query, filters).then(function(content) { + const channels = content.hits; + if ( + retrievalID === null || + content.hits.filter(e => e.id === retrievalID).length === 1 + ) { + successCb(channels, query); } else { index.getObjects([`${retrievalID}`], function(err, content) { channels.unshift(content.results[0]); @@ -102,7 +115,7 @@ export function sendKeys(subscription, successCb, failureCb) { 'Content-Type': 'application/json', }, body: JSON.stringify({ - subscription: subscription + subscription, }), credentials: 'same-origin', }) @@ -153,10 +166,10 @@ export function getChannelInvites(successCb, failureCb) { .then(response => response.json()) .then(successCb) .catch(failureCb); -}; +} export function sendChannelInviteAction(id, action, successCb, failureCb) { - fetch('/chat_channel_memberships/'+id, { + fetch(`/chat_channel_memberships/${id}`, { method: 'PUT', headers: { Accept: 'application/json', @@ -166,11 +179,11 @@ export function sendChannelInviteAction(id, action, successCb, failureCb) { body: JSON.stringify({ chat_channel_membership: { user_action: action, - } + }, }), credentials: 'same-origin', }) .then(response => response.json()) .then(successCb) .catch(failureCb); -} \ No newline at end of file +} diff --git a/app/javascript/chat/channelDetails.jsx b/app/javascript/chat/channelDetails.jsx index ac9e22622fb56..856f37186d61d 100644 --- a/app/javascript/chat/channelDetails.jsx +++ b/app/javascript/chat/channelDetails.jsx @@ -93,7 +93,7 @@ class ChannelDetails extends Component { }; userInList = (list, user) => { - const keys = Object.keys(list) + const keys = Object.keys(list); for (const key of keys) { if (user.id === list[key].id) { return true; @@ -144,7 +144,7 @@ class ChannelDetails extends Component { if (this.userInList(channel.channel_users, user)) { invite = ( - is already in + is already in {' '} {channel.channel_name} @@ -153,11 +153,11 @@ class ChannelDetails extends Component { return (
- profile_image + profile_image @ {user.user.username} {' '} -- + - {' '} {user.title} @@ -178,7 +178,7 @@ class ChannelDetails extends Component { @ {user.username} {' '} -- + - {' '} {user.name} @@ -188,9 +188,7 @@ class ChannelDetails extends Component {

Invite Members

-
- {searchedUsers} -
+
{searchedUsers}

Pending Invites:

{pendingInvites}
@@ -212,12 +210,11 @@ class ChannelDetails extends Component {

It may not be immediately in the sidebar

- Contact the admins at + Contact the admins at {' '} yo@dev.to {' '} -if - this was a mistake + if this was a mistake

); diff --git a/app/javascript/chat/codeEditor.jsx b/app/javascript/chat/codeEditor.jsx index 4e98d9088f4cd..3bb6646e9d28e 100644 --- a/app/javascript/chat/codeEditor.jsx +++ b/app/javascript/chat/codeEditor.jsx @@ -2,30 +2,30 @@ import { h, Component } from 'preact'; import PropTypes from 'prop-types'; export default class CodeEditor extends Component { - componentDidMount() { - import('codemirror') - .then(CodeMirror => { - const editor = document.getElementById("codeeditor"); + import('codemirror').then(CodeMirror => { + const editor = document.getElementById('codeeditor'); const myCodeMirror = CodeMirror(editor, { - mode: "javascript", - theme: "material", + mode: 'javascript', + theme: 'material', autofocus: true, }); - myCodeMirror.setSize("100%", "100%"); - //Initial trigger: - const channel = window.pusher.channel(`presence-channel-${this.props.activeChannelId}`) + myCodeMirror.setSize('100%', '100%'); + // Initial trigger: + const channel = window.pusher.channel( + `presence-channel-${this.props.activeChannelId}`, + ); channel.trigger('client-livecode', { context: 'initializing-live-code-channel', - channel: `presence-channel-${this.props.activeChannelId}` + channel: `presence-channel-${this.props.activeChannelId}`, }); - //Coding trigger: + // Coding trigger: myCodeMirror.on('keyup', cm => { - channel.trigger('client-livecode', { - keyPressed: true, - value: cm.getValue(), - cursorPos: cm.getCursor(), - }); + channel.trigger('client-livecode', { + keyPressed: true, + value: cm.getValue(), + cursorPos: cm.getCursor(), + }); }); }); } @@ -35,11 +35,10 @@ export default class CodeEditor extends Component { } render() { - - return
-
Experimental (WIP)
-
- + return ( +
+
Experimental (WIP)
+
+ ); } - -} \ No newline at end of file +} diff --git a/app/javascript/chat/compose.jsx b/app/javascript/chat/compose.jsx index 1f0ec0c83c835..2e95df20f49cb 100644 --- a/app/javascript/chat/compose.jsx +++ b/app/javascript/chat/compose.jsx @@ -5,7 +5,7 @@ export default class Chat extends Component { static propTypes = { handleKeyDown: PropTypes.func.isRequired, handleSubmitOnClick: PropTypes.func.isRequired, - activeChannelId: PropTypes.number + activeChannelId: PropTypes.number, }; shouldComponentUpdate(nextProps) { diff --git a/app/javascript/chat/video.jsx b/app/javascript/chat/video.jsx index 035a0564c5573..9968c693e9c56 100644 --- a/app/javascript/chat/video.jsx +++ b/app/javascript/chat/video.jsx @@ -12,109 +12,128 @@ export default class Video extends Component { pageY: null, token: null, room: null, - participants: [] - } + participants: [], + }; } + componentDidMount() { - getTwilioToken('private-video-channel-'+this.props.activeChannelId, this.setupCallChannel) + getTwilioToken( + `private-video-channel-${this.props.activeChannelId}`, + this.setupCallChannel, + ); } componentWillUnmount() { this.state.room.disconnect(); } - setupCallChannel = (response) => { + setupCallChannel = response => { const component = this; - import('twilio-video') - .then(({ connect, createLocalVideoTrack }) => { - connect(response.token, + import('twilio-video').then(({ connect, createLocalVideoTrack }) => { + connect( + response.token, { - name:`private-video-channel-${this.props.activeChannelId}`, + name: `private-video-channel-${this.props.activeChannelId}`, audio: true, type: 'peer-to-peer', - video: { width: 640 } - }).then(function(room) { - component.setState({token: response.token, room: room}) - createLocalVideoTrack().then(track => { - let localMediaContainer = document.getElementById('videolocalscreen'); - localMediaContainer.appendChild(track.attach()); - }); - let roomParticipants = [] - room.participants.forEach(participant => { - component.triggerRemoteJoin(participant); - roomParticipants.push(participant); - }); - component.setState({participants: roomParticipants}) - room.on('participantConnected', function(participant) { - component.triggerRemoteJoin(participant); - let roomParticipants = [] + video: { width: 640 }, + }, + ).then( + function(room) { + component.setState({ token: response.token, room }); + createLocalVideoTrack().then(track => { + const localMediaContainer = document.getElementById( + 'videolocalscreen', + ); + localMediaContainer.appendChild(track.attach()); + }); + const roomParticipants = []; room.participants.forEach(participant => { + component.triggerRemoteJoin(participant); roomParticipants.push(participant); }); - component.setState({participants: roomParticipants}) - room.on('participantDisconnected', function(participant) { - component.props.onExit() + component.setState({ participants: roomParticipants }); + room.on('participantConnected', function(participant) { + component.triggerRemoteJoin(participant); + const roomParticipants = []; + room.participants.forEach(participant => { + roomParticipants.push(participant); + }); + component.setState({ participants: roomParticipants }); + room.on('participantDisconnected', function(participant) { + component.props.onExit(); + }); }); - }) - }, function(error) { - document.getElementById('videoremotescreen').innerHTML = ""; - console.error('Unable to connect to Room: ' + error.message); - }); + }, + function(error) { + document.getElementById('videoremotescreen').innerHTML = ''; + console.error(`Unable to connect to Room: ${error.message}`); + }, + ); }); - } + }; - triggerRemoteJoin = (participant) => { + triggerRemoteJoin = participant => { // document.getElementById('videoremotescreen').innerHTML = "" participant.on('trackAdded', track => { document.getElementById('videoremotescreen').appendChild(track.attach()); }); - } + }; handleDrag = e => { if (!this.state.pageX) { - this.setState({pageX:e.pageX, + this.setState({ + pageX: e.pageX, pageY: e.pageY, offsetDiffX: e.pageX - e.target.offsetLeft, offsetDiffY: e.pageY - e.target.offsetTop, - }) - } else if (e.pageX != 0){ + }); + } else if (e.pageX != 0) { this.setState({ - leftPx: this.state.pageX + e.pageX - this.state.pageX - this.state.offsetDiffX, - topPx: this.state.pageY + e.pageY - this.state.pageY - this.state.offsetDiffY - }) + leftPx: + this.state.pageX + + e.pageX - + this.state.pageX - + this.state.offsetDiffX, + topPx: + this.state.pageY + + e.pageY - + this.state.pageY - + this.state.offsetDiffY, + }); } else if (e.pageX === 0) { - this.setState({pageX:null, + this.setState({ + pageX: null, pageY: null, offsetDiffX: null, offsetDiffY: null, - }) + }); } - } + }; render() { return (
-
-
-
- ) + ); } } - - - - - - - - - diff --git a/app/javascript/chat/view.jsx b/app/javascript/chat/view.jsx index 0a643b3fe74f6..e26bce08b7e3a 100644 --- a/app/javascript/chat/view.jsx +++ b/app/javascript/chat/view.jsx @@ -1,29 +1,49 @@ - - import { h, Component } from 'preact'; export default class View extends Component { + channel = (props) => { + return ( +
+

{props.channel.channel_name}

+
+ {props.channel.description} +
+ + +
+ ); + }; render() { - const channels = this.props.channels.map((channel) => { - return
-

{channel.channel_name}

-
{channel.description}
- - -
+ const channels = this.props.channels.map(channel => { + return }); - return
-
- -

Channel Invitations 🤗

- {channels} -
-
+ return ( +
+
+ +

Channel Invitations 🤗

+ {channels} +
+
+ ); } - -} \ No newline at end of file +} diff --git a/app/javascript/packs/Onboarding.jsx b/app/javascript/packs/Onboarding.jsx index fc335199de480..42f16aca8232a 100644 --- a/app/javascript/packs/Onboarding.jsx +++ b/app/javascript/packs/Onboarding.jsx @@ -21,12 +21,12 @@ function isUserSignedIn() { function renderPage() { import('../src/Onboarding') .then(({ default: Onboarding }) => { - let waitingForOnboarding = setInterval(function(){ - if (document.getElementById("main-head-stylesheet")) { - render(, document.getElementById('top-bar')) + const waitingForOnboarding = setInterval(function() { + if (document.getElementById('main-head-stylesheet')) { + render(, document.getElementById('top-bar')); clearInterval(waitingForOnboarding); } - }, 3) + }, 3); }) .catch(error => { // eslint-disable-next-line no-console diff --git a/app/javascript/packs/articleForm.jsx b/app/javascript/packs/articleForm.jsx index 33fe41dffddd0..0a80fa35b51e7 100644 --- a/app/javascript/packs/articleForm.jsx +++ b/app/javascript/packs/articleForm.jsx @@ -10,16 +10,16 @@ HTMLDocument.prototype.ready = new Promise(resolve => { return null; }); -document.ready.then(function(){ +document.ready.then(function() { loadForm(); window.InstantClick.on('change', () => { - if (document.getElementById('article-form')){ + if (document.getElementById('article-form')) { loadForm(); } }); }); -function loadForm(){ +function loadForm() { getUserDataAndCsrfToken().then(({ currentUser, csrfToken }) => { window.currentUser = currentUser; window.csrfToken = csrfToken; @@ -32,5 +32,5 @@ function loadForm(){ root, root.firstElementChild, ); - }) -} \ No newline at end of file + }); +} diff --git a/app/javascript/packs/githubRepos.jsx b/app/javascript/packs/githubRepos.jsx index d00fb0319b2fd..66ab76c3bfba7 100644 --- a/app/javascript/packs/githubRepos.jsx +++ b/app/javascript/packs/githubRepos.jsx @@ -3,7 +3,7 @@ import { GithubRepos } from '../githubRepos/githubRepos'; function loadElement() { const root = document.getElementById('github-repos-container'); - if (root){ + if (root) { render(, root, root.firstElementChild); } } diff --git a/app/javascript/sidebar-widget/SidebarWidget.jsx b/app/javascript/sidebar-widget/SidebarWidget.jsx index 1e52ad9b62382..268f7050143d3 100644 --- a/app/javascript/sidebar-widget/SidebarWidget.jsx +++ b/app/javascript/sidebar-widget/SidebarWidget.jsx @@ -79,7 +79,9 @@ class SidebarWidget extends Component { return (
-

who to follow

+
+

who to follow

+
{users}
diff --git a/app/javascript/src/Onboarding.jsx b/app/javascript/src/Onboarding.jsx index 219914b0d64f6..671647e727aea 100644 --- a/app/javascript/src/Onboarding.jsx +++ b/app/javascript/src/Onboarding.jsx @@ -222,8 +222,8 @@ class Onboarding extends Component { const newCheckedUsers = checkedUsers.slice(); const index = checkedUsers.indexOf(user); - if(index > -1){ - newCheckedUsers.splice(index,1); + if (index > -1) { + newCheckedUsers.splice(index, 1); } else { newCheckedUsers.push(user); } @@ -259,12 +259,7 @@ class Onboarding extends Component { } handleNextButton() { - const { - users, - articles, - checkedUsers, - profileInfo, - } = this.state; + const { users, articles, checkedUsers, profileInfo } = this.state; let { pageNumber } = this.state; if (pageNumber === 2 && users.length === 0 && articles.length === 0) { this.getUsersToFollow(); diff --git a/app/javascript/src/components/OnboardingArticle.jsx b/app/javascript/src/components/OnboardingArticle.jsx index ba4a1f6ec2833..3f4fcd01aea0f 100644 --- a/app/javascript/src/components/OnboardingArticle.jsx +++ b/app/javascript/src/components/OnboardingArticle.jsx @@ -30,12 +30,14 @@ const OnboardingArticle = ({ article, isSaved, onSaveArticle }) => ( Reactions{' '} + /> + {' '} {article.positive_reactions_count} Comments{' '} + /> + {' '} {article.comments_count}
diff --git a/app/javascript/src/components/OnboardingArticles.jsx b/app/javascript/src/components/OnboardingArticles.jsx index 51ee7b2e1ac65..05a5b50d67dcf 100644 --- a/app/javascript/src/components/OnboardingArticles.jsx +++ b/app/javascript/src/components/OnboardingArticles.jsx @@ -27,8 +27,11 @@ class OnboardingArticles extends Component { return (
- When you see an interesting post, you can{' '} - SAVE it. To get started, here are + When you see an interesting post, you can + {' '} + SAVE + {' '} +it. To get started, here are pre-selected suggestions.
diff --git a/app/javascript/src/components/OnboardingProfile.jsx b/app/javascript/src/components/OnboardingProfile.jsx index cbd6b7612043a..d8bb99ea057fd 100644 --- a/app/javascript/src/components/OnboardingProfile.jsx +++ b/app/javascript/src/components/OnboardingProfile.jsx @@ -1,24 +1,58 @@ import { h, render, Component } from 'preact'; // page 1 -const OnboardingProfile = ({onChange}) => { +const OnboardingProfile = ({ onChange }) => { return ( -
+
Tell the us a bit about yourself ❤️
-
What's your quick bio?
- -
Where are you located?
- -
What is your title?
- -
Where do you work?
- -
What are your core skills/languages?
- -
What are you currently learning/playing with?
- +
What's your quick bio?
+ +
Where are you located?
+ +
What is your title?
+ +
Where do you work?
+ +
+ What are your core skills/languages? +
+ +
+ What are you currently learning/playing with? +
+
); }; diff --git a/app/javascript/src/components/OnboardingSingleTag.jsx b/app/javascript/src/components/OnboardingSingleTag.jsx index dfb8d83ad5eb7..5b7e4ec58af30 100644 --- a/app/javascript/src/components/OnboardingSingleTag.jsx +++ b/app/javascript/src/components/OnboardingSingleTag.jsx @@ -12,17 +12,28 @@ class OnboardingSingleTag extends Component { } render() { - const backgroundColor = this.props.tag.following ? this.props.tag.bg_color_hex : '' - const textroundColor = this.props.tag.following ? this.props.tag.text_color_hex : '' + const backgroundColor = this.props.tag.following + ? this.props.tag.bg_color_hex + : ''; + const textroundColor = this.props.tag.following + ? this.props.tag.text_color_hex + : ''; return ( -
+
- #{this.props.tag.name} + # + {this.props.tag.name} { + const tags = this.props.allTags.map(tag => { return ( - + ); }); return (
-
- Personalize your home feed -
-
- {tags} -
+
Personalize your home feed
+
{tags}
); } diff --git a/app/javascript/src/components/OnboardingUsers.jsx b/app/javascript/src/components/OnboardingUsers.jsx index c03b2cc0ea522..3547f5408c682 100644 --- a/app/javascript/src/components/OnboardingUsers.jsx +++ b/app/javascript/src/components/OnboardingUsers.jsx @@ -12,19 +12,23 @@ class OnboardingUsers extends Component { } render() { - const followList = this.props.users.map((user) => { + const followList = this.props.users.map(user => { return ( -
+
- {user.name} + {user.name}
{user.name}
-
{user.summary}
+
+ {user.summary} +
-
@@ -33,11 +37,7 @@ class OnboardingUsers extends Component { }); const renderLoadingOrList = () => { if (this.props.users.length === 0) { - return ( -
- Loading... -
- ); + return
Loading...
; } return followList; }; @@ -49,12 +49,20 @@ class OnboardingUsers extends Component {
-
- Follow All -
+
Follow All
-
@@ -72,5 +80,4 @@ OnboardingUsers.propTypes = { handleCheckAllUsers: PropTypes.func.isRequired, }; - export default OnboardingUsers; diff --git a/app/javascript/src/components/OnboardingWelcome.jsx b/app/javascript/src/components/OnboardingWelcome.jsx index 398e01bd0fd9c..9967ac6ddaffa 100644 --- a/app/javascript/src/components/OnboardingWelcome.jsx +++ b/app/javascript/src/components/OnboardingWelcome.jsx @@ -3,16 +3,22 @@ import { h, render, Component } from 'preact'; // page 1 const OnboardingWelcome = () => { const messages = [ - "Thank you for joining the DEV Community.", - "Keep up with the people and software trends you care about. ❤️", + 'Thank you for joining the DEV Community.', + 'Keep up with the people and software trends you care about. ❤️', ]; const specialMessage = "Let's get started!"; return ( -
- {messages.map(item => (

{item}

))} -

{specialMessage}

+
+ {messages.map(item => ( +

{item}

+ ))} +

+ + {specialMessage} + +

); }; diff --git a/app/javascript/src/components/OnboardingWelcomeThread.jsx b/app/javascript/src/components/OnboardingWelcomeThread.jsx index b86b8189cad00..05c13fb2dc0b6 100644 --- a/app/javascript/src/components/OnboardingWelcomeThread.jsx +++ b/app/javascript/src/components/OnboardingWelcomeThread.jsx @@ -1,15 +1,15 @@ import { h } from 'preact'; const OnboardingWelcomeThread = () => { - const wrapInYellow = message => ( - {message} - ); + const wrapInYellow = message => {message}; return ( -
+

Software is driven by community.

Don't hesitate to find a discussion and jump right in.

-

Everyone is welcome!

+

+ Everyone is welcome! +

); }; diff --git a/app/javascript/src/components/Search/Search.jsx b/app/javascript/src/components/Search/Search.jsx index 8caa8f2d29290..d339843e8ac24 100644 --- a/app/javascript/src/components/Search/Search.jsx +++ b/app/javascript/src/components/Search/Search.jsx @@ -48,7 +48,9 @@ export class Search extends Component { } enableSearchPageChecker = true; + globalSearchKeyListener; + enableSearchPageListener = () => { this.enableSearchPageChecker = true; }; @@ -76,7 +78,10 @@ export class Search extends Component { } search = event => { - const { keyCode, target: { value } } = event; + const { + keyCode, + target: { value }, + } = event; this.enableSearchPageChecker = false; diff --git a/app/javascript/src/components/UnopenedChannelNotice.jsx b/app/javascript/src/components/UnopenedChannelNotice.jsx index c5d934149e46a..30fca6bf5ea44 100644 --- a/app/javascript/src/components/UnopenedChannelNotice.jsx +++ b/app/javascript/src/components/UnopenedChannelNotice.jsx @@ -1,10 +1,7 @@ import { h } from 'preact'; const UnopenedChannelNotice = () => { - return ( -
-
- ); + return
; }; export default UnopenedChannelNotice; diff --git a/app/javascript/src/components/__stories__/OnboardingWelcome.stories.jsx b/app/javascript/src/components/__stories__/OnboardingWelcome.stories.jsx index 7fbcc7aebb582..0df13fa4f88b0 100644 --- a/app/javascript/src/components/__stories__/OnboardingWelcome.stories.jsx +++ b/app/javascript/src/components/__stories__/OnboardingWelcome.stories.jsx @@ -1,6 +1,6 @@ import { h } from 'preact'; import { storiesOf } from '@storybook/react'; -import { globalModalDecorator } from '../__stories__/story-decorators'; +import { globalModalDecorator } from './story-decorators'; import OnboardingWelcome from '../OnboardingWelcome'; storiesOf('OnboardingWelcome', module) diff --git a/app/javascript/src/components/__stories__/OnboardingWelcomeThread.stories.jsx b/app/javascript/src/components/__stories__/OnboardingWelcomeThread.stories.jsx index 8987809e4f043..47b17f7e84f95 100644 --- a/app/javascript/src/components/__stories__/OnboardingWelcomeThread.stories.jsx +++ b/app/javascript/src/components/__stories__/OnboardingWelcomeThread.stories.jsx @@ -1,6 +1,6 @@ import { h } from 'preact'; import { storiesOf } from '@storybook/react'; -import { globalModalDecorator } from '../__stories__/story-decorators'; +import { globalModalDecorator } from './story-decorators'; import OnboardingWelcomeThread from '../OnboardingWelcomeThread'; storiesOf('OnboardingWelcomeThread', module) diff --git a/app/javascript/src/utils/getUnopenedChannels.jsx b/app/javascript/src/utils/getUnopenedChannels.jsx index 68ab90b16d9bc..8c4a26bed02a1 100644 --- a/app/javascript/src/utils/getUnopenedChannels.jsx +++ b/app/javascript/src/utils/getUnopenedChannels.jsx @@ -1,16 +1,15 @@ import { h, render, Component } from 'preact'; import setupPusher from './pusher'; - - class UnopenedChannelNotice extends Component { constructor(props) { super(props); - const unopenedChannels = this.props.unopenedChannels; - const visible = unopenedChannels.length > 0 ? true : false; + const { unopenedChannels } = this.props; + const visible = unopenedChannels.length > 0; this.state = { - visible: visible, - unopenedChannels } + visible, + unopenedChannels, + }; } componentDidMount() { @@ -19,79 +18,95 @@ class UnopenedChannelNotice extends Component { messageCreated: this.receiveNewMessage, }); const component = this; - document.getElementById("connect-link").onclick = function(){ - //Hack, should probably be its own component in future - document.getElementById("connect-number").classList.remove("showing"); - component.setState({visible: false}); - } + document.getElementById('connect-link').onclick = function() { + // Hack, should probably be its own component in future + document.getElementById('connect-number').classList.remove('showing'); + component.setState({ visible: false }); + }; } receiveNewMessage = e => { - if (location.pathname.startsWith("/connect")) { - return + if (location.pathname.startsWith('/connect')) { + return; } - let channels = this.state.unopenedChannels; - const newObj = {adjusted_slug: e.chat_channel_adjusted_slug} - if(channels.filter(obj => obj.adjusted_slug === newObj.adjusted_slug).length === 0 && - newObj.adjusted_slug != `@${window.currentUser.username}`) { + const channels = this.state.unopenedChannels; + const newObj = { adjusted_slug: e.chat_channel_adjusted_slug }; + if ( + channels.filter(obj => obj.adjusted_slug === newObj.adjusted_slug) + .length === 0 && + newObj.adjusted_slug != `@${window.currentUser.username}` + ) { channels.push(newObj); } this.setState({ - visible: (channels.length > 0 && e.user_id != window.currentUser.id), - unopenedChannels: channels - }) + visible: channels.length > 0 && e.user_id != window.currentUser.id, + unopenedChannels: channels, + }); - const number = document.getElementById("connect-number") - number.classList.add("showing") - number.innerHTML = channels.length + const number = document.getElementById('connect-number'); + number.classList.add('showing'); + number.innerHTML = channels.length; const component = this; if (channels.length === 0) { - number.classList.remove("showing") + number.classList.remove('showing'); } else { - document.getElementById("connect-link").href = `/connect/${channels[0].adjusted_slug}` + document.getElementById('connect-link').href = `/connect/${ + channels[0].adjusted_slug + }`; } - setTimeout(function(){ - component.setState({visible: false}); - }, 7500) - } + setTimeout(function() { + component.setState({ visible: false }); + }, 7500); + }; handleClick = e => { - document.getElementById("connect-number").classList.remove("showing"); - this.setState({visible: false}) - } + document.getElementById('connect-number').classList.remove('showing'); + this.setState({ visible: false }); + }; + render() { if (this.state.visible) { const channels = this.state.unopenedChannels.map(channel => { - return {channel.adjusted_slug} + return ( + + {channel.adjusted_slug} + + ); }); return ( - New Message from {channels} + position: 'fixed', + zIndex: '200', + top: '44px', + right: 0, + left: 0, + background: '#66e2d5', + borderBottom: '1px solid black', + color: 'black', + fontWeight: 'bold', + textAlign: 'center', + fontSize: '17px', + opacity: '0.94', + padding: '19px 5px 14px', + }} + > + New Message from + {' '} + {channels} ); } @@ -99,9 +114,15 @@ class UnopenedChannelNotice extends Component { } export default function getUnopenedChannels(user, successCb) { - render(, document.getElementById('message-notice')); - if (location.pathname.startsWith("/connect")) { - return + render( + , + document.getElementById('message-notice'), + ); + if (location.pathname.startsWith('/connect')) { + return; } fetch('/chat_channels?state=unopened', { method: 'GET', @@ -109,13 +130,15 @@ export default function getUnopenedChannels(user, successCb) { }) .then(response => response.json()) .then(json => { - const number = document.getElementById("connect-number") + const number = document.getElementById('connect-number'); if (json.length > 0) { - number.classList.add("showing") - number.innerHTML = json.length - document.getElementById("connect-link").href = `/connect/${json[0].adjusted_slug}` // Jump the user directly to the channel where appropriate + number.classList.add('showing'); + number.innerHTML = json.length; + document.getElementById('connect-link').href = `/connect/${ + json[0].adjusted_slug + }`; // Jump the user directly to the channel where appropriate } else { - number.classList.remove("showing") + number.classList.remove('showing'); } }) .catch(error => { diff --git a/package.json b/package.json index d13ece4ff92aa..60e914e0e7370 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,8 @@ }, "lint-staged": { "*.{js,jsx}": [ - "prettier --write", "eslint --fix", + "prettier --write", "git add" ], "{app,spec}/**/*.rb": [