refactor: clean up multi-line functions in plugins

dictyBase · Jun 10, 2019 · 929e84f · 929e84f
1 parent ddafb1e
commit 929e84f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 20 deletions.
diff --git a/src/components/editor/plugins/fontfamily.js b/src/components/editor/plugins/fontfamily.js
@@ -68,14 +68,14 @@ const FontFamilyMark = ({ children, mark: { data } }: NodeProps) => (
 const FontFamilyDropdown = ({ editor, classes }: ButtonProps) => {
   const [currentFont, setCurrentFont] = useState(3)
 
+  const handleChange = ({ target: { value: fontFamilyIndex } }) => {
+    setCurrentFont(fontFamilyIndex)
+    fontFamilyMarkStrategy(editor, fontFamilyIndex)
+  }
+
   return (
     <FormControl className={classes.fontFamilyDropdown}>
-      <Select
-        value={currentFont}
-        onChange={({ target: { value: fontFamilyIndex } }) => {
-          setCurrentFont(fontFamilyIndex)
-          fontFamilyMarkStrategy(editor, fontFamilyIndex)
-        }}>
+      <Select value={currentFont} onChange={handleChange}>
         {FontFamilyList.map((font, index) => (
           <MenuItem
             key={`font-family-${index}`}

diff --git a/src/components/editor/plugins/fontsize.js b/src/components/editor/plugins/fontsize.js
@@ -71,14 +71,14 @@ const FontSizeMark = ({ children, mark: { data } }: NodeProps) => (
 const FontSizeDropdown = ({ editor, classes }: ButtonProps) => {
   const [currentFontSize, setCurrentFontSize] = useState(2)
 
+  const handleChange = ({ target: { value: fontSizeIndex } }) => {
+    setCurrentFontSize(fontSizeIndex)
+    fontSizeMarkStrategy(editor, fontSizeIndex)
+  }
+
   return (
     <FormControl className={classes.fontSizeDropdown}>
-      <Select
-        value={currentFontSize}
-        onChange={({ target: { value: fontSizeIndex } }) => {
-          setCurrentFontSize(fontSizeIndex)
-          fontSizeMarkStrategy(editor, fontSizeIndex)
-        }}>
+      <Select value={currentFontSize} onChange={handleChange}>
         {FontSizeList.map((font, index) => (
           <MenuItem
             key={`font-size-${index}`}

diff --git a/src/components/editor/plugins/image.js b/src/components/editor/plugins/image.js
@@ -73,6 +73,11 @@ const ImageButtonUnconnected = ({ editor, classes }: ButtonProps) => {
     height,
   }
 
+  const handleAddImageClick = () => {
+    setImageModalOpen(false)
+    editor.command(insertImage, data)
+  }
+
   return (
     <>
       <Tooltip title="Image" placement="bottom">
@@ -126,10 +131,7 @@ const ImageButtonUnconnected = ({ editor, classes }: ButtonProps) => {
           </DialogContent>
           <DialogActions>
             <Button
-              onClick={() => {
-                setImageModalOpen(false)
-                editor.command(insertImage, data)
-              }}
+              onClick={handleAddImageClick}
               className={classes.basicButton}
               variant="contained"
               color="primary">

diff --git a/src/components/editor/plugins/video.js b/src/components/editor/plugins/video.js
@@ -98,6 +98,11 @@ const VideoButtonUnconnected = ({ editor, classes }: ButtonProps) => {
     height,
   }
 
+  const handleAddVideoClick = () => {
+    setVideoModalOpen(false)
+    editor.command(insertVideo, data)
+  }
+
   return (
     <>
       <Tooltip title="Video" placement="bottom">
@@ -143,10 +148,7 @@ const VideoButtonUnconnected = ({ editor, classes }: ButtonProps) => {
           </DialogContent>
           <DialogActions>
             <Button
-              onClick={() => {
-                setVideoModalOpen(false)
-                editor.command(insertVideo, data)
-              }}
+              onClick={handleAddVideoClick}
               className={classes.basicButton}
               variant="contained"
               color="primary">