Fix XP calculation and add commas for thousand separators

Author: lulunac27a

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typescript-app",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/TodoList.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="todo-app">
-    <p>Level: {{ levels }}</p>
-    <p>XP: {{ xps }}</p>
+    <p>Level: {{ levels.toLocaleString("en-US") }}</p>
+    <p>XP: {{ xps.toLocaleString("en-US") }}</p>
     <!--show circular progress bar filled with level progress--><ve-progress
       :progress="progresses"
-      >Level {{ levels }}</ve-progress
+      >Level {{ levels.toLocaleString("en-US") }}</ve-progress
     >
     <h3>Task list</h3>
     <ul class="todos">

src/store/index.ts

@@ -282,8 +282,8 @@ export default createStore({
       /**
        * Action to complete the task.
        */
-      context.commit("complete_Todo", payload);
       context.commit("updateXp", payload);
+      context.commit("complete_Todo", payload);
     },
     deleteTask: (context, payload) => {
       /**