✨ (card) add repetition card in database

src/data/DataType.enum.ts

@@ -2,5 +2,6 @@ export enum DataType {
   GithubAccessToken = 'GithubAccessToken',
   FavoriteRepo = 'FavoriteRepo',
   Note = 'Note',
-  BacklinkNote = 'BacklinkNote'
+  BacklinkNote = 'BacklinkNote',
+  RepetitionCard = 'RepetitionCard'
 }

src/modules/card/components/FlipCard.vue

@@ -8,8 +8,8 @@
         <div class="references" v-html="card.references"></div>
         <hr />
         <div class="buttons is-centered">
-          <div class="button is-danger" @click.stop="action">failed</div>
-          <div class="button is-success" @click.stop="action">got it</div>
+          <div class="button is-danger" @click.stop="success">failed</div>
+          <div class="button is-success" @click.stop="fail">got it</div>
         </div>
       </div>
     </div>
@@ -25,15 +25,15 @@ export default defineComponent({
   props: {
     card: { type: Object as PropType<Card>, required: true }
   },
-  setup() {
+  setup(_, context) {
     const flipped = ref(false)
-
     const flip = () => (flipped.value = !flipped.value)
-    const action = () => {
-      console.log('action')
-    }
 
-    return { flip, flipped, action }
+    const success = () => context.emit('success')
+
+    const fail = () => context.emit('fail')
+
+    return { flip, flipped, success, fail }
   }
 })
 </script>

src/modules/card/hooks/useSpacedRepetitionCards.ts

@@ -1,11 +1,20 @@
+import { data } from '@/data/data'
+import { DataType } from '@/data/DataType.enum'
 import { useFile } from '@/hooks/useFile.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { Card } from '@/modules/card/models/Card'
+import { RepetitionCard } from '@/modules/card/models/RepetitionCard'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { asyncComputed } from '@vueuse/core'
+import { isAfter, isBefore } from 'date-fns'
 import { computed, nextTick, watch } from 'vue'
 
+interface Repetition {
+  repetition: RepetitionCard
+  card: Card
+}
+
 export const useSpacedRepetitionCards = () => {
   const { renderString } = useMarkdown()
   const store = useUserRepoStore()
@@ -18,13 +27,39 @@ export const useSpacedRepetitionCards = () => {
   )
 
   const cards = asyncComputed(async () => {
-    const cards: Card[] = []
+    const cards: Repetition[] = []
 
     for (const cardFile of cardFiles.value) {
       if (!cardFile.sha) {
         continue
       }
 
+      const repetitionId = data.generateId(
+        DataType.RepetitionCard,
+        cardFile.sha
+      )
+
+      let repetition = await data.get<DataType.RepetitionCard, RepetitionCard>(
+        repetitionId
+      )
+
+      if (!repetition) {
+        const newRepetition: RepetitionCard = {
+          _id: repetitionId,
+          $type: DataType.RepetitionCard,
+          level: 1,
+          repeatDate: new Date()
+        }
+        await data.add<DataType.RepetitionCard>(newRepetition)
+        repetition = (await data.get<DataType.RepetitionCard, RepetitionCard>(
+          repetitionId
+        )) as RepetitionCard
+      }
+
+      if (isAfter(new Date(repetition.repeatDate), new Date())) {
+        continue
+      }
+
       const { getRawContent } = useFile(cardFile.sha, false)
       const content = await getRawContent()
 
@@ -32,9 +67,12 @@ export const useSpacedRepetitionCards = () => {
         decodeURIComponent(escape(atob(content ?? '')))?.split('___') ?? []
 
       cards.push({
+        repetition,
+        card: {
           front: renderString(front),
           back: renderString(back),
           references: renderString(references)
+        }
       })
     }
 

src/modules/card/models/RepetitionCard.ts

@@ -0,0 +1,7 @@
+import { DataType } from '@/data/DataType.enum'
+import { Model } from '@/data/models/Model'
+
+export interface RepetitionCard extends Model<DataType.RepetitionCard> {
+  level: number
+  repeatDate: Date
+}

src/views/SpacedRepetitionCard.vue

@@ -6,7 +6,10 @@
       :repo="repo"
       :with-content="false"
     >
-      <flip-card v-if="firstCard" :card="firstCard" />
+      <section v-if="firstCard">
+        <h3 class="subtitle is-3">Level: {{ firstCard.repetition.level }}</h3>
+        <flip-card :card="firstCard.card" />
+      </section>
       <section v-else>No cards to review!</section>
     </flux-note>
   </div>
@@ -31,8 +34,8 @@ export default defineComponent({
   setup() {
     const { cards } = useSpacedRepetitionCards()
     const firstCard = computed(() => {
-      const [firstCard] = cards.value
-      return firstCard
+      const [repetitionCard] = cards.value
+      return repetitionCard
     })
 
     return {