Correct binding of onEnd() to use this

Theoretically, should allow us to use this.setState() directly in onEnd()
zulip · Jan 8, 2019 · dfeb1b7 · dfeb1b7
1 parent ae887c9
commit dfeb1b7
Showing 1 changed file with 21 additions and 38 deletions.
diff --git a/app/renderer/js/main.js b/app/renderer/js/main.js
@@ -158,38 +158,29 @@ class ServerManagerView {
 	initSidebar() {
 		const showSidebar = ConfigUtil.getConfigItem('showSidebar', true);
 		this.toggleSidebar(showSidebar);
-
 		// Allow dragging of server tabs and update the data-tab-id
-		const _this = this;
+		const onEnd = (function onDragEnd(event) {
+			const newTabs = [];
+			const domains = [];
+			const tabElements = document.querySelectorAll('#tabs-container .tab');
+			tabElements.forEach((el, index) => {
+				const oldIndex = +Number(el.getAttribute('data-tab-id'));
+				el.setAttribute('data-tab-id', index.toString());
+				domains.push(DomainUtil.getDomain(oldIndex));
+				newTabs.push(this.tabs[oldIndex]);
+			});
+			for (let index = 0; index < domains.length; ++index) {
+				DomainUtil.updateDomain(index, domains[index]);
+			}
+			this.tabs = newTabs;
+			ipcRenderer.send('update-menu', {
+				tabs: this.tabs,
+				activeTabIndex: this.activeTabIndex
+			});
+		}).bind(this);
 		this.$sortable = Sortable.create(this.$drag, {
 			dataIdAttr: 'data-sortable-id',
-			onEnd(event) {
-				const newTabs = [];
-				const domains = [];
-				const tabElements = document.querySelectorAll('#tabs-container .tab');
-				tabElements.forEach((el, index) => {
-					const oldIndex = +Number(el.getAttribute('data-tab-id'));
-					newTabs.push(_this.tabs[oldIndex]);
-					el.setAttribute('data-tab-id', index.toString());
-					domains.push(DomainUtil.getDomain(oldIndex));
-				});
-				for (let index = 0; index < domains.length; ++index) {
-					DomainUtil.updateDomain(index, domains[index]);
-				}
-				_this.tabs = newTabs;
-				let direction = 0;
-				const { oldIndex, newIndex } = event;
-				if (newIndex > oldIndex) {
-					direction = 1;
-				} else {
-					direction = -1;
-				}
-				this.setState({ direction, oldIndex, newIndex });
-				ipcRenderer.send('update-menu', {
-					tabs: _this.tabs,
-					activeTabIndex: _this.activeTabIndex
-				});
-			}
+			onEnd
 		});
 	}
 
@@ -341,15 +332,7 @@ class ServerManagerView {
 		// To handle position of servers' tooltip due to scrolling of list of organizations
 		// This could not be handled using CSS, hence the top of the tooltip is made same
 		// as that of its parent element.
-		let top = null;
-		const { dragged } = this.state;
-		if (dragged && index >= dragged.oldIndex && index < dragged.newIndex) {
-			top = this.$serverIconTooltip[index + (Number(dragged.direction) * -1 * (dragged.newIndex - dragged.oldIndex))].parentElement.getBoundingClientRect().top;
-		} else if (index === dragged.newIndex) {
-			top = this.$serverIconTooltip[index + (Number(dragged.direction) * (dragged.newIndex - dragged.oldIndex))].parentElement.getBoundingClientRect().top;
-		} else {
-			top = this.$serverIconTooltip[index].parentElement.getBoundingClientRect().top;
-		}
+		const top = this.$serverIconTooltip[index].parentElement.getBoundingClientRect().top;
 		this.$serverIconTooltip[index].style.top = top + 'px';
 	}