Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit aa591f3

Browse files
re-select, reducer, actionTypes, containers added
1 parent 4d9a8c3 commit aa591f3

File tree

12 files changed

+214
-72
lines changed

12 files changed

+214
-72
lines changed

‎package-lock.json

Lines changed: 52 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"lodash": "^4.17.11",
67
"react": "^16.6.0",
78
"react-dom": "^16.6.0",
9+
"react-redux": "^5.1.0",
810
"react-scripts": "2.1.0",
911
"redux": "^4.0.1",
10-
"redux-persist": "^5.10.0"
12+
"redux-persist": "^5.10.0",
13+
"reselect": "^4.0.0"
1114
},
1215
"scripts": {
1316
"start": "react-scripts start",

‎src/ActionTypes/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
3+
import * as t from '../Constants';
4+
import _ from 'lodash';
5+
6+
export const saveCard = data => {
7+
if (!_.isObject(data)) throw new Error(`data should be object: ` + data);
8+
return { type: t.SAVE_USER, data };
9+
};

‎src/App.js

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
1-
import React, { Component } from 'react';
2-
import './App.css';
3-
import Card from './Components/Card'
4-
import Form from './Components/Form'
5-
1+
import React, { Component } from "react";
2+
import "./App.css";
3+
import Card from "./Containers/cardContainer";
4+
import Form from "./Components/Form";
65

76
// Redux Persist takes your Redux state object and saves it to persisted storage.
87
// Then on app launch it retrieves this persisted state and saves it back to redux.
98

109
class App extends Component {
1110
render() {
1211
return (
13-
<div className="">
14-
<Form />
12+
<div className="container">
13+
<div className="col-lg-4 marginTop">
14+
<div className="col-md-8">
15+
<Form />
16+
</div>
17+
</div>
18+
<div className=" col-lg-7 marginTop ">
19+
<div className="col-lg-7 cards">
20+
<Card />
21+
</div>
22+
</div>
1523
</div>
1624
);
1725
}

‎src/Components/Card.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ class Card extends React.Component{
88
}
99

1010
render(){
11+
console.log('this Card',this)
1112
return(
12-
<div className ="card" style= {{ "width": "18rem","margin": "10px" }}>
13-
<img className ="card-img-top" src="..." alt="Card image cap" />
14-
<div className ="card-body">
15-
<h5 className ="card-title">Card title</h5>
16-
<p className ="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
17-
<a href="#" className="btn btn-primary">Go somewhere</a>
13+
<div className ="card" style= {{ "width": "18rem" }}>
14+
<img className ="card-img-top img-responsive" src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" alt="Card image cap" />
15+
<div className ="card-body">
16+
<h5 className ="card-title">Card title</h5>
17+
<p className ="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
18+
<a href="#" className="btn btn-primary">Go somewhere</a>
1819
</div>
1920
</div>
2021
)

‎src/Components/Form.js

Lines changed: 59 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React, { Component } from "react";
2-
import '../App.css';
2+
import "../App.css";
3+
import Card from "./Card";
34

45
class Form extends React.Component {
56
constructor(props) {
67
super(props);
78
this.state = {
89
file: "",
9-
previewUrl: 'http://s3.amazonaws.com/37assets/svn/765-default-avatar.png',
10+
previewUrl: "http://s3.amazonaws.com/37assets/svn/765-default-avatar.png",
1011
title: "",
1112
text: ""
1213
};
@@ -17,7 +18,7 @@ class Form extends React.Component {
1718

1819
handleSubmit(e) {
1920
e.preventDefault();
20-
console.log('this',this.state);
21+
console.log("this",this.state);
2122
}
2223

2324
handleImageChange(e) {
@@ -29,7 +30,7 @@ class Form extends React.Component {
2930
reader.onloadend = () => {
3031
this.setState({
3132
file: file,
32-
previewUrl: reader.result,
33+
previewUrl: reader.result
3334
});
3435
};
3536

@@ -38,61 +39,63 @@ class Form extends React.Component {
3839

3940
render() {
4041
let { previewUrl } = this.state;
41-
const { text, title } = this.state;
42-
42+
const { text, title } = this.state;
4343

4444
return (
45-
46-
<div className = "container">
47-
48-
<div className = "col-lg-4 marginTop">
49-
<div className ="col-md-8">
50-
<div className ="form-group">
51-
52-
<div className = "marginTop">
53-
<label htmlFor="title">Title:</label>
54-
<input type="text" className = "form-control" value = { title } onChange = { e => this.setState({ title: e.target.value })}/>
55-
</div>
56-
57-
<div className = "marginTop">
58-
<label htmlFor="text">Text:</label>
59-
<input type="text" className = "form-control" value = { text } onChange = { e => this.setState({ text: e.target.value })}/>
60-
</div>
61-
62-
<div className = "marginTop" >
63-
<img src = { this.state.previewUrl } className = "rounded" width = "100px" alt="Cinque Terre" />
64-
</div>
65-
66-
<div className = "marginTop">
67-
<label>Upload Image: </label>
68-
<div className ="input-group">
69-
<span className ="input-group-btn">
70-
<span className ="btn btn-default btn-file">
71-
Browse... <input type="file" onChange = { this.handleImageChange } className ="form-control" />
72-
</span>
73-
</span>
74-
<input type="text" className="form-control" readOnly />
75-
</div>
76-
</div>
77-
<button type="submit" onClick = { this.handleSubmit } className ="btn btn-default marginTop">Submit</button>
78-
</div>
79-
</div>
80-
</div>
81-
82-
<div className = "marginTop ">
83-
<div className = "col-lg-7 cards">
84-
<div class="card" style= {{ "width": "18rem" }}>
85-
<img class="card-img-top img-responsive" src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" alt="Card image cap" />
86-
<div class="card-body">
87-
<h5 class="card-title">Card title</h5>
88-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
89-
<a href="#" class="btn btn-primary">Go somewhere</a>
90-
</div>
91-
</div>
45+
<div className="form-group">
46+
<div className="marginTop">
47+
<label htmlFor="title">Title:</label>
48+
<input
49+
type="text"
50+
className="form-control"
51+
value={title}
52+
onChange={e => this.setState({ title: e.target.value })}
53+
/>
54+
</div>
55+
56+
<div className="marginTop">
57+
<label htmlFor="text">Text:</label>
58+
<input
59+
type="text"
60+
className="form-control"
61+
value={text}
62+
onChange={e => this.setState({ text: e.target.value })}
63+
/>
64+
</div>
65+
66+
<div className="marginTop">
67+
<img
68+
src={this.state.previewUrl}
69+
className="rounded"
70+
width="100px"
71+
alt="Cinque Terre"
72+
/>
73+
</div>
74+
75+
<div className="marginTop">
76+
<label>Upload Image: </label>
77+
<div className="input-group">
78+
<span className="input-group-btn">
79+
<span className="btn btn-default btn-file">
80+
Browse...{" "}
81+
<input
82+
type="file"
83+
onChange={this.handleImageChange}
84+
className="form-control"
85+
/>
86+
</span>
87+
</span>
88+
<input type="text" className="form-control" readOnly />
89+
</div>
90+
</div>
91+
<button
92+
type="submit"
93+
onClick={this.handleSubmit}
94+
className="btn btn-default marginTop"
95+
>
96+
Submit
97+
</button>
9298
</div>
93-
</div>
94-
95-
</div>
9699
);
97100
}
98101
}

‎src/Constants/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
export const SAVE_USER = 'SAVE_USER';
3+
export const CARD_REDUCER = 'CARD_REDUCER'

‎src/Containers/cardContainer.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
import { connect } from 'react-redux';
3+
import { bindActionCreators } from 'redux';
4+
import Card from '../Components/Card';
5+
import { saveCard } from '../ActionTypes';
6+
import { createStructuredSelector } from 'reselect';
7+
import { makeSelectCardData } from '../Selector/cardSelector';
8+
9+
const mapStateToProps = createStructuredSelector({
10+
cardData: makeSelectCardData(),
11+
});
12+
13+
const mapDispatchToProps = dispatch => bindActionCreators({ saveCard }, dispatch);
14+
export default connect(mapStateToProps, mapDispatchToProps)(Card);

‎src/Reducers/index.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
3+
import * as t from '../Constants';
4+
5+
const cardReducer = (state = [], action) => {
6+
7+
console.log('data',action.data);
8+
switch (action.type) {
9+
case t.SAVE_USER:
10+
const newState = state.concat([action.data]);
11+
return newState;
12+
break;
13+
14+
default:
15+
return state;
16+
}
17+
};
18+
19+
export default cardReducer;

‎src/Selector/cardSelector.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
3+
import { createSelector } from 'reselect';
4+
export const selectCardState = state => state.CARD_REDUCER;
5+
export const makeSelectCardData = () => createSelector(selectCardState, (substate) => {
6+
if (substate) {
7+
return substate;
8+
}
9+
})

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /