Refactor client side commands

Co-Authored-By: Max Leiter <hello@maxleiter.com>

client/components/ChatInput.vue

@@ -30,6 +30,7 @@
 
 <script>
 const $ = require("jquery");
+const commands = require("../js/commands/index");
 const socket = require("../js/socket");
 const Mousetrap = require("mousetrap");
 const {wrapCursor} = require("undate");
@@ -121,11 +122,11 @@ export default {
 			this.channel.pendingMessage = "";
 			// resetInputHeight(input.get(0));
 
-			if (text.charAt(0) === "/") {
+			if (text[0] === "/") {
 				const args = text.substr(1).split(" ");
 				const cmd = args.shift().toLowerCase();
 
-				if (typeof utils.inputCommands[cmd] === "function" && utils.inputCommands[cmd](args)) {
+				if (commands[cmd] && commands[cmd].input(args)) {
 					return false;
 				}
 			}

client/js/commands/collapse.js

@@ -0,0 +1,8 @@
+"use strict";
+
+const $ = require("jquery");
+
+exports.input = function() {
+	$(".chan.active .toggle-button.toggle-preview.opened").click();
+	return true;
+};

client/js/commands/expand.js

@@ -0,0 +1,8 @@
+"use strict";
+
+const $ = require("jquery");
+
+exports.input = function() {
+	$(".chan.active .toggle-button.toggle-preview:not(.opened)").click();
+	return true;
+};

client/js/commands/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+// Taken from views/index.js
+
+// This creates a version of `require()` in the context of the current
+// directory, so we iterate over its content, which is a map statically built by
+// Webpack.
+// Second argument says it's recursive, third makes sure we only load javascript.
+const commands = require.context("./", true, /\.js$/);
+
+module.exports = commands.keys().reduce((acc, path) => {
+	const command = path.substring(2, path.length - 3);
+
+	if (command === "index") {
+		return acc;
+	}
+
+	acc[command] = commands(path);
+
+	return acc;
+}, {});

client/js/commands/join.js

@@ -0,0 +1,26 @@
+"use strict";
+
+const $ = require("jquery");
+
+exports.input = function(args) {
+	console.log(args);
+	const channel = args[0];
+	const utils = require("../utils");
+	const socket = require("../socket");
+	const {vueApp} = require("../vue");
+
+	if (channel) {
+		const chan = utils.findCurrentNetworkChan(channel);
+
+		if (chan) {
+			$(`#sidebar .chan[data-id="${chan.id}"]`).trigger("click");
+		}
+	} else if (vueApp.activeChannel.channel.type === "channel") {
+		socket.emit("input", {
+			target: vueApp.activeChannel.channel.id,
+			text: `/join ${vueApp.activeChannel.channel.name}`,
+		});
+
+		return true;
+	}
+};

client/js/utils.js

@@ -11,7 +11,6 @@ var lastMessageId = -1; // eslint-disable-line no-var
 module.exports = {
 	// Same value as media query in CSS that forces sidebars to become overlays
 	mobileViewportPixels: 768,
-	inputCommands: {collapse, expand, join},
 	findCurrentNetworkChan,
 	serverHash,
 	lastMessageId,
@@ -58,28 +57,6 @@ function scrollIntoViewNicely(el) {
 	el.scrollIntoView({block: "center", inline: "nearest"});
 }
 
-function collapse() {
-	$(".chan.active .toggle-button.toggle-preview.opened").click();
-	return true;
-}
-
-function expand() {
-	$(".chan.active .toggle-button.toggle-preview:not(.opened)").click();
-	return true;
-}
-
-function join(args) {
-	const channel = args[0];
-
-	if (channel) {
-		const chan = findCurrentNetworkChan(channel);
-
-		if (chan) {
-			$(`#sidebar .chan[data-id="${chan.id}"]`).trigger("click");
-		}
-	}
-}
-
 const favicon = $("#favicon");
 
 function toggleNotificationMarkers(newState) {