From fe2ba2d82d1c8163cf9fdedb978b7b64c452082b Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 8 Jul 2023 18:22:34 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20(card)=20fix=20flex=20and=20relo?=
 =?UTF-8?q?ad=20at=20every=20failed=20flashcard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/card/components/FlipCardList.vue     | 16 ++++++----------
 .../card/hooks/useSpacedRepetitionCards.ts       |  3 +--
 src/views/SpacedRepetitionCard.vue               |  1 +
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/modules/card/components/FlipCardList.vue b/src/modules/card/components/FlipCardList.vue
index fcdabe3..4c9031c 100644
--- a/src/modules/card/components/FlipCardList.vue
+++ b/src/modules/card/components/FlipCardList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import FlipCard from '@/modules/card/components/FlipCard.vue'
 import { Repetition } from '@/modules/card/hooks/useSpacedRepetitionCards'
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 
 const props = defineProps<{ cards: Repetition[] }>()
 const emits = defineEmits<{
@@ -17,12 +17,8 @@ const cards = ref(
 
 const currentIndex = ref(0)
 
-const cardsToDisplay = computed(() => {
-  return cards.value
-})
-
 const goToNextCard = (success: boolean) => {
-  const id = cardsToDisplay.value[currentIndex.value].repetition._id ?? ''
+  const id = cards.value[currentIndex.value].repetition._id ?? ''
 
   if (success) {
     emits('success', id)
@@ -41,13 +37,13 @@ const goToNextCard = (success: boolean) => {
 <template>
   <div class="flip-card-list">
     <h3 class="subtitle is-3">
-      Level: {{ cardsToDisplay[currentIndex].repetition.level }}
+      Level: {{ cards[currentIndex].repetition.level }}
     </h3>
-    <h4>cards left: {{ cardsToDisplay.length - currentIndex }}</h4>
+    <h4>cards left: {{ cards.length - currentIndex }}</h4>
 
     <div v-if="currentIndex < cards.length">
       <flip-card
-        v-for="(card, index) in cardsToDisplay"
+        v-for="(card, index) in cards"
         :key="card.repetition._id ?? ''"
         class="card"
         :style="{
@@ -65,7 +61,7 @@ const goToNextCard = (success: boolean) => {
 <style scoped lang="scss">
 .flip-card-list {
   overflow-x: hidden;
-  height: 100%;
+  flex: 1;
 
   .card {
     position: relative;
diff --git a/src/modules/card/hooks/useSpacedRepetitionCards.ts b/src/modules/card/hooks/useSpacedRepetitionCards.ts
index 8ea8333..2463d60 100644
--- a/src/modules/card/hooks/useSpacedRepetitionCards.ts
+++ b/src/modules/card/hooks/useSpacedRepetitionCards.ts
@@ -99,6 +99,7 @@ export const useSpacedRepetitionCards = () => {
       repeatDate: addDays(new Date(), 2 ** repetition.level)
     })
   }
+
   const failRepetition = async (cardId: string) => {
     const repetition = await data.get<DataType.RepetitionCard, RepetitionCard>(
       cardId
@@ -114,8 +115,6 @@ export const useSpacedRepetitionCards = () => {
       level,
       repeatDate: addDays(new Date(), level)
     })
-
-    await execute()
   }
 
   watch(
diff --git a/src/views/SpacedRepetitionCard.vue b/src/views/SpacedRepetitionCard.vue
index 42bc7b2..19cde71 100644
--- a/src/views/SpacedRepetitionCard.vue
+++ b/src/views/SpacedRepetitionCard.vue
@@ -46,6 +46,7 @@ const { cards, isLoading, successRepetition, failRepetition } =
 
   .cards {
     flex: 1;
+    display: flex;
   }
 }
 </style>