Skip to content
This repository was archived by the owner on Oct 12, 2022. It is now read-only.

Commit 1533b13

Browse files
committed
Added some additional operations as suggested by @RyanCavanaugh
1 parent ca89d3e commit 1533b13

File tree

15 files changed

+245
-44
lines changed

15 files changed

+245
-44
lines changed

es6-babel-react-flux-karma/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ You'll need [node / npm](https://nodejs.org/) and [tsd](http://definitelytyped.o
77
```
88
npm install
99
tsd install
10-
npm run watch
10+
npm run serve
1111
```
1212

1313
This will:
Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,23 @@
11
import AppDispatcher from '../dispatcher/AppDispatcher';
22
import GreetingActionTypes from '../constants/action-types/GreetingActionTypes';
33

4-
export function greetingChanged(targetOfGreeting: string) {
4+
export function addGreeting(newGreeting: string) {
55
AppDispatcher.dispatch({
6-
targetOfGreeting,
7-
type: GreetingActionTypes.TARGET_OF_GREETING_CHANGED,
6+
newGreeting,
7+
type: GreetingActionTypes.ADD_GREETING
8+
});
9+
}
10+
11+
export function newGreetingChanged(newGreeting: string) {
12+
AppDispatcher.dispatch({
13+
newGreeting,
14+
type: GreetingActionTypes.NEW_GREETING_CHANGED
15+
});
16+
}
17+
18+
export function removeGreeting(greetingToRemove: string) {
19+
AppDispatcher.dispatch({
20+
greetingToRemove,
21+
type: GreetingActionTypes.REMOVE_GREETING
822
});
923
}

es6-babel-react-flux-karma/src/components/App.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import GreetingStore from '../stores/GreetingStore';
33
import * as GreetingActions from '../actions/GreetingActions';
44
import GreetingState from '../types/GreetingState';
55
import WhoToGreet from './WhoToGreet';
6+
import Greeting from './Greeting';
67

78
class App extends React.Component<any, GreetingState> {
89
constructor(props) {
@@ -19,12 +20,14 @@ class App extends React.Component<any, GreetingState> {
1920
}
2021

2122
render() {
22-
const { targetOfGreeting } = this.state;
23+
const { greetings, newGreeting } = this.state;
2324
return (
2425
<div className="container-fluid">
25-
<h1>Hello { targetOfGreeting }</h1>
26+
<h1>Hello People!</h1>
2627

27-
<WhoToGreet targetOfGreeting={ targetOfGreeting } />
28+
<WhoToGreet newGreeting={ newGreeting } />
29+
30+
{ greetings.map((g, index) => <Greeting key={ index } targetOfGreeting={ g } />) }
2831
</div>
2932
);
3033
}
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as React from 'react/addons';
2+
import * as GreetingActions from '../actions/GreetingActions';
3+
4+
interface Props {
5+
key: number;
6+
targetOfGreeting: string;
7+
}
8+
9+
class Greeting extends React.Component<Props, any> {
10+
constructor(props) {
11+
super(props);
12+
}
13+
14+
static propTypes: React.ValidationMap<Props> = {
15+
targetOfGreeting: React.PropTypes.string.isRequired
16+
}
17+
18+
render() {
19+
return (
20+
<p>
21+
Hello { this.props.targetOfGreeting }!
22+
23+
<button className="btn btn-default btn-danger"
24+
onClick={ this._onClick }>
25+
Remove
26+
</button>
27+
</p>
28+
);
29+
}
30+
31+
_onClick = (event) => {
32+
GreetingActions.removeGreeting(this.props.targetOfGreeting);
33+
}
34+
}
35+
36+
export default Greeting;

es6-babel-react-flux-karma/src/components/WhoToGreet.tsx

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react/addons';
22
import * as GreetingActions from '../actions/GreetingActions';
33

44
interface Props {
5-
targetOfGreeting: string;
5+
newGreeting: string;
66
}
77

88
class WhoToGreet extends React.Component<Props, any> {
@@ -11,18 +11,41 @@ class WhoToGreet extends React.Component<Props, any> {
1111
}
1212

1313
static propTypes: React.ValidationMap<Props> = {
14-
targetOfGreeting: React.PropTypes.string.isRequired
14+
newGreeting: React.PropTypes.string.isRequired
1515
}
1616

1717
render() {
1818
return (
19-
<input type="text" value={ this.props.targetOfGreeting } onChange={ this._handleTargetOfGreetingChange } />
19+
<form role="form">
20+
<div className="form-group">
21+
<input type="text" className="form-control" placeholder="Who would you like to greet?"
22+
value={ this.props.newGreeting }
23+
onChange={ this._handleNewGreetingChange } />
24+
<button type="submit" className="btn btn-default btn-primary"
25+
onClick={ this._onSubmit }
26+
disabled={ this._preventSubmission }>
27+
Add greeting
28+
</button>
29+
</div>
30+
</form>
2031
);
2132
}
2233

23-
_handleTargetOfGreetingChange = (event) => {
24-
const { target: { value: targetOfGreeting } } = event;
25-
GreetingActions.greetingChanged(targetOfGreeting);
34+
get _preventSubmission() {
35+
return !this.props.newGreeting;
36+
}
37+
38+
_handleNewGreetingChange = (event) => {
39+
const { target: { value: newGreeting } } = event;
40+
GreetingActions.newGreetingChanged(newGreeting);
41+
}
42+
43+
_onSubmit = (event) => {
44+
event.preventDefault();
45+
46+
if (!this._preventSubmission) {
47+
GreetingActions.addGreeting(this.props.newGreeting);
48+
}
2649
}
2750
}
2851

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
const GreetingActionTypes = {
2-
TARGET_OF_GREETING_CHANGED: 'GreetingActionTypes.TARGET_OF_GREETING_CHANGED'
2+
ADD_GREETING: 'GreetingActionTypes.ADD_GREETING',
3+
REMOVE_GREETING: 'GreetingActionTypes.REMOVE_GREETING',
4+
NEW_GREETING_CHANGED: 'GreetingActionTypes.NEW_GREETING_CHANGED'
35
};
46

57
export default GreetingActionTypes;

es6-babel-react-flux-karma/src/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77

8-
<title>ES6 + TypeScript + Babel + React + Karma: The Secret Recipe</title>
8+
<title>ES6 + Babel + React + Flux + Karma: The Secret Recipe</title>
99

1010
<!-- inject:css -->
1111
<!-- endinject -->

es6-babel-react-flux-karma/src/stores/GreetingStore.ts

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import GreetingState from '../types/GreetingState';
66
class GreeterStore extends FluxStore<GreetingState> {
77
constructor(dispatcher) {
88
super(dispatcher, () => ({
9-
targetOfGreeting: 'James'
9+
greetings: [],
10+
newGreeting: ''
1011
}));
1112
}
1213

@@ -16,8 +17,17 @@ class GreeterStore extends FluxStore<GreetingState> {
1617

1718
_onDispatch(action) {
1819
switch(action.type) {
19-
case GreetingActionTypes.TARGET_OF_GREETING_CHANGED:
20-
this._state.targetOfGreeting = action.targetOfGreeting;
20+
case GreetingActionTypes.ADD_GREETING:
21+
this._state.newGreeting = '';
22+
this._state.greetings = this._state.greetings.concat(action.newGreeting);
23+
this.emitChange();
24+
break;
25+
case GreetingActionTypes.REMOVE_GREETING:
26+
this._state.greetings = this._state.greetings.filter(g => g !== action.greetingToRemove);
27+
this.emitChange();
28+
break;
29+
case GreetingActionTypes.NEW_GREETING_CHANGED:
30+
this._state.newGreeting = action.newGreeting;
2131
this.emitChange();
2232
break;
2333
}

es6-babel-react-flux-karma/src/tsconfig.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"../typings/tsd.d.ts",
2121
"actions/GreetingActions.ts",
2222
"components/App.tsx",
23+
"components/Greeting.tsx",
2324
"components/WhoToGreet.tsx",
2425
"constants/action-types/GreetingActionTypes.ts",
2526
"dependencies.ts",
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
interface GreetingState {
2-
targetOfGreeting: string;
2+
greetings: string[];
3+
newGreeting: string;
34
}
45

56
export default GreetingState;

0 commit comments

Comments
 (0)