Folder manage

package.json

@@ -51,7 +51,6 @@
     "@types/react-dom": "^16.9.0",
     "@types/react-hot-loader": "^4.1.0",
     "@types/shortid": "0.0.29",
-    "@types/styled-components": "^4.1.19",
     "@types/webpack": "^4.39.1",
     "@types/webpack-dev-server": "^3.1.7",
     "@types/webpack-env": "^1.14.0",

src/components/ContextMenu/styled.ts

@@ -44,4 +44,7 @@ export const StyledContextMenuItem = styled.button`
   &.active {
     ${activeBackgroundColor}
   }
+  &:disabled {
+    background-color: transparent;
+  }
 `

src/components/Dialog/styled.ts

@@ -76,9 +76,9 @@ export const StyledDialogButtonGroup = styled.div`
 `
 
 export const StyledDialogButton = styled.button`
-  padding: 5px 20px;
+  padding: 5px 10px;
   border-radius: 4px;
-  margin-left: 16px;
+  margin-left: 8px;
   user-select: none;
   ${secondaryButtonStyle}
 `

src/components/GlobalStyle.tsx

@@ -1,7 +1,8 @@
 import { createGlobalStyle } from 'styled-components'
 import { backgroundColor, textColor } from '../lib/styled/styleFunctions'
+import { BaseTheme } from '../lib/styled/themes/types'
 
-export default createGlobalStyle`
+export default createGlobalStyle<BaseTheme>`
   body {
     margin: 0;
     ${backgroundColor}

src/components/NotePage/NoteDetail/NoteDetail.tsx

@@ -9,7 +9,9 @@ import {
   mdiTrashCan,
   mdiEyeOutline,
   mdiArrowSplitVertical,
-  mdiFormatText
+  mdiFormatText,
+  mdiDeleteEmpty,
+  mdiRestore
 } from '@mdi/js'
 import ToolbarIconButton from '../../atoms/ToolbarIconButton'
 import Toolbar from '../../atoms/Toolbar'
@@ -95,7 +97,11 @@ type NoteDetailProps = {
     props: Partial<NoteDocEditibleProps>
   ) => Promise<void | NoteDoc>
   trashNote: (storageId: string, noteId: string) => Promise<NoteDoc | undefined>
-  removeNote: (storageId: string, noteId: string) => Promise<void>
+  untrashNote: (
+    storageId: string,
+    noteId: string
+  ) => Promise<NoteDoc | undefined>
+  purgeNote: (storageId: string, noteId: string) => void
   splitMode: boolean
   previewMode: boolean
   toggleSplitMode: () => void
@@ -248,8 +254,38 @@ export default class NoteDetail extends React.Component<
     await this.props.trashNote(storageId, noteId)
   }
 
+  untrashNote = async () => {
+    const { storageId, note } = this.props
+    const noteId = note._id
+
+    if (this.queued) {
+      const { title, content, tags } = this.state
+      await this.saveNote(storageId, noteId, {
+        title,
+        content,
+        tags
+      })
+    }
+    await this.props.untrashNote(storageId, noteId)
+  }
+
+  purgeNote = async () => {
+    const { storageId, note } = this.props
+    const noteId = note._id
+
+    if (this.queued) {
+      const { title, content, tags } = this.state
+      await this.saveNote(storageId, noteId, {
+        title,
+        content,
+        tags
+      })
+    }
+    await this.props.purgeNote(storageId, noteId)
+  }
+
   queued = false
-  timer?: number
+  timer?: any
 
   queueToSave = () => {
     this.queued = true
@@ -358,7 +394,23 @@ export default class NoteDetail extends React.Component<
                 onClick={togglePreviewMode}
                 path={mdiEyeOutline}
               />
-              <ToolbarIconButton onClick={this.trashNote} path={mdiTrashCan} />
+              {note.trashed ? (
+                <>
+                  <ToolbarIconButton
+                    onClick={this.untrashNote}
+                    path={mdiRestore}
+                  />
+                  <ToolbarIconButton
+                    onClick={this.purgeNote}
+                    path={mdiDeleteEmpty}
+                  />
+                </>
+              ) : (
+                <ToolbarIconButton
+                  onClick={this.trashNote}
+                  path={mdiTrashCan}
+                />
+              )}
             </Toolbar>
           </>
         )}

src/components/NotePage/NoteList/NoteItem.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useCallback } from 'react'
 import { Link } from '../../../lib/router'
 import styled from '../../../lib/styled/styled'
 import { NoteDoc } from '../../../lib/db/types'
@@ -10,6 +10,7 @@ import {
   secondaryBackgroundColor
 } from '../../../lib/styled/styleFunctions'
 import cc from 'classcat'
+import { setTransferrableNoteData } from '../../../lib/dnd'
 
 const StyledNoteListItem = styled.div`
   margin: 0;
@@ -24,7 +25,6 @@ const StyledNoteListItem = styled.div`
   &.active {
     border-left: 2px solid ${({ theme }) => theme.primaryColor};
   }
-  user-select: none;
   ${borderBottom}
 
   transition: 200ms background-color;
@@ -55,7 +55,7 @@ type NoteItemProps = {
   focusList: () => void
 }
 
