Feature/fcm topic example

src/api/user.js

@@ -6,11 +6,19 @@ export const fetchMe = () =>
     .then(({ data }) => data)
 
 export const updateFCMToken = (token) =>
-  http.patch('fcm_token/update', { token })
+  http.patch('fcm/token/update', { token })
     .then(({ data }) => data)
 
 export const deleteFCMToken = (token) =>
-  http.patch('fcm_token/delete', { token })
+  http.patch('fcm/token/delete', { token })
+    .then(({ data }) => data)
+
+export const getFCMTopic = () =>
+  http.get('fcm/topic')
+    .then(({ data }) => data)
+
+export const patchFCMTopic = (putTopics, deleteTopics) =>
+  http.patch('fcm/topic', { put: putTopics ?? [], delete: deleteTopics ?? [] })
     .then(({ data }) => data)
 
 export const fetchUser = (userId) =>

src/components/Notification.vue

@@ -16,7 +16,7 @@
     </i>
     <div class="noti__container">
       <h3 class="noti__title">
-        {{ $t(isSubcomment ? 'comment-title' : 'article-title') }}
+        {{ notification.title }}
       </h3>
       <p class="noti__content">
         {{ notification.content }}

src/components/TheBoard.vue

@@ -11,6 +11,17 @@
         {{ queryTitle }}
         <slot name="title" />
       </h1>
+      <button
+        class="board__subscribe button"
+        @click="toggleSubscribe"
+      >
+        <i v-if="toggle" class="material-icons toggle-on">
+          notifications_active
+        </i>
+        <i v-else class="material-icons toggle-off">
+          notifications_none
+        </i>
+      </button>
 
       <div class="board__options">
         <slot name="option" />
@@ -25,10 +36,7 @@
     </div>
     <hr v-if="title && !simplify" class="board__divider">
 
-    <TheBoardTable
-      :posts="board.results"
-      :from-query="fromQueryWithPage"
-    />
+    <TheBoardTable :posts="board.results" :from-query="fromQueryWithPage" />
 
     <div class="board__navbar">
       <ThePaginator
@@ -46,10 +54,13 @@
 </template>
 
 <script>
+import store from '@/store'
 import SearchBar from '@/components/SearchBar.vue'
 import ThePaginator from '@/components/ThePaginator.vue'
 import TheBoardTable from '@/components/TheBoardTable.vue'
 import Banner from '@/components/Banner.vue'
+import { patchFCMTopic, getFCMTopic } from '@/api/user'
+import { fetchWithProgress } from '@/views/helper'
 
 export default {
   name: 'TheBoard',
@@ -67,12 +78,36 @@ export default {
       required: true
     },
     title: String,
+    boardId: Number,
     bannerDetails: String,
     bannerImage: String,
     fromQuery: Object,
     simplify: Boolean
   },
 
