rework maxCardCount

maxCardCount is now a global variable
it can be updated simply by changing the number
it can also be disabled via a button

src/App.vue

@@ -10,7 +10,11 @@
               :decks="decks"
               :numberOfSelectedDecks="numberOfSelectedDecks"
             ></NavigationBar>
-            <router-view :decks="decks" :numberOfSelectedDecks="numberOfSelectedDecks" />
+            <router-view
+              :decks="decks"
+              :numberOfSelectedDecks="numberOfSelectedDecks"
+              :maxCardCount="maxCardCount"
+            />
             <v-snackbar app v-model="snackbar.snackbar" :timeout="snackbar.timeout">
               {{ snackbar.text }}
               <template v-slot:action="{ attrs }">
@@ -60,8 +64,10 @@ const AppProps = Vue.extend({
 })
 export default class App extends AppProps {
   propertiesToSyncWithLocalStorage = [
-    { key: "decks", defaultValue: [] }
+    { key: "decks", defaultValue: [] },
+    { key: "maxCardCount", defaultValue: "" }
   ] as SyncItem[];
+  maxCardCount = "";
   decks = [] as Deck[];
   snackbar = {
     text: "",
@@ -96,7 +102,11 @@ export default class App extends AppProps {
   mounted() {
     readFromLocalStorage(this);
     this.setSelectedStatusForAllDecks(false);
-    continueCurrentLearningSessionIfPresent(this.$eventHub, this.$router, this.decks);
+    continueCurrentLearningSessionIfPresent(
+      this.$eventHub,
+      this.$router,
+      this.decks
+    );
   }
 
   get numberOfSelectedDecks() {

src/components/learn/Learn.vue

@@ -46,12 +46,12 @@ import {
   saveLearningSessionManagerDataToLocalStorage,
   getLearningSessionManagerDataFromLocalStorage
 } from "../../helpers/learningSessionStorageHelper";
-import { getMaxCardCount } from "../../helpers/maxCardCountLocalStorageHelper";
 
 const LearnProps = Vue.extend({
   props: {
     decks: { type: Array as () => Deck[] },
-    numberOfSelectedDecks: Number
+    numberOfSelectedDecks: Number,
+    maxCardCount: String
   }
 });
 
@@ -62,7 +62,6 @@ const LearnProps = Vue.extend({
 })
 export default class Learn extends LearnProps {
   numberOfStarsInRating = 5;
-  maxCardCount = getMaxCardCount();
   learningSessionManager = new LearningSessionManager([]);
   isLearningSessionFinishedAndComponentWillBeDestroyedSoon = false;
   curLearningElement = {
@@ -142,10 +141,10 @@ export default class Learn extends LearnProps {
       (this.learningSessionManager.learningSession.currentElementIndex ===
         this.learningSessionManager.learningSession.elements.length - 1 &&
         this.learningSessionManager.cardsToSelectFrom.length === 0) ||
-      (this.maxCardCount === 0
+      (this.maxCardCount === "0"
         ? false
         : this.learningSessionManager.learningSession.currentElementIndex ===
-          this.maxCardCount - 1);
+          parseInt(this.maxCardCount) - 1);
     return endOfSession;
   }
 

src/components/settings/MaxCardCountCard.vue

@@ -4,7 +4,7 @@
       <v-card-title>Max Card Count</v-card-title>
       <v-card-text>
         <p>
-          Define the number of cards that will be in each learning session.
+          Limit the number of cards that will be in each learning session.
           <v-icon
             size="1em"
             @click="showHelpText = !showHelpText"
@@ -14,12 +14,12 @@
         <p
           class="description"
           v-show="showHelpText"
-        >If the given deck(s) has(have) less cards it will default to the number of cards in the given deck(s). The value "0" stands for every card in the given deck(s).</p>
-        <v-text-field v-model="maxCardCount" type="number" min="0" label="Maximum Cards" outlined></v-text-field>
+        >If the given deck(s) has(have) less cards it will default to the number of cards in the given deck(s).</p>
+        <v-text-field v-model="curMaxCardCount" type="number" min="1" :label="label" outlined></v-text-field>
       </v-card-text>
       <v-card-actions class="button-padding">
         <v-spacer></v-spacer>
-        <v-btn color="indigo" @click="updateMaxCardCount" right>Update Maximum Cards</v-btn>
+        <v-btn color="red" @click="deactivateMaxCardCount" right>Deactivate Limit</v-btn>
       </v-card-actions>
     </v-card>
   </v-col>
@@ -29,18 +29,36 @@
 import Vue from "vue";
 import Component from "vue-class-component";
 
-import {
-  getMaxCardCount,
-  setMaxCardCount
-} from "../../helpers/maxCardCountLocalStorageHelper";
+import { Event } from '../../types';
+
+const MaxCardCountProps = Vue.extend({
+  props: {
+    maxCardCount: String
+  }
+});
 
 @Component
-export default class MaxCardCount extends Vue {
+export default class MaxCardCount extends MaxCardCountProps {
+  noLimitString = "Currently no limit";
+  defaultLabel = "Maximum Cards";
   showHelpText = false;
-  maxCardCount: number | null = getMaxCardCount();
 
-  updateMaxCardCount() {
-    setMaxCardCount(this, this.maxCardCount);
+  get label() {
+    return this.maxCardCount === "0" || null
+      ? this.noLimitString
+      : this.defaultLabel;
+  }
+
+  get curMaxCardCount() {
+    return this.maxCardCount === "0" || null ? null : this.maxCardCount;
+  }
+
+  set curMaxCardCount(newValue) {
+    this.$eventHub.$emit(Event.UPDATE_MAX_CARD_COUNT, newValue);
+  }
+
+  deactivateMaxCardCount() {
+    this.$eventHub.$emit(Event.UPDATE_MAX_CARD_COUNT, "0");
   }
 }
 </script>

src/components/settings/Settings.vue

@@ -2,7 +2,7 @@
   <div>
     <v-container fluid>
       <v-row>
-        <MaxCardCount />
+        <MaxCardCount :maxCardCount="maxCardCount" />
         <ClearLocalStorage />
       </v-row>
     </v-container>
@@ -16,13 +16,19 @@ import Component from "vue-class-component";
 import MaxCardCount from "./MaxCardCountCard.vue";
 import ClearLocalStorage from "./ClearLocalStorage.vue";
 
+const SettingProps = Vue.extend({
+  props: {
+    maxCardCount: String
+  }
+});
+
 @Component({
   components: {
     MaxCardCount,
     ClearLocalStorage
   }
 })
-export default class Settings extends Vue {}
+export default class Settings extends SettingProps {}
 </script>
 
 <style scoped>

src/helpers/eventListener.ts

@@ -8,6 +8,7 @@ import {
 import { clearLocalStorage } from "./localStorageHelper";
 import { addDecksFromJSON, addDecksFromFile } from "./addDecksHelper";
 import { showSnackbar } from "./snackbarHelper";
+import { updateMaxCardCount } from "./updateMaxCardCount";
 
 export function registerEventListenerForMainApp(context: any) {
   context.$eventHub.$on(Event.DELETE_SELECTED_DECKS, () => {
@@ -22,9 +23,12 @@ export function registerEventListenerForMainApp(context: any) {
   context.$eventHub.$on(Event.ADD_DECKS_FROM_FILE, (fileContent: string) => {
     addDecksFromFile(context, fileContent);
   });
-  context.$eventHub.$on(Event.ADD_DECKS_FROM_JSON, (fileContent: FFCFile, url?: string) => {
+  context.$eventHub.$on(
+    Event.ADD_DECKS_FROM_JSON,
+    (fileContent: FFCFile, url?: string) => {
       addDecksFromJSON(context, fileContent, url);
-  });
+    }
+  );
   context.$eventHub.$on(Event.SNACKBAR_EVENT, (message: string) => {
     showSnackbar(context, message);
   });
@@ -43,4 +47,7 @@ export function registerEventListenerForMainApp(context: any) {
     }
     context.$router.replace("/");
   });
+  context.$eventHub.$on(Event.UPDATE_MAX_CARD_COUNT, (newValue: string) => {
+    updateMaxCardCount(context, newValue);
+  });
 }

src/helpers/maxCardCountLocalStorageHelper.ts

@@ -1,26 +0,0 @@
-import { get, set } from "./localStorageHelper";
-import { Event } from "../types";
-
-export function getMaxCardCount() {
-  const maxCardCount = parseInt(get("maxCardCount"));
-  if (isNaN(maxCardCount)) {
-    const defaultValue = 0;
-    set("maxCardCount", defaultValue.toString());
-
-    return defaultValue;
-  } else {
-    return maxCardCount;
-  }
-}
-
-export function setMaxCardCount(context: any, maxCardCount: number) {
-  try {
-    set("maxCardCount", maxCardCount.toString());
-    context.$eventHub.$emit(
-      Event.SNACKBAR_EVENT,
-      "Successfully updated max card count to " + maxCardCount + "."
-    );
-  } catch (e) {
-    context.$eventHub.$emit(Event.SNACKBAR_EVENT, e);
-  }
-}

src/helpers/updateMaxCardCount.ts

@@ -0,0 +1,11 @@
+import { showSnackbar } from "./snackbarHelper";
+
+export function updateMaxCardCount(context: any, newValue: string) {
+  context.maxCardCount = newValue;
+  newValue !== "0"
+    ? showSnackbar(
+        context,
+        "Successfully updated max card count to " + newValue + "."
+      )
+    : showSnackbar(context, "Successfully deactivated max card count.");
+}

src/types/index.ts

@@ -117,6 +117,7 @@ export enum Event {
   DESELECT_ALL_DECKS = "deselectAllDecks",
   SWIPE_LEFT_IN_LEARN = "swipeLeftInLearn",
   SWIPE_RIGHT_IN_LEARN = "swipeRightInLearn",
+  UPDATE_MAX_CARD_COUNT = "updateMaxCardCount",
 }
 
 export interface NavBarConfigItem {

src/views/Learn.vue

@@ -4,6 +4,7 @@
       :decks="decks"
       :numberOfSelectedDecks="numberOfSelectedDecks"
       :learningSession="learningSession"
+      :maxCardCount="maxCardCount"
     />
   </div>
 </template>
@@ -20,7 +21,8 @@ const LearnProps = Vue.extend({
   props: {
     decks: { type: Array as () => Deck[] },
     learningSession: { type: Object as () => LearningSession },
-    numberOfSelectedDecks: Number
+    numberOfSelectedDecks: Number,
+    maxCardCount: String
   }
 });
 

src/views/Settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="settings">
-    <SettingsComponent />
+    <SettingsComponent :maxCardCount="maxCardCount" />
   </div>
 </template>
 
@@ -10,12 +10,18 @@ import Component from "vue-class-component";
 
 import SettingsComponent from "../components/settings/Settings.vue";
 
+const SettingProps = Vue.extend({
+  props: {
+    maxCardCount: String
+  }
+});
+
 @Component({
   components: {
     SettingsComponent
   }
 })
-export default class Settings extends Vue {}
+export default class Settings extends SettingProps {}
 </script>
 
 <style scoped>