Fixed login.

Preact changed the behavior of setState from sync to async.

Author: MrCoder

src/components/AddLibrary.jsx

@@ -11,42 +11,42 @@ export default class AddLibrary extends Component {
 			js: props.js || ''
 		};
 	}
-	onSelectChange(e) {
+	async onSelectChange(e) {
 		const target = e.target;
 		if (!target.value) {
 			return;
 		}
 		const type = target.selectedOptions[0].dataset.type;
 		if (type === 'js') {
-			this.setState({
+			await this.setState({
 				js: `${this.state.js}\n${target.value}`
 			});
 		} else {
-			this.setState({
+			await this.setState({
 				css: `${this.state.css}\n${target.value}`
 			});
 		}
 
 		trackEvent('ui', 'addLibrarySelect', target.selectedOptions[0].label);
-		this.props.onChange({ js: this.state.js, css: this.state.css });
+		this.props.onChange({js: this.state.js, css: this.state.css});
 		// Reset the select to the default value
 		target.value = '';
 	}
-	textareaBlurHandler(e, textarea) {
+	async textareaBlurHandler(e, textarea) {
 		const target = e ? e.target : textarea;
 		const type = target.dataset.lang;
 		if (type === 'js') {
-			this.setState({
+			await this.setState({
 				js: target.value || ''
 			});
 		} else {
-			this.setState({
+			await this.setState({
 				css: target.value || ''
 			});
 		}
 
 		// trackEvent('ui', 'addLibrarySelect', target.selectedOptions[0].label);
-		this.props.onChange({ js: this.state.js, css: this.state.css });
+		this.props.onChange({js: this.state.js, css: this.state.css});
 	}
 	suggestionSelectHandler(value) {
 		const textarea = value.match(/\.js$/)

src/components/ContentWrap.jsx

@@ -86,8 +86,8 @@ export default class ContentWrap extends Component {
 		);
 		this.onCodeChange(editor, change);
 	}
-	onJsCodeChange(editor, change) {
-		this.setState({lineOfCode: editor.doc.size});
+	async onJsCodeChange(editor, change) {
+		await this.setState({lineOfCode: editor.doc.size});
 		this.cmCodes.js = editor.getValue();
 		this.props.onCodeChange(
 			'js',
@@ -96,7 +96,7 @@ export default class ContentWrap extends Component {
 		);
 
 		const targetWindow = this.detachedWindow || document.getElementById('demo-frame').contentWindow;
-		targetWindow.postMessage({ code: this.cmCodes.js }, '*');
+		targetWindow.postMessage({code: this.cmCodes.js}, '*');
 
 	}
 	onCursorMove(editor) {
@@ -460,8 +460,8 @@ export default class ContentWrap extends Component {
 		trackEvent('ui', 'downloadJpeg');
 	}
 
-	resetSplitting() {
-		this.setState({
+	async resetSplitting() {
+		await this.setState({
 			codeSplitSizes: this.getCodeSplitSizes(),
 			mainSplitSizes: this.getMainSplitSizesToApply()
 		});
@@ -694,8 +694,8 @@ export default class ContentWrap extends Component {
 		this.onMessageFromConsole('Possible infinite loop detected.', error.stack);
 	}
 
-	toggleConsole() {
-		this.setState({ isConsoleOpen: !this.state.isConsoleOpen });
+	async toggleConsole() {
+		await this.setState({isConsoleOpen: !this.state.isConsoleOpen});
 		trackEvent('ui', 'consoleToggle');
 	}
 	consoleHeaderDblClickHandler(e) {
@@ -732,8 +732,8 @@ export default class ContentWrap extends Component {
 			trackEvent('fn', 'evalConsoleExpr');
 		}
 	}
-	cssSettingsBtnClickHandler() {
-		this.setState({ isCssSettingsModalOpen: true });
+	async cssSettingsBtnClickHandler() {
+		await this.setState({isCssSettingsModalOpen: true});
 		trackEvent('ui', 'cssSettingsBtnClick');
 	}
 	cssSettingsChangeHandler(settings) {
@@ -1030,8 +1030,8 @@ export default class ContentWrap extends Component {
 					/>
 					<CssSettingsModal
 						show={this.state.isCssSettingsModalOpen}
-						closeHandler={() =>
-							this.setState({ isCssSettingsModalOpen: false })
+						closeHandler={async () =>
+							await this.setState({isCssSettingsModalOpen: false})
 						}
 						onChange={this.cssSettingsChangeHandler.bind(this)}
 						settings={this.props.currentItem.cssSettings}

src/components/Footer.jsx

@@ -10,9 +10,7 @@ class JS13K extends Component {
 		if (+compoDate > +now) {
 			daysLeft = Math.floor((compoDate - now) / 1000 / 3600 / 24);
 		}
-		this.setState({
-			daysLeft
-		});
+
 	}
 
 	render() {
@@ -62,9 +60,9 @@ export default class Footer extends Component {
 		this.props.layoutBtnClickHandler(layoutId);
 	}
 
-	js13kClickHandler() {
+	async js13kClickHandler() {
 		// console.log(999);
-		this.setState({
+		await this.setState({
 			isJs13kDropdownOpen: !this.state.isJs13kDropdownOpen
 		});
 	}
@@ -144,7 +142,7 @@ export default class Footer extends Component {
 							onClick={this.js13kClickHandler.bind(this)}
 							onBlur={() =>
 								setTimeout(
-									() => this.setState({ isJs13kDropdownOpen: false }),
+									async () => await this.setState({isJs13kDropdownOpen: false}),
 									300
 								)
 							}

src/components/SavedItemPane.jsx

@@ -119,10 +119,10 @@ export default class SavedItemPane extends Component {
 		e.preventDefault();
 	}
 
-	searchInputHandler(e) {
+	async searchInputHandler(e) {
 		console.log('search input handler');
 		const text = e.target.value;
-		this.setState({
+		await this.setState({
 			searchText: text
 		});
 		trackEvent('ui', 'searchInputType');

src/components/Tabs.jsx

@@ -17,8 +17,8 @@ class Tabs extends Component {
 			activeTab: this.props.children[0].props.label,
 		};
 	}
-	onClickTabItem = (tab) => {
-		this.setState({ activeTab: tab });
+	onClickTabItem = async (tab) => {
+		await this.setState({activeTab: tab});
 		this.props.onChange(tab);
 	}