Skip to content

Commit 3add187

Browse files
christianalfonichristianalfoni
committed
feat(overmind-devtools): add state tab
1 parent 700141b commit 3add187

File tree

22 files changed

+277
-105
lines changed

22 files changed

+277
-105
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
"ts-jest": "23.0.0",
6666
"ts-loader": "4.4.2",
6767
"tslib": "1.9.3",
68-
"typescript": "2.9.2",
68+
"typescript": "^2.9.2",
6969
"typescript-eslint-parser": "^16.0.1",
7070
"webpack": "4.15.1",
7171
"webpack-cli": "3.0.8",

‎packages/node_modules/overmind-devtools/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"ts-loader": "^4.4.2",
4141
"tslib": "^1.9.3",
4242
"typescript": "^2.9.2",
43+
"url-loader": "^1.0.1",
4344
"webpack": "^4.15.1",
4445
"webpack-cli": "^3.0.8"
4546
}

‎packages/node_modules/overmind-devtools/src/client/app/actions.ts‎

Lines changed: 20 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,30 @@
1-
import { Action, Context } from './'
2-
import { State, Apps, Message } from './state'
3-
4-
/*
5-
TASKS
6-
*/
7-
8-
const getAppsFromStorage = (_, { storage }: Context) => storage.get('apps')
9-
10-
const getCurrentPortFromStorage = (_, { storage }: Context) =>
11-
storage.get('currentPort')
12-
13-
const getNewPortFromState = (_, { state }: Context) => state.newPortValue
14-
15-
const storeApps = (_, { storage, state }: Context) =>
16-
storage.set('apps', state.apps)
17-
18-
const toNumber = (value: string) => String(Number(value))
19-
20-
const connectCurrentPort = (action: (message: any) => void) => (
21-
_,
22-
{ state, connector }: Context
23-
) => connector.addPort(state.currentPort, action)
24-
25-
/*
26-
MUTATIONS
27-
*/
28-
29-
const setApps = (apps: Apps, state: State) => (state.apps = apps || {})
30-
31-
const setCurrentPort = (currentPort: string, state: State) => {
32-
if (currentPort) {
33-
state.currentPort = currentPort
34-
} else if (Object.keys(state.apps).length) {
35-
state.currentPort = Object.keys(state.apps)[0]
36-
}
37-
}
38-
39-
const setError = (error: string, state: State) => (state.error = error)
40-
41-
const setAppLoaded = (_, state: State) => (state.isLoading = false)
42-
43-
const setNewPortValue = (value: string, state: State) =>
44-
(state.newPortValue = value)
45-
46-
const addNewApp = (_, state: State) =>
47-
(state.apps[state.newPortValue] = {
48-
name: null,
49-
port: state.newPortValue,
50-
messages: [],
51-
})
52-
53-
const resetNewPortValue = (_, state: State) => (state.newPortValue = '')
54-
55-
const addMessageFromClient = (message: Message, state: State) => {
56-
state.apps[message.port].messages = state.apps[message.port].messages.concat(
57-
message.message
58-
)
59-
}
60-
61-
/*
62-
ACTIONS
63-
*/
1+
import { Action } from './'
2+
import { Tab } from './state'
3+
import * as mutations from './mutations'
4+
import * as helpers from './helpers'
645

