Fix edit field render bug(CommentForm)

- remove no-ssr, which was not necessary and causing the edit field not to appear the majority of the times visiting a Post.
- this was really bad user experience since a user would need to refresh the page to comment.
- removed args in refetchPostComments as there are no params passed in when it is called anymore
- needed to add an if statement since if there are no comments on a Post, then this.$apollo.queries.Post is undefined and it errors out trying to call refetch()
- update test to remove no-ssr

Co-authored-by: Mike Aono <aonomike@gmail.com>
This commit is contained in:
Matt Rider 2019-05-27 17:02:00 -03:00
parent 7879dad940
commit b378bcb286
3 changed files with 13 additions and 15 deletions

View File

@ -5,14 +5,12 @@
>
<template slot-scope="{ errors }">
<ds-card>
<no-ssr>
<hc-editor
ref="editor"
:users="users"
:value="form.content"
@input="updateEditorContent"
/>
</no-ssr>
<hc-editor
ref="editor"
:users="users"
:value="form.content"
@input="updateEditorContent"
/>
<ds-space />
<ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">
<ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%', xs: '0%' }" />

View File

@ -1,4 +1,4 @@
import { config, mount, createLocalVue, createWrapper } from '@vue/test-utils'
import { mount, createLocalVue, createWrapper } from '@vue/test-utils'
import CommentForm from './index.vue'
import Styleguide from '@human-connection/styleguide'
@ -6,8 +6,6 @@ const localVue = createLocalVue()
localVue.use(Styleguide)
config.stubs['no-ssr'] = '<span><slot /></span>'
describe('CommentForm.vue', () => {
let mocks
let wrapper

View File

@ -54,13 +54,15 @@ export default {
},
},
mounted() {
this.$root.$on('refetchPostComments', comment => {
this.refetchPostComments(comment)
this.$root.$on('refetchPostComments', () => {
this.refetchPostComments()
})
},
methods: {
refetchPostComments(comment) {
this.$apollo.queries.Post.refetch()
refetchPostComments() {
if (this.$apollo.queries.Post) {
this.$apollo.queries.Post.refetch()
}
},
},
apollo: {