Added functionality to move tasks from local storage to database upon…

… user sign-up. Ensured tasks can be created, read, updated, and deleted whether the user is signed up or not.
trisDeveloper · Feb 25, 2024 · a8a1a38 · a8a1a38
1 parent 9e8e752
commit a8a1a38
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 16 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,6 +22,7 @@
     "chart.js": "^3.9.1",
     "pinia": "^2.1.7",
     "sortablejs": "^1.15.2",
+    "uuid": "^9.0.1",
     "v-calendar": "^3.1.2",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",

diff --git a/frontend/src/components/task-card.vue b/frontend/src/components/task-card.vue
@@ -69,27 +69,42 @@ import axios from 'axios'
 import { useStore } from '@/stores'
 const props = defineProps(['fetchData', 'task'])
 const store = useStore()
-
+let nextTaskId = localStorage.getItem('nextTaskId') || 1
 const deleteTask = async (task) => {
   try {
-    task.done = !task.done
     closeTaskCard()
-    await axios.delete(`/api/users/${store.user.id}/tasks/${task.id}/`, { done: task.done })
-    props.fetchData()
+    if (localStorage.getItem('userId')) {
+      await axios.delete(`/api/users/${store.user.id}/tasks/${task.id}/`, { done: task.done })
+    } else {
+      const localTasks = JSON.parse(localStorage.getItem('tasks')) || []
+      const updatedTasks = localTasks.filter((t) => t.id !== task.id)
+      localStorage.setItem('tasks', JSON.stringify(updatedTasks))
+    }
   } catch (error) {
     // Handle errors
     console.error(error)
   }
+  props.fetchData()
 }
 const updateTaskDoneStatus = async (task) => {
   try {
     task.done = !task.done
-    await axios.patch(`/api/users/${store.user.id}/tasks/${task.id}/`, { done: task.done })
-    props.fetchData()
+    if (localStorage.getItem('userId')) {
+      await axios.patch(`/api/users/${store.user.id}/tasks/${task.id}/`, { done: task.done })
+    } else {
+      const localTasks = JSON.parse(localStorage.getItem('tasks')) || []
+
+      const updatedTaskIndex = localTasks.findIndex((t) => t.id == Number(task.id))
+      if (updatedTaskIndex !== -1) {
+        localTasks[updatedTaskIndex].done = task.done
+        localStorage.setItem('tasks', JSON.stringify(localTasks))
+      }
+    }
   } catch (error) {
     // Handle errors
     console.error(error)
   }
+  props.fetchData()
 }
 const closeTaskCard = () => {
   store.setIsOpenCard(false)
@@ -144,7 +159,6 @@ const saveTaskAndClose = async () => {
       }
     } else {
       if (store.selectedTask.id) {
-        console.log(store.selectedTask.id)
         const localTasks = JSON.parse(localStorage.getItem('tasks')) || []
         const existingTaskIndex = localTasks.findIndex((task) => task.id === store.selectedTask.id)
         if (existingTaskIndex !== -1) {
@@ -154,17 +168,19 @@ const saveTaskAndClose = async () => {
         localStorage.setItem('tasks', JSON.stringify(localTasks))
       } else {
         const localTasks = JSON.parse(localStorage.getItem('tasks')) || []
-        store.selectedTask.id = localTasks.length + 1
+        store.selectedTask.id = String(nextTaskId++)
         localTasks.push(store.selectedTask)
         localStorage.setItem('tasks', JSON.stringify(localTasks))
+        localStorage.setItem('nextTaskId', nextTaskId)
       }
     }
-    props.fetchData()
+
     closeTaskCard()
   } catch (error) {
     // Handle errors
     console.error(error)
   }
+  props.fetchData()
 }
 props.fetchData()
 </script>

