refactor MobilePostStatusModal using new PostStatusModal

src/components/mobile_post_status_modal/mobile_post_status_modal.js

@@ -1,14 +1,9 @@
-import PostStatusForm from '../post_status_form/post_status_form.vue'
 import { debounce } from 'lodash'
 
 const MobilePostStatusModal = {
-  components: {
-    PostStatusForm
-  },
   data () {
     return {
       hidden: false,
-      postFormOpen: false,
       scrollingDown: false,
       inputActive: false,
       oldScrollPos: 0,
@@ -28,8 +23,8 @@ const MobilePostStatusModal = {
     window.removeEventListener('resize', this.handleOSK)
   },
   computed: {
-    currentUser () {
+    isLoggedIn () {
-      return this.$store.state.users.currentUser
+      return !!this.$store.state.users.currentUser
     },
     isHidden () {
       return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
@@ -57,17 +52,7 @@ const MobilePostStatusModal = {
       window.removeEventListener('scroll', this.handleScrollEnd)
     },
     openPostForm () {
-      this.postFormOpen = true
+      this.$store.dispatch('openPostStatusModal')
-      this.hidden = true
-
-      const el = this.$el.querySelector('textarea')
-      this.$nextTick(function () {
-        el.focus()
-      })
-    },
-    closePostForm () {
-      this.postFormOpen = false
-      this.hidden = false
     },
     handleOSK () {
       // This is a big hack: we're guessing from changed window sizes if the

src/components/mobile_post_status_modal/mobile_post_status_modal.vue

@@ -1,23 +1,5 @@
 <template>
-  <div v-if="currentUser">
+  <div v-if="isLoggedIn">
-    <div
-      v-show="postFormOpen"
-      class="post-form-modal-view modal-view"
-      @click="closePostForm"
-    >
-      <div
-        class="post-form-modal-panel panel"
-        @click.stop=""
-      >
-        <div class="panel-heading">
-          {{ $t('post_status.new_status') }}
-        </div>
-        <PostStatusForm
-          class="panel-body"
-          @posted="closePostForm"
-        />
-      </div>
-    </div>
     <button
       class="new-status-button"
       :class="{ 'hidden': isHidden }"
@@ -33,22 +15,6 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.post-form-modal-view {
-  align-items: flex-start;
-}
-
-.post-form-modal-panel {
-  flex-shrink: 0;
-  margin-top: 25%;
-  margin-bottom: 2em;
-  width: 100%;
-  max-width: 700px;
-
-  @media (orientation: landscape) {
-    margin-top: 8%;
-  }
-}
-
 .new-status-button {
   width: 5em;
   height: 5em;