Views: Updated for (async) computed properties

frontend/src/views/Home.vue

@@ -24,18 +24,22 @@ export default {
     RegisterForm
   },
 
+  computed: {
+    session: () => Cookies.get('session')
+  },
+
   mounted() {
-    if (Cookies.get('session')) {
+    this.$nextTick(() => {
       axios
         .post('/user/login', {
-          session: Cookies.get('session')
+          session: this.session
         })
         .then(response => {
           if (response.data.success) {
             this.$router.push({ name: 'usercp' })
           }
         })
-    }
+    })
   }
 }
 </script>

frontend/src/views/UserCP.vue

@@ -2,27 +2,31 @@
   <v-container>
     <Header />
 
-    <p>user logged in: {{ user.login }}</p>
+    <template v-if="user">
+      <p>user logged in: {{ user.login }}</p>
 
-    <v-expansion-panel>
-      <v-expansion-panel-content v-for="deck in decks" :key="deck.id">
-        <template v-slot:header>
-          <div>{{ deck.content.name }}</div>
-        </template>
-        <v-card>
-          <v-card-text>
-            {{ deck.content.note }}
-            <ul>
-              <li v-for="card in deck.content.cards" :key="card.serial">
-                {{ card.serial }}: {{ cardsdb[card.serial].name }}
-              </li>
-            </ul>
-          </v-card-text>
-        </v-card>
-      </v-expansion-panel-content>
-    </v-expansion-panel>
+      <template v-if="decks">
+        <v-expansion-panel>
+          <v-expansion-panel-content v-for="deck in decks" :key="deck.id">
+            <template v-slot:header>
+              <div>{{ deck.content.name }}</div>
+            </template>
+            <v-card>
+              <v-card-text>
+                {{ deck.content.note }}
+                <ul>
+                  <li v-for="card in deck.content.cards" :key="card.serial">
+                    {{ card.serial }}: {{ cardsdb[card.serial].name }}
+                  </li>
+                </ul>
+              </v-card-text>
+            </v-card>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+      </template>
 
-    <v-btn @click.native="logout">Logout</v-btn>
+      <v-btn @click.native="logout">Logout</v-btn>
+    </template>
   </v-container>
 </template>
 
@@ -40,11 +44,6 @@ export default {
     Header
   },
 
-  data: () => ({
-    user: '',
-    decks: ''
-  }),
-
   methods: {
     goHome() {
       Cookies.remove('session')
@@ -61,10 +60,45 @@ export default {
             this.goHome()
           }
         })
+    }
+  },
+
+  computed: {
+    session: () => Cookies.get('session'),
+    cardsdb: () => CardsDB
+  },
+
+  asyncComputed: {
+    user() {
+      return axios
+        .post('/user/info', {
+          session: this.session
+        })
+        .then(response => {
+          if (response.data.success) {
+            return response.data.user
+          } else {
+            this.goHome()
+            return null
+          }
+        })
     },
 
-    parseDecklist() {
-      let fileContent = `--Generated By FF Decks (www.ffdecks.com)--
+    decks() {
+      return axios
+        .post('/decks/list', {
+          session: this.session
+        })
+        .then(response => {
+          if (response.data.success) {
+            return response.data.decks
+          }
+        })
+    }
+  },
+
+  mounted() {
+    let fileContent = `--Generated By FF Decks (www.ffdecks.com)--
 Deck Name: Ashe turbo
 Created by: hawks1997
 
@@ -97,91 +131,61 @@ Backup(16):
 
 Monster(0):`
 
-      // select the line containing 'deck name:'
-      // and its successor
-      let metaRE = /^deck name: (.+)$[\s]*?^(.+)$/im
-      let metaData = metaRE.exec(fileContent)
+    // select the line containing 'deck name:'
+    // and its successor
+    let metaRE = /^deck name: (.+)$[\s]*?^(.+)$/im
+    let metaData = metaRE.exec(fileContent)
 
-      // extract matches
-      let deckData = {
-        name: metaData[1],
-        note: metaData[2],
-        cards: []
+    // extract matches
+    let deckData = {
+      name: metaData[1],
+      note: metaData[2],
+      cards: []
+    }
+
+    // select all lines containing card serial numbers
+    let cardLinesRE = /^.*\b\d-\d{3}[A-Z]?\b.*$/gm
+    let cardLines = fileContent.match(cardLinesRE)
+
+    cardLines.forEach(cardLine => {
+      // extract serial (guaranteed to be in here!)
+      let serialRE = /\b(\d-\d{3})[A-Z]?\b/i
+      let serial = serialRE.exec(cardLine)[1]
+
+      // strip out serial number
+      cardLine = cardLine.replace(serialRE, '')
+
+      let countREs = [
+        // prioritize a count with "times" symbol *, x, ×
+        /\b([1-3])(?:[*×]|[x]\b)/,
+        /(?:[*×]|\b[x])([1-3])\b/,
+        // next priority: with whitespace
+        /\s+([1-3])\s+/,
+        /\s+([1-3])\b/,
+        /\b([1-3])\s+/,
+        // least priority: any single digit
+        /\b([1-3])\b/
+      ]
+
+      // fallback value
+      let count = '0'
+      for (let i = 0; i < countREs.length; i++) {
+        let data = countREs[i].exec(cardLine)
+
+        if (data) {
+          count = data[1]
+          break
+        }
       }
 
-      // select all lines containing card serial numbers
-      let cardLinesRE = /^.*\b\d-\d{3}[A-Z]?\b.*$/gm
-      let cardLines = fileContent.match(cardLinesRE)
-
-      cardLines.forEach(cardLine => {
-        // extract serial (guaranteed to be in here!)
-        let serialRE = /\b(\d-\d{3})[A-Z]?\b/i
-        let serial = serialRE.exec(cardLine)[1]
-
-        // strip out serial number
-        cardLine = cardLine.replace(serialRE, '')
-
-        let countREs = [
-          // prioritize a count with "times" symbol *, x, ×
-          /\b([1-3])(?:[*×]|[x]\b)/,
-          /(?:[*×]|\b[x])([1-3])\b/,
-          // next priority: with whitespace
-          /\s+([1-3])\s+/,
-          /\s+([1-3])\b/,
-          /\b([1-3])\s+/,
-          // least priority: any single digit
-          /\b([1-3])\b/
-        ]
-
-        // fallback value
-        let count = '0'
-        for (let i = 0; i < countREs.length; i++) {
-          let data = countREs[i].exec(cardLine)
-
-          if (data) {
-            count = data[1]
-            break
-          }
-        }
-
-        // push card data into deck
-        deckData.cards.push({
-          serial: serial,
-          count: count
-        })
+      // push card data into deck
+      deckData.cards.push({
+        serial: serial,
+        count: count
       })
+    })
 
-      console.log(deckData)
-    }
-  },
-
-  computed: {
-    cardsdb: () => CardsDB
-  },
-
-  mounted() {
-    this.parseDecklist()
-
-    axios
-      .post('/user/info', {
-        session: Cookies.get('session')
-      })
-      .then(response => {
-        if (response.data.success) {
-          this.user = response.data.user
-        } else {
-          this.goHome()
-        }
-      })
-    axios
-      .post('/decks/list', {
-        session: Cookies.get('session')
-      })
-      .then(response => {
-        if (response.data.success) {
-          this.decks = response.data.decks
-        }
-      })
+    console.log(deckData)
   }
 }
 </script>