From faa2daa87627abfe679b3714650efa9db1308466 Mon Sep 17 00:00:00 2001
From: dpschen <dpschen@noreply.kolaente.de>
Date: Wed, 6 Oct 2021 20:25:06 +0000
Subject: [PATCH] feat: remove lodash dependency (#743)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/743
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
---
 cypress/integration/task/task.spec.js         |  2 +-
 cypress/support/factory.js                    |  6 ++-
 package.json                                  |  1 -
 src/components/list/partials/filters.vue      | 28 +++++++-------
 src/components/tasks/mixins/taskList.js       |  3 +-
 .../tasks/partials/editAssignees.vue          |  9 ++---
 src/components/tasks/partials/editLabels.vue  | 10 +----
 src/helpers/find.ts                           |  3 --
 src/helpers/utils.ts                          | 22 +++++++++++
 src/models/abstractModel.js                   | 11 +++---
 src/models/teamList.js                        | 11 ++----
 src/models/teamMember.js                      | 13 +++----
 src/models/teamNamespace.js                   | 11 ++----
 src/models/userList.js                        | 11 ++----
 src/models/userNamespace.js                   | 11 ++----
 src/services/abstractService.js               |  9 ++---
 src/store/modules/attachments.js              |  2 +-
 src/store/modules/kanban.js                   |  3 +-
 src/store/modules/labels.js                   | 37 ++++++++++++++++++-
 yarn.lock                                     |  2 +-
 20 files changed, 116 insertions(+), 89 deletions(-)
 delete mode 100644 src/helpers/find.ts
 create mode 100644 src/helpers/utils.ts

diff --git a/cypress/integration/task/task.spec.js b/cypress/integration/task/task.spec.js
index 83025aaa2..e661f1d29 100644
--- a/cypress/integration/task/task.spec.js
+++ b/cypress/integration/task/task.spec.js
@@ -353,7 +353,7 @@ describe('Task', () => {
 				.first()
 				.click()
 
-			cy.get('.global-notification')
+			cy.get('.global-notification', { timeout: 4000 })
 				.should('contain', 'Success')
 			cy.get('.task-view .details.labels-list .multiselect .input-wrapper span.tag')
 				.should('exist')
diff --git a/cypress/support/factory.js b/cypress/support/factory.js
index 0c50bf8fc..934f2fae9 100644
--- a/cypress/support/factory.js
+++ b/cypress/support/factory.js
@@ -1,5 +1,4 @@
 import {seed} from './seed'
-import merge from 'lodash/merge'
 
 /**
  * A factory makes it easy to seed the database with data.
@@ -25,7 +24,10 @@ export class Factory {
 		const data = []
 
 		for (let i = 1; i <= count; i++) {
-			const entry = merge(this.factory(), override)
+			const entry = {
+				...this.factory(),
+				...override,
+			}
 			for (const e in entry) {
 				if(typeof entry[e] === 'function') {
 					entry[e] = entry[e](i)
diff --git a/package.json b/package.json
index b2e624944..b83283f6f 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
     "dompurify": "2.3.3",
     "highlight.js": "11.2.0",
     "is-touch-device": "1.0.1",
-    "lodash": "4.17.21",
     "marked": "3.0.4",
     "register-service-worker": "1.7.2",
     "snake-case": "3.0.4",
diff --git a/src/components/list/partials/filters.vue b/src/components/list/partials/filters.vue
index 67e535624..d9a25f3a2 100644
--- a/src/components/list/partials/filters.vue
+++ b/src/components/list/partials/filters.vue
@@ -178,9 +178,8 @@ import Fancycheckbox from '../../input/fancycheckbox'
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 
+import {includesById} from '@/helpers/utils'
 import {formatISO} from 'date-fns'
-import differenceWith from 'lodash/differenceWith'
-
 import PrioritySelect from '@/components/tasks/partials/prioritySelect.vue'
 import PercentDoneSelect from '@/components/tasks/partials/percentDoneSelect.vue'
 import Multiselect from '@/components/input/multiselect.vue'
@@ -269,13 +268,7 @@ export default {
 	},
 	computed: {
 		foundLabels() {
-			const labels = (Object.values(this.$store.state.labels.labels).filter(l => {
-				return l.title.toLowerCase().includes(this.labelQuery.toLowerCase())
-			}) ?? [])
-
-			return differenceWith(labels, this.labels, (first, second) => {
-				return first.id === second.id
-			})
+			return this.$store.getters['labels/filterLabelsByQuery'](this.labels, this.query)
 		},
 		flatPickerConfig() {
 			return {
@@ -309,8 +302,13 @@ export default {
 			this.prepareRelatedObjectFilter('namespace')
 
 			this.prepareSingleValue('labels')
-			const labelIds = (typeof this.filters.labels === 'string' ? this.filters.labels : '').split(',').map(i => parseInt(i))
-			this.labels = (Object.values(this.$store.state.labels.labels).filter(l => labelIds.includes(l.id)) ?? [])
+
+			const labels = typeof this.filters.labels === 'string'
+				? this.filters.labels
+				: ''
+			const labelIds = labels.split(',').map(i => parseInt(i))
+
+			this.labels = this.$store.getters['labels/getLabelsByIds'](labelIds)
 		},
 		removePropertyFromFilter(propertyName) {
 			// Because of the way arrays work, we can only ever remove one element at once.
@@ -533,10 +531,10 @@ export default {
 
 			this[`${kind}Service`].getAll({}, {s: query})
 				.then(response => {
-					// Filter the results to not include users who are already assigneid
-					this.$set(this, `found${kind}`, differenceWith(response, this[kind], (first, second) => {
-						return first.id === second.id
-					}))
+					// Filter users from the results who are already assigned
+					const unassignedUsers = response.filter(({id}) => !includesById(this[kind], id))
+
+					this.$set(this, `found${kind}`, unassignedUsers)
 				})
 				.catch(e => {
 					this.$message.error(e)
diff --git a/src/components/tasks/mixins/taskList.js b/src/components/tasks/mixins/taskList.js
index b15462f80..130e93908 100644
--- a/src/components/tasks/mixins/taskList.js
+++ b/src/components/tasks/mixins/taskList.js
@@ -1,5 +1,4 @@
 import TaskCollectionService from '@/services/taskCollection'
-import cloneDeep from 'lodash/cloneDeep'
 
 // FIXME: merge with DEFAULT_PARAMS in filters.vue
 const DEFAULT_PARAMS = {
@@ -83,7 +82,7 @@ export default {
 					this.tasks = r
 					this.currentPage = page
 
-					this.loadedList = cloneDeep(currentList)
+					this.loadedList = JSON.parse(JSON.stringify(currentList))
 				})
 				.catch(e => {
 					this.$message.error(e)
diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index 9a666ee83..1fe0b3983 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@@ -29,8 +29,7 @@
 </template>
 
 <script>
-import differenceWith from 'lodash/differenceWith'
-
+import {includesById} from '@/helpers/utils'
 import UserModel from '../../../models/user'
 import ListUserService from '../../../services/listUsers'
 import TaskAssigneeService from '../../../services/taskAssignee'
@@ -111,9 +110,9 @@ export default {
 			this.listUserService.getAll({listId: this.listId}, {s: query})
 				.then(response => {
 					// Filter the results to not include users who are already assigned
-					this.$set(this, 'foundUsers', differenceWith(response, this.assignees, (first, second) => {
-						return first.id === second.id
-					}))
+					const filteredResponse = response.filter(({id}) => !includesById(this.assignees, id))
+
+					this.$set(this, 'foundUsers', filteredResponse)
 				})
 				.catch(e => {
 					this.$message.error(e)
diff --git a/src/components/tasks/partials/editLabels.vue b/src/components/tasks/partials/editLabels.vue
index 8991554a3..279ecfdf9 100644
--- a/src/components/tasks/partials/editLabels.vue
+++ b/src/components/tasks/partials/editLabels.vue
@@ -38,8 +38,6 @@
 </template>
 
 <script>
-import differenceWith from 'lodash/differenceWith'
-
 import LabelModel from '../../../models/label'
 import LabelTaskService from '../../../services/labelTask'
 
@@ -83,13 +81,7 @@ export default {
 	},
 	computed: {
 		foundLabels() {
-			const labels = (Object.values(this.$store.state.labels.labels).filter(l => {
-				return l.title.toLowerCase().includes(this.query.toLowerCase())
-			}) ?? [])
-
-			return differenceWith(labels, this.labels, (first, second) => {
-				return first.id === second.id
-			})
+			return this.$store.getters['labels/filterLabelsByQuery'](this.labels, this.query)
 		},
 		loading() {
 			return this.labelTaskService.loading || (this.$store.state[LOADING] && this.$store.state[LOADING_MODULE] === 'labels')
diff --git a/src/helpers/find.ts b/src/helpers/find.ts
deleted file mode 100644
index 58ed77900..000000000
--- a/src/helpers/find.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function findIndexById(array : [], id : string | number) {
-	return array.findIndex(({id: currentId}) => currentId === id)
-}
\ No newline at end of file
diff --git a/src/helpers/utils.ts b/src/helpers/utils.ts
new file mode 100644
index 000000000..34d674c44
--- /dev/null
+++ b/src/helpers/utils.ts
@@ -0,0 +1,22 @@
+export function findIndexById(array : [], id : string | number) {
+	return array.findIndex(({id: currentId}) => currentId === id)
+}
+
+export function includesById(array: [], id: string | number) {
+	return array.some(({id: currentId}) => currentId === id)
+}
+
+// https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_isnil
+export function isNil(value: any) {
+	return value == null
+}
+
+export function omitBy(obj: {}, check: (value: any) => Boolean): {} {
+	if (isNil(obj)) {
+		return {}
+	}
+
+	return Object.fromEntries(
+		Object.entries(obj).filter(([, value]) => !check(value)),
+	)
+}
\ No newline at end of file
diff --git a/src/models/abstractModel.js b/src/models/abstractModel.js
index 2db6c37c4..202ccde9d 100644
--- a/src/models/abstractModel.js
+++ b/src/models/abstractModel.js
@@ -1,7 +1,5 @@
-import defaults from 'lodash/defaults'
-import isNil from 'lodash/isNil'
-import omitBy from 'lodash/omitBy'
 import {objectToCamelCase} from '@/helpers/case'
+import {omitBy, isNil} from '@/helpers/utils'
 
 export default class AbstractModel {
 
@@ -16,11 +14,14 @@ export default class AbstractModel {
 	 * @param data
 	 */
 	constructor(data) {
-
 		data = objectToCamelCase(data)
 
 		// Put all data in our model while overriding those with a value of null or undefined with their defaults
-		defaults(this, omitBy(data, isNil), this.defaults())
+		Object.assign(
+			this,
+			this.defaults(),
+			omitBy(data, isNil),
+		)
 	}
 
 	/**
diff --git a/src/models/teamList.js b/src/models/teamList.js
index 141366679..d000a01b1 100644
--- a/src/models/teamList.js
+++ b/src/models/teamList.js
@@ -1,13 +1,10 @@
 import TeamShareBaseModel from './teamShareBase'
-import merge from 'lodash/merge'
 
 export default class TeamListModel extends TeamShareBaseModel {
 	defaults() {
-		return merge(
-			super.defaults(),
-			{
-				listId: 0,
-			},
-		)
+		return {
+			...super.defaults(),
+			listId: 0,
+		}
 	}
 }
\ No newline at end of file
diff --git a/src/models/teamMember.js b/src/models/teamMember.js
index 1f499e56f..2e5e236ae 100644
--- a/src/models/teamMember.js
+++ b/src/models/teamMember.js
@@ -1,14 +1,11 @@
 import UserModel from './user'
-import merge from 'lodash/merge'
 
 export default class TeamMemberModel extends UserModel {
 	defaults() {
-		return merge(
-			super.defaults(),
-			{
-				admin: false,
-				teamId: 0,
-			},
-		)
+		return {
+			...super.defaults(),
+			admin: false,
+			teamId: 0,
+		}
 	}
 }
\ No newline at end of file
diff --git a/src/models/teamNamespace.js b/src/models/teamNamespace.js
index 0e93fa976..4c1c7521d 100644
--- a/src/models/teamNamespace.js
+++ b/src/models/teamNamespace.js
@@ -1,13 +1,10 @@
 import TeamShareBaseModel from './teamShareBase'
-import merge from 'lodash/merge'
 
 export default class TeamNamespaceModel extends TeamShareBaseModel {
 	defaults() {
-		return merge(
-			super.defaults(),
-			{
-				namespaceId: 0,
-			},
-		)
+		return {
+			...super.defaults(),
+			namespaceId: 0,
+		}
 	}
 }
\ No newline at end of file
diff --git a/src/models/userList.js b/src/models/userList.js
index 717fe746a..42bde509c 100644
--- a/src/models/userList.js
+++ b/src/models/userList.js
@@ -1,14 +1,11 @@
 import UserShareBaseModel from './userShareBase'
-import merge from 'lodash/merge'
 
 // This class extends the user share model with a 'rights' parameter which is used in sharing
 export default class UserListModel extends UserShareBaseModel {
 	defaults() {
-		return merge(
-			super.defaults(),
-			{
-				listId: 0,
-			},
-		)
+		return {
+			...super.defaults(),
+			listId: 0,
+		}
 	}
 }
\ No newline at end of file
diff --git a/src/models/userNamespace.js b/src/models/userNamespace.js
index a8243efcc..085ece650 100644
--- a/src/models/userNamespace.js
+++ b/src/models/userNamespace.js
@@ -1,14 +1,11 @@
 import UserShareBaseModel from './userShareBase'
-import merge from 'lodash/merge'
 
 // This class extends the user share model with a 'rights' parameter which is used in sharing
 export default class UserNamespaceModel extends UserShareBaseModel {
 	defaults() {
-		return merge(
-			super.defaults(),
-			{
-				namespaceId: 0,
-			},
-		)
+		return {
+			...super.defaults(),
+			namespaceId: 0,
+		}
 	}
 }
\ No newline at end of file
diff --git a/src/services/abstractService.js b/src/services/abstractService.js
index aa2ad9216..0aef3c375 100644
--- a/src/services/abstractService.js
+++ b/src/services/abstractService.js
@@ -1,6 +1,4 @@
 import axios from 'axios'
-import reduce from 'lodash/reduce'
-import replace from 'lodash/replace'
 import {objectToSnakeCase} from '@/helpers/case'
 import {getToken} from '@/helpers/auth'
 
@@ -157,9 +155,10 @@ export default class AbstractService {
 	 */
 	getReplacedRoute(path, pathparams) {
 		let replacements = this.getRouteReplacements(path, pathparams)
-		return reduce(replacements, function (result, value, parameter) {
-			return replace(result, parameter, value)
-		}, path)
+		return Object.entries(replacements).reduce(
+			(result, [parameter, value])  => result.replace(parameter, value),
+			path,
+		)
 	}
 
 	/**
diff --git a/src/store/modules/attachments.js b/src/store/modules/attachments.js
index 02f5b824f..516ddf359 100644
--- a/src/store/modules/attachments.js
+++ b/src/store/modules/attachments.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-import {findIndexById} from '@/helpers/find'
+import {findIndexById} from '@/helpers/utils'
 
 export default {
 	namespaced: true,
diff --git a/src/store/modules/kanban.js b/src/store/modules/kanban.js
index b15b6d0e0..73fb1954f 100644
--- a/src/store/modules/kanban.js
+++ b/src/store/modules/kanban.js
@@ -1,5 +1,4 @@
 import Vue from 'vue'
-import cloneDeep from 'lodash/cloneDeep'
 
 import BucketService from '../../services/bucket'
 import {filterObject} from '@/helpers/filterObject'
@@ -206,7 +205,7 @@ export default {
 			const cancel = setLoading(ctx, 'kanban')
 			ctx.commit('setBucketLoading', {bucketId: bucketId, loading: true})
 
-			const params = cloneDeep(ps)
+			const params = JSON.parse(JSON.stringify(ps))
 
 			params.sort_by = 'kanban_position'
 			params.order_by = 'asc'
diff --git a/src/store/modules/labels.js b/src/store/modules/labels.js
index f8dde6563..40e4bc22d 100644
--- a/src/store/modules/labels.js
+++ b/src/store/modules/labels.js
@@ -2,10 +2,37 @@ import LabelService from '@/services/label'
 import Vue from 'vue'
 import {setLoading} from '@/store/helper'
 
+/**
+ * Returns the labels by id if found
+ * @param {Object} state 
+ * @param {Array} ids 
+ * @returns {Array}
+ */
+function getLabelsByIds(state, ids) {
+	return Object.values(state.labels).filter(({id}) => ids.includes(id))
+}
+
+/**
+ * Checks if a list of labels is available in the store and filters them then query
+ * @param {Object} state 
+ * @param {Array} labels 
+ * @param {String} query 
+ * @returns {Array}
+ */
+ function filterLabelsByQuery(state, labels, query) {
+	const labelIds = labels.map(({id}) => id)
+	const foundLabels = getLabelsByIds(state, labelIds)
+	const labelQuery = query.toLowerCase()
+
+	return foundLabels.filter(({title}) => {
+		return !title.toLowerCase().includes(labelQuery)
+	})
+}
+
 export default {
 	namespaced: true,
-	// The state is an object which has the label ids as keys.
 	state: () => ({
+		// The labels are stored as an object which has the label ids as keys.
 		labels: {},
 		loaded: false,
 	}),
@@ -25,6 +52,14 @@ export default {
 			state.loaded = loaded
 		},
 	},
+	getters: {
+		getLabelsByIds(state) {
+			return (ids) => getLabelsByIds(state, ids)
+		},
+		filterLabelsByQuery(state) {
+			return (...arr) => filterLabelsByQuery(state, ...arr)
+		},
+	},
 	actions: {
 		loadAllLabels(ctx, {forceLoad} = {}) {
 			if (ctx.state.loaded && !forceLoad) {
diff --git a/yarn.lock b/yarn.lock
index 4608f9e59..df244ed8c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5511,7 +5511,7 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
 
-lodash@4.17.21, lodash@4.x, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
+lodash@4.x, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==