test: wip demo chat

Author: Guillaume Chau

tests/demo/package.json

@@ -12,9 +12,10 @@
   },
   "dependencies": {
     "graphql-type-json": "^0.2.1",
+    "marked": "^0.4.0",
     "shortid": "^2.2.8",
     "vue": "^2.5.16",
-    "vue-apollo": "^3.0.0-beta.10",
+    "vue-apollo": "^3.0.0-beta.16",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },
@@ -28,7 +29,7 @@
     "graphql-tag": "^2.5.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
-    "vue-cli-plugin-apollo": "file:../../../vue-cli-plugin-apollo",
+    "vue-cli-plugin-apollo": "^0.13.4",
     "vue-template-compiler": "^2.5.16"
   },
   "browserslist": [

tests/demo/src/App.vue

@@ -37,6 +37,9 @@ body
   grid-template-columns 300px 1fr
   grid-template-rows 1fr
 
+:focus
+  outline none
+
 a
   text-decoration none
   color $color

tests/demo/src/components/ChannelList.vue

@@ -37,13 +37,13 @@ export default {
 @import '~@/style/imports'
 
 .channel-list
-  background desaturate(darken($color, 40%), 95%)
+  background desaturate(darken($color, 60%), 95%)
   color white
-  padding 8px
+  padding 12px
 
 .channel
   display block
-  padding 8px
+  padding 12px
   border-radius 4px
   &:hover
     background rgba($color, .3)

tests/demo/src/components/ChannelView.vue

@@ -5,19 +5,35 @@
       :variables="{
         id
       }"
+      @result="onResult"
     >
       <template slot-scope="{ result: { data, loading } }">
-        <div v-if="loading" class="loading">Loading...</div>
+        <div v-if="!data && loading" class="loading">Loading...</div>
 
         <div v-else-if="data">
+          <!-- Websockets -->
+          <ApolloSubscribeToMore
+            :document="require('../graphql/messageChanged.gql')"
+            :variables="{
+              channelId: id,
+            }"
+            :updateQuery="onMessageChanged"
+          />
+
           <div class="wrapper">
             <div class="header">
               <div class="id">#{{ data.channel.id }}</div>
               <div class="name">{{ data.channel.name }}</div>
             </div>
-            <div class="body">
 
+            <div ref="body" class="body">
+              <MessageItem
+                v-for="message in data.channel.messages"
+                :key="message.id"
+                :message="message"
+              />
             </div>
+
             <div class="footer">
               <MessageForm :channel-id="id" />
             </div>
@@ -29,12 +45,14 @@
 </template>
 
 <script>
+import MessageItem from './MessageItem.vue'
 import MessageForm from './MessageForm.vue'
 
 export default {
   name: 'ChannelView',
 
   components: {
+    MessageItem,
     MessageForm,
   },
 
@@ -44,6 +62,63 @@ export default {
       required: true,
     },
   },
+
+  watch: {
+    id: {
+      handler () {
+        this.$_init = false
+      },
+      immediate: true,
+    },
+  },
+
+  methods: {
+    onMessageChanged (previousResult, { subscriptionData }) {
+      const { type, message } = subscriptionData.data.messageChanged
+
+      // No list change
+      if (type === 'updated') return previousResult
+
+      const messages = previousResult.channel.messages.slice()
+      // Add or remove item
+      if (type === 'added') {
+        messages.push(message)
+      } else if (type === 'removed') {
+        const index = messages.findIndex(m => m.id === message.id)
+        if (index !== -1) messages.splice(index, 1)
+      }
+
+      // New query result
+      return {
+        channel: {
+          ...previousResult.channel,
+          messages,
+        },
+      }
+    },
+
+    async scrollToBottom (force = false) {
+      let el = this.$refs.body
+
+      // No body element yet
+      if (!el) {
+        setTimeout(() => this.scrollToBottom(force), 100)
+        return
+      }
+      // User is scrolling up => no auto scroll
+      if (!force && el.scrollTop + el.clientHeight < el.scrollHeight - 100) return
+
+      // Scroll to bottom
+      await this.$nextTick()
+      el.scrollTop = el.scrollHeight
+    },
+
+    onResult () {
+      // The first time we load a channel, we force scroll to bottom
+      this.scrollToBottom(!this.$_init)
+      this.$_init = true
+    },
+  },
 }
 </script>
 
