From c762abaa01e63012797c20db3ec893c860991698 Mon Sep 17 00:00:00 2001
From: Fernando Moreira <nandomoreira.me@gmail.com>
Date: Wed, 18 Dec 2019 12:19:25 -0300
Subject: [PATCH 1/2] add async service phrases

---
 pages/_id/_author.vue | 25 ++-----------------
 pages/_id/index.vue   | 32 ++++---------------------
 pages/frases.vue      | 56 +++++++++++++++++++++----------------------
 pages/index.vue       | 22 ++---------------
 services/phrases.js   | 27 +++++++++++++++++++++
 5 files changed, 63 insertions(+), 99 deletions(-)
 create mode 100644 services/phrases.js

diff --git a/pages/_id/_author.vue b/pages/_id/_author.vue
index 0e798423..34e0af50 100644
--- a/pages/_id/_author.vue
+++ b/pages/_id/_author.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { randonBackground } from '@/utils'
+import asyncData from '@/services/phrases'
 
 export default {
   validate ({ params }) {
@@ -19,27 +19,6 @@ export default {
     Phrase: () => import('@/components/phrase.vue'),
     SEO: () => import('@/components/seo.vue')
   },
-  async asyncData ({ $axios, store, params }) {
-    const { id } = params
-    let { phrase } = store.state
-
-    store.commit('toggleLoading', true)
-    store.commit('changeBackground', randonBackground())
-
-    if (Object.keys(phrase).length && phrase.id === id) {
-      store.commit('toggleLoading', false)
-      store.commit('changePhrase', phrase)
-      return { phrase }
-    }
-
-    phrase = await $axios.$get(`/phrase/${id}`)
-
-    if (Object.keys(phrase).length) {
-      store.commit('toggleLoading', false)
-      store.commit('changePhrase', phrase)
-    }
-
-    return { phrase }
-  }
+  asyncData
 }
 </script>
diff --git a/pages/_id/index.vue b/pages/_id/index.vue
index a46d1639..2f6f6e82 100644
--- a/pages/_id/index.vue
+++ b/pages/_id/index.vue
@@ -3,40 +3,16 @@
 </template>
 
 <script>
-import { slugAuthor, randonBackground } from '@/utils'
+import { slugAuthor } from '@/utils'
+import asyncData from '@/services/phrases'
 
 export default {
   validate ({ params }) {
     return /^\d+$/.test(params.id)
   },
   async fetch ({ $axios, redirect, store, params }) {
-    const { id } = params
-    const { phrases } = store.state
-
-    let phrase = {}
-
-    store.commit('toggleLoading', true)
-    store.commit('changeBackground', randonBackground())
-
-    if (phrases.length > 0) {
-      store.commit('toggleLoading', false)
-      phrase = phrases[id]
-    } else {
-      phrase = await $axios.$get('/phrases')
-        .then((data) => {
-          store.commit('toggleLoading', false)
-          store.commit('changePhrases', data)
-          store.commit('changePhrase', data[id])
-          return data[id]
-        })
-        .catch((error) => {
-          store.commit('toggleLoading', false)
-          console.error(error) // eslint-disable-line
-          return {}
-        })
-    }
-
-    redirect(`/${id}/${slugAuthor(phrase.author)}`)
+    const { phrase } = await asyncData({ $axios, store, params })
+    redirect(`/${phrase.id}/${slugAuthor(phrase.author)}`)
   }
 }
 </script>
diff --git a/pages/frases.vue b/pages/frases.vue
index aac99685..ea1b9dc7 100644
--- a/pages/frases.vue
+++ b/pages/frases.vue
@@ -4,18 +4,26 @@
       :url="$route.path"
       title="Frases"
     />
-    <ul>
-      <li v-for="(phrase, i) in data" :key="i">
-        <nuxt-link :to="`/${i}/${slug(phrase.author)}`">
-          <Quote :phrase="phrase" />
+    <div>
+      <p>
+        <nuxt-link :to="`/frases`" class="is-white">
+          Total de <strong>{{ phrases.length }}</strong> frases
         </nuxt-link>
-      </li>
-    </ul>
+      </p>
+      <ul>
+        <li v-for="(phrase) in phrases" :key="phrase.id">
+          <nuxt-link :to="`/${phrase.id}/${slug(phrase.author)}`">
+            <Quote :phrase="phrase" />
+          </nuxt-link>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script>
-import { randonBackground, slugAuthor } from '@/utils'
+import { slugAuthor } from '@/utils'
+import asyncData from '@/services/phrases'
 
 export default {
   name: 'Home',
@@ -23,27 +31,7 @@ export default {
     Quote: () => import('@/components/quote.vue'),
     SEO: () => import('@/components/seo.vue')
   },
-  async asyncData ({ $axios, store }) {
-    store.commit('toggleLoading', true)
-    store.commit('changeBackground', randonBackground())
-
-    const { phrases } = store.state
-
-    if (phrases.length > 0) {
-      store.commit('toggleLoading', false)
-      store.commit('changePhrases', phrases)
-      return { data: phrases }
-    }
-
-    const data = await $axios.$get('/phrases')
-
-    if (data.length > 0) {
-      store.commit('toggleLoading', false)
-      store.commit('changePhrases', data)
-    }
-
-    return { data }
-  },
+  asyncData,
   methods: {
     slug (author) {
       return slugAuthor(author)
@@ -51,3 +39,15 @@ export default {
   }
 }
 </script>
+
+<style lang="css" scoped>
+p {
+  display: block;
+  text-align: center;
+  padding: 15px;
+  font-size: 1.375rem /* 22/16 */;
+}
+a {
+  color: #fff;
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 5e3e293b..c7759bf9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { randonBackground } from '@/utils'
+import asyncData from '@/services/phrases'
 
 export default {
   name: 'Home',
@@ -17,24 +17,6 @@ export default {
     Phrase: () => import('@/components/phrase.vue'),
     SEO: () => import('@/components/seo.vue')
   },
-  async asyncData ({ $axios, store }) {
-    store.commit('toggleLoading', true)
-    store.commit('changeBackground', randonBackground())
-    let { phrases } = store.state
-
-    if (!phrases.length) {
-      phrases = await $axios.$get('/phrases')
-      store.commit('changePhrases', phrases)
-    }
-
-    const radomPhraseId = Math.floor(Math.random() * phrases.length)
-    const phrase = phrases[radomPhraseId]
-
-    if (Object.keys(phrase).length) {
-      store.commit('toggleLoading', false)
-      store.commit('changePhrase', phrase)
-      return { phrase }
-    }
-  }
+  asyncData
 }
 </script>
diff --git a/services/phrases.js b/services/phrases.js
new file mode 100644
index 00000000..d0749d28
--- /dev/null
+++ b/services/phrases.js
@@ -0,0 +1,27 @@
+import { randonBackground } from '@/utils'
+
+export default async ({ $axios, store, params, redirect }) => {
+  store.commit('toggleLoading', true)
+  store.commit('changeBackground', randonBackground())
+
+  const { id } = params
+  let { phrases } = store.state
+  let phrase = {}
+
+  if (!phrases.length) {
+    phrases = await $axios.$get('/phrases')
+    store.commit('changePhrases', phrases)
+  }
+
+  const radomId = Math.floor(Math.random() * phrases.length)
+  phrase = phrases[id || radomId]
+
+  if (typeof phrase === 'undefined') {
+    phrase = await $axios.$get(`/phrase/${radomId}`)
+  }
+
+  store.commit('toggleLoading', false)
+  store.commit('changePhrase', phrase)
+
+  return { phrase, phrases }
+}

From a33b99b0206197eaf1258e5c5b01b58f9647487f Mon Sep 17 00:00:00 2001
From: Fernando Moreira <nandomoreira.me@gmail.com>
Date: Wed, 18 Dec 2019 12:20:56 -0300
Subject: [PATCH 2/2] bump version 2.5.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 71b42154..63b4c1eb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "motivaai",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "💪 Gere uma frase motivacional pra dar um UP no seu dia!",
   "author": "Fernando Moreira",
   "private": true,