From fd4cfe9ec4ba49becae3ced8dc5e6069781d54d4 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sun, 17 Jun 2018 22:19:44 +0530 Subject: [PATCH] eslint fixes --- .eslintrc.json | 2 + package.json | 2 +- src/components/AskToImportModal.jsx | 69 +++---- src/components/CodeMirrorBox.jsx | 1 - src/components/ContentWrap.jsx | 15 +- src/components/LibraryAutoSuggest.jsx | 2 +- src/components/Login.jsx | 1 - src/components/MainHeader.jsx | 228 +++++++++++------------ src/components/Modal.jsx | 2 +- src/components/SavedItemPane.jsx | 1 - src/components/SplitPane.jsx | 2 - src/components/SupportDeveloperModal.jsx | 112 ++++++----- src/components/app.jsx | 25 ++- src/components/common.jsx | 1 - src/takeScreenshot.js | 2 + 15 files changed, 226 insertions(+), 239 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 1e445aa..14ca4c8 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -183,6 +183,8 @@ "yoda": ["error", "never"], "brace-style": "off", "lines-around-comment": "off", + "arrow-body-style": "off", + "indent": "off", "react/sort-comp": "off", "react/jsx-no-bind": "off" }, diff --git a/package.json b/package.json index 12c1bc8..88d9fd3 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "build": "preact build --template src/index.html --no-prerender", "serve": "preact build && preact serve", "dev": "preact watch --template src/index.html --https --no-prerender", - "lint": "eslint src/components/*.jsx", + "lint": "eslint src/*.js src/components/*.jsx", "test": "jest ./tests", "precommit": "lint-staged" }, diff --git a/src/components/AskToImportModal.jsx b/src/components/AskToImportModal.jsx index 65044d4..fcf9de3 100644 --- a/src/components/AskToImportModal.jsx +++ b/src/components/AskToImportModal.jsx @@ -1,39 +1,40 @@ -import { h, Component } from 'preact'; +import { h } from 'preact'; import Modal from './Modal'; -export default class AskToImportModal extends Component { - render() { - return ( - -

Import your creations in your account

+export function AskToImportModal({ + show, + closeHandler, + oldSavedCreationsCount, + dontAskBtnClickHandler, + importBtnClickHandler +}) { + return ( + +

Import your creations in your account

-
-

- You have {this.props.oldSavedCreationsCount} creations - saved in your local machine. Do you want to import those creations - in your account so they are more secure and accessible anywhere? -

-

- It's okay if you don't want to. You can simply logout and access - them anytime on this browser. -

-
- - -
+
+

+ You have {oldSavedCreationsCount} creations saved in your + local machine. Do you want to import those creations in your account + so they are more secure and accessible anywhere? +

+

+ It's okay if you don't want to. You can simply logout and access them + anytime on this browser. +

+
+ +
- - ); - } +
+ + ); } diff --git a/src/components/CodeMirrorBox.jsx b/src/components/CodeMirrorBox.jsx index cd01aaf..4c93579 100644 --- a/src/components/CodeMirrorBox.jsx +++ b/src/components/CodeMirrorBox.jsx @@ -12,7 +12,6 @@ export default class CodeMirrorBox extends Component { } initEditor() { - const options = this.props.options; this.cm = CodeMirror.fromTextArea(this.textarea, this.props.options); if (this.props.onChange) { this.cm.on('change', this.props.onChange); diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx index 91ba47a..cccc986 100644 --- a/src/components/ContentWrap.jsx +++ b/src/components/ContentWrap.jsx @@ -11,6 +11,9 @@ import { deferred } from '../deferred'; import CssSettingsModal from './CssSettingsModal'; const minCodeWrapSize = 33; +/* global htmlCodeEl, jsCodeEl, cssCodeEl, logCountEl +*/ + export default class ContentWrap extends Component { constructor(props) { super(props); @@ -141,8 +144,8 @@ export default class ContentWrap extends Component { } else { // we need to store user script in external JS file to prevent inline-script // CSP from affecting it. - writeFile('script.js', blobjs, function() { - writeFile('preview.html', blob, function() { + writeFile('script.js', blobjs, () => { + writeFile('preview.html', blob, () => { var origin = chrome.i18n.getMessage() ? `chrome-extension://${chrome.i18n.getMessage('@@extension_id')}` : `${location.origin}`; @@ -150,7 +153,7 @@ export default class ContentWrap extends Component { if (this.detachedWindow) { this.detachedWindow.postMessage(src, '*'); } else { - frame.src = src; + this.frame.src = src; } }); }); @@ -248,9 +251,9 @@ export default class ContentWrap extends Component { result[1].code || '', result[2].code || '' ); - result.forEach(result => { - if (result.errors) { - this.showErrors(result.errors.lang, result.errors.data); + result.forEach(resultItem => { + if (resultItem.errors) { + this.showErrors(resultItem.errors.lang, resultItem.errors.data); } }); }); diff --git a/src/components/LibraryAutoSuggest.jsx b/src/components/LibraryAutoSuggest.jsx index f051736..72af744 100644 --- a/src/components/LibraryAutoSuggest.jsx +++ b/src/components/LibraryAutoSuggest.jsx @@ -90,7 +90,7 @@ export class LibraryAutoSuggest extends Component { onKeyDown(event) { var selectedItemElement; if (!this.isShowingSuggestions) { - return false; + return; } if (event.keyCode === 27) { diff --git a/src/components/Login.jsx b/src/components/Login.jsx index 51797fb..3473fac 100644 --- a/src/components/Login.jsx +++ b/src/components/Login.jsx @@ -1,5 +1,4 @@ import { h, Component } from 'preact'; -import { jsLibs, cssLibs } from '../libraryList'; import { trackEvent } from '../analytics'; import { auth } from '../auth'; diff --git a/src/components/MainHeader.jsx b/src/components/MainHeader.jsx index a5d850f..2cb9da2 100644 --- a/src/components/MainHeader.jsx +++ b/src/components/MainHeader.jsx @@ -1,131 +1,123 @@ -import { h, Component } from 'preact'; +import { h } from 'preact'; import { A } from './common'; const DEFAULT_PROFILE_IMG = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E"; -export default class Header extends Component { - render() { - return ( -
- -
- - - - Run - +export function MainHeader(props) { + return ( +
+ +
+ + + + Run + - + Add library + - Add library - - {this.props.externalLibCount} - - + {props.externalLibCount} + + - + - - - New - - + New + + + - - - - - - - Save - - + + + + + Save + + + - - - - - - - Open - - - - - -
+ + + + + + Open + + + + +
- ); - } +
+ ); } diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx index 3b4f923..10d3494 100644 --- a/src/components/Modal.jsx +++ b/src/components/Modal.jsx @@ -19,7 +19,7 @@ export default class Modal extends Component { } } componentDidUpdate(prevProps) { - if (this.props.show != prevProps.show) { + if (this.props.show !== prevProps.show) { document.body.classList[this.props.show ? 'add' : 'remove']( 'overlay-visible' ); diff --git a/src/components/SavedItemPane.jsx b/src/components/SavedItemPane.jsx index 4cf7903..14ab258 100644 --- a/src/components/SavedItemPane.jsx +++ b/src/components/SavedItemPane.jsx @@ -165,7 +165,6 @@ export default class SavedItemPane extends Component { searchInputHandler(e) { const text = e.target.value; - let el; if (!text) { this.setState({ filteredItems: this.items diff --git a/src/components/SplitPane.jsx b/src/components/SplitPane.jsx index 934c90e..c9e6942 100644 --- a/src/components/SplitPane.jsx +++ b/src/components/SplitPane.jsx @@ -1,6 +1,5 @@ import { h, Component } from 'preact'; import Split from 'split.js'; -import { log } from '../utils'; export class SplitPane extends Component { // shouldComponentUpdate(nextProps, nextState) { @@ -34,7 +33,6 @@ export class SplitPane extends Component { options.onDragStart = this.props.onDragStart; } - // log('SIZE UPDATTED', ...options); this.splitInstance = Split( this.props.children.map(node => '#' + node.attributes.id), options diff --git a/src/components/SupportDeveloperModal.jsx b/src/components/SupportDeveloperModal.jsx index f8ca106..b400ab7 100644 --- a/src/components/SupportDeveloperModal.jsx +++ b/src/components/SupportDeveloperModal.jsx @@ -1,68 +1,62 @@ -import { h, Component } from 'preact'; +import { h } from 'preact'; import Modal from './Modal'; -export default class SupportDeveloperModal extends Component { - render() { - return ( - -
-

Support the Developer

-

- Hi,{' '} - - Kushagra - {' '} - here! Web Maker is a free and open-source project. To keep myself - motivated for working on such open-source and free{' '} - - side projects - , I am accepting donations. Your pledge, no matter how small, - will act as an appreciation towards my work and keep me going - forward making Web Maker more awesome🔥. So please consider - donating. 🙏🏼 (could be as small as $1/month). -

- - - +export function SupportDeveloperModal({ show, closeHandler }) { + return ( + +
+

Support the Developer

+

+ Hi,{' '} - Or, make a one time donation + Kushagra + {' '} + here! Web Maker is a free and open-source project. To keep myself + motivated for working on such open-source and free{' '} + + side projects + , I am accepting donations. Your pledge, no matter how small, will + act as an appreciation towards my work and keep me going forward + making Web Maker more awesome🔥. So please consider donating. 🙏🏼 + (could be as small as $1/month). +

+ + - - ); - } + + + Or, make a one time donation + +
+ + ); } diff --git a/src/components/app.jsx b/src/components/app.jsx index e7720d2..88054c2 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -1,6 +1,9 @@ +/* global htmlCodeEl, cssCodeEl, jsCodeEl, runBtn +*/ + import { h, Component } from 'preact'; -import MainHeader from './MainHeader.jsx'; +import { MainHeader } from './MainHeader.jsx'; import ContentWrap from './ContentWrap.jsx'; import Footer from './Footer.jsx'; import SavedItemPane from './SavedItemPane.jsx'; @@ -27,10 +30,10 @@ import firebase from 'firebase/app'; import 'firebase/auth'; import { Profile } from './Profile'; import { auth } from '../auth'; -import SupportDeveloperModal from './SupportDeveloperModal'; +import { SupportDeveloperModal } from './SupportDeveloperModal'; import { KeyboardShortcutsModal } from './KeyboardShortcutsModal'; import { takeScreenshot } from '../takeScreenshot'; -import AskToImportModal from './AskToImportModal'; +import { AskToImportModal } from './AskToImportModal'; import { Alerts } from './Alerts'; import Portal from 'preact-portal'; import { HelpModal } from './HelpModal'; @@ -329,7 +332,6 @@ export default class App extends Component { this.setState({ savedItems: { ...this.state.savedItems } }); - var a = 343478798793397; this.toggleSavedItemsPane(); // HACK: Set overflow after sometime so that the items can animate without getting cropped. @@ -409,12 +411,11 @@ export default class App extends Component { this.setState({ isAddLibraryModalOpen: true }); } closeSavedItemsPane() { - document.body.classList[this.state.isSavedItemPaneOpen ? 'add' : 'remove']( - 'overlay-visible' - ); this.setState({ isSavedItemPaneOpen: false }); + document.body.classList.remove('overlay-visible'); + if (this.editorWithFocus) { this.editorWithFocus.focus(); } @@ -611,8 +612,8 @@ export default class App extends Component { window.localStorage[LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN] = true; if (!answer) { trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'login'); - closeAllOverlays(); - loginModal.classList.add('is-modal-visible'); + this.closeAllOverlays(); + this.setState({ isLoginModalOpen: true }); return; } trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'local'); @@ -817,7 +818,6 @@ export default class App extends Component { return false; } codepenBtnClickHandler(e) { - debugger; if (this.state.currentItem.cssMode === CssModes.ACSS) { alert("Oops! CodePen doesn't supports Atomic CSS currently."); e.preventDefault(); @@ -888,7 +888,7 @@ export default class App extends Component { e.preventDefault(); trackEvent('ui', 'exportBtnClicked'); } - screenshotBtnClickHandler() { + screenshotBtnClickHandler(e) { this.contentWrap.getDemoFrame(frame => { takeScreenshot(frame.getBoundingClientRect()); }); @@ -1203,8 +1203,7 @@ export default class App extends Component { - {'{'}/* By Sam Herbert (@sherb), for everyone. More @ - http://goo.gl/7AJzbL */{'}'} + {/* By Sam Herbert (@sherb), for everyone. More http://goo.gl/7AJzbL */}