import { IpcRendererEvent , ipcRenderer } from 'electron' ; import React , { useEffect , useState } from 'react' ; import { Box , Button , Typography } from '@material-ui/core/' ; import styled from 'styled-components' ; import { QueryData , CreateNewQuery , AppState , TableInfo , DatabaseInfo , isDbLists } from '../../../types' ; import { defaultMargin } from '../../../style-variables' ; import { once , sendFeedback } from '../../../lib/utils' ; import SchemaName from './SchemaName' ; import TablesTabs from '../DbView/TablesTabBar' ; import SchemaSqlInput from './SchemaSqlInput' ; const requestDbListOnce = once ( ( ) => ipcRenderer . send ( 'return-db-list' ) ) ; const TopRow = styled ( Box ) `
  display: flex;
  align-items: flex-end;
  margin: ${ defaultMargin } 0;
` ; const Container = styled . a `
  display: flex;
  justify-content: flex-start;
  padding-top: 0px;
` ; const CenterButton = styled ( Box ) `
  display: flex;
  justify-content: center;
  padding-bottom: 0px;
` ; const RunButton = styled ( Button ) `
  margin: ${ defaultMargin } auto;
` ; const InitButton = styled ( Button ) `
  margin-left: 2%;
  height: 30px;
  width: 160px;
  font-size: 12px;
` ; const ExportButton = styled ( Button ) `
  margin-left: 44%;
  height: 30px;
  width: 160px;
  font-size: 12px;
` ; const NewSchemaViewContainer = styled . div `
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
` ; interface NewSchemaViewProps { query ? : AppState [ 'workingQuery' ] ; setQuery : AppState [ 'setWorkingQuery' ] ; createNewQuery : CreateNewQuery ; setSelectedDb : AppState [ 'setSelectedDb' ] ; selectedDb : AppState [ 'selectedDb' ] ; show : boolean ; } const NewSchemaView = ( { query , setQuery , createNewQuery , setSelectedDb , selectedDb , show , } ) => { const [ dbTables , setTables ] = useState < TableInfo [ ] > ( [ ] ) ; const [ selectedTable , setSelectedTable ] = useState < TableInfo > ( ) ; const [ currentSql , setCurrentSql ] = useState ( '' ) ; const [ databases , setDatabases ] = useState < DatabaseInfo [ ] > ( [ ] ) ; const [ open , setOpen ] = useState ( false ) ; const defaultQuery = { label : '' , db : '' , sqlString : '' , } ; const localQuery = { ... defaultQuery , ... query } ; useEffect ( ( ) => { const tablesFromBackend = ( evt , dbLists ) => { if ( isDbLists ( dbLists ) ) { setDatabases ( dbLists . databaseList ) ; setTables ( dbLists . tableList ) ; setSelectedTable ( selectedTable || dbLists . tableList [ 0 ] ) ; } } ; ipcRenderer . on ( 'db-lists' , tablesFromBackend ) ; requestDbListOnce ( ) ; return ( ) => { ipcRenderer . removeListener ( 'db-lists' , tablesFromBackend ) ; } ; } ) ; const onNameChange = ( newName ) => { setQuery ( { ... localQuery , db : newName } ) ; setSelectedDb ( newName ) ; } ; const onSqlChange = ( newSql ) => { setCurrentSql ( newSql ) ; setQuery ( { ... localQuery , sqlString : newSql } ) ; } ; const onInitialize = ( ) => { ipcRenderer . invoke ( 'initialize-db' , { newDbName : localQuery . db , } ) . catch ( ( err ) => { sendFeedback ( { type : 'error' , message : err ?? 'Failed to initialize db' , } ) ; } ) ; } ; const onExport = ( ) => { ipcRenderer . invoke ( 'export-db' , { sourceDb : selectedDb } ) . catch ( ( err ) => { sendFeedback ( { type : 'error' , message : err ?? 'Failed to export db' , } ) ; } ) ; } ; const onRun = ( ) => { setSelectedDb ( localQuery . db ) ; ipcRenderer . invoke ( 'update-db' , { sqlString : localQuery . sqlString , selectedDb } ) . then ( ( ) => { setCurrentSql ( '' ) ; } ) . catch ( ( err ) => { sendFeedback ( { type : 'error' , message : err ?? 'Failed to Update Schema' , } ) ; } ) ; } ; if ( ! show ) return null ; return ( < NewSchemaViewContainer > < TopRow > < SchemaName name = { selectedDb } onChange = { onNameChange } / > < InitButton variant = "contained" onClick = { onInitialize } > Initialize Database < /InitButton> < ExportButton variant = "contained" onClick = { onExport } > Export < /ExportButton> < /TopRow> < SchemaSqlInput sql = { currentSql } onChange = { onSqlChange } runQuery = { onRun } / > < CenterButton > < RunButton variant = "contained" onClick = { onRun } > Update Database < /RunButton> < /CenterButton> < Container > < Typography variant = "h4" > { `${ selectedDb }` } < /Typography> < /Container> < TablesTabs tables = { dbTables } selectTable = { ( table ) => setSelectedTable ( table ) } selectedTable = { selectedTable } / > < /NewSchemaViewContainer>); } ; export default NewSchemaView ;