@@ -57,7 +132,7 @@ export default {
   grid-template-rows auto 1fr auto
 
 .header
-  padding 8px
+  padding 12px
   border-bottom $border
 
 .id
@@ -67,6 +142,10 @@ export default {
 .name
   color #555
 
+.body
+  overflow-x hidden
+  overflow-y auto
+
 .footer
   border-top $border
 </style>

tests/demo/src/components/MessageForm.vue

@@ -12,6 +12,7 @@
   >
     <input
       slot-scope="{ mutate, loading, error }"
+      ref="input"
       v-model="newMessage"
       :disabled="loading"
       class="form-input"
@@ -39,6 +40,7 @@ export default {
   methods: {
     onDone () {
       this.newMessage = ''
+      this.$refs.input.focus()
     },
   },
 }
@@ -48,7 +50,7 @@ export default {
 @import '~@/style/imports'
 
 .message-form
-  padding 8px
+  padding 12px
   width 100%
   box-sizing border-box
 

tests/demo/src/components/MessageItem.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="message-item">
+    <div class="user">{{ message.user.nickname }}</div>
+    <div class="content" v-html="html"/>
+  </div>
+</template>
+
+<script>
+import marked from 'marked'
+
+// Open links in new tab
+const renderer = new marked.Renderer()
+const linkRenderer = renderer.link
+renderer.link = (href, title, text) => {
+  const html = linkRenderer.call(renderer, href, title, text)
+  return html.replace(/^<a /, '<a target="_blank" rel="nofollow" ')
+}
+
+export default {
+  props: {
+    message: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    html () {
+      return marked(this.message.content, { renderer })
+    },
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@/style/imports'
+
+.message-item
+  padding 12px 12px
+  &:hover
+    background #f8f8f8
+
+.user
+  color #777
+  font-size 13px
+  margin-bottom 2px
+
+.content
+  word-wrap break-word
+
+  >>>
+    p
+      margin 0
+
+    img
+      max-width 500px
+      max-height 500px
+</style>

tests/demo/src/components/UserCurrent.vue

@@ -48,10 +48,10 @@ export default {
   display grid
   grid-template-columns auto 1fr auto
   grid-template-rows auto
-  grid-gap 8px
+  grid-gap 12px
   align-items center
   margin-bottom 20px
-  padding 8px 0 8px 8px
+  padding 12px 0 12px 12px
 
 .email
   font-size 12px

tests/demo/src/components/UserLogin.vue

@@ -119,7 +119,8 @@ export default {
         if (!result.data.userLogin) return
         const apolloClient = this.$apollo.provider.defaultClient
         // Update token and reset cache
-        await onLogin(apolloClient, result.data.userLogin.token)
+        const { id, userId, expiration } = result.data.userLogin.token
+        await onLogin(apolloClient, { id, userId, expiration })
         // Update cache
         apolloClient.writeQuery({
           query: USER_CURRENT,
@@ -171,10 +172,10 @@ export default {
   box-sizing border-box
 
 .form-input
-  margin-bottom 8px
+  margin-bottom 12px
 
 .actions
-  margin-top 8px
+  margin-top 12px
   text-align center
   font-size 12px
 </style>

tests/demo/src/graphql-api/context.js

@@ -4,9 +4,11 @@ const users = require('./connectors/users')
 // req => Query
 // connection => Subscription
 // eslint-disable-next-line no-unused-vars
-module.exports = (req, connection) => {
-  const bearer = req ? req.get('Authorization') : null
-  const token = bearer ? JSON.parse(bearer) : null
+module.exports = (req, wsConnection) => {
+  let rawToken
+  if (req) rawToken = req.get('Authorization')
+  if (wsConnection) rawToken = wsConnection.authorization
+  const token = rawToken ? JSON.parse(rawToken) : null
   let userId
 
   if (token && users.validateToken(token)) {

tests/demo/src/graphql-api/directives/private.js

@@ -4,9 +4,9 @@ const { defaultFieldResolver } = require('graphql')
 module.exports = class PrivateDirective extends SchemaDirectiveVisitor {
   visitFieldDefinition (field) {
     const { resolve = defaultFieldResolver } = field
-    field.resolve = (root, args, context) => {
+    field.resolve = (root, args, context, info) => {
       if (!context.userId) throw new Error('Unauthorized')
-      return resolve(root, args, context)
+      return resolve(root, args, context, info)
     }
   }
 }