From 84b6cd10d966f702123de8844eeb6766624b6b98 Mon Sep 17 00:00:00 2001 From: bglee Date: Sat, 7 Apr 2018 23:35:16 +0900 Subject: [PATCH] # 0.1.3 - Features - Support Copy & Pate - Add row - Auto reload after add & update row --- README.md | 27 +++++++- .../dynamon-fe/components/DynamoTable.tsx | 67 +++++++++++++++++++ packages/dynamon-fe/components/Home.tsx | 42 ++++-------- packages/dynamon-fe/components/Json.tsx | 6 +- packages/dynamon-fe/components/Links.tsx | 22 ++++++ .../components/StackableJsonTable.tsx | 32 +++------ .../components/TableStateDescription.tsx | 13 ++++ packages/dynamon-fe/redux/index.ts | 47 ++++++------- packages/dynamon/ipc.ts | 5 +- 9 files changed, 178 insertions(+), 83 deletions(-) create mode 100644 packages/dynamon-fe/components/DynamoTable.tsx create mode 100644 packages/dynamon-fe/components/Links.tsx create mode 100644 packages/dynamon-fe/components/TableStateDescription.tsx diff --git a/README.md b/README.md index 9c602c5..8781c74 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Dynamon is GUI client for DynamoDB --- -under development(unstable) +> unstable (under development) [![](https://user-images.githubusercontent.com/1223020/38453064-7a2d421c-3a8a-11e8-821f-c607fff85642.png)](https://www.youtube.com/watch?v=UI9xyrAKAg0&feature=youtu.be) :eyes: Click to watch @@ -22,3 +22,28 @@ checkout development version * [ ] Nested JSON * [x] JSON view * [x] Edit record + +## changelog + +##### 0.1.3 + +* Features + * Support Copy & Pate + * Add row + * Auto reload after add & update row + +##### 0.1.2 + +* Miscellaneous + * add Github, Report issue link + +##### 0.1.1 + +* Features + * Table schema view + * support icon + * can update row and cell +* Fixes + * unexpected button click event bubbling + +##### 0.1.0 - dynamon is born. diff --git a/packages/dynamon-fe/components/DynamoTable.tsx b/packages/dynamon-fe/components/DynamoTable.tsx new file mode 100644 index 0000000..cb283e0 --- /dev/null +++ b/packages/dynamon-fe/components/DynamoTable.tsx @@ -0,0 +1,67 @@ +import * as React from 'react' +import {StackableJsonTableComponent} from './StackableJsonTable' +import {Popover} from '@blueprintjs/core' +import {TableStateDescription} from './TableStateDescription' +import {JsonComponent} from './Json' +import {connect} from 'react-redux' +import {actions, Actions, RootState} from '../redux' + +export class DynamoTableComponent extends React.Component { + render() { + const {table, records, onItemSelected, onRefresh} = this.props + + return ( +
+
+ ) + } + + handleOnEdit = async (prev, next) => { + await this.props.createRecord(this.props.table.TableName, next) + this.props.readRecords(this.props.table.TableName) + } +} + +const mapStateToProps = (state: RootState) => state +const mapDispatchToProps = actions +export const DynamoTable = connect(mapStateToProps, mapDispatchToProps)(DynamoTableComponent) + +interface StateProps extends RootState { +} +interface DispatchProps extends Actions { +} +interface OwnProps { + onItemSelected?(json): void + onRefresh?(): void +} +interface Props extends StateProps, DispatchProps, OwnProps { +} +interface State { +} diff --git a/packages/dynamon-fe/components/Home.tsx b/packages/dynamon-fe/components/Home.tsx index ba04b60..4e57045 100644 --- a/packages/dynamon-fe/components/Home.tsx +++ b/packages/dynamon-fe/components/Home.tsx @@ -1,10 +1,10 @@ import * as React from 'react' import {connect} from 'react-redux' -import {StackableJsonTableComponent} from './StackableJsonTable' import {Actions, actions, RootState} from '../redux' import {SelectComponent} from './Select' import {JsonComponent} from './Json' -import {Icon} from '@blueprintjs/core' +import {DynamoTable} from './DynamoTable' +import {LinksComponent} from './Links' export class HomeComponent extends React.Component { private selectedTable = '__' @@ -13,18 +13,11 @@ export class HomeComponent extends React.Component { } render() { - const {loadingEndpoints, endpoints, tables, records} = this.props + const {loadingEndpoints, endpoints, tables, records, table} = this.props const countTables = tables.length return (
- +
{ title="Table" description={countTables > 0 ? `Select table from ${countTables} tables` : 'none'} onChange={this.handleOnTableChange} - onZoom={() => {console.log(this.props, this.state); debugger}} + onZoom={() => { + console.log(this.props, this.state) + debugger + }} disabled={countTables === 0} > {tables.map(({TableName}) => )}
- {records - ? - - : ( -
-
- -
-

Select Table

-
- ) - } +
) } @@ -68,9 +49,10 @@ export class HomeComponent extends React.Component { this.props.readEndpoints() } - handleJsonEdit = (prev, next) => { + handleJsonEdit = async (prev, next) => { console.log('before edit', prev, 'after edit', next) - this.props.updateRecord(this.selectedTable, next) + await this.props.updateRecord(this.selectedTable, next) + this.props.readRecords(this.props.table.TableName) if (!next) { if (confirm('delete row?')) { diff --git a/packages/dynamon-fe/components/Json.tsx b/packages/dynamon-fe/components/Json.tsx index 30fbc8c..6d3cf18 100644 --- a/packages/dynamon-fe/components/Json.tsx +++ b/packages/dynamon-fe/components/Json.tsx @@ -3,6 +3,9 @@ import RJV, {RJVModified} from 'react-json-view' import classnames from 'classnames' export class JsonComponent extends React.Component { + static defaultProps = { + title: 'JSON' + } static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.src !== prevState.src) { return { @@ -25,7 +28,7 @@ export class JsonComponent extends React.Component { return (
- ) + return this.state.stack.map(({collection, keepHeader}, i) => ( + + )) } handleOnItemSelected = (item = this.props.collection) => { @@ -66,7 +55,6 @@ interface Props { keys?: string[] collection: any[] onItemSelected?(item): void - onRefresh?(): void } interface State { stack: Stack[] diff --git a/packages/dynamon-fe/components/TableStateDescription.tsx b/packages/dynamon-fe/components/TableStateDescription.tsx new file mode 100644 index 0000000..c46acfa --- /dev/null +++ b/packages/dynamon-fe/components/TableStateDescription.tsx @@ -0,0 +1,13 @@ +import * as React from 'react' + +export const TableStateDescription: React.SFC = props => +
+
+ +
+

{props.description}

+
+ +interface Props { + description: string +} diff --git a/packages/dynamon-fe/redux/index.ts b/packages/dynamon-fe/redux/index.ts index 0134b21..4f113a3 100644 --- a/packages/dynamon-fe/redux/index.ts +++ b/packages/dynamon-fe/redux/index.ts @@ -3,11 +3,11 @@ import TableDescription = DocumentClient.TableDescription import ItemList = DocumentClient.ItemList const defaultState: RootState = Object.freeze({ - endpoints: [], - tables: [], - records: null, - table : null, - loadingEndpoints: false + endpoints : [], + tables : [], + records : null, + table : null, + loadingEndpoints: false, }) export const reducer = (state = defaultState, action: ReturnType) => { if (action.type.startsWith('@')) { @@ -21,9 +21,6 @@ export const reducer = (state = defaultState, action: ReturnType t.TableName === action.payload)} } return state @@ -44,25 +40,25 @@ export const reducer = (state = defaultState, action: ReturnType action(ActionTypes.SET_TABLE, tableName), - readEndpoints : () => universalAction(ActionTypes.READ_ENDPOINTS), - readTables : (server: Endpoint) => universalAction(ActionTypes.READ_TABLES, server), - readTable: (tableName?: string) => universalAction(ActionTypes.READ_TABLE, tableName), - readRecords: (tableName: string) => universalAction(ActionTypes.READ_RECORDS, tableName), - updateRecord: (tableName: string, record: any) => universalAction(ActionTypes.UPDATE_RECORD, {tableName, record}) + readEndpoints: () => universalAction(ActionTypes.READ_ENDPOINTS), + readTables : (server: Endpoint) => universalAction(ActionTypes.READ_TABLES, server), + readTable : (tableName?: string) => universalAction(ActionTypes.READ_TABLE, tableName), + readRecords : (tableName: string) => universalAction(ActionTypes.READ_RECORDS, tableName), + createRecord : (tableName: string, record: any) => universalAction(ActionTypes.CREATE_RECORD, {tableName, record}), + updateRecord : (tableName: string, record: any) => universalAction(ActionTypes.UPDATE_RECORD, {tableName, record}), } /* diff --git a/packages/dynamon/ipc.ts b/packages/dynamon/ipc.ts index 3eb3711..526028f 100644 --- a/packages/dynamon/ipc.ts +++ b/packages/dynamon/ipc.ts @@ -66,11 +66,8 @@ export async function ipcHandler(db: Promise, {sender}, action) { send(result.Items) break } + case 'update record': case 'create record': { - console.log('create record', payload) - break - } - case 'update record': { const table = DynamonDbTable.getLatestAccessedTable() try { const ret = await table.put(table.name(), payload.record)