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 391b7b6

Browse files
image upload working
1 parent aa591f3 commit 391b7b6

File tree

12 files changed

+80
-38
lines changed

12 files changed

+80
-38
lines changed

‎package-lock.json

Lines changed: 13 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: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"react-scripts": "2.1.0",
1111
"redux": "^4.0.1",
1212
"redux-persist": "^5.10.0",
13-
"reselect": "^4.0.0"
13+
"reselect": "^4.0.0",
14+
"shortid": "^2.2.13"
1415
},
1516
"scripts": {
1617
"start": "react-scripts start",

‎src/App.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from "react";
22
import "./App.css";
3-
import Card from "./Containers/cardContainer";
4-
import Form from "./Components/Form";
3+
import CardList from "./Containers/cardContainer";
4+
import Form from "./Containers/formContainer";
55

66
// Redux Persist takes your Redux state object and saves it to persisted storage.
77
// Then on app launch it retrieves this persisted state and saves it back to redux.
@@ -17,7 +17,7 @@ class App extends Component {
1717
</div>
1818
<div className=" col-lg-7 marginTop ">
1919
<div className="col-lg-7 cards">
20-
<Card />
20+
<CardList />
2121
</div>
2222
</div>
2323
</div>

‎src/Components/Card.js

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,15 @@
11

22
import React, { Component } from 'react';
33

4-
class Card extends React.Component{
5-
6-
constructor(props){
7-
super(props)
8-
}
9-
10-
render(){
11-
console.log('this Card',this)
12-
return(
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>
19-
</div>
20-
</div>
21-
)
22-
}
23-
}
4+
const Card = ({ title, text, previewUrl }) => (
5+
<div className = "card" style= {{ "width": "18rem" }}>
6+
<img className = "card-img-top img-responsive" src = { previewUrl } alt="Card image cap" />
7+
<div className = "card-body">
8+
<h5 className = "card-title">{ title }</h5>
9+
<p className = "card-text">{ text }</p>
10+
<a href="#" className = "btn btn-primary">Go somewhere</a>
11+
</div>
12+
</div>
13+
);
2414

2515
export default Card;

‎src/Components/Form.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { Component } from "react";
22
import "../App.css";
3-
import Card from "./Card";
43

54
class Form extends React.Component {
65
constructor(props) {
@@ -11,14 +10,15 @@ class Form extends React.Component {
1110
title: "",
1211
text: ""
1312
};
14-
1513
this.handleImageChange = this.handleImageChange.bind(this);
1614
this.handleSubmit = this.handleSubmit.bind(this);
1715
}
1816

1917
handleSubmit(e) {
2018
e.preventDefault();
21-
console.log("this", this.state);
19+
const { state } = this
20+
this.props.saveCard(state);
21+
this.setState({ file: "", title: "", text: "", previewUrl: "http://s3.amazonaws.com/37assets/svn/765-default-avatar.png"})
2222
}
2323

2424
handleImageChange(e) {

‎src/Components/cardList.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { Component } from "react";
2+
import Card from "./Card";
3+
import shortid from "shortid";
4+
5+
class CardList extends React.Component {
6+
constructor(props) {
7+
super(props);
8+
}
9+
render() {
10+
const { cardList } = this.props;
11+
return (
12+
<div>
13+
{cardList.length > 0
14+
? cardList.map(card => <Card key={shortid.generate()} {...card} />)
15+
: null}
16+
</div>
17+
);
18+
}
19+
}
20+
21+
export default CardList;

‎src/Constants/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11

22
export const SAVE_USER = 'SAVE_USER';
3-
export const CARD_REDUCER = 'CARD_REDUCER'
3+
export const CARD_LIST_REDUCER = 'CARD_LIST_REDUCER'

‎src/Containers/cardContainer.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11

22
import { connect } from 'react-redux';
33
import { bindActionCreators } from 'redux';
4-
import Card from '../Components/Card';
5-
import { saveCard } from '../ActionTypes';
4+
import CardList from '../Components/cardList';
65
import { createStructuredSelector } from 'reselect';
76
import { makeSelectCardData } from '../Selector/cardSelector';
87

8+
99
const mapStateToProps = createStructuredSelector({
10-
cardData: makeSelectCardData(),
10+
cardList: makeSelectCardData(),
1111
});
1212

13-
const mapDispatchToProps = dispatch => bindActionCreators({ saveCard }, dispatch);
14-
export default connect(mapStateToProps, mapDispatchToProps)(Card);
13+
export default connect(mapStateToProps)(CardList);

‎src/Containers/formContainer.js

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

‎src/Reducers/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import * as t from '../Constants';
44

5-
const cardReducer = (state = [], action) => {
5+
const CARD_LIST_REDUCER = (state = [], action) => {
66

77
console.log('data',action.data);
88
switch (action.type) {
@@ -16,4 +16,4 @@ const cardReducer = (state = [], action) => {
1616
}
1717
};
1818

19-
export default cardReducer;
19+
export default CARD_LIST_REDUCER;

0 commit comments

Comments
(0)

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