-export default ({ note, active, basePathname, focusList }: NoteItemProps) => {
+export default ({ storageId, note, active, basePathname }: NoteItemProps) => {
   const href = `${basePathname}/${note._id}`
 
   const contentPreview = useMemo(() => {
@@ -67,9 +67,20 @@ export default ({ note, active, basePathname, focusList }: NoteItemProps) => {
     )
   }, [note.content])
 
+  const handleDragStart = useCallback(
+    (event: React.DragEvent) => {
+      setTransferrableNoteData(event, storageId, note)
+    },
+    [note, storageId]
+  )
+
   return (
-    <StyledNoteListItem className={cc([active && 'active'])}>
-      <Link href={href} onFocus={focusList}>
+    <StyledNoteListItem
+      className={cc([active && 'active'])}
+      onDragStart={handleDragStart}
+      draggable={true}
+    >
+      <Link href={href}>
         <div className='container'>
           <div className='title'>{note.title}</div>
           <div className='preview'>{contentPreview}</div>

src/components/NotePage/NotePage.tsx

@@ -14,6 +14,7 @@ import { useDb } from '../../lib/db'
 import TwoPaneLayout from '../atoms/TwoPaneLayout'
 import { NoteDoc } from '../../lib/db/types'
 import { useGeneralStatus } from '../../lib/generalStatus'
+import { useDialog, DialogIconTypes } from '../../lib/dialog'
 
 function sortByUpdatedAt(a: NoteDoc, b: NoteDoc) {
   return b.updatedAt.localeCompare(a.updatedAt)
@@ -68,17 +69,18 @@ export default () => {
 
   const router = useRouter()
 
-  const currentNote = useMemo(() => {
-    if (currentStorage == null) return null
-    if (noteId == null) {
-      if (notes.length > 0) {
-        return currentStorage.noteMap[notes[0]._id]
-      } else {
-        return null
+  const currentNoteIndex = useMemo(() => {
+    for (let i = 0; i < notes.length; i++) {
+      if (notes[i]._id === noteId) {
+        return i
       }
     }
-    return currentStorage.noteMap[noteId]
-  }, [noteId, currentStorage, notes])
+    return 0
+  }, [notes, noteId])
+
+  const currentNote = useMemo(() => {
+    return notes[currentNoteIndex]
+  }, [notes, currentNoteIndex])
 
   const createNote = useCallback(async () => {
     if (storageId == null || routeParams.name === 'storages.trashCan') {
@@ -95,15 +97,6 @@ export default () => {
     })
   }, [db, routeParams, storageId])
 
-  const currentNoteIndex = useMemo(() => {
-    for (let i = 0; i < notes.length; i++) {
-      if (notes[i]._id === noteId) {
-        return i
-      }
-    }
-    return 0
-  }, [notes, noteId])
-
   const naviagateUp = useCallback(() => {
     if (currentNoteIndex > 0) {
       router.push(
@@ -120,8 +113,6 @@ export default () => {
     }
   }, [notes, currentNoteIndex, router, currentPathnameWithoutNoteId])
 
-  const removeNote = async () => {}
-
   const { generalStatus, setGeneralStatus } = useGeneralStatus()
   const updateNoteListWidth = useCallback(
     (leftWidth: number) => {
@@ -144,6 +135,27 @@ export default () => {
     }))
   }, [setGeneralStatus])
 
+  const { messageBox } = useDialog()
+  const purgeNoteFromDb = db.purgeNote
+  const purgeNote = useCallback(
+    (storageId: string, noteId: string) => {
+      messageBox({
+        title: 'Delete a Note',
+        message: 'The note will be deleted permanently',
+        iconType: DialogIconTypes.Warning,
+        buttons: ['Delete Note', 'Cancel'],
+        defaultButtonIndex: 0,
+        cancelButtonIndex: 1,
+        onClose: (value: number | null) => {
+          if (value === 0) {
+            purgeNoteFromDb(storageId, noteId)
+          }
+        }
+      })
+    },
+    [messageBox, purgeNoteFromDb]
+  )
+
   return storageId != null ? (
     <TwoPaneLayout
       style={{ height: '100%' }}
@@ -168,7 +180,8 @@ export default () => {
             note={currentNote}
             updateNote={db.updateNote}
             trashNote={db.trashNote}
-            removeNote={removeNote}
+            untrashNote={db.untrashNote}
+            purgeNote={purgeNote}
             splitMode={generalStatus.noteSplitMode}
             previewMode={generalStatus.notePreviewMode}
             toggleSplitMode={toggleSplitMode}

src/components/SideNavigator/ControlButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import styled from '../../lib/styled'
+import Icon from '../atoms/Icon'
+import { uiTextColor } from '../../lib/styled/styleFunctions'
+
+const StyledButton = styled.button`
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  border-radius: 2px;
+  top: 2px;
+  cursor: pointer;
+  ${uiTextColor}
+  &:focus {
+    box-shadow: none;
+  }
+`
+
+interface ControlButtonProps {
+  iconPath: string
+  onClick?: (event: React.MouseEvent) => void
+}
+
+const ControlButton = ({ iconPath, onClick }: ControlButtonProps) => {
+  return (
+    <StyledButton onClick={onClick}>
+      <Icon path={iconPath} />
+    </StyledButton>
+  )
+}
+
+export default ControlButton