feat(api): create snippets (#56)

Author: antonreshetov

src/main/services/api/server.ts

@@ -8,6 +8,7 @@ import type { Server } from 'http'
 import type { Socket } from 'net'
 import { remove } from 'lodash'
 import type { SnippetWithFolder } from '@shared/types/renderer/store/snippets'
+import { BrowserWindow } from 'electron'
 
 interface ServerWithDestroy extends Server {
   destroy: Function
@@ -82,6 +83,13 @@ export class ApiServer {
       res.sendStatus(200)
     })
 
+    app.post('/snippets/create', (req, res) => {
+      const windows = BrowserWindow.getAllWindows()
+      windows[0].webContents.send('api:snippet-create', req.body)
+
+      res.sendStatus(200)
+    })
+
     app.delete('/tags/:id', (req, res) => {
       const id = req.params.id
       const tags = router.db.get<Tag[]>('tags').value()

src/renderer/App.vue

@@ -25,10 +25,12 @@ import {
   onAddNewFragment,
   onAddNewFolder,
   onCopySnippet,
-  emitter
+  emitter,
+  onCreateSnippet
 } from '@/composable'
 import { createToast, destroyAllToasts } from 'vercel-toast'
 import { useRoute } from 'vue-router'
+import type { Snippet } from '@shared/types/main/db'
 
 // По какой то причине необходимо явно установить роут в '/'
 // для корректного поведения в продакшен сборке
@@ -177,6 +179,10 @@ ipc.on('main-menu:format-snippet', () => {
 ipc.on('main-menu:search', () => {
   emitter.emit('search:focus', true)
 })
+
+ipc.on('api:snippet-create', (event, body: Snippet) => {
+  onCreateSnippet(body)
+})
 </script>
 
 <style lang="scss">

src/renderer/composable/index.ts

@@ -6,6 +6,7 @@ import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
 import { ipc, track } from '@/electron'
 import type { NotificationRequest } from '@shared/types/main'
+import type { Snippet } from '@shared/types/main/db'
 
 export const useApi = createFetch({
   baseUrl: `http://localhost:${API_PORT}`
@@ -31,6 +32,15 @@ export const onAddNewSnippet = async () => {
   track('snippets/add-new')
 }
 
+export const onCreateSnippet = async (body: Partial<Snippet>) => {
+  const snippetStore = useSnippetStore()
+
+  await snippetStore.addNewSnippet(body)
+  await snippetStore.getSnippets()
+  snippetStore.setSnippetsByAlias('inbox')
+  track('api/snippet-create')
+}
+
 export const onAddNewFragment = () => {
   const snippetStore = useSnippetStore()
 

src/renderer/store/snippets.ts

@@ -131,24 +131,34 @@ export const useSnippetStore = defineStore('snippets', {
         await this.getSnippetsByFolderIds(folderStore.selectedIds!)
       }
     },
-    async addNewSnippet () {
+    async addNewSnippet (body?: Partial<Snippet>) {
       const folderStore = useFolderStore()
-      const body: Partial<Snippet> = {}
-
-      body.name = 'Untitled snippet'
-      body.folderId = folderStore.selectedId || ''
-      body.isDeleted = false
-      body.isFavorites = false
-      body.tagsIds = []
-      body.content = [
-        {
-          label: 'Fragment 1',
-          language: folderStore.selected?.defaultLanguage || 'plain_text',
-          value: ''
+      let _body: Partial<Snippet> = {}
+
+      _body.isDeleted = false
+      _body.isFavorites = false
+      _body.folderId = ''
+      _body.tagsIds = []
+
+      if (body) {
+        _body = {
+          ..._body,
+          name: body.name,
+          content: body.content
         }
-      ]
+      } else {
+        _body.name = 'Untitled snippet'
+        _body.folderId = folderStore.selectedId || ''
+        _body.content = [
+          {
+            label: 'Fragment 1',
+            language: folderStore.selected?.defaultLanguage || 'plain_text',
+            value: ''
+          }
+        ]
+      }
 
-      const { data } = await useApi('/snippets').post(body).json()
+      const { data } = await useApi('/snippets').post(_body).json()
 
       this.selected = data.value
       store.app.set('selectedSnippetId', this.selected!.id)

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

@@ -25,16 +25,19 @@ type AppEvents =
   | 'empty-trash'
   | 'set-theme'
   | 'notify'
+type ApiEvents = 'snippet-create'
 
 type TrackSnippetEvents = CombineWith<SnippetEvents, 'snippets'>
 type TrackFolderEvents = CombineWith<FolderEvents, 'folders'>
 type TrackTagEvents = CombineWith<TagEvents, 'tags'>
 type TrackAppEvents = CombineWith<AppEvents, 'app'>
+type TrackApiEvents = CombineWith<ApiEvents, 'api'>
 
 export type TrackEvents =
   | TrackSnippetEvents
   | TrackFolderEvents
   | TrackTagEvents
   | TrackAppEvents
+  | TrackApiEvents
   | 'main'
   | 'preferences'

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

@@ -48,12 +48,19 @@ type MainAction =
   | 'update-available'
   | 'open-url'
 
+type ApiAction = 'snippet-create'
+
 export type ContextMenuChannel = CombineWith<ChannelSubject, 'context-menu'>
 
 export type MainMenuChannel = CombineWith<MainMenuAction, 'main-menu'>
 export type MainChannel = CombineWith<MainAction, 'main'>
+export type ApiChannel = CombineWith<ApiAction, 'api'>
 
-export type Channel = ContextMenuChannel | MainMenuChannel | MainChannel
+export type Channel =
+  | ContextMenuChannel
+  | MainMenuChannel
+  | MainChannel
+  | ApiChannel
 export interface ContextMenuRequest {
   name?: string
   type: ContextMenuType

src/shared/types/renderer/composable/index.d.ts

@@ -1,6 +1,7 @@
 export type EmitterEvents = {
   'snippet:focus-name': boolean
   'snippet:format': boolean
+  'snippet:create': any
   'folder:click': any
   'folder:rename': string
   'scroll-to:folder': string