What is this? undefined:undefined? A recipe for debugging hell. (I used

GitHub Copilot for this debugging session.), Also changes some broken
stuff like const res = req.json() req.status === "success", what even is
that 🙃

components/app/windows/newsView.vue

@@ -31,6 +31,7 @@ const isGenerating = ref(false);
 const summaryText = ref("");
 const { locale } = useI18n();
 const likeart = ref([]);
+const staredStatus = ref(false);
 // Translating logic
 const translateText = ref(false);
 const translatedBefore = ref(false);
@@ -105,6 +106,21 @@ const aiSummary = async () => {
     isGenerating.value = false;
   }
 };
+
+const starArticle = async () => {
+  const buildUrl = `/user/${slug}/fav`;
+  const req = await fetch(buildUrl);
+  const res = await req.json();
+  if (res.status === "success") {
+    staredStatus.value = res.starred;
+  }
+};
+
+onMounted(async () => {
+  const req = await fetch(`/user/${slug}/star`);
+  const res = await req.json();
+  staredStatus.value = res;
+});
 </script>
 <template>
   <div
@@ -173,17 +189,25 @@ const aiSummary = async () => {
           <div v-else>{{ summaryText }}</div>
         </div>
       </div>
-      <div class="flex flex-col bg-gray-500">
+      <!--<div class="flex flex-col bg-gray-500">
         <!--Similar articles-->
-        <div class="flex flex-row" v-for="item in likeart">
+      <!--<div class="flex flex-row" v-for="item in likeart">
           <img /><!--Image-->
-          <div class="flex flex-col">
+      <!--<div class="flex flex-col">
             <h2>title</h2>
             <span>description</span>
           </div>
         </div>
-      </div>
-      <button><StarIcon /></button>
+      </div>-->
+      <button
+        @click="starArticle"
+        :class="[
+          'duration-300 transition-all',
+          { 'fill-blue-500 text-blue-500': staredStatus },
+        ]"
+      >
+        <StarIcon />
+      </button>
     </div>
   </div>
 </template>

components/blurPageBeforeLogin.vue

@@ -7,16 +7,6 @@ const error = ref(false);
 const errorMsg = ref("");
 const emit = defineEmits(["windowopener", "error", "loadValue"]);
 
-/**
- *   return {
-   userAccount: fetchViaSQL[0].username,
-   firstName: fetchViaSQL[0].firstName,
-   requested_action: "CONTINUE",
-   current_spot: "KEEP_LOGIN",
-   email: fetchViaSQL[0].email,
-   avatarURL: fetchViaSQL[0].avatarurl,
- };
- */
 try {
   // 喔 我沒有加 await :( 難怪有問題
   const { data, error: sendError } = await useFetch(
@@ -25,8 +15,8 @@ try {
   if (sendError.value) {
     error.value = true;
   }
-  if (data.requested_action === "KEEP_LOGIN") {
-    if (data.userAccount && data.userAccount.length !== 0) {
+  if (data.value.requested_action === "CONTINUE") {
+    if (data.value.userAccount && data.value.userAccount.length !== 0) {
       allowed.value = true;
     } else {
       allowed.value = false;