refactor: update dom after diff deletion better

public/src/client/topic/diffs.js

@@ -1,17 +1,52 @@
 'use strict';
 
 define('forum/topic/diffs', ['api', 'bootbox', 'forum/topic/images'], function (api, bootbox) {
-	var Diffs = {};
+	const Diffs = {};
+	const localeStringOpts = { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' };
 
 	Diffs.open = function (pid) {
 		if (!config.enablePostHistory) {
 			return;
 		}
 
-		openModal(pid);
+		api.get(`/posts/${pid}/diffs`, {}).then((data) => {
+			parsePostHistory(data).then(($html) => {
+				const $modal = bootbox.dialog({ title: '[[topic:diffs.title]]', message: $html, size: 'large' });
+
+				if (!data.timestamps.length) {
+					return;
+				}
+
+				const $selectEl = $modal.find('select');
+				const $revertEl = $modal.find('button[data-action="restore"]');
+				const $deleteEl = $modal.find('button[data-action="delete"]');
+				const $postContainer = $modal.find('ul.posts-list');
+				const $numberOfDiffCon = $modal.find('.number-of-diffs strong');
+
+				$selectEl.on('change', function () {
+					Diffs.load(pid, this.value, $postContainer);
+					$revertEl.prop('disabled', data.timestamps.indexOf(this.value) === 0);
+					$deleteEl.prop('disabled', data.timestamps.indexOf(this.value) === 0);
+				});
+
+				$revertEl.on('click', function () {
+					Diffs.restore(pid, $selectEl.val(), $modal);
+				});
+
+				$deleteEl.on('click', function () {
+					Diffs.delete(pid, $selectEl.val(), $selectEl, $numberOfDiffCon);
+				});
+
+				$modal.on('shown.bs.modal', function () {
+					Diffs.load(pid, $selectEl.val(), $postContainer);
+					$revertEl.prop('disabled', true);
+					$deleteEl.prop('disabled', true);
+				});
+			});
+		}).catch(app.alertError);
 	};
 
-	Diffs.load = function (pid, since, postContainer) {
+	Diffs.load = function (pid, since, $postContainer) {
 		if (!config.enablePostHistory) {
 			return;
 		}
@@ -21,37 +56,40 @@ define('forum/topic/diffs', ['api', 'bootbox', 'forum/topic/images'], function (
 
 			app.parseAndTranslate('partials/posts_list', 'posts', {
 				posts: [data],
-			}, function (html) {
-				postContainer.empty().append(html);
+			}, function ($html) {
+				$postContainer.empty().append($html);
 			});
 		}).catch(app.alertError);
 	};
 
-	Diffs.restore = function (pid, since, modal) {
+	Diffs.restore = function (pid, since, $modal) {
 		if (!config.enablePostHistory) {
 			return;
 		}
 
 		api.put(`/posts/${pid}/diffs/${since}`, {}).then(() => {
-			modal.modal('hide');
+			$modal.modal('hide');
 			app.alertSuccess('[[topic:diffs.post-restored]]');
 		}).catch(app.alertError);
 	};
 
-	Diffs.delete = function (pid, timestamp, modal) {
-		api.del(`/posts/${pid}/diffs/${timestamp}`).then(() => {
-			openModal(pid, modal);
-			app.alertSuccess('[[topic:diffs.deleted]]');
+	Diffs.delete = function (pid, timestamp, $selectEl, $numberOfDiffCon) {
+		api.del(`/posts/${pid}/diffs/${timestamp}`).then((data) => {
+			parsePostHistory(data, 'diffs').then(($html) => {
+				$selectEl.empty().append($html);
+				$selectEl.trigger('change');
+				const numberOfDiffs = $selectEl.find('option').length;
+				$numberOfDiffCon.text(numberOfDiffs);
+				app.alertSuccess('[[topic:diffs.deleted]]');
+			});
 		}).catch(app.alertError);
 	};
 
-	function openModal(pid, modal) {
-		var localeStringOpts = { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' };
-
-		api.get(`/posts/${pid}/diffs`, {}).then((data) => {
-			app.parseAndTranslate('partials/modals/post_history', {
+	function parsePostHistory(data, blockName) {
+		return new Promise((resolve) => {
+			const params = [{
 				diffs: data.revisions.map(function (revision) {
-					var timestamp = parseInt(revision.timestamp, 10);
+					const timestamp = parseInt(revision.timestamp, 10);
 
 					return {
 						username: revision.username,
@@ -62,48 +100,16 @@ define('forum/topic/diffs', ['api', 'bootbox', 'forum/topic/images'], function (
 				numDiffs: data.timestamps.length,
 				editable: data.editable,
 				deletable: data.deletable,
-			}, function (html) {
-				const modalExists = !!modal;
-				if (modalExists) {
-					modal.find('.modal-body').html(html);
-				} else {
-					modal = bootbox.dialog({ title: '[[topic:diffs.title]]', message: html, size: 'large' });
-				}
+			}, function ($html) {
+				resolve($html);
+			}];
 
-				if (!data.timestamps.length) {
-					return;
-				}
+			if (blockName) {
+				params.unshift(blockName);
+			}
 
-				var selectEl = modal.find('select');
-				var revertEl = modal.find('button[data-action="restore"]');
-				var deleteEl = modal.find('button[data-action="delete"]');
-				var postContainer = modal.find('ul.posts-list');
-
-				selectEl.on('change', function () {
-					Diffs.load(pid, this.value, postContainer);
-					revertEl.prop('disabled', data.timestamps.indexOf(this.value) === 0);
-					deleteEl.prop('disabled', data.timestamps.indexOf(this.value) === 0);
-				});
-
-				revertEl.on('click', function () {
-					Diffs.restore(pid, selectEl.val(), modal);
-				});
-
-				deleteEl.on('click', function () {
-					Diffs.delete(pid, selectEl.val(), modal);
-				});
-
-				modal.on('shown.bs.modal', function () {
-					Diffs.load(pid, selectEl.val(), postContainer);
-					revertEl.prop('disabled', true);
-					deleteEl.prop('disabled', true);
-				});
-
-				if (modalExists) {
-					modal.trigger('shown.bs.modal');
-				}
-			});
-		}).catch(app.alertError);
+			app.parseAndTranslate('partials/modals/post_history', ...params);
+		});
 	}
 
 	return Diffs;

src/controllers/write/posts.js

@@ -109,5 +109,5 @@ Posts.deleteDiff = async (req, res) => {
 
 	await posts.diffs.delete(req.params.pid, req.params.timestamp, req.uid);
 
-	helpers.formatApiResponse(200, res);
+	helpers.formatApiResponse(200, res, await api.posts.getDiffs(req, { ...req.params }));
 };