Add validation for list ID and disable if not valid.

Add component to Home with undefined list id.

src/components/tasks/add-task.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="field is-grouped">
+	<div class="field is-grouped" v-if="validListIdAvailable">
 		<p
 			:class="{ 'is-loading': taskService.loading }"
 			class="control has-icons-left is-expanded"
@@ -52,6 +52,8 @@ export default {
 			taskService: TaskService,
 			labelService: LabelService,
 			labelTaskService: LabelTaskService,
+			listIdForNewTask: undefined,
+			validListIdAvailable: false,
 		};
 	},
 	components: {},
@@ -67,6 +69,13 @@ export default {
 		this.labelService = new LabelService();
 		this.labelTaskService = new LabelTaskService();
 	},
+	beforeMount() {
+				console.log(this.listId);
+		if (this.listId !== undefined) {
+			this.listIdForNewTask = this.listId;
+			this.validListIdAvailable = true;
+		}
+	},
 	methods: {
 		addTask() {
 			if (this.newTaskText === '') {
@@ -77,13 +86,9 @@ export default {
 
 			const task = new TaskModel({
 				title: this.newTaskText,
-				listId: this.listId,
+				listId: this.listIdForNewTask,
 			});
 
-			if (this.listId === undefined) {
-				// TODO: Have a default list in settings as a option, waiting on API PR.
-				task.listId = 1;
-			}
 			this.taskService
 				.create(task)
 				.then(task => {
@@ -190,10 +195,6 @@ export default {
 						Promise.all(labelAddsToWaitFor).then(() => {
 							this.taskService
 								.update(task)
-								// .then(updatedTask => {
-								// 	this.updateTasks(updatedTask);
-								// 	this.$store.commit(HAS_TASKS, true);
-								// })
 								.then(() => {
 									this.$store.commit(HAS_TASKS, true);
 								})

src/views/Home.vue

@@ -3,8 +3,9 @@
 		<h2>
 			Hi {{ userInfo.name !== '' ? userInfo.name : userInfo.username }}!
 		</h2>
+		<div>{{ defaultListId }}</div>
 		<add-task
-			:list="defaultList"
+			:listId="defaultListId"
 			@taskAdded="updateTaskList"
 			class="is-max-width-desktop"
 		/>
@@ -37,7 +38,6 @@
 import { mapState } from 'vuex';
 import ShowTasks from './tasks/ShowTasks';
 import AddTask from '../components/tasks/add-task';
-import ListModel from '../models/list';
 
 export default {
 	name: 'Home',
@@ -50,13 +50,12 @@ export default {
 			loading: false,
 			currentDate: new Date(),
 			tasks: [],
-			defaultList: ListModel,
+			defaultListId: undefined,
 			showTasksKey: 0,
 		};
 	},
 	created() {
-		this.defaultList = new ListModel();
+		//TODO: Load the value from user settings. Until then it will not render the add task component.
-		this.defaultList.id = 1;
 	},
 	computed: mapState({
 		migratorsEnabled: state =>