Skip to content
Permalink
Browse files

Refactor Messages.vue with composition api

  • Loading branch information
marshallswain committed Dec 19, 2019
1 parent e4aed5c commit e5cf7fb0cc8eab80ee3dc441afafb1399d69059e
Showing with 26 additions and 23 deletions.
  1. +26 −23 src/components/Messages.vue
@@ -1,18 +1,20 @@
<template>
<div class="flex flex-column col col-9">
<main class="chat flex flex-column flex-1 clear">
<main ref="chatPane" class="chat flex flex-column flex-1 clear">
<SingleMessage
v-for="message in messages"
v-cloak
:key="message._id"
:message="message"
/>
</main>
<ComposeMessage :create-message="createMessage" />

<ComposeMessage />
</div>
</template>

<script>
import { ref, watch, onMounted } from '@vue/composition-api'
import ComposeMessage from './Composer.vue'
import SingleMessage from './Message.vue'
@@ -23,31 +25,32 @@ export default {
SingleMessage
},
props: {
// eslint-disable-next-line vue/require-default-prop
messages: Array,
// eslint-disable-next-line vue/require-default-prop
findMessages: Function,
// eslint-disable-next-line vue/require-default-prop
createMessage: Function
},
data() {
return {
// TODO: Fix the placeholder
placeholder: 'PLACEHOLDER'
}
},
watch: {
messages() {
this.messages.length && this.scrollToBottom()
messages: {
type: Array,
required: true
}
},
methods: {
scrollToBottom() {
this.$nextTick(() => {
const node = this.$el.getElementsByClassName('chat')[0]
node.scrollTop = node.scrollHeight
setup(props, context) {
const placeholder = ref('PLACEHOLDER')
// Chat Pane
const chatPane = ref(null)
function scrollToBottom() {
context.root.$nextTick(() => {
chatPane.value.scrollTop = chatPane.value.scrollHeight
})
}
onMounted(() => {
watch(
() => props.messages.length,
() => scrollToBottom()
)
})
return {
placeholder,
chatPane
}
}
}
</script>

0 comments on commit e5cf7fb

Please sign in to comment.
You can’t perform that action at this time.