finish MVP

IgorHalfeld · IgorHalfeld · Oct 2, 2020 · Oct 4, 2020 · Oct 4, 2020 · Oct 4, 2020
commit 9ff24141e6920a831e0812615ae6b00ada00c549
diff --git a/README.md b/README.md
@@ -1,34 +1,31 @@
-# pr-maneiro
+<p align="center">
+  <img src="src/assets/icon.png" width="100" />
+  <h3 align="center">PR Maneiro 👍🏻</h3>
+  <p align="center">Faça alguém feliz com um comentário no PR!</p>
+  <p align="center">
+    <img src="https://travis-ci.org/IgorHalfeld/pr-maneiro.svg?branch=master" alt="Build Status">
+  </p>
+</p>
+
+> ⚠️ Desenvolvimento ativo
 
 ## Project setup
-```
+
+```sh
 npm install
-```
 
-### Compiles and hot-reloads for development
-```
+# Compiles and hot-reloads for development
 npm run serve
-```
 
-### Compiles and minifies for production
-```
+# Compiles and minifies for production
 npm run build
-```
 
-### Run your unit tests
-```
+# Run your unit tests
 npm run test:unit
-```
 
-### Run your end-to-end tests
-```
+# Run your end-to-end tests
 npm run test:e2e
-```
 
-### Lints and fixes files
-```
+# Lints and fixes files
 npm run lint
 ```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "dom-to-image": "^2.6.0",
     "register-service-worker": "^1.7.1",
     "tailwindcss": "^1.8.10",
     "vue": "^3.0.0-0"

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,15 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+
+    <title>PR Maneiro v2.beta</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

diff --git a/src/App.vue b/src/App.vue
@@ -1,23 +1,40 @@
 <template>
-  <main class="flex flex-col w-full h-full px-12 py-5">
-    <custom-header />
+  <main class="relative flex flex-col items-center justify-center w-full h-full px-12 py-5">
+    <custom-header class="absolute top-0 w-3/5 px-12 py-5 mx-auto" />
 
-    <div class="mt-10 grid grid-cols-12">
+    <div class="self-center w-3/5 grid grid-cols-12">
       <tweet-viewer
-        :current-tweet="state.currentTweet"
-        class=" col-span-8"
+        class="col-span-8"
+        :tweet="state.currentTweet"
+        :search="state.search"
+        @tweet-update="handleTweetUpdate"
+      />
+      <toolbar
+        class="col-span-4"
+        @tweet-message-change="handleTweetMessageChange"
+        @template-change="handleTemplateChange"
+        @copy="handleCopy"
+        @download="handleDownload"
       />
-      <toolbar class="col-span-4" />
     </div>
   </main>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, onMounted, onUnmounted, Ref } from 'vue'
 import CustomHeader from './components/CustomHeader/index.vue'
 import TweetViewer from './components/TweetViewer/index.vue'
 import Toolbar from './components/Toolbar/index.vue'
-import { useStore } from './store'
+import { useStore, setCurrentTweet, setTweetRef, setSearch } from './store'
+import { Person, Win } from './types'
+import { Persons } from './utils/persons'
+import { buildCopyFn, buildDownloadFn } from './utils/domtoimage'
+
+const ARROW_RIGHT = 39
+const ARROW_LEFT = 37
+
+const copy = buildCopyFn(window as unknown as Win)
+const download = buildDownloadFn(document)
 
 export default defineComponent({
   components: {
@@ -26,10 +43,84 @@ export default defineComponent({
     Toolbar
   },
   setup () {
+    const persons = Object.values(Persons)
     const store = useStore()
+    let currentIndex = 0
+
+    function nextTweet (): void {
+      if (currentIndex >= (persons.length - 1)) {
+        return
+      }
+      currentIndex += 1
+      const tweet = persons[currentIndex]
+      setCurrentTweet(tweet)
+    }
+
+    function previousTweet (): void {
+      if (currentIndex <= 0) {
+        return
+      }
+      currentIndex -= 1
+      const tweet = persons[currentIndex]
+      setCurrentTweet(tweet)
+    }
+
+    function handleKeyup (event: KeyboardEvent): void {
+      const code = event.keyCode
+      if (code === ARROW_RIGHT) {
+        nextTweet()
+      }
+
+      if (code === ARROW_LEFT) {
+        previousTweet()
+      }
+    }
+
+    function handleTweetUpdate (ref: Ref): void {
+      setTweetRef(ref)
+    }
+
+    async function handleCopy (): Promise<void> {
+      await copy(store.tweetRef)
+    }
+
+    async function handleDownload (): Promise<void> {
+      await download(store.tweetRef)
+    }
+
+    function handleTweetMessageChange (msg: string): void {
+      const tweet = { ...store.currentTweet }
+
+      if (msg.length) {
+        tweet.msg = msg
+      } else {
+        const match = persons.find(p => p.username === tweet.username)
+        tweet.msg = match?.msg ?? msg
+      }
+
+      setSearch(tweet.msg)
+      setCurrentTweet(tweet)
+    }
+
+    function handleTemplateChange (template: Person): void {
+      setCurrentTweet(template)
+    }
+
+    onMounted(() => {
+      window.addEventListener('keyup', handleKeyup)
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('keyup', handleKeyup)
+    })
 
     return {
-      state: store
+      state: store,
+      handleTweetMessageChange,
+      handleTemplateChange,
+      handleTweetUpdate,
+      handleDownload,
+      handleCopy
     }
   }
 })

diff --git a/src/components/CustomHeader/index.vue b/src/components/CustomHeader/index.vue
@@ -2,7 +2,7 @@
   <header class="flex items-center justify-between">
     <div class="flex flex-col">
       <h1 class="text-3xl font-bold text-brand-black">
-        PR Maneiro
+        PR Maneiro <small class="px-2 py-1 text-sm font-light text-white rounded-full bg-brand-primary">v2.beta</small>
       </h1>
       <p class="font-medium text-brand-black">
         Faça alguém feliz com um comentário no Pull Request.

diff --git a/src/components/TemplateAutoComplete/index.vue b/src/components/TemplateAutoComplete/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="relative flex flex-col w-full">
+    <div class="flex w-full">
+      <input
+        ref="input"
+        v-model="state.search"
+        type="text"
+        class="w-full p-3 border-0 outline-none rounded-md focus:outline form-input"
+        placeholder="Busque um template. ex: neymar"
+        @input="handleInput"
+      >
+    </div>
+
+    <div
+      v-if="state.completeIsOpen"
+      class="absolute top-0 left-0 flex flex-col w-full mt-10 bg-white rounded-bl-md rounded-br-md animated fadeIn faster"
+    >
+      <div
+        v-for="(person, index) in state.persons"
+        :key="person.name"
+        :class="{
+          'mt-3': !index
+        }"
+        class="flex flex-col px-5 py-2 font-medium text-left text-gray-600 cursor-pointer text-md"
+        @click="() => handleAutoCompleteClick(person)"
+      >
+        {{ person.name }}
+        <span class="text-sm text-gray-500 font-lightitalic">@{{ person.username }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from 'vue'
+import { Person } from '../../types'
+import { Persons } from '../../utils/persons'
+
+type State = {
+  persons: Person[];
+  search: string;
+  completeIsOpen: boolean;
+}
+
+export default defineComponent({
+  emits: ['item-click'],
+  setup (_, { emit }) {
+    const persons: Person[] = Object.values(Persons)
+    const state = reactive<State>({
+      persons,
+      search: '',
+      completeIsOpen: false
+    })
+
+    function handleInput () {
+      if (state.search.length) {
+        const key = new RegExp(state.search, 'ig')
+        state.persons = persons.filter(p => key.test(p.name))
+        state.completeIsOpen = true
+
+        return
+      }
+      state.completeIsOpen = false
+    }
+
+    function handleAutoCompleteClick (item: Person) {
+      state.search = item.name
+      state.completeIsOpen = false
+      emit('item-click', item)
+    }
+
+    return {
+      state,
+      handleInput,
+      handleAutoCompleteClick
+    }
+  }
+})
+</script>