Merge branch 'release/2.5.0'

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,

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>

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>

pages/frases.vue

@@ -4,50 +4,50 @@
       :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',
   components: {
     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)
     }
   }
 }
 </script>
+
+<style lang="css" scoped>
+p {
+  display: block;
+  text-align: center;
+  padding: 15px;
+  font-size: 1.375rem /* 22/16 */;
+}
+a {
+  color: #fff;
+}
+</style>

pages/index.vue

@@ -9,32 +9,14 @@
 </template>
 
 <script>
-import { randonBackground } from '@/utils'
+import asyncData from '@/services/phrases'
 
 export default {
   name: 'Home',
   components: {
     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>

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 }
+}