import React , { useState , useEffect } from 'react' ; import styled from 'styled-components' ; import { IpcRendererEvent , ipcRenderer } from 'electron' ; import { IconButton , Tooltip } from '@material-ui/core' ; import AddIcon from '@material-ui/icons/Add' ; import AddNewDbModal from '../modal/AddNewDbModalCorrect' ; import { AppState , isDbLists } from '../../types' ; import { once , sendFeedback } from '../../lib/utils' ; import DuplicateDbModal from '../modal/DuplicateDbModal' ; import DbEntry from './DbEntry' ; import { SidebarList , greyDarkest } from '../../style-variables' ; const requestDbListOnce = once ( ( ) => ipcRenderer . send ( 'return-db-list' ) ) ; const StyledSidebarList = styled ( SidebarList ) `
  background-color: ${ greyDarkest };
` ; type DbListProps = Pick < AppState , 'selectedDb' | 'setSelectedDb' | 'setSelectedView' > & { show : boolean ; } ; const DbList = ( { selectedDb , setSelectedDb , setSelectedView , show , } ) => { const [ databases , setDatabases ] = useState < string [ ] > ( [ ] ) ; const [ openAdd , setOpenAdd ] = useState ( false ) ; const [ openDupe , setOpenDupe ] = useState ( false ) ; const [ dbToDupe , setDbToDupe ] = useState ( '' ) ; useEffect ( ( ) => { const dbListFromBackend = ( evt , dbLists ) => { if ( isDbLists ( dbLists ) ) { setDatabases ( dbLists . databaseList . map ( ( db ) => db . db_name ) ) ; } } ; ipcRenderer . on ( 'db-lists' , dbListFromBackend ) ; requestDbListOnce ( ) ; return ( ) => { ipcRenderer . removeListener ( 'db-lists' , dbListFromBackend ) ; } ; } ) ; const handleClickOpenAdd = ( ) => { setOpenAdd ( true ) ; } ; const handleCloseAdd = ( ) => { setOpenAdd ( false ) ; } ; const handleClickOpenDupe = ( dbName ) => { setDbToDupe ( dbName ) ; setOpenDupe ( true ) ; } ; const handleCloseDupe = ( ) => { setOpenDupe ( false ) ; } ; const selectHandler = ( dbName ) => { if ( dbName === selectedDb ) return ; ipcRenderer . invoke ( 'select-db' , dbName ) . then ( ( ) => { setSelectedDb ( dbName ) ; } ) . catch ( ( ) => sendFeedback ( { type : 'error' , message : `Failed to connect to ${ dbName }` , } ) ) ; } ; if ( ! show ) return null ; return ( < > < Tooltip title = "Import Database" > < IconButton onClick = { handleClickOpenAdd } > < AddIcon fontSize = "large" / > < /IconButton> < /Tooltip> < StyledSidebarList > { databases . map ( ( dbName ) => ( < DbEntry key = { `dbList_${ dbName }` } db = { dbName } isSelected = { selectedDb === dbName } select = { selectHandler } duplicate = { ( ) => handleClickOpenDupe ( dbName ) } />))} { openDupe ? ( < DuplicateDbModal open = { openDupe } onClose = { handleCloseDupe } dbCopyName = { dbToDupe } databases = { databases } / > ) : null } < /StyledSidebarList>  < AddNewDbModal open = { openAdd } onClose = { handleCloseAdd } databases = { databases } / > < />); } ; export default DbList ;