♻️ (app)

src/modules/card/components/FlipCardList.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import FlipCard from '@/modules/card/components/FlipCard.vue'
 import { Repetition } from '@/modules/card/hooks/useSpacedRepetitionCards'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 const props = defineProps<{ cards: Repetition[] }>()
 const emits = defineEmits<{
@@ -10,8 +10,10 @@ const emits = defineEmits<{
   needsReview: [id: string]
 }>()
 
-const cards = ref(
-  [...props.cards].sort((a, b) =>
+const propCards = computed(() => props.cards)
+
+const sortedCards = ref(
+  [...propCards.value].sort((a, b) =>
     a.repetition.level > b.repetition.level ? -1 : 1
   )
 )
@@ -19,14 +21,14 @@ const cards = ref(
 const currentIndex = ref(0)
 
 const goToNextCard = (success: boolean) => {
-  const id = cards.value[currentIndex.value].repetition._id ?? ''
+  const id = sortedCards.value[currentIndex.value].repetition._id ?? ''
 
   if (success) {
     emits('success', id)
   } else {
-    const failedCard = cards.value.at(currentIndex.value)
+    const failedCard = sortedCards.value.at(currentIndex.value)
     if (failedCard) {
-      cards.value.push(failedCard)
+      sortedCards.value.push(failedCard)
     }
     emits('fail', id)
   }
@@ -35,7 +37,7 @@ const goToNextCard = (success: boolean) => {
 }
 
 const needsReview = () => {
-  const id = cards.value[currentIndex.value].repetition._id ?? ''
+  const id = sortedCards.value[currentIndex.value].repetition._id ?? ''
   emits('needsReview', id)
   currentIndex.value++
 }
@@ -44,13 +46,13 @@ const needsReview = () => {
 <template>
   <div class="flip-card-list">
     <h3 class="subtitle is-3">
-      Level: {{ cards[currentIndex].repetition.level }}
+      Level: {{ sortedCards[currentIndex].repetition.level }}
     </h3>
-    <h4>cards left: {{ cards.length - currentIndex }}</h4>
+    <h4>cards left: {{ sortedCards.length - currentIndex }}</h4>
 
-    <div v-if="currentIndex < cards.length">
+    <div v-if="currentIndex < sortedCards.length">
       <flip-card
-        v-for="(card, index) in cards"
+        v-for="(card, index) in sortedCards"
         :key="card.repetition._id ?? ''"
         class="card"
         :style="{

src/modules/history/components/LastVisited.vue

@@ -10,7 +10,10 @@
           <router-link
             :to="{
               name: `FluxNoteView`,
-              params: { user: lastVisitedRepo.user, repo: lastVisitedRepo.repo }
+              params: {
+                user: lastVisitedRepo.user,
+                repo: lastVisitedRepo.repo
+              }
             }"
             >{{ lastVisitedRepo.user }}/{{ lastVisitedRepo.repo }}</router-link
           >

src/modules/history/hooks/useVisitRepo.hook.ts

@@ -1,18 +1,22 @@
 import { data } from '@/data/data'
 import { DataType } from '@/data/DataType.enum'
 import { History } from '@/data/models/History'
+import { Ref, toValue } from 'vue'
 
 const HISTORY_ID = data.generateId(DataType.History, 'history')
 const MAX_REPO_HISTORY = 10
 
-export const useVisitRepo = (newRepo: { user: string; repo: string }) => {
+export const useVisitRepo = (newRepo: {
+  user: Ref<string> | string
+  repo: Ref<string> | string
+}) => {
   const visitRepo = async () => {
     const history = await data.get<DataType.History, History>(HISTORY_ID)
     if (!history) {
       const newHistory: History = {
         _id: HISTORY_ID,
         $type: DataType.History,
-        repos: [newRepo]
+        repos: [{ user: toValue(newRepo.user), repo: toValue(newRepo.repo) }]
       }
       await data.add<DataType.History>(newHistory)
       return
@@ -22,10 +26,10 @@ export const useVisitRepo = (newRepo: { user: string; repo: string }) => {
       (repo) => repo.user !== newRepo.user && repo.repo !== newRepo.repo
     )
 
-    const historyRepos = [newRepo, ...clearedRepos].slice(
-      0,
-      MAX_REPO_HISTORY - 1
-    )
+    const historyRepos = [
+      { user: toValue(newRepo.user), repo: toValue(newRepo.repo) },
+      ...clearedRepos
+    ].slice(0, MAX_REPO_HISTORY - 1)
 
     const newHistory: History = {
       ...history,