Refactor external profile button

Author: vgeorge

src/components/external-profile-button.js

@@ -0,0 +1,60 @@
+import Button from './button'
+import join from 'url-join'
+const URL = process.env.APP_URL
+
+const ExternalProfileButton = ({ type, userId }) => {
+  let targetLink
+  let title
+  let label
+  let altText
+  let logoImg
+
+  switch (type) {
+    case 'osm-profile':
+      targetLink = `https://www.openstreetmap.org/user/${userId}`
+      title = 'View profile on OSM'
+      label = 'OSM'
+      altText = 'OSM Logo'
+      logoImg = 'osm_logo.png'
+      break
+    case 'hdyc':
+      targetLink = `https://hdyc.neis-one.org/?${userId}`
+      title = 'View profile on HDYC'
+      label = 'HDYC'
+      altText = 'How Do You Contribute Logo'
+      logoImg = 'neis-one-logo.png'
+      break
+    case 'osmcha':
+      targetLink = `https://osmcha.org/?filters={"users":[{"label":"${userId}","value":"${userId}"}]}`
+      title = 'View profile on OSMCha'
+      label = 'OSMCha'
+      altText = 'OSMCha Logo'
+      logoImg = 'icon-osmcha-logo.svg'
+      break
+    default:
+      return null
+  }
+
+  return (
+    <Button
+      onClick={(e) => {
+        e.stopPropagation()
+        window.open(targetLink, '_blank', 'noreferrer')
+      }}
+      flat
+      size='small'
+      className='unstyled small'
+      title={title}
+    >
+      <img
+        src={`${join(URL, `/static/${logoImg}`)}`}
+        alt={altText}
+        width='16'
+        height='16'
+      />
+      {label}
+    </Button>
+  )
+}
+
+export default ExternalProfileButton

src/pages/teams/[id]/members-table.js

@@ -1,14 +1,12 @@
 import T from 'prop-types'
 import Table from '../../../components/tables/table'
 import { useState } from 'react'
-import join from 'url-join'
 
 import Pagination from '../../../components/pagination'
 import { serverRuntimeConfig } from '../../../../next.config.js'
 import * as R from 'ramda'
 import SearchInput from '../../../components/tables/search-input'
-import Button from '../../../components/button'
-const URL = process.env.APP_URL
+import ExternalProfileButton from '../../../components/external-profile-button'
 const { DEFAULT_PAGE_SIZE } = serverRuntimeConfig
 
 function MembersTable({ rows: allRows, onRowClick }) {
@@ -27,72 +25,9 @@ function MembersTable({ rows: allRows, onRowClick }) {
       key: 'External Profiles',
       render: ({ name }) => (
         <>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation()
-              window.open(
-                `https://www.openstreetmap.org/user/${name}`,
-                '_blank',
-                'noreferrer'
-              )
-            }}
-            flat
-            size='small'
-            className='unstyled small'
-            title='View profile on OSM'
-          >
-            <img
-              src={`${join(URL, `/static/osm_logo.png`)}`}
-              alt='OSM Logo'
-              width='16'
-              height='16'
-            />
-            OSM
-          </Button>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation()
-              window.open(
-                `https://hdyc.neis-one.org/?${name}`,
-                '_blank',
-                'noreferrer'
-              )
-            }}
-            flat
-            size='small'
-            className='unstyled small'
-            title='View profile on HDYC'
-          >
-            <img
-              src={`${join(URL, `/static/neis-one-logo.png`)}`}
-              alt='How Do You Contribute Logo'
-              width='16'
-              height='16'
-            />
-            HDYC
-          </Button>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation()
-              window.open(
-                `https://osmcha.org/?filters={"users":[{"label":"${name}","value":"${name}"}]}`,
-                '_blank',
-                'noreferrer'
-              )
-            }}
-            flat
-            size='small'
-            className='unstyled small'
-            title='View profile on OSMCha'
-          >
-            <img
-              src={`${join(URL, `/static/icon-osmcha-logo.svg`)}`}
-              alt='OSMCha Logo'
-              width='16'
-              height='16'
-            />
-            OSMCha
-          </Button>
+          <ExternalProfileButton type='osm-profile' userId={name} />
+          <ExternalProfileButton type='hdyc' userId={name} />
+          <ExternalProfileButton type='osmcha' userId={name} />
         </>
       ),
     },