Add Control Navigator Button to TagListFragment

BoostIO · Dec 20, 2020 · 4f1fcc5 · 4f1fcc5
1 parent 5adc1e6
commit 4f1fcc5
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 71 deletions.
diff --git a/src/components/molecules/TagListFragment.tsx b/src/components/molecules/TagListFragment.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react'
 import SideNavigatorItem from '../atoms/NavigatorItem'
+import NavigatorButton from '../atoms/NavigatorButton'
 import { NoteStorage } from '../../lib/db/types'
 import { isTagNameValid } from '../../lib/db/utils'
 import { useGeneralStatus } from '../../lib/generalStatus'
@@ -9,7 +10,7 @@ import { usePathnameWithoutNoteId } from '../../lib/routeParams'
 import { useDialog, DialogIconTypes } from '../../lib/dialog'
 import { useDb } from '../../lib/db'
 import { useTranslation } from 'react-i18next'
-import { mdiPound, mdiTagMultiple } from '@mdi/js'
+import { mdiPound, mdiTagMultiple, mdiDotsVertical } from '@mdi/js'
 import { openContextMenu } from '../../lib/electronOnly'
 import { useAnalytics, analyticsEvents } from '../../lib/analytics'
 
@@ -30,6 +31,54 @@ const TagListFragment = ({ storage }: TagListFragmentProps) => {
   const tagListNavItemId = getTagListItemId(storage.id)
   const tagListIsFolded = !sideNavOpenedItemSet.has(tagListNavItemId)
 
+  const openTagContextMenu = (tagName: string) => {
+    return (event: React.MouseEvent<Element, MouseEvent>) => {
+      event.preventDefault()
+      openContextMenu({
+        menuItems: [
+          {
+            type: 'normal',
+            label: t('tag.remove'),
+            click: () => {
+              messageBox({
+                title: `Remove "${tagName}" tag`,
+                message: t('tag.removeMessage'),
+                iconType: DialogIconTypes.Warning,
+                buttons: [t('tag.remove'), t('general.cancel')],
+                defaultButtonIndex: 0,
+                cancelButtonIndex: 1,
+                onClose: (value: number | null) => {
+                  if (value === 0) {
+                    removeTag(storageId, tagName)
+                    report(analyticsEvents.removeTag)
+                  }
+                },
+              })
+            },
+          },
+          {
+            type: 'normal',
+            label: t('tag.rename'),
+            click: () => {
+              prompt({
+                title: `tag.rename`,
+                message: t('tag.renameMessage', { tagName }),
+                iconType: DialogIconTypes.Question,
+                defaultValue: tagName,
+                submitButtonLabel: t('tag.rename'),
+                onClose: (value: string | null) => {
+                  if (value == null || !isTagNameValid(value) || value == tagName) return
+                  renameTag(storageId, tagName, value);
+                  report(analyticsEvents.renameTag)
+                },
+              })
+            },
+          },
+        ],
+      })
+    }
+  }
+
   const tagList = useMemo(() => {
     return Object.keys(tagMap).map((tagName) => {
       const tagPathname = `/app/storages/${storageId}/tags/${tagName}`
@@ -44,52 +93,13 @@ const TagListFragment = ({ storage }: TagListFragmentProps) => {
             push(tagPathname)
           }}
           active={tagIsActive}
-          onContextMenu={(event) => {
-            event.preventDefault()
-            openContextMenu({
-              menuItems: [
-                {
-                  type: 'normal',
-                  label: t('tag.remove'),
-                  click: () => {
-                    messageBox({
-                      title: `Remove "${tagName}" tag`,
-                      message: t('tag.removeMessage'),
-                      iconType: DialogIconTypes.Warning,
-                      buttons: [t('tag.remove'), t('general.cancel')],
-                      defaultButtonIndex: 0,
-                      cancelButtonIndex: 1,
-                      onClose: (value: number | null) => {
-                        if (value === 0) {
-                          removeTag(storageId, tagName)
-                          report(analyticsEvents.removeTag)
-                        }
-                      },
-                    })
-                  },
-                },
-                {
-                  type: 'normal',
-                  label: t('tag.rename'),
-                  click: () => {
-                    prompt({
-                      title: `tag.rename`,
-                      message: t('tag.renameMessage', { tagName }),
-                      iconType: DialogIconTypes.Question,
-                      defaultValue: tagName,
-                      submitButtonLabel: t('tag.rename'),
-                      onClose: (value: string | null) => {
-                        if (value == null || !isTagNameValid(value) || value == tagName) return
-                        renameTag(storageId, tagName, value);
-                        report(analyticsEvents.renameTag)
-                        // TODO: Test Mobile component in android studio.
-                      },
-                    })
-                  },
-                },
-              ],
-            })
-          }}
+          onContextMenu={openTagContextMenu(tagName)}
+          control={
+            <NavigatorButton
+              iconPath={mdiDotsVertical}
+              onClick={openTagContextMenu(tagName)}
+          />
+          }
         />
       )
     })

diff --git a/src/lib/db/PouchNoteDb.ts b/src/lib/db/PouchNoteDb.ts
@@ -271,7 +271,6 @@ export default class PouchNoteDb implements NoteDb {
       ...props,
       updatedAt: now,
     }
-
     const { rev } = await this.pouchDb.put(tagDocProps)
 
     return {

diff --git a/src/mobile/components/molecules/TagListFragment.tsx b/src/mobile/components/molecules/TagListFragment.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react'
 import NavigatorItem from '../atoms/NavigatorItem'
 import { NoteStorage } from '../../../lib/db/types'
-import { isTagNameValid } from '../../../lib/db/utils'
 import { useGeneralStatus } from '../../lib/generalStatus'
 import { getTagListItemId } from '../../../lib/nav'
 import { useRouter, usePathnameWithoutNoteId } from '../../lib/router'
@@ -20,8 +19,8 @@ const TagListFragment = ({ storage }: TagListFragmentProps) => {
   const { id: storageId, tagMap } = storage
   const { push } = useRouter()
   const { popup } = useContextMenu()
-  const { messageBox, prompt } = useDialog()
-  const { removeTag, renameTag } = useDb()
+  const { messageBox } = useDialog()
+  const { removeTag } = useDb()
   const { t } = useTranslation()
   const currentPathname = usePathnameWithoutNoteId()
 
@@ -67,23 +66,6 @@ const TagListFragment = ({ storage }: TagListFragmentProps) => {
                   })
                 },
               },
-              {
-                type: MenuTypes.Normal,
-                label: t('tag.rename'),
-                onClick: () => {
-                  prompt({
-                    title: t('tag.rename'),
-                    message: t('folder.renameMessage'),
-                    iconType: DialogIconTypes.Question,
-                    defaultValue: tagName,
-                    submitButtonLabel: t('tag.rename'),
-                    onClose: (value: string | null) => {
-                      if (value == null || !isTagNameValid(value) || value == tagName) return
-                      renameTag(storageId, tagName, value);
-                      },
-                  })
-                },
-              },
             ])
           }}
         />
@@ -99,9 +81,6 @@ const TagListFragment = ({ storage }: TagListFragmentProps) => {
     removeTag,
     t,
     toggleNav,
-    prompt,
-    isTagNameValid,
-    renameTag,
   ])
 
   if (tagList.length === 0) {