replace sorting and filtering logic with lodash

app/javascript/controllers/opening_times_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
+import _ from "lodash";
 
 const dayOrder = [
 	"Monday",
@@ -25,17 +26,10 @@ const openingHoursObj = (openSpec) => ({
 });
 
 const sortedOpeningHours = (openSpecArray) =>
-	[...openSpecArray]
-		.sort(
-			(a, b) =>
-				parseFloat(openingHoursObj(a).open.replace(":", ".")) -
-				parseFloat(openingHoursObj(b).open.replace(":", ".")),
-		)
-		.sort(
-			(a, b) =>
-				dayOrder.indexOf(openingHoursObj(a).day) -
-				dayOrder.indexOf(openingHoursObj(b).day),
-		);
+	_.orderBy(openSpecArray, [
+		(el) => dayOrder.indexOf(openingHoursObj(el).day),
+		(el) => parseFloat(openingHoursObj(el).open.replace(":", ".")),
+	]);
 
 const nextDay = (day) => {
 	const index =
@@ -50,11 +44,6 @@ const openingHoursEnglish = (openSpec) => {
 		: `${day} from ${open} to ${close}`;
 };
 
-const removeTime = (openSpecArray, openSpec) =>
-	[...openSpecArray].filter(
-		(el) => JSON.stringify(el) !== JSON.stringify(openSpec),
-	);
-
 const element = (type, content = "", classes = []) => {
 	const el = document.createElement(type);
 	el.innerHTML = content;
@@ -115,7 +104,10 @@ export default class extends Controller {
 					"btn-sm",
 				]);
 				btn.onclick = () => {
-					this.dataValue = removeTime(this.dataValue, openSpec);
+					// remove opening time
+					this.dataValue = [...this.dataValue].filter(
+						(el) => !_.isEqual(el, openSpec),
+					);
 				};
 				li.appendChild(btn);
 				return li;

package.json

@@ -22,6 +22,7 @@
     "esbuild-vue": "^1.2.1",
     "jquery": "^3.6.0",
     "leaflet": "^1.6.0",
+    "lodash": "^4.17.21",
     "minimist": "1.2.6",
     "popper.js": "1.16.1",
     "sass": "^1.50.1",