From f4bbf1d4e205e3c3438226d0cf71e77d4bc0be11 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 19 Sep 2019 13:27:37 -0400
Subject: [PATCH] add new module and modal to post new status

---
 src/App.js                                    |  4 +-
 src/App.vue                                   |  1 +
 .../post_status_modal/post_status_modal.js    | 25 +++++++++++
 .../post_status_modal/post_status_modal.vue   | 42 +++++++++++++++++++
 src/components/user_card/user_card.js         |  2 +-
 src/main.js                                   |  4 +-
 src/modules/postStatus.js                     | 25 +++++++++++
 7 files changed, 100 insertions(+), 3 deletions(-)
 create mode 100644 src/components/post_status_modal/post_status_modal.js
 create mode 100644 src/components/post_status_modal/post_status_modal.vue
 create mode 100644 src/modules/postStatus.js

diff --git a/src/App.js b/src/App.js
index e9cd5917..40f362d2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,6 +11,7 @@ import SideDrawer from './components/side_drawer/side_drawer.vue'
 import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue'
 import MobileNav from './components/mobile_nav/mobile_nav.vue'
 import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
+import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
 import { windowWidth } from './services/window_utils/window_utils'
 
 export default {
@@ -28,7 +29,8 @@ export default {
     SideDrawer,
     MobilePostStatusModal,
     MobileNav,
-    UserReportingModal
+    UserReportingModal,
+    PostStatusModal
   },
   data: () => ({
     mobileActivePanel: 'timeline',
diff --git a/src/App.vue b/src/App.vue
index 719e00a4..46d3ac42 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -109,6 +109,7 @@
     />
     <MobilePostStatusModal />
     <UserReportingModal />
+    <PostStatusModal />
     <portal-target name="modal" />
   </div>
 </template>
diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
new file mode 100644
index 00000000..86a4e1d8
--- /dev/null
+++ b/src/components/post_status_modal/post_status_modal.js
@@ -0,0 +1,25 @@
+import PostStatusForm from '../post_status_form/post_status_form.vue'
+
+const PostStatusModal = {
+  components: {
+    PostStatusForm
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    isOpen () {
+      return this.isLoggedIn && this.$store.state.postStatus.modalActivated
+    },
+    params () {
+      return this.$store.state.postStatus.params
+    }
+  },
+  methods: {
+    closeModal () {
+      this.$store.dispatch('closePostStatusModal')
+    }
+  }
+}
+
+export default PostStatusModal
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
new file mode 100644
index 00000000..85a5401c
--- /dev/null
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -0,0 +1,42 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="post-form-modal-view modal-view"
+    @click="closeModal"
+  >
+    <div
+      class="post-form-modal-panel panel"
+      @click.stop=""
+    >
+      <div class="panel-heading">
+        {{ $t('post_status.new_status') }}
+      </div>
+      <PostStatusForm
+        class="panel-body"
+        @posted="closeModal"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./post_status_modal.js"></script>
+
+<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%;
+  }
+}
+</style>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index d42be9fc..0c200ad1 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -170,7 +170,7 @@ export default {
       this.$store.dispatch('setCurrent', attachment)
     },
     mentionUser () {
-
+      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index b3256e8e..a43d31e2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,7 @@ import mediaViewerModule from './modules/media_viewer.js'
 import oauthTokensModule from './modules/oauth_tokens.js'
 import reportsModule from './modules/reports.js'
 import pollsModule from './modules/polls.js'
+import postStatusModule from './modules/postStatus.js'
 
 import VueI18n from 'vue-i18n'
 
@@ -76,7 +77,8 @@ const persistedStateOptions = {
       mediaViewer: mediaViewerModule,
       oauthTokens: oauthTokensModule,
       reports: reportsModule,
-      polls: pollsModule
+      polls: pollsModule,
+      postStatus: postStatusModule
     },
     plugins: [persistedState, pushNotifications],
     strict: false // Socket modifies itself, let's ignore this for now.
diff --git a/src/modules/postStatus.js b/src/modules/postStatus.js
new file mode 100644
index 00000000..638c1fb2
--- /dev/null
+++ b/src/modules/postStatus.js
@@ -0,0 +1,25 @@
+const postStatus = {
+  state: {
+    params: null,
+    modalActivated: false
+  },
+  mutations: {
+    openPostStatusModal (state, params) {
+      state.params = params
+      state.modalActivated = true
+    },
+    closePostStatusModal (state) {
+      state.modalActivated = false
+    }
+  },
+  actions: {
+    openPostStatusModal ({ commit }, params) {
+      commit('openPostStatusModal', params)
+    },
+    closePostStatusModal ({ commit }) {
+      commit('closePostStatusModal')
+    }
+  }
+}
+
+export default postStatus