+  data () {
+    return {
+      user: {
+        nickname: null,
+        email: null,
+        picture: null,
+        pictureSrc: '',
+        sexual: null,
+        social: null,
+        num_articles: null,
+        num_comments: null,
+        num_positive_votes: null
+      },
+      posts: null,
+      blocks: null,
+      updating: false,
+      tabIndex: 0,
+      isNicknameEditable: false,
+      newNickname: null,
+      mobileSettings: false
+    }
+  },
+
   computed: {
     fromQueryWithPage () {
       const query = {
@@ -90,28 +125,100 @@ export default {
       return query
     },
     queryTitle () {
-      if (this.$route.query.query) { return this.$t('search', { title: this.title, query: this.$route.query.query }) }
+      if (this.$route.query.query) {
+        return this.$t('search', {
+          title: this.title,
+          query: this.$route.query.query
+        })
+      }
 
       return this.title
     },
     isBanner () {
-      if (this.$route.name === 'my-info') { return false }
+      if (this.$route.name === 'my-info') {
+        return false
+      }
       return true
     }
+  },
+
+  async beforeRouteEnter ({ query }, from, next) {
+    const [ , posts, blocks ] = await fetchWithProgress([
+      store.dispatch('fetchMe')
+    ], 'myinfo-failed-fetch')
+
+    const { userNickname, userEmail, userPicture, userConfig, userActivity } = store.getters
+
+    next(vm => {
+      vm.user = {
+        nickname: userNickname,
+        email: userEmail,
+        pictureSrc: userPicture,
+        sexual: userConfig.sexual,
+        social: userConfig.social,
+        num_articles: userActivity.articles,
+        num_comments: userActivity.comments,
+        num_positive_votes: userActivity.positiveVotes
+      }
+
+      vm.posts = posts
+      vm.blocks = blocks
+
+      document.title = vm.$t('document-title')
+    })
+  },
+
+  methods: {
+    async toggleSubscribe () {
+      // 1. get current state of token
+      // 2. if user did not subs board, do subs
+      // 3. if user did subs board, then ask dialog, and release subs
+      // FIXME: fix button align
+      // FIXME: i18n english for delete-topic and add-topic
+      // TODO: 전반적인 리디자인
+      // TODO: 버튼 텍스트에 현재 구독이 되어있는지, 그렇지 않은지 띄우기
+      // FIXME: 전체보기 게시판은 board_null 이 됨
+      // TODO: extend board_boardId_boardTopic (board topic, not FCM topic) w/ backend
+      const topics = await getFCMTopic()
+      const curTopic = `board_${this.boardId}`
+      if (topics.includes(curTopic)) {
+        const result = await this.$store.dispatch('dialog/confirm', this.$t('confirm-delete-topic'))
+        if (result) {
+          await patchFCMTopic(null, [curTopic])
+          await this.$store.dispatch('dialog/toast', this.$t('delete-topic'))
+        }
+      } else {
+        const result = await this.$store.dispatch('dialog/confirm', this.$t('confirm-add-topic'))
+        if (result) {
+          await patchFCMTopic([curTopic], null)
+          await this.$store.dispatch('dialog/toast', this.$t('add-topic'))
+        }
+      }
+    }
   }
 }
 </script>
 
 <i18n>
 ko:
   search: '{title}에서 {query} 검색'
+  subscribe: '알림 구독'
+  confirm-add-topic: '정말로 이 게시판을 구독하시겠습니까? 이 게시판에 새로운 글이 올라올 때마다 알림이 오게 됩니다.'
+  confirm-delete-topic: '이미 구독된 게시판입니다. 정말로 이 게시판 구독을 제거하시겠습니까? 더이상 알림을 받지 못하게 됩니다.'
+  delete-topic: '구독 제거가 완료되었습니다.'
+  add-topic: '구독 추가가 완료되었습니다.'
 
 en:
   search: 'Search {query} from {title}'
+  subscribe: 'Subscribe'
+  confirm-add-topic: '정말로 이 게시판을 구독하시겠습니까? 이 게시판에 새로운 글이 올라올 때마다 알림이 오게 됩니다.'
+  confirm-delete-topic: '이미 구독된 게시판입니다. 정말로 이 게시판 구독을 제거하시겠습니까? 더이상 알림을 받지 못하게 됩니다.'
+  delete-topic: '구독 제거가 완료되었습니다.'
+  add-topic: '구독 추가가 완료되었습니다.'
 </i18n>
 
 <style lang="scss" scoped>
-@import '@/theme.scss';
+@import "@/theme.scss";
 .board {
   min-width: 100%;
 
@@ -120,7 +227,7 @@ en:
     margin-bottom: 1rem;
   }
 
-  &__mobile-search{
+  &__mobile-search {
     display: flex;
     margin-top: 20px;
     width: 100%;
@@ -144,6 +251,41 @@ en:
     flex-wrap: wrap;
   }
 
+  &__subscribe {
+    border: transparent;
+    box-shadow: none;
+    margin-bottom: 10px;
+    background: transparent;
+    color: #333333;
+    font-size: 1rem;
+    font-weight: 700;
+    cursor: pointer;
+
+    &:hover {
+      color: #ED3A3A;
+      box-shadow: none;
+      border: transparent;
+      background: transparent;
+    }
+    &.toggle-on {
+      color: #ED3A3A;
+      box-shadow: none;
+      border: transparent;
+      background: transparent;
+    }
+
+    &.toggle-off {
+      color: #333333;
+      box-shadow: none;
+      border: transparent;
+      background: transparent;
+    }
+    .material-icons {
+      font-size: 1.5rem;
+      position: relative;
+    }
+  }
+
   &__divider {
     margin: 0;
     background: #333333;
@@ -153,9 +295,11 @@ en:
     margin-left: auto;
     padding-left: 15px;
 
+    align-items: center;
     display: flex;
     justify-content: flex-end;
     flex-wrap: wrap;
   }
+
 }
 </style>

src/components/ThePostDetail.vue

@@ -124,7 +124,6 @@
         </div>
         <div class="post__buttons">
           <button
-            v-if="!post.is_hidden"
             class="button mobile-button"
             @click="$emit('copy-url')"
           >
@@ -154,6 +153,7 @@ import TextEditor from '@/components/TheTextEditor.vue'
 import ThePostBookmark from '@/components/ThePostBookmark.vue'
 import { mapGetters } from 'vuex'
 import i18n from '@/i18n'
+import { patchFCMTopic, getFCMTopic } from '@/api/user'
 
 export default {
   name: 'ThePostDetail',
@@ -250,6 +250,24 @@ export default {
 
       await apiDeletePost(this.post.id)
       this.$router.go(-1)
+    },
+    async subscribePost () {
+      // TODO: 아래 로직이 TheBoard의 구독 로직과 비슷함. utils로 빼도 될 듯, i18n 문장 수정 필요.
+      const topics = await getFCMTopic()
+      const curTopic = `article_comment_${this.post.id}`
+      if (topics.includes(curTopic)) {
+        const result = await this.$store.dispatch('dialog/confirm', this.$t('confirm-delete-topic'))
+        if (result) {
+          await patchFCMTopic(null, [curTopic])
+          await this.$store.dispatch('dialog/toast', this.$t('delete-topic'))
+        }
+      } else {
+        const result = await this.$store.dispatch('dialog/confirm', this.$t('confirm-add-topic'))
+        if (result) {
+          await patchFCMTopic([curTopic], null)
+          await this.$store.dispatch('dialog/toast', this.$t('add-topic'))
+        }
+      }
     }
   }
 }