diff --git a/frontend/src/components/task-list.vue b/frontend/src/components/task-list.vue
@@ -21,12 +21,22 @@ const store = useStore()
 const updateTaskDoneStatus = async (task) => {
   try {
     task.done = !task.done
-    await axios.patch(`/api/users/${store.user.id}/tasks/${task.id}/`, { done: task.done })
-    props.fetchData()
+    if (localStorage.getItem('userId')) {
+      await axios.patch(`/api/users/${store.user.id}/tasks/${task.id}/`, { done: task.done })
+    } else {
+      const localTasks = JSON.parse(localStorage.getItem('tasks')) || []
+
+      const updatedTaskIndex = localTasks.findIndex((t) => t.id == Number(task.id))
+      if (updatedTaskIndex !== -1) {
+        localTasks[updatedTaskIndex].done = task.done
+        localStorage.setItem('tasks', JSON.stringify(localTasks))
+      }
+    }
   } catch (error) {
     // Handle errors
     console.error(error)
   }
+  props.fetchData()
 }
 props.fetchData()
 </script>

diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue
@@ -9,6 +9,9 @@ const store = useStore()
 const props = defineProps(['filterdays'])
 const today = new Date()
 const tasks = ref([])
+
+let nextTaskId = localStorage.getItem('nextTaskId') || 1
+
 // resposive week view
 const isWideScreen = ref(window.innerWidth >= 1075 || window.innerWidth <= 600)
 
@@ -46,6 +49,7 @@ const displayedDays = computed(() => {
 onMounted(() => {
   createSortableInstances()
   fetchData()
+  moveTasksTodb()
 })
 
 const createSortableInstances = () => {
@@ -69,13 +73,24 @@ const createSortableInstances = () => {
 
 const dropTaskDate = async (task, date) => {
   try {
-    await axios.patch(`/api/users/${store.user.id}/tasks/${task}/`, { date: date })
+    if (localStorage.getItem('userId')) {
+      await axios.patch(`/api/users/${store.user.id}/tasks/${task}/`, { date: date })
+    } else {
+      const localTasks = JSON.parse(localStorage.getItem('tasks')) || []
+
+      const updatedTaskIndex = localTasks.findIndex((t) => t.id == Number(task))
+      if (updatedTaskIndex !== -1) {
+        localTasks[updatedTaskIndex].date = date
+        localStorage.setItem('tasks', JSON.stringify(localTasks))
+      }
+    }
+
     sortTasks()
-    fetchData()
   } catch (error) {
     // Handle errors
     console.error(error)
   }
+  fetchData()
 }
 // date format    - thu feb 8 -
 const formatDatePart = (date, part) => {
@@ -130,7 +145,24 @@ const fetchData = () => {
     tasks.value = localTasks
   }
 }
-
+const moveTasksTodb = async () => {
+  try {
+    const userId = localStorage.getItem('userId')
+    if (userId) {
+      const localTasks = JSON.parse(localStorage.getItem('tasks')) || []
+      if (localTasks.length >= 1) {
+        // Move tasks from local storage to database
+        for (let i = 0; i < localTasks.length; i++) {
+          localTasks[i].user = userId // Assign user ID to each task
+          await axios.post(`/api/users/${userId}/tasks/`, localTasks[i])
+        }
+        localStorage.removeItem('tasks')
+      }
+    }
+  } catch (error) {
+    console.error('Error moving tasks to database:', error)
+  }
+}
 const sortTasks = () => {
   tasks.value.sort((a, b) => {
     // If a task doesn't have a time, it comes first
@@ -187,17 +219,19 @@ const saveTaskAndClose = async () => {
         localStorage.setItem('tasks', JSON.stringify(localTasks))
       } else {
         const localTasks = JSON.parse(localStorage.getItem('tasks')) || []
-        store.selectedTask.id = localTasks.length + 1
+        store.selectedTask.id = String(nextTaskId++)
         localTasks.push(store.selectedTask)
         localStorage.setItem('tasks', JSON.stringify(localTasks))
+        localStorage.setItem('nextTaskId', nextTaskId)
       }
     }
-    fetchData()
+
     closeTaskCard()
   } catch (error) {
     // Handle errors
     console.error(error)
   }
+  fetchData()
 }
 
 const openTaskCard = (event, task, day) => {