From 6c80a681e2861cbfc1c7a2b7683d2a651f3014fe Mon Sep 17 00:00:00 2001
From: Chen-I Lim <chenilim@gmail.com>
Date: Tue, 9 Mar 2021 13:01:16 -0800
Subject: [PATCH] Add icon to ContentRegistry

---
 .../components/content/contentRegistry.tsx    | 34 +++++++++++++------
 webapp/src/components/contentBlock.tsx        |  8 ++---
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/webapp/src/components/content/contentRegistry.tsx b/webapp/src/components/content/contentRegistry.tsx
index 128f2260f..ee8c480e6 100644
--- a/webapp/src/components/content/contentRegistry.tsx
+++ b/webapp/src/components/content/contentRegistry.tsx
@@ -11,6 +11,9 @@ import {MutableDividerBlock} from '../../blocks/dividerBlock'
 import {MutableImageBlock} from '../../blocks/imageBlock'
 import {MutableTextBlock} from '../../blocks/textBlock'
 import {Utils} from '../../utils'
+import DividerIcon from '../../widgets/icons/divider'
+import ImageIcon from '../../widgets/icons/image'
+import TextIcon from '../../widgets/icons/text'
 
 import DividerElement from './dividerElement'
 import ImageElement from './imageElement'
@@ -20,6 +23,7 @@ type RegistryEntry = {
     type: BlockTypes,
     createBlock: () => MutableContentBlock,
     getDisplayText: (intl: IntlShape) => string,
+    getIcon: () => JSX.Element,
     createComponent: (block: IContentBlock, readonly: boolean) => JSX.Element,
 }
 
@@ -38,6 +42,7 @@ class ContentRegistry {
                     return new MutableTextBlock()
                 },
                 getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.text', defaultMessage: 'text'}),
+                getIcon: () => <TextIcon/>,
                 createComponent: (block, readonly) => (
                     <TextElement
                         block={block}
@@ -47,17 +52,6 @@ class ContentRegistry {
             },
         )
 
-        this.registerContentType(
-            {
-                type: 'divider',
-                createBlock: () => {
-                    return new MutableDividerBlock()
-                },
-                getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.divider', defaultMessage: 'divider'}),
-                createComponent: () => <DividerElement/>,
-            },
-        )
-
         this.registerContentType(
             {
                 type: 'image',
@@ -65,9 +59,22 @@ class ContentRegistry {
                     return new MutableImageBlock()
                 },
                 getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.image', defaultMessage: 'image'}),
+                getIcon: () => <ImageIcon/>,
                 createComponent: (block) => <ImageElement block={block}/>,
             },
         )
+
+        this.registerContentType(
+            {
+                type: 'divider',
+                createBlock: () => {
+                    return new MutableDividerBlock()
+                },
+                getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.divider', defaultMessage: 'divider'}),
+                getIcon: () => <DividerIcon/>,
+                createComponent: () => <DividerElement/>,
+            },
+        )
     }
 
     private registerContentType(entry: RegistryEntry) {
@@ -97,6 +104,11 @@ class ContentRegistry {
 
         return entry.getDisplayText(intl)
     }
+
+    getIcon(type: BlockTypes): JSX.Element | undefined {
+        const entry = this.registry.get(type)
+        return entry?.getIcon()
+    }
 }
 
 const contentRegistry = new ContentRegistry()
diff --git a/webapp/src/components/contentBlock.tsx b/webapp/src/components/contentBlock.tsx
index e3f5631a5..5b26a2cb7 100644
--- a/webapp/src/components/contentBlock.tsx
+++ b/webapp/src/components/contentBlock.tsx
@@ -12,17 +12,15 @@ import {Utils} from '../utils'
 import IconButton from '../widgets/buttons/iconButton'
 import AddIcon from '../widgets/icons/add'
 import DeleteIcon from '../widgets/icons/delete'
-import ImageIcon from '../widgets/icons/image'
 import OptionsIcon from '../widgets/icons/options'
 import SortDownIcon from '../widgets/icons/sortDown'
 import SortUpIcon from '../widgets/icons/sortUp'
-import TextIcon from '../widgets/icons/text'
 import Menu from '../widgets/menu'
 import MenuWrapper from '../widgets/menuWrapper'
 
 import ContentElement from './content/contentElement'
-import './contentBlock.scss'
 import contentRegistry from './content/contentRegistry'
+import './contentBlock.scss'
 
 type Props = {
     block: IContentBlock
@@ -108,7 +106,7 @@ class ContentBlock extends React.PureComponent<Props> {
                 ref={type}
                 id={type}
                 name={contentRegistry.typeDisplayText(intl, type)}
-                icon={<ImageIcon/>}
+                icon={contentRegistry.getIcon(type)}
                 onClick={() => {
                     Utils.selectLocalFile((file) => {
                         mutator.performAsUndoGroup(async () => {
@@ -130,7 +128,7 @@ class ContentBlock extends React.PureComponent<Props> {
                 ref={type}
                 id={type}
                 name={contentRegistry.typeDisplayText(intl, type)}
-                icon={<TextIcon/>}
+                icon={contentRegistry.getIcon(type)}
                 onClick={() => {
                     const newBlock = contentRegistry.createBlock(type)!
                     newBlock.parentId = card.id