656
export default (action: Action) => {
66-
const onMessage = action<any>().mutation(addMessageFromClient)
7+
const onMessage = action<any>().mutation(mutations.addMessageFromClient)
678

689
return {
6910
loadDevtools: action()
70-
.map(getAppsFromStorage)
71-
.mutation(setApps)
72-
.map(getCurrentPortFromStorage)
73-
.mutation(setCurrentPort)
74-
.mutation(setAppLoaded)
75-
.map(connectCurrentPort(onMessage)),
76-
setError: action<string>().mutation(setError),
11+
.map(helpers.getAppsFromStorage)
12+
.mutation(mutations.setApps)
13+
.map(helpers.getCurrentPortFromStorage)
14+
.mutation(mutations.setCurrentPort)
15+
.mutation(mutations.setAppLoaded)
16+
.map(helpers.connectCurrentPort(onMessage)),
17+
setError: action<string>().mutation(mutations.setError),
7718
changeNewPortValue: action<string>()
78-
.map(toNumber)
79-
.mutation(setNewPortValue),
19+
.map(helpers.toNumber)
20+
.mutation(mutations.setNewPortValue),
8021
addPort: action()
81-
.map(getNewPortFromState)
82-
.mutation(setCurrentPort)
83-
.mutation(addNewApp)
84-
.mutation(resetNewPortValue)
85-
.do(storeApps),
22+
.map(helpers.getNewPortFromState)
23+
.mutation(mutations.setCurrentPort)
24+
.mutation(mutations.addNewApp)
25+
.mutation(mutations.resetNewPortValue)
26+
.do(helpers.storeApps),
27+
changeTab: action().mutation((value: string) => {}),
8628
openApp: action<string>(),
8729
}
8830
}

‎packages/node_modules/overmind-devtools/src/client/app/helpers.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Context } from './'
2+
3+
export const getAppsFromStorage = (_, { storage }: Context) =>
4+
storage.get('apps')
5+
6+
export const getCurrentPortFromStorage = (_, { storage }: Context) =>
7+
storage.get('currentPort')
8+
9+
export const getNewPortFromState = (_, { state }: Context) => state.newPortValue
10+
11+
export const storeApps = (_, { storage, state }: Context) =>
12+
storage.set('apps', state.apps)
13+
14+
export const toNumber = (value: string) => String(Number(value))
15+
16+
export const connectCurrentPort = (action: (message: any) => void) => (
17+
_,
18+
{ state, connector }: Context
19+
) => connector.addPort(state.currentPort, action)

‎packages/node_modules/overmind-devtools/src/client/app/mutations.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Apps, State, Message, Tab } from './state'
2+
3+
export const setApps = (apps: Apps, state: State) => (state.apps = apps || {})
4+
5+
export const setCurrentPort = (currentPort: string, state: State) => {
6+
if (currentPort) {
7+
state.currentPort = currentPort
8+
} else if (Object.keys(state.apps).length) {
9+
state.currentPort = Object.keys(state.apps)[0]
10+
}
11+
}
12+
13+
export const setError = (error: string, state: State) => (state.error = error)
14+
15+
export const setAppLoaded = (_, state: State) => (state.isLoading = false)
16+
17+
export const setNewPortValue = (value: string, state: State) =>
18+
(state.newPortValue = value)
19+
20+
export const addNewApp = (_, state: State) =>
21+
(state.apps[state.newPortValue] = {
22+
name: null,
23+
port: state.newPortValue,
24+
messages: [],
25+
})
26+
27+
export const resetNewPortValue = (_, state: State) => (state.newPortValue = '')
28+
29+
export const addMessageFromClient = (message: Message, state: State) => {
30+
state.apps[message.port].messages = state.apps[message.port].messages.concat(
31+
message.message
32+
)
33+
}
34+
35+
export const changeTab = (tab: Tab, state: State) => (state.currentTab = tab)

‎packages/node_modules/overmind-devtools/src/client/app/state.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,19 @@ export type Message = {
1818
message: AppMessage[]
1919
}
2020

21+
export enum Tab {
22+
State = 'State',
23+
Console = 'Console',
24+
}
25+
2126
export type State = {
2227
isConnecting: boolean
2328
isLoading: boolean
2429
error: string
2530
currentPort: string
2631
apps: Apps
2732
newPortValue: string
33+
currentTab: Tab
2834
}
2935

