Refactor

plugins/menus/src/SessionManager/components/AutosavedSessionsList.tsx

@@ -1,28 +1,17 @@
 import React from 'react'
-import {
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  ListSubheader,
-  Paper,
-} from '@mui/material'
+import { List, ListSubheader, Paper } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
 import { observer } from 'mobx-react'
-import pluralize from 'pluralize'
 
 // icons
-import ViewListIcon from '@mui/icons-material/ViewList'
 import { SessionModel, SessionSnap } from './util'
+import SessionListItem from './SessionListItem'
 
 const useStyles = makeStyles()(theme => ({
   root: {
     margin: theme.spacing(1),
   },
-  message: {
-    padding: theme.spacing(3),
-  },
 }))
 
 const AutosaveSessionsList = observer(function ({
@@ -35,31 +24,14 @@ const AutosaveSessionsList = observer(function ({
     localStorage.getItem(session.previousAutosaveId) || '{}',
   ).session as SessionSnap
 
-  const { views = [] } = autosavedSession || {}
-  const totalTracks = views
-    .map(view => view.tracks?.length ?? 0)
-    .reduce((a, b) => a + b, 0)
-
   return autosavedSession ? (
     <Paper className={classes.root}>
       <List subheader={<ListSubheader>Previous autosaved entry</ListSubheader>}>
-        <ListItem button onClick={() => session.loadAutosaveSession()}>
-          <ListItemIcon>
-            <ViewListIcon />
-          </ListItemIcon>
-          <ListItemText
-            primary={autosavedSession.name}
-            secondary={
-              session.name === autosavedSession.name
-                ? 'Currently open'
-                : `${views.length} ${pluralize(
-                    'view',
-                    views.length,
-                  )}; ${totalTracks}
-                           open ${pluralize('track', totalTracks)}`
-            }
-          />
-        </ListItem>
+        <SessionListItem
+          session={session}
+          sessionSnapshot={autosavedSession}
+          onClick={() => session.loadAutosaveSession()}
+        />
       </List>
     </Paper>
   ) : null

plugins/menus/src/SessionManager/components/RegularSavedSessionsList.tsx

@@ -2,26 +2,21 @@ import React, { useState } from 'react'
 import {
   IconButton,
   List,
-  ListItem,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText,
   ListSubheader,
   Paper,
   Typography,
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
 import { observer } from 'mobx-react'
-import pluralize from 'pluralize'
 
 // icons
 import DeleteIcon from '@mui/icons-material/Delete'
-import ViewListIcon from '@mui/icons-material/ViewList'
 
 // locals
 import { SessionModel } from './util'
 import DeleteSavedSessionDialog from './DeleteSavedSessionDialog'
+import SessionListItem from './SessionListItem'
 
 const useStyles = makeStyles()(theme => ({
   root: {
@@ -55,46 +50,23 @@ const RegularSavedSessionsList = observer(function ({
     <Paper className={classes.root}>
       <List subheader={<ListSubheader>Saved sessions</ListSubheader>}>
         {session.savedSessions.length ? (
-          session.savedSessions.map((sessionSnapshot, idx) => {
-            const { views = [] } = sessionSnapshot
-            const totalTracks = views
-              .map(view => view.tracks?.length ?? 0)
-              .reduce((a, b) => a + b, 0)
-            return (
-              <ListItem
-                button
-                disabled={session.name === sessionSnapshot.name}
-                onClick={() => session.activateSession(sessionSnapshot.name)}
-                key={sessionSnapshot.name}
-              >
-                <ListItemIcon>
-                  <ViewListIcon />
-                </ListItemIcon>
-                <ListItemText
-                  primary={sessionSnapshot.name}
-                  secondary={
-                    session.name === sessionSnapshot.name
-                      ? 'Currently open'
-                      : `${views.length} ${pluralize(
-                          'view',
-                          views.length,
-                        )}; ${totalTracks}
-                           open ${pluralize('track', totalTracks)}`
-                  }
-                />
-                <ListItemSecondaryAction>
-                  <IconButton
-                    edge="end"
-                    disabled={session.name === sessionSnapshot.name}
-                    aria-label="Delete"
-                    onClick={() => setSessionIndexToDelete(idx)}
-                  >
-                    <DeleteIcon />
-                  </IconButton>
-                </ListItemSecondaryAction>
-              </ListItem>
-            )
-          })
+          session.savedSessions.map((sessionSnapshot, idx) => (
+            <SessionListItem
+              onClick={() => session.activateSession(sessionSnapshot.name)}
+              sessionSnapshot={sessionSnapshot}
+              session={session}
+              key={sessionSnapshot.name}
+              secondaryAction={
+                <IconButton
+                  edge="end"
+                  disabled={session.name === sessionSnapshot.name}
+                  onClick={() => setSessionIndexToDelete(idx)}
+                >
+                  <DeleteIcon />
+                </IconButton>
+              }
+            />
+          ))
         ) : (
           <Typography className={classes.message}>
             No saved sessions found

plugins/menus/src/SessionManager/components/SessionListItem.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material'
+
+import { observer } from 'mobx-react'
+import pluralize from 'pluralize'
+
+// icons
+import ViewListIcon from '@mui/icons-material/ViewList'
+import { AbstractSessionModel, sum } from '@jbrowse/core/util'
+
+// locals
+import { SessionSnap } from './util'
+
+const SessionListItem = observer(function ({
+  session,
+  sessionSnapshot,
+  onClick,
+  secondaryAction,
+}: {
+  sessionSnapshot: SessionSnap
+  session: AbstractSessionModel
+  onClick: () => void
+  secondaryAction?: React.ReactNode
+}) {
+  const { views = [] } = sessionSnapshot || {}
+  const totalTracks = sum(views.map(view => view.tracks?.length ?? 0))
+  const n = views.length
+
+  return (
+    <ListItem secondaryAction={secondaryAction}>
+      <ListItemButton onClick={onClick}>
+        <ListItemIcon>
+          <ViewListIcon />
+        </ListItemIcon>
+        <ListItemText
+          primary={sessionSnapshot.name}
+          secondary={
+            session.name === sessionSnapshot.name
+              ? 'Currently open'
+              : `${n} ${pluralize('view', n)}; ${totalTracks} open ${pluralize(
+                  'track',
+                  totalTracks,
+                )}`
+          }
+        />
+      </ListItemButton>
+    </ListItem>
+  )
+})
+
+export default SessionListItem