diff --git a/src/ui/components/dockerlogs.tsx b/src/ui/components/dockerlogs.tsx
new file mode 100644
index 00000000..771d73ea
--- /dev/null
+++ b/src/ui/components/dockerlogs.tsx
@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react'
+import { Text, Box } from 'ink'
+import Docker from 'dockerode'
+
+export default function DockerLogs () {
+ const docker = new Docker()
+ const [containers, setContainers] = useState([])
+
+ const listContainers = () => {
+ docker.listContainers({ all: true }, (err: any, containerList: any) => {
+ if (err) {
+ console.error('Error:', err)
+ } else {
+ setContainers(containerList)
+ }
+ })
+ }
+
+ useEffect(() => {
+ listContainers()
+
+ // renew state every 10 seconds
+ const interval = setInterval(listContainers, 10000)
+
+ return () => {
+ clearInterval(interval)
+ }
+ }, [])
+
+ return (
+
+ {containers.map((container: any) => (
+
+ Container ID: {container.Id}
+ Image: {container.Image}
+ Name: {container.Names.join(', ')}
+ Status: {container.Status}
+ {/* Ports: {container.Ports.map((port:any) => `${port.PrivatePort}:${port.PublicPort}`).join(', ')} */}
+
+ ))}
+
+ )
+}
diff --git a/src/ui/components/logo.tsx b/src/ui/components/logo.tsx
new file mode 100644
index 00000000..077155cc
--- /dev/null
+++ b/src/ui/components/logo.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Newline, Text, Box } from 'ink'
+
+export default function Logo () {
+ return (
+
+
+ {' '}:::::::: ::::::: ::: :::
+ {' '}:+: :+: :+: :+: :+: :+:
+ {' '}+:+ +:+ +:+ +:+ +:+ +:+
+ {' '}+#++:++#+ +#+ +:+ +#++:++
+ {' '}+#+ +#+ +#+ +#+ +#+ +#+
+ {' '}#+# #+# #+# #+# #+# #+#
+ ######## ######## ### ###
+
+ )
+}
diff --git a/src/ui/components/option.tsx b/src/ui/components/option.tsx
new file mode 100644
index 00000000..9a7d2f2d
--- /dev/null
+++ b/src/ui/components/option.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Box } from 'ink'
+import Terminal from './terminal'
+
+export default function Option ({ networkType }: any) {
+ return (
+ <>
+
+
+
+ >
+ )
+}
diff --git a/src/ui/components/selectInput.tsx b/src/ui/components/selectInput.tsx
new file mode 100644
index 00000000..32509a60
--- /dev/null
+++ b/src/ui/components/selectInput.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { Text, Box } from 'ink'
+import SelectInput from 'ink-select-input'
+import CommandContext from '../services/commandContext'
+
+export default function Select ({ setNetworkType }:any) {
+ const commandContext = new CommandContext()
+
+ const [items, setItems] = useState([
+ {
+ label: 'Fabric',
+ value: 'bdk fabric',
+ },
+ {
+ label: 'Quorum',
+ value: 'bdk quorum',
+ },
+ ])
+
+ const selectChain = (item: any) => {
+ setNetworkType(item.value)
+ }
+
+ const handleCommand = (item: any) => {
+ const commandList = commandContext.makeItem(item.value)
+ if (commandList.length === 0) {
+ commandContext.executeCommand(item.value)
+ } else setItems(commandList)
+ }
+
+ return (
+ <>
+
+
+ Choose a type of network to deploy:
+
+
+
+
+ >
+ )
+}
diff --git a/src/ui/components/table.tsx b/src/ui/components/table.tsx
deleted file mode 100644
index aaedd9a7..00000000
--- a/src/ui/components/table.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { Box } from 'ink'
-
-export default function Table () {
- return (
-
-
- props
-
-
- )
-}
diff --git a/src/ui/views/terminal.tsx b/src/ui/components/terminal.tsx
similarity index 65%
rename from src/ui/views/terminal.tsx
rename to src/ui/components/terminal.tsx
index 7ff89026..92a79e96 100644
--- a/src/ui/views/terminal.tsx
+++ b/src/ui/components/terminal.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
import { Text, Box } from 'ink'
import CommandContext from '../services/commandContext'
interface TerminalProps {
@@ -6,17 +6,17 @@ interface TerminalProps {
}
export default function Terminal (props: TerminalProps) {
const commandContext = new CommandContext()
- const [output, setOutput] = React.useState('')
- React.useEffect(() => {
+ const [output, setOutput] = useState('')
+ useEffect(() => {
setOutput(commandContext.getCommandHelp(props.type))
}, [props.type])
return (
-
+ <>
Command output:
- {output}
+ {output}
-
+ >
)
}
diff --git a/src/ui/views/app.tsx b/src/ui/views/app.tsx
index 69becd4d..26dfa8c9 100644
--- a/src/ui/views/app.tsx
+++ b/src/ui/views/app.tsx
@@ -1,59 +1,78 @@
-import React, { useState } from 'react'
-import { Box, Text, useApp, useInput } from 'ink'
-import Logo from './logo'
-import Command from './command'
-import DockerLogs from './dockerLogs'
-import Terminal from './terminal'
-import SelectInput from 'ink-select-input'
-import CommandContext from '../services/commandContext'
+import React, { useState, useEffect } from 'react'
+import { Box, Text, useApp, useInput, useStdout } from 'ink'
+import Logo from '../components/logo'
+import Select from '../components/selectInput'
+import Option from '../components/option'
+import DockerLogs from '../components/dockerlogs'
export default function App () {
const { exit } = useApp()
- const commandContext = new CommandContext()
- const [type, setType] = useState('bdk fabric')
- const [items, setItems] = useState([
- {
- label: 'Fabric',
- value: 'bdk fabric',
- },
- {
- label: 'Quorum',
- value: 'bdk quorum',
- },
- ])
+
useInput((input, key) => {
if (input === 'q' || (key.ctrl && input === 'c') || key.escape) {
exit()
}
})
- const selectChain = (item:any) => {
- setType(item.value)
- }
+ const { stdout }: any = useStdout()
+ const [width, setWidth] = useState(stdout.columns || 80)
+ const [height, setHeight] = useState(stdout.rows || 24)
+ const [, setWindowSize] = useState({
+ columns: process.stdout.columns,
+ rows: process.stdout.rows,
+ })
+
+ useEffect(() => {
+ const handleResize = () => {
+ setWidth(stdout.columns)
+ setHeight(stdout.rows)
+ }
+
+ process.stdout.on('resize', handleResize)
+ return () => {
+ process.stdout.off('resize', handleResize)
+ }
+ }, [stdout.columns, stdout.rows])
+
+ useEffect(() => {
+ const handleResize = () => {
+ setWindowSize({
+ columns: process.stdout.columns,
+ rows: process.stdout.rows,
+ })
+ }
+
+ process.stdout.on('resize', handleResize)
+
+ return () => {
+ process.stdout.off('resize', handleResize)
+ }
+ }, [])
- const handleCommand = (item: any) => {
- const commandList = commandContext.makeItem(item.value)
- if (commandList.length === 0) {
- commandContext.executeCommand(item.value)
- } else setItems(commandList)
- }
+ const [networkType, setNetworkType] = useState('bdk fabric')
return (
-
-
-
+
+
+
+
+ Press q to exit
+
+
+
+
+
-
-
-
-
-
+
+
+ Running Docker Container
+
+
+
+
-
-
- -- Press q to exit --
)
}
diff --git a/src/ui/views/command.tsx b/src/ui/views/command.tsx
deleted file mode 100644
index d979fe57..00000000
--- a/src/ui/views/command.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { Text, Box, Newline } from 'ink'
-
-export default function Command () {
- return (
-
- Choose a command:
-
-
- )
-}
diff --git a/src/ui/views/dockerLogs.tsx b/src/ui/views/dockerLogs.tsx
deleted file mode 100644
index a1e83008..00000000
--- a/src/ui/views/dockerLogs.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { Text, Box, useInput } from 'ink'
-import ContainerContext from '../services/containerContext'
-
-export default function DockerLogs () {
- const containerContext = new ContainerContext()
- const [items, setItems] = React.useState()
- React.useEffect(() => {
- setItems(containerContext.listContainers() as any)
- }, [setItems])
-
- useInput((input) => {
- if (input === 'r') {
- setItems(containerContext.listContainers() as any)
- }
- })
- return (
-
- Docker Containers:
-
- { items }
-
-
- )
-}
diff --git a/src/ui/views/logo.tsx b/src/ui/views/logo.tsx
deleted file mode 100644
index 29edb708..00000000
--- a/src/ui/views/logo.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import { Text, Box } from 'ink'
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import Gradient from 'ink-gradient'
-
-export default function Logo () {
- return (
-
-
-
- Blockchain Deploy Kit
-
-
-
- )
-}