refactor(storageListeners): Added to the Storage Management custom event's types/names as optionals parameter.

Added an optional parameter for the `storageManagement.ts` functions: `event`, which can be just a single string or an array of strings. It can be used/understand as a "better connection" of events that can happen to the localStorage and components and functions that depend on these events.

For example: now components like the `ProgressBar.vue` just need to listen to changes on tasks and sub-tasks states changes and not listen to every update on the localStorage.

src/components/PageFooter.vue

@@ -49,7 +49,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		window.addEventListener('localStorage-changed', () => {
+		window.addEventListener('storageUpdated-meta', () => {
 			this.storage_updated = sm.get('date.updated', true)
 				? `${sm.get('date.updated', true).day.readable} ${
 						sm.get('date.updated', true).hour.readable

src/components/ProgressBar.vue

@@ -27,7 +27,10 @@ export default Vue.extend({
 		this.progress = this.getProgress().percentage;
 	},
 	mounted() {
-		window.addEventListener('localStorage-changed', () => {
+		window.addEventListener('storageUpdated-taskState', () => {
+			this.progress = this.getProgress().percentage;
+		});
+		window.addEventListener('storageUpdated-subTaskState', () => {
 			this.progress = this.getProgress().percentage;
 		});
 	},

src/components/SubTask/SubTaskComp.vue

@@ -53,14 +53,14 @@ export default Vue.extend({
 
 			localTasks[parentId].subTasks[this.id].checked = element.checked;
 
-			sm.set('tasks', localTasks);
+			sm.set('tasks', localTasks, [`subTaskList-${parentId}`, 'subTaskState']);
 		},
 		deleteSubTask(parentId: number) {
 			const localTasks: Task[] = sm.get('tasks');
 
 			localTasks[parentId].subTasks.splice(this.id, 1);
 
-			sm.set('tasks', localTasks);
+			sm.set('tasks', localTasks, [`subTaskList-${parentId}`, 'subTaskState']);
 		},
 	},
 });

src/components/SubTask/SubTaskInput.vue

@@ -33,7 +33,8 @@ export default Vue.extend({
 	},
 	methods: {
 		addSubTask: (parentId: number) => {
-			if (sm.get('tasks') === undefined) sm.add('tasks', []);
+			if (sm.get('tasks') === undefined)
+				sm.add('tasks', [], `subTaskList-${parentId}`);
 
 			const titleInput = document.querySelector(
 				`input#newSubTaskInputName-parent${parentId}`
@@ -75,11 +76,12 @@ export default Vue.extend({
 			parentTask.subTasks.push(subTaskItem);
 			localTasks[parentId] = parentTask;
 
-
-			sm.set('tasks', localTasks);
+			sm.set('tasks', localTasks, `subTaskList-${parentId}`);
 
 			(
-				document.querySelector(`input#newSubTaskInputName-parent${parentId}`) as HTMLInputElement
+				document.querySelector(
+					`input#newSubTaskInputName-parent${parentId}`
+				) as HTMLInputElement
 			).value = '';
 		},
 	},

src/components/SubTask/SubTaskList.vue

@@ -41,7 +41,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		window.addEventListener('localStorage-changed', () => {
+		window.addEventListener(`storageUpdated-subTaskList-${this.parent}`, () => {
 			this.subTaskList = sm.get('tasks')[this.parent].subTasks
 				? sm.get('tasks')[this.parent].subTasks
 				: [];

src/components/Task/TaskComp.vue

@@ -97,12 +97,12 @@ export default Vue.extend({
 
 			this.openSubTasks = false;
 
-			sm.set('tasks', tasks);
+			sm.set('tasks', tasks, ['taskList', 'taskState']);
 		},
 		deleteTask() {
 			const localTasks: Task[] = sm.get('tasks');
 			localTasks.splice(this.id, 1);
-			sm.set('tasks', localTasks);
+			sm.set('tasks', localTasks, ['taskList', 'taskState']);
 		},
 	},
 });

src/components/Task/TaskInput.vue

@@ -38,7 +38,7 @@ export default Vue.extend({
 	name: 'TaskInput',
 	methods: {
 		addTask: () => {
-			if (sm.get('tasks') === undefined) sm.add('tasks', []);
+			if (sm.get('tasks') === undefined) sm.add('tasks', [], 'taskList');
 
 			const titleInput = document.querySelector(
 				'input#newTaskInputName'
@@ -82,7 +82,7 @@ export default Vue.extend({
 
 			localTasks.push(taskItem);
 
-			sm.set('tasks', localTasks);
+			sm.set('tasks', localTasks, 'taskList');
 
 			(
 				document.querySelector('input#newTaskInputName') as HTMLInputElement

src/components/Task/TaskList.vue

@@ -27,16 +27,16 @@ export default Vue.extend({
 		};
 	},
 	beforeCreate() {
-		if (sm.get('tasks') === undefined) sm.add('tasks', []);
+		if (sm.get('tasks') === undefined) sm.add('tasks', [], 'taskList');
 
 		const localTasks: Task[] = sm.get('tasks');
 
 		for (const task of localTasks) task.newTask = false;
 
-		sm.set('tasks', localTasks);
+		sm.set('tasks', localTasks, 'taskList');
 	},
 	mounted() {
-		window.addEventListener('localStorage-changed', () => {
+		window.addEventListener('storageUpdated-taskList', () => {
 			this.list = sm.get('tasks') ? sm.get('tasks') : [];
 		});
 	},

src/components/ThemePicker.vue

@@ -19,7 +19,7 @@ import sm from '~/libs/storageManagement';
 
 export default Vue.extend({
 	methods: {
-		updateThemeInfo: (theme) => sm.set('theme', theme, false, true),
+		updateThemeInfo: (theme) => sm.set('theme', theme, 'meta', false, true),
 	},
 });
 </script>

src/libs/storageManagement.ts

@@ -12,8 +12,9 @@ const sm = {
 	 * Adds new value on `data`. *Don't create or rewrite the value if it already exists.*
 	 * @param {string} path New value's path on `data`;
 	 * @param {any} value New value;
+	 * @param {string | string[] | undefined} event Event or list of events types/names to be dispatched;
 	 */
-	add: (path: string, value: any): void => {
+	add: (path: string, value: any, event?: string | string[]): void => {
 		let data = sm.getJSON().data;
 
 		if (obj.getByString(data, `data.${path}`))
@@ -21,13 +22,14 @@ const sm = {
 
 		data = obj.setByString(data, value, path);
 
-		sm.setJSON(data);
+		sm.setJSON(data, event);
 	},
 
 	/**
 	 * Rewrite a value inside of `data` with a new *(creates a new path/value if it's doesn't exist before)*.
 	 * @param {string} path Value's path on `data`;
 	 * @param {any} value The new value to replace;
+	 * @param {string | string[] | undefined} event Event or list of events types/names to be dispatched;
 	 * @param {boolean | undefined} getOld Return the old value of the path?
 	 * @param {boolean | undefined} meta Update a value on `meta`?
 	 *
@@ -36,25 +38,26 @@ const sm = {
 	set: (
 		path: string,
 		value: any,
+		event?: string | string[],
 		getOld?: boolean,
 		meta?: boolean
 	): void | any => {
 		if (meta) {
 			let metaData = sm.getJSON();
 			metaData = obj.setByString(metaData, undefined, path);
-			sm.setJSON(metaData, true);
+			sm.setJSON(metaData, 'meta', true);
 			return;
 		}
 
 		let data = sm.getJSON().data;
 
-		if (obj.getByString(data, path)) return sm.add(path, value);
+		if (obj.getByString(data, path)) return sm.add(path, value, event);
 
 		const oldValue = obj.getByString(data, path);
 
 		data = obj.setByString(data, value, path);
 
-		sm.setJSON(data);
+		sm.setJSON(data, event);
 
 		if (getOld) return oldValue;
 	},
@@ -81,18 +84,23 @@ const sm = {
 	/**
 	 * Removes a value from localStorage's data
 	 * @param {string} path Value's path on `data`;
+	 * @param {string | string[] | undefined} event Event or list of events types/names to be dispatched;
 	 * @param {boolean | undefined} getOld Return the old value of the path?
 	 *
 	 * @returns The old value of the path, if `getOld` is `true`.
 	 */
-	remove: (path: string, getOld?: boolean): void | any => {
+	remove: (
+		path: string,
+		event?: string | string[],
+		getOld?: boolean
+	): void | any => {
 		let data = sm.getJSON().data;
 
 		const oldValue = obj.getByString(data, path);
 
 		data = obj.setByString(data, undefined, path);
 
-		sm.setJSON(data);
+		sm.setJSON(data, event);
 
 		if (getOld) return oldValue;
 	},
@@ -118,11 +126,16 @@ const sm = {
 	/**
 	 * Sets a new `data` on the local storage JSON file *(also updates the `date.updated` meta-information)*.
 	 * @param {DataInfo | object} newData New data object to be updated/set;
+	 * @param {string | string[]} event Event or list of events types/names to be dispatched;
 	 * @param {boolean} meta Do new data parameters contain `meta` information?
 	 *
 	 * **Used internally by the storage management.**
 	 */
-	setJSON: (newData: DataInfo | object, meta?: boolean) => {
+	setJSON: (
+		newData: DataInfo | object,
+		event?: string | string[],
+		meta?: boolean
+	) => {
 		if (meta) localStorage.setItem(storageIndex, JSON.stringify(newData));
 		else {
 			const newJSON: StorageSchema = { meta: sm.getJSON().meta, data: newData };
@@ -139,8 +152,20 @@ const sm = {
 			};
 
 			localStorage.setItem(storageIndex, JSON.stringify(updatedJSON));
+
+			if (event || event !== '') {
+				if (event instanceof Array) {
+					for (const e of event) {
+						window.dispatchEvent(new CustomEvent(`storageUpdated-${e}`));
+					}
+				} else {
+					window.dispatchEvent(new CustomEvent(`storageUpdated-${event}`));
+				}
+			} else {
+				window.dispatchEvent(new CustomEvent('storageUpdated'));
+			}
 		}
-		window.dispatchEvent(new CustomEvent('localStorage-changed'));
+		window.dispatchEvent(new CustomEvent('storageUpdated-meta'));
 	},
 
 	/**
@@ -195,7 +220,7 @@ const sm = {
 			data: {},
 		};
 
-		sm.setJSON(storage, true);
+		sm.setJSON(storage, 'meta', true);
 	},
 };