From 73d32a0d8b77f23310cacdc397d641ea1fc1d15c Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Wed, 11 Dec 2019 19:39:29 +0900
Subject: [PATCH] lint fixes on attachment list and md previewer

---
 .../AttachmentsPage/AttachmentList.tsx        |  2 +-
 src/components/atoms/MarkdownPreviewer.tsx    | 67 +++++++++----------
 2 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/src/components/AttachmentsPage/AttachmentList.tsx b/src/components/AttachmentsPage/AttachmentList.tsx
index a5483d5579..e2c3c23555 100644
--- a/src/components/AttachmentsPage/AttachmentList.tsx
+++ b/src/components/AttachmentsPage/AttachmentList.tsx
@@ -85,7 +85,7 @@ const AttachmentList = ({ storage }: AttachmentListProps) => {
             )
           }
         )
-      }, [attachmentMap])}
+      }, [attachmentMap, messageBox, popup, removeAttachment, storage])}
     </ListContainer>
   )
 }
diff --git a/src/components/atoms/MarkdownPreviewer.tsx b/src/components/atoms/MarkdownPreviewer.tsx
index 2fa7e8a8fa..d2f982ca42 100644
--- a/src/components/atoms/MarkdownPreviewer.tsx
+++ b/src/components/atoms/MarkdownPreviewer.tsx
@@ -134,11 +134,6 @@ export const rehypeCodeMirror = rehypeCodeMirrorAttacher as Plugin<
   [Partial<RehypeCodeMirrorOptions>?]
 >
 
-interface MarkdownProcessorOptions {
-  codeBlockTheme?: string
-  storageId?: string
-}
-
 const BlobImage = ({ blob, ...props }: any) => {
   const url = useMemo(() => {
     return URL.createObjectURL(blob)
@@ -147,39 +142,10 @@ const BlobImage = ({ blob, ...props }: any) => {
     return () => {
       URL.revokeObjectURL(url)
     }
-  }, [blob])
+  }, [blob, url])
   return <img src={url} {...props} />
 }
 
-function createMarkdownProcessor(options: MarkdownProcessorOptions = {}) {
-  return unified()
-    .use(remarkParse)
-    .use(remarkRehype, { allowDangerousHTML: false })
-    .use(rehypeCodeMirror, {
-      ignoreMissing: true,
-      theme: options.codeBlockTheme
-    })
-    .use(rehypeRaw)
-    .use(rehypeSanitize, schema)
-    .use(rehypeReact, {
-      createElement: React.createElement,
-      components: {
-        img: ({ src, ...props }: any) => {
-          const { storageMap } = useDb()
-          const storage = storageMap[options.storageId!]
-          if (storage != null && !src.match('/')) {
-            const attachment = storage.attachmentMap[src]
-            if (attachment != null) {
-              return <BlobImage blob={attachment.blob} />
-            }
-          }
-
-          return <img {...props} src={src} />
-        }
-      }
-    })
-}
-
 interface MarkdownPreviewerProps {
   content: string
   codeBlockTheme?: string
@@ -200,10 +166,37 @@ const MarkdownPreviewer = ({
   const previousContentRef = useRef('')
   const previousThemeRef = useRef<string | undefined>('')
   const [renderedContent, setRenderedContent] = useState<React.ReactNode>([])
+  const { storageMap } = useDb()
 
   const markdownProcessor = useMemo(() => {
-    return createMarkdownProcessor({ codeBlockTheme, storageId })
-  }, [codeBlockTheme])
+    const options = { codeBlockTheme, storageId }
+
+    return unified()
+      .use(remarkParse)
+      .use(remarkRehype, { allowDangerousHTML: false })
+      .use(rehypeCodeMirror, {
+        ignoreMissing: true,
+        theme: options.codeBlockTheme
+      })
+      .use(rehypeRaw)
+      .use(rehypeSanitize, schema)
+      .use(rehypeReact, {
+        createElement: React.createElement,
+        components: {
+          img: ({ src, ...props }: any) => {
+            const storage = storageMap[options.storageId!]
+            if (storage != null && !src.match('/')) {
+              const attachment = storage.attachmentMap[src]
+              if (attachment != null) {
+                return <BlobImage blob={attachment.blob} />
+              }
+            }
+
+            return <img {...props} src={src} />
+          }
+        }
+      })
+  }, [codeBlockTheme, storageId, storageMap])
 
   const renderContent = useCallback(
     async (content: string) => {