@@ -268,6 +286,11 @@ ko:
   attachments: '첨부파일 모아보기'
   more: '{author} 님의 게시글 더 보기'
   show-hidden: '숨김글 보기'
+  subscribe: '댓글 알림 구독'
+  confirm-add-topic: '댓글 알림을 구독하시겠습니까? 이 글에 새로운 댓글이 올라올 때마다 알림이 오게 됩니다.'
+  confirm-delete-topic: '이미 구독된 글입니다. 정말로 댓글 구독을 제거하시겠습니까? 더이상 알림을 받지 못하게 됩니다.'
+  delete-topic: '구독 제거가 완료되었습니다.'
+  add-topic: '구독 추가가 완료되었습니다.'
   confirm-delete: '정말로 삭제하시겠습니까?'
   hidden-notice-ADULT_CONTENT: '게시물 보기 설정은 마이페이지에서 수정할 수 있습니다.'
   hidden-notice-SOCIAL_CONTENT: '게시물 보기 설정은 마이페이지에서 수정할 수 있습니다.'
@@ -284,6 +307,11 @@ en:
   copy-url: 'Copy URL'
   attachments: 'Attachments'
   more: 'Read more posts by {author}'
+  subscribe: 'Comment subscribe'
+  confirm-add-topic: '댓글 알림을 구독하시겠습니까? 이 글에 새로운 댓글이 올라올 때마다 알림이 오게 됩니다.'
+  confirm-delete-topic: '이미 구독된 글입니다. 정말로 댓글 구독을 제거하시겠습니까? 더이상 알림을 받지 못하게 됩니다.'
+  delete-topic: '구독 제거가 완료되었습니다.'
+  add-topic: '구독 추가가 완료되었습니다.'
   show-hidden: 'Show hidden posts'
   confirm-delete: 'Are you really want to delete this post?'
   hidden-notice-ADULT_CONTENT: 'You can change the setting in your MyInfo page to show this kinds of post.'

src/firebase.js

@@ -7,22 +7,23 @@ import { getMessaging, getToken, onMessage } from 'firebase/messaging'
 import { updateFCMToken, deleteFCMToken } from './api'
 
 const firebaseConfig = JSON.parse(process.env.VUE_APP_FIREBASE_CONFIG || '{}')
-
+console.log('fcm test')
 const app = firebase.initializeApp(firebaseConfig)
 let acquired = false
-const fcmDisable = true
+const fcmDisable = false
 
 export const acquireFCMToken = async () => {
   if (fcmDisable) return
   if (!acquired && 'Notification' in window) {
     Notification.requestPermission().then(function (result) {
       if (result === 'granted') {
+        console.log('granted')
         getToken(getMessaging(app), { vapidKey: process.env.VUE_APP_FIREBASE_VAPID_KEY })
           .then((currentToken) => {
             if (currentToken) {
               // Send the token to your server and update the UI if necessary
-              // console.log('[Notification] client token', currentToken)
               updateFCMToken(currentToken)
+              console.log('[Notification] client token', currentToken)
               acquired = true // prevent from acquiring token again after first access. If the page is reloaded, the token will be acquired again.
             } else {
               // Show permission request UI

src/views/Board.vue

@@ -11,6 +11,7 @@
       :from-query="fromQuery"
       :banner-details="bannerDetail"
       :banner-image="bannerImage"
+      :board-id="boardId"
     >
       <template v-if="topic" #title>
         <span class="board__topic">