Update the listname after dropped to list and reload page

helpers/api.js

@@ -150,3 +150,17 @@ export function filterFromData(data, searchTerm) {
 
   return filteredData;
 }
+
+// updates only the with the keys passed.
+export function genericUpdate(id, data) {
+  let appData = getAppData();
+  let taskToUpdate = appData?.tasks?.find(task => task.id === id);
+
+  Object.keys(data).forEach(d => {
+    taskToUpdate[d] = data[d]
+  });
+  let allTask = appData?.tasks?.map(task => task.id === id ? taskToUpdate : task);
+
+  appData.tasks = allTask;
+  localStorage.setItem(APP_DATA_KEY, stringifyIt(appData));
+}

pages/js/droppable.js

@@ -1,17 +1,30 @@
+import { genericUpdate } from '../../helpers/api.js'
+
 export function dragFrom(ev) {
   ev.dataTransfer.setData("text", ev.target.id);
 }
 
 export function dropTo(ev, cardContainerType) {
   ev.preventDefault();
-
   var data = ev.dataTransfer.getData("text");
+  let listNameEle;
 
   // Runs only if a card is dropped upon a card.
   if (!ev.target.id) {
     let parentTarget = document.getElementById(cardContainerType);
+    listNameEle = parentTarget;
     parentTarget.appendChild(document.getElementById(data));
   } else {
+    listNameEle = ev.target;
     ev.target.appendChild(document.getElementById(data));
   }
+
+  let listName = listNameEle?.id.replace('card', '');
+  updateCardStatusType(data, listName)
+}
+
+function updateCardStatusType(data, listName) {
+  genericUpdate(data, { listName })
+
+  window.location.reload();
 }