chore: move duplicated code into MentionEditButton (sonar audit)

research-software-directory · Sep 11, 2023 · 2e3767a · 2e3767a
1 parent 29cfb7d
commit 2e3767a
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 88 deletions.
diff --git a/frontend/components/mention/MentionEditButtons.tsx b/frontend/components/mention/MentionEditButtons.tsx
@@ -0,0 +1,50 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import {useSession} from '~/auth'
+import useEditMentionReducer from './useEditMentionReducer'
+
+import IconButton from '@mui/material/IconButton'
+import EditIcon from '@mui/icons-material/Edit'
+import DeleteIcon from '@mui/icons-material/Delete'
+import {MentionItemProps} from '~/types/Mention'
+
+export default function MentionEditButtons({item}: {item:MentionItemProps}) {
+  const {user} = useSession()
+  const {setEditModal,confirmDelete} = useEditMentionReducer()
+  const html = []
+
+  // console.group('MentionEditButtons')
+  // console.log('user...', user)
+  // console.log('item...', item)
+  // console.groupEnd()
+
+  if (user?.role==='rsd_admin') {
+    // items without DOI can be edited by rsd_admin
+    html.push(
+      <IconButton
+        data-testid="edit-mention-btn"
+        key="edit-button"
+        onClick={()=>setEditModal(item)}>
+        <EditIcon />
+      </IconButton>
+    )
+  }
+  // all items can be deleted
+  html.push(
+    <IconButton
+      data-testid="delete-mention-btn"
+      key="delete-button"
+      sx={{
+        marginLeft:'1rem'
+      }}
+      onClick={() => confirmDelete(item)}>
+      <DeleteIcon />
+    </IconButton>
+  )
+
+  return html
+
+}
diff --git a/frontend/components/mention/MentionEditFeatured.tsx b/frontend/components/mention/MentionEditFeatured.tsx
@@ -7,58 +7,18 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import IconButton from '@mui/material/IconButton'
-import EditIcon from '@mui/icons-material/Edit'
-import DeleteIcon from '@mui/icons-material/Delete'
-import {useSession} from '~/auth'
 import {MentionTitle} from './MentionItemBase'
 import {MentionItemProps} from '~/types/Mention'
-import useEditMentionReducer from './useEditMentionReducer'
 import ImageAsBackground from '../layout/ImageAsBackground'
 import MentionAuthors from './MentionAuthors'
 import MentionPublisherItem from './MentionPublisherItem'
+import MentionEditButtons from './MentionEditButtons'
 
 type MentionListItem = {
   item: MentionItemProps
 }
 
 export default function MentionEditFeatured({item}: MentionListItem) {
-  const {user} = useSession()
-  const {setEditModal,confirmDelete} = useEditMentionReducer()
-
-  function onEdit() {
-    setEditModal(item)
-  }
-
-  function renderButtons() {
-    const html = []
-    if (user?.role==='rsd_admin') {
-      // manual items without DOI can be edited
-      html.push(
-        <IconButton
-          data-testid="edit-mention-btn"
-          key="edit-button"
-          onClick={onEdit}>
-          <EditIcon />
-        </IconButton>
-      )
-    }
-    // all items can be deleted
-    html.push(
-      <IconButton
-        data-testid="delete-mention-btn"
-        key="delete-button"
-        sx={{
-          marginLeft:'1rem'
-        }}
-        onClick={() => confirmDelete(item)}>
-        <DeleteIcon />
-      </IconButton>
-    )
-
-    return html
-  }
-
   return (
     <article className="mb-8 md:flex">
       <ImageAsBackground className="flex-1 min-h-[6rem]" src={item.image_url} alt={item.title ?? 'image'} />
@@ -82,7 +42,7 @@ export default function MentionEditFeatured({item}: MentionListItem) {
         />
       </div>
       <nav>
-        {renderButtons()}
+        <MentionEditButtons item={item}/>
       </nav>
     </article>
   )

diff --git a/frontend/components/mention/MentionEditItem.tsx b/frontend/components/mention/MentionEditItem.tsx
@@ -6,65 +6,23 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import IconButton from '@mui/material/IconButton'
-import EditIcon from '@mui/icons-material/Edit'
-import DeleteIcon from '@mui/icons-material/Delete'
-// import UpdateIcon from '@mui/icons-material/Update'
-import {useSession} from '~/auth'
 import MentionItemBase from './MentionItemBase'
 import {MentionItemProps} from '~/types/Mention'
-import useEditMentionReducer from './useEditMentionReducer'
+import MentionEditButtons from './MentionEditButtons'
 
 type MentionListItem = {
   pos: number
   item: MentionItemProps
 }
 
 export default function MentionEditItem({item, pos}: MentionListItem) {
-  const {user} = useSession()
-  // use context methods to pass btn action
-  // const {onUpdate, confirmDelete, setEditModal} = useContext(EditMentionContext)
-  const {setEditModal,confirmDelete} = useEditMentionReducer()
-
-  function onEdit() {
-    setEditModal(item)
-  }
-
-  function renderButtons() {
-    const html = []
-
-    if (user?.role==='rsd_admin') {
-      // items without DOI can be edited by rsd_admin
-      html.push(
-        <IconButton
-          data-testid="edit-mention-btn"
-          key="edit-button"
-          onClick={onEdit}>
-          <EditIcon />
-        </IconButton>
-      )
-    }
-    // all items can be deleted
-    html.push(
-      <IconButton
-        data-testid="delete-mention-btn"
-        key="delete-button"
-        sx={{
-          marginLeft:'1rem'
-        }}
-        onClick={() => confirmDelete(item)}>
-        <DeleteIcon />
-      </IconButton>
-    )
-
-    return html
-  }
-
   return (
     <MentionItemBase
       item={item}
       pos={pos}
-      nav={renderButtons()}
+      nav={
+        <MentionEditButtons item={item}/>
+      }
       role="list"
     />
   )