chore: add remote notification

Author: antonreshetov

src/renderer/App.vue

@@ -35,7 +35,8 @@ import {
   onCopySnippet,
   emitter,
   onCreateSnippet,
-  onAddDescription
+  onAddDescription,
+  checkForRemoteNotification
 } from '@/composable'
 import { createToast, destroyAllToasts } from 'vercel-toast'
 import { useRoute } from 'vue-router'
@@ -80,6 +81,7 @@ const init = () => {
   }
 
   trackAppUpdate()
+  checkForRemoteNotification()
 }
 
 const setTheme = (theme: string) => {

src/renderer/assets/scss/vendor.scss

@@ -84,3 +84,11 @@
     }
   }
 }
+
+.toast {
+  code {
+    background-color: #eee;
+    border-radius: 3px;
+    padding: 0 4px;
+  }
+}

src/renderer/composable/index.ts

@@ -4,9 +4,12 @@ import type { EmitterEvents } from '@shared/types/renderer/composable'
 import { API_PORT } from '../../main/config'
 import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
-import { ipc, track } from '@/electron'
+import { i18n, ipc, store, track } from '@/electron'
 import type { NotificationRequest } from '@shared/types/main'
 import type { Snippet, SnippetsSort } from '@shared/types/main/db'
+import axios from 'axios'
+import { createToast } from 'vercel-toast'
+import { differenceInDays } from 'date-fns'
 
 export const useApi = createFetch({
   baseUrl: `http://localhost:${API_PORT}`
@@ -128,3 +131,58 @@ export const useHljsTheme = async (theme: 'dark' | 'light') => {
 
   document.head.appendChild(style)
 }
+
+export const checkForRemoteNotification = async () => {
+  const showMessage = (message: string, date: string | number) => {
+    const el = document.createElement('div')
+    el.innerHTML = message
+
+    const links = el.querySelectorAll('a')
+
+    links.forEach(i => {
+      i.addEventListener('click', e => {
+        e.preventDefault()
+        ipc.invoke('main:open-url', i.href)
+        track('app/notify', i.innerHTML)
+      })
+    })
+
+    createToast(el, {
+      action: {
+        text: i18n.t('close'),
+        callback (toast) {
+          toast.destroy()
+          store.app.set('prevRemoteNotice', date)
+          track('app/notify', `remoteNotification-${date}`)
+        }
+      }
+    })
+  }
+
+  const checkAndShow = async () => {
+    try {
+      const { data } = await axios.get<{ message: string; date: string }>(
+        'https://masscode.io/notification.json'
+      )
+
+      if (!data) return
+      const { message, date } = data
+      const prevDate = store.app.get('prevRemoteNotice')
+
+      if (prevDate) {
+        const diff = differenceInDays(prevDate, new Date(date))
+        if (diff < 0) showMessage(message, date)
+      } else {
+        showMessage(message, date)
+      }
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  checkAndShow()
+
+  setInterval(() => {
+    checkAndShow()
+  }, 1000 * 60 * 360) // 6 часов
+}

src/shared/types/main/store.d.ts

@@ -5,6 +5,7 @@ export interface AppStore {
   bounds: object
   dateInstallation?: number
   nextSupportNotice?: number
+  prevRemoteNotice?: number
   selectedFolderAlias?: string
   selectedFolderId?: string
   selectedFolderIds?: string[]