3036
const state: State = {
@@ -34,6 +40,7 @@ const state: State = {
3440
currentPort: null,
3541
apps: {},
3642
newPortValue: '',
43+
currentTab: Tab.State,
3744
}
3845

3946
export default state

‎packages/node_modules/overmind-devtools/src/client/components/Devtools/elements.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,3 @@ export const Wrapper = styled.div`
1313
export const Container = styled.div`
1414
max-width: 500px;
1515
`
16-
17-
export const Workspace = styled.div`
18-
display: flex;
19-
flex-direction: column;
20-
`

‎packages/node_modules/overmind-devtools/src/client/components/Devtools/index.tsx‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import * as React from 'react'
22
import { connect, Connect } from '../../app'
3-
import { Wrapper, Container, Workspace } from './elements'
3+
import { Wrapper, Container } from './elements'
44
import Input from '../common/Input'
55
import Button from '../common/Button'
66
import Text from '../common/Text'
7-
import PortsBar from '../PortsBar'
8-
import Console from '../Console'
7+
import Workspace from '../Workspace'
98

109
class Devtools extends React.Component<Connect> {
1110
componentDidMount() {
@@ -85,11 +84,7 @@ class Devtools extends React.Component<Connect> {
8584
length={4}
8685
placeholder="port..."
8786
addon={
88-
<Button
89-
disabled={!appState.newPortValue}
90-
primary
91-
onClick={() => {}}
92-
>
87+
<Button type="submit" disabled={!appState.newPortValue} primary>
9388
Add
9489
</Button>
9590
}
@@ -99,14 +94,6 @@ class Devtools extends React.Component<Connect> {
9994
</Wrapper>
10095
)
10196
}
102-
renderWorkspace() {
103-
return (
104-
<Workspace>
105-
<PortsBar />
106-
<Console />
107-
</Workspace>
108-
)
109-
}
11097
render() {
11198
const { appState } = this.props
11299

@@ -119,7 +106,7 @@ class Devtools extends React.Component<Connect> {
119106
}
120107

121108
if (Object.keys(appState.apps).length) {
122-
return this.renderWorkspace()
109+
return <Workspace />
123110
}
124111

125112
return this.renderAddPort()

‎packages/node_modules/overmind-devtools/src/client/components/PortsBar/elements.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import styled from '../../styled-components'
22

33
export const Wrapper = styled.div`
4+
display: flex;
45
background-color: ${({ theme }) => theme.color.dark};
56
height: 50px;
67
`
@@ -16,10 +17,23 @@ export const Port = styled<
1617
height: 100%;
1718
background-color: ${({ theme, isSelected }) =>
1819
isSelected
19-
? theme.color.secondary
20+
? theme.color.lighten(theme.color.dark, 0.4)
2021
: theme.color.lighten(theme.color.dark, 0.2)};
2122
display: flex;
2223
align-items: center;
2324
color: ${({ theme }) => theme.color.white};
2425
padding: ${({ theme }) => `${theme.padding.small} ${theme.padding.normal}`};
2526
`
27+
28+
export const AddPort = styled.div`
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
width: 50px;
33+
height: 50px;
34+
color: ${({ theme }) => theme.color.secondary};
35+
cursor: pointer;
36+
:hover {
37+
color: ${({ theme }) => theme.color.lighten(theme.color.secondary, 0.3)};
38+
}
39+
`

‎packages/node_modules/overmind-devtools/src/client/components/PortsBar/index.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react'
22
import { connect, Connect } from '../../app'
3-
import { Wrapper, Port } from './elements'
3+
import { Wrapper, Port, AddPort } from './elements'
4+
import Icon from '../common/Icon'
45

56
const PortsBar: React.SFC<Connect> = ({ appState, actions }) => (
67
<Wrapper>
@@ -13,6 +14,9 @@ const PortsBar: React.SFC<Connect> = ({ appState, actions }) => (
1314
{port}
1415
</Port>
1516
))}
17+
<AddPort>
18+
<Icon>plus-square</Icon>
19+
</AddPort>
1620
</Wrapper>
1721
)
1822

0 commit comments

Comments
 (0)