Skip to content

Commit f74913c

Browse files
sunzid02sunzid02
committed
Fetch from Server
1 parent 0aecfd0 commit f74913c

File tree

13 files changed

+206
-80
lines changed

13 files changed

+206
-80
lines changed

‎confusion/db.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"posts": [
3+
{
4+
"id": 1,
5+
"title": "json-server",
6+
"author": "typicode"
7+
}
8+
],
9+
"comments": [
10+
{
11+
"id": 1,
12+
"body": "some comment",
13+
"postId": 1
14+
}
15+
],
16+
"profile": {
17+
"name": "typicode"
18+
}
19+
}

‎confusion/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/user-event": "^7.1.2",
99
"bootstrap": "4.0.0",
1010
"bootstrap-social": "5.1.1",
11+
"cross-fetch": "2.1.0",
1112
"font-awesome": "4.7.0",
1213
"react": "^16.13.1",
1314
"react-dom": "^16.13.1",

‎confusion/src/components/DishdetailComponent.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77

88
import { Control, LocalForm, Errors } from 'react-redux-form';
99
import { Loading } from './LoadingComponent';
10+
import { baseUrl } from '../shared/baseUrl';
1011

1112

1213

@@ -177,7 +178,7 @@ class CommentForm extends Component {
177178
return (
178179
<div className='col-12 col-md-5 m-1'>
179180
<Card>
180-
<CardImg width="100%" src={dish.image} alt={dish.name} />
181+
<CardImg width="100%" src={baseUrl + dish.image} alt={dish.name} />
181182
<CardBody>
182183
<CardTitle> {dish.name}</CardTitle>
183184
<CardText> {dish.description} </CardText>

‎confusion/src/components/HomeComponent.js‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
1-
import React from 'react';
2-
import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle} from 'reactstrap';
3-
import { Loading } from './LoadingComponent';
1+
import React from "react";
2+
import {
3+
Card,
4+
CardImg,
5+
CardText,
6+
CardBody,
7+
CardTitle,
8+
CardSubtitle
9+
} from "reactstrap";
10+
import { Loading } from "./LoadingComponent";
11+
import { baseUrl } from "../shared/baseUrl";
412

513

614
function RenderCard({item, isLoading, errMess }) {
@@ -21,8 +29,7 @@ function RenderCard({item, isLoading, errMess }) {
2129

2230
return(
2331
<Card>
24-
<CardImg src={item.image} alt={item.name} />
25-
32+
<CardImg width="100%" src={baseUrl + item.image} alt={item.name} />
2633
<CardBody>
2734
<CardTitle> {item.name} </CardTitle>
2835

@@ -45,14 +52,19 @@ function Home(props) {
4552
<div className="row align-items-start">
4653

4754
<div className="col-12 col-md m-1">
48-
<RenderCard item={props.dish}
55+
<RenderCard
56+
item={props.dish}
4957
isLoading={props.dishesLoading}
50-
errMess={props.dishesErrMess}
58+
errMess={props.dishErrMess}
5159
/>
5260
</div>
5361

5462
<div className="col-12 col-md m-1">
55-
<RenderCard item={props.promotion} />
63+
<RenderCard
64+
item={props.promotion}
65+
isLoading={props.promoLoading}
66+
errMess={props.promoErrMess}
67+
/>
5668
</div>
5769

5870
<div className="col-12 col-md m-1">

‎confusion/src/components/MainComponent.js‎

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ import DishDetail from './DishdetailComponent';
1010

1111
import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
1212
import {connect} from 'react-redux';
13-
import { addComment, fetchDishes } from '../redux/ActionCreators';
14-
13+
import { addComment, fetchDishes, fetchComments, fetchPromos } from '../redux/ActionCreators';
1514
import { actions } from 'react-redux-form';
1615

1716
const mapStateToProps = state => {
@@ -25,12 +24,16 @@ const mapStateToProps = state => {
2524
}
2625

2726
const mapDispatchToProps = (dispatch) => ({
28-
addComment: (dishId, rating, author, comment) => dispatch( addComment(dishId, rating, author, comment) ),
27+
addComment: (dishId, rating, author, comment) => dispatch(addComment(dishId, rating, author, comment)),
2928
fetchDishes: () => { dispatch(fetchDishes()) },
29+
resetFeedbackForm: () => { dispatch(actions.reset('feedback')) },
3030

31-
resetFeedbackForm: ()=>{
32-
dispatch(actions.reset('feedback'))
33-
},
31+
fetchComments: () => dispatch(fetchComments()),
32+
33+
fetchPromos: () => dispatch(fetchPromos())
34+
35+
36+
3437
});
3538

3639

@@ -42,23 +45,40 @@ class Main extends Component {
4245

4346
componentDidMount(){
4447
this.props.fetchDishes();
48+
this.props.fetchComments();
49+
this.props.fetchPromos();
4550
}
4651

4752
render() {
4853

54+
55+
56+
57+
58+
4959
const HomePage = () => {
50-
return(
51-
<Home
52-
dish={ this.props.dishes.dishes.filter( (dish)=>dish.featured )[0] }
60+
return (
61+
<Home
62+
dish={this.props.dishes.dishes.filter(dish => dish.featured)[0]}
5363
dishesLoading={this.props.dishes.isLoading}
54-
dishesErrMess={this.props.dishes.errMess}
64+
dishErrMess={this.props.dishes.errMess}
65+
promotion={
66+
this.props.promotions.promotions.filter(promo => promo.featured)[0]
67+
}
68+
promoLoading={this.props.promotions.isLoading}
69+
promoErrMess={this.props.promotions.errMess}
70+
leader={this.props.leaders.filter((leader) => leader.featured)[0]}
71+
5572

56-
promotion={this.props.promotions.filter( (promotion)=>promotion.featured )[0] }
57-
leader={this.props.leaders.filter( (leader)=>leader.featured )[0] }
5873
/>
5974
);
6075
};
6176

77+
78+
79+
80+
81+
6282
const AboutUsPage = () => {
6383
return(
6484
<About
@@ -70,14 +90,13 @@ class Main extends Component {
7090

7191
const DishWithId = ({match}) => {
7292
return(
73-
<DishDetail
74-
dish={this.props.dishes.dishes.filter( (dish) => dish.id === parseInt(match.params.dishId, 10))[0] }
93+
<DishDetail dish={this.props.dishes.dishes.filter((dish) => dish.id === parseInt(match.params.dishId, 10))[0]}
7594
isLoading={this.props.dishes.isLoading}
7695
errMess={this.props.dishes.errMess}
77-
78-
comments={this.props.comments.filter( (comment) => comment.dishId === parseInt(match.params.dishId, 10)) }
96+
97+
comments={this.props.comments.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId, 10))}
98+
commentsErrMess={this.props.comments.errMess}
7999
addComment={this.props.addComment}
80-
81100
/>
82101
);
83102
};

‎confusion/src/components/MenuComponent.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import React from "react";
22
import { Card, CardImg, CardImgOverlay, CardTitle, Breadcrumb, BreadcrumbItem } from "reactstrap";
33
import {Link} from 'react-router-dom';
44
import { Loading } from './LoadingComponent';
5+
import { baseUrl } from '../shared/baseUrl';
56

67
function RenderMenuItem({ dish, onClick }) {
78
return(
89
<Card>
910
<Link to={ `/menu/${dish.id}` } >
10-
<CardImg width="100%" src={dish.image} alt={dish.name} />
11+
<CardImg width="100%" src={baseUrl + dish.image} alt={dish.name} />
1112
<CardImgOverlay>
1213
<CardTitle> {dish.name}</CardTitle>
1314
</CardImgOverlay>

‎confusion/src/redux/ActionCreators.js‎

Lines changed: 59 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as ActionTypes from './ActionTypes';
2-
import { DISHES } from '../shared/dishes'
2+
import { DISHES } from '../shared/dishes';
3+
import { baseUrl } from '../shared/baseUrl';
34

45
export const addComment = (dishId, rating, author, comment) => ({
56
type: ActionTypes.ADD_COMMENT,
@@ -12,6 +13,15 @@ export const addComment = (dishId, rating, author, comment) => ({
1213
});
1314

1415

16+
/**.......... Dishes............................ */
17+
//// thunk: function returns an func
18+
export const fetchDishes = () => (dispatch) => {
19+
dispatch(dishesLoading(true));
20+
21+
return fetch(baseUrl + 'dishes')
22+
.then(response => response.json())
23+
.then(dishes => dispatch(addDishes(dishes)));
24+
}
1525

1626
export const dishesLoading = () => ({
1727
type: ActionTypes.DISHES_LOADING
@@ -30,11 +40,53 @@ export const addDishes = (dishes) => ({
3040

3141

3242

43+
44+
45+
46+
47+
48+
49+
50+
/**.......... Comments............................ */
3351
//// thunk: function returns an func
34-
export const fetchDishes = () => (dispatch) => {
35-
dispatch(dishesLoading(true));
52+
export const fetchComments = () => (dispatch) => {
53+
return fetch(baseUrl + 'comments')
54+
.then(response => response.json())
55+
.then(comments => dispatch(addComments(comments)));
56+
};
57+
58+
export const commentsFailed = (errmess) => ({
59+
type: ActionTypes.COMMENTS_FAILED,
60+
payload: errmess
61+
});
62+
63+
export const addComments = (comments) => ({
64+
type: ActionTypes.ADD_COMMENTS,
65+
payload: comments
66+
});
67+
68+
69+
70+
/**.......... promos............................ */
71+
export const fetchPromos = () => (dispatch) => {
72+
73+
dispatch(promosLoading());
74+
75+
return fetch(baseUrl + 'promotions')
76+
.then(response => response.json())
77+
.then(promos => dispatch(addPromos(promos)));
78+
}
79+
80+
export const promosLoading = () => ({
81+
type: ActionTypes.PROMOS_LOADING
82+
});
83+
84+
export const promosFailed = (errmess) => ({
85+
type: ActionTypes.PROMOS_FAILED,
86+
payload: errmess
87+
});
3688

37-
setTimeout(() => {
38-
dispatch(addDishes(DISHES));
39-
}, 2000)
40-
}
89+
export const addPromos = (promos) => ({
90+
type: ActionTypes.ADD_PROMOS,
91+
payload: promos
92+
});

‎confusion/src/redux/ActionTypes.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,11 @@ export const ADD_COMMENT = 'ADD_COMMENT';
22

33
export const DISHES_LOADING = 'DISHES_LOADING';
44
export const DISHES_FAILED = 'DISHES_FAILED';
5-
export const ADD_DISHES = 'ADD_DISHES';
5+
export const ADD_DISHES = 'ADD_DISHES';
6+
7+
export const ADD_COMMENTS = 'ADD_COMMENTS';
8+
export const COMMENTS_FAILED ='COMMENTS_FAILED';
9+
10+
export const PROMOS_LOADING ='PROMOS_LOADING';
11+
export const ADD_PROMOS = 'ADD_PROMOS';
12+
export const PROMOS_FAILED = 'PROMOS_FAILED';

‎confusion/src/redux/comments.js‎

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,20 @@
1-
import { COMMENTS } from '../shared/comments'
21
import * as ActionTypes from './ActionTypes';
32

3+
export const Comments = (state = { errMess: null, comments: [] }, action) => {
4+
switch (action.type) {
5+
case ActionTypes.ADD_COMMENTS:
6+
return { ...state, errMess: null, comments: action.payload };
47

5-
/*reducer functions
6-
7-
takes two params
8-
* action
9-
# payloads of information that send data from your application
10-
to the store.
11-
12-
# type property (indicates type of action to be performed)
13-
14-
# payload (data necessary for the action)
15-
16-
* state
17-
18-
## action typically handled through a switch statement switching
19-
on the action type.
20-
21-
## return the previous state in the default case
22-
23-
* */
8+
case ActionTypes.COMMENTS_FAILED:
9+
return { ...state, errMess: action.payload };
2410

25-
////reducer function
26-
export const Comments = ( state = COMMENTS, action ) => {
27-
28-
switch (action.type) {
29-
3011
case ActionTypes.ADD_COMMENT:
3112
var comment = action.payload;
32-
comment.id = state.length;
13+
comment.id = state.comments.length;
3314
comment.date = new Date().toISOString();
34-
35-
return state.concat(comment);
15+
return { ...state, comments: state.comments.concat(comment) };
3616

3717
default:
3818
return state;
3919
}
40-
}
20+
};

0 commit comments

Comments
 (0)