From a2ae86cdc510d402f4f4b5473340858eefaba98b Mon Sep 17 00:00:00 2001 From: Anthony Bianco Date: Fri, 19 May 2017 13:52:20 -0700 Subject: [PATCH] remove alerts and add dynamic messages --- client/src/actions/bidActionCreator.js | 12 ++ client/src/components/Auction.jsx | 24 +++- client/src/components/AuctionDetail.jsx | 2 + client/src/components/Auctions.jsx | 78 +++++++---- client/src/components/Home.jsx | 178 ++++++++++++++++-------- client/src/components/Messages.jsx | 53 +++++++ client/src/reducers/bidReducer.js | 10 ++ server/database/dummyData.js | 2 +- 8 files changed, 266 insertions(+), 93 deletions(-) create mode 100644 client/src/components/Messages.jsx diff --git a/client/src/actions/bidActionCreator.js b/client/src/actions/bidActionCreator.js index 184032f..8f867fa 100644 --- a/client/src/actions/bidActionCreator.js +++ b/client/src/actions/bidActionCreator.js @@ -17,3 +17,15 @@ export function error(error) { error: error }; } + +export function success() { + return { + type: 'BID_SUCCESS' + }; +} + +export function reset() { + return { + type: 'RESET' + }; +} diff --git a/client/src/components/Auction.jsx b/client/src/components/Auction.jsx index 7362488..1e619c9 100644 --- a/client/src/components/Auction.jsx +++ b/client/src/components/Auction.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Container, Image } from 'semantic-ui-react'; +import { Container, Image, Message, Icon } from 'semantic-ui-react'; import * as Auctions from '../actions/auctionActionCreator.jsx'; import * as UserActions from '../actions/userActionCreator.jsx'; import { connect } from 'react-redux'; @@ -126,6 +126,7 @@ class Auction extends Component { } else if(bid.bid > buyout) { alert('How about bidding for the buyout amount?'); } else { + dispatch(Bids.toggleSend()); fetch(`/auctions/${auctionId}/bids`, { method: 'POST', headers: new Headers({ @@ -138,15 +139,18 @@ class Auction extends Component { }) .then(response => { if (!response.ok) { - throw Error(response.json()); + const error = new Error(response.statusText); + error.status = response.status; + throw error; } return response.json(); }) .then(data => { - bid.current_bid = data.current_bid; - bid.current_bid_id = data.current_bid_id; - dispatch(Auctions.updateBid(bid)); - alert(`You have successfully bid $${data.current_bid}`); + const sentBid = {}; + sentBid.current_bid = data.current_bid; + sentBid.current_bid_id = data.current_bid_id; + dispatch(Auctions.updateBid(sentBid)); + dispatch(Bids.success()); }) .catch(err => { dispatch(Bids.error(err)); @@ -167,7 +171,13 @@ class Auction extends Component { const { bid, user } = this.props; if (Object.keys(auction).length === 0) { return ( -

loading~~~

+ + + + Just a second! + Content is on the way. + + ); } else { const end = new Moment(auction.end_date); diff --git a/client/src/components/AuctionDetail.jsx b/client/src/components/AuctionDetail.jsx index d14a907..c4f4946 100644 --- a/client/src/components/AuctionDetail.jsx +++ b/client/src/components/AuctionDetail.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { Container, Image, Grid, Button, Form, Input } from 'semantic-ui-react'; import Moment from 'moment'; +import Messages from './Messages.jsx'; let inputNode = null; @@ -69,6 +70,7 @@ const AuctionDetail = ({auction, bid, setBid, handleClick, user, handleSave, han }}>Submit + diff --git a/client/src/components/Auctions.jsx b/client/src/components/Auctions.jsx index 9f292a6..1389a33 100644 --- a/client/src/components/Auctions.jsx +++ b/client/src/components/Auctions.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; -import { Container, Image, Grid, Divider } from 'semantic-ui-react'; +import { Container, Image, Grid, Divider, Message, Icon } from 'semantic-ui-react'; import * as actions from '../actions/auctionActionCreator.jsx'; import * as UserActions from '../actions/userActionCreator.jsx'; @@ -26,13 +26,15 @@ class Auctions extends React.Component { }) .then((response) => { if (!response.ok) { - throw Error(response.json()); + const error = new Error(response.statusText); + error.status = response.status; + throw error; } - dispatch(actions.fetchingAuctions(false)); - return response.json(); + dispatch(actions.fetchingAuctions(false)); + return response.json(); }) .then((auctions) => { - dispatch(actions.ongoingAuctionsFetchedSuccess(auctions)); + dispatch(actions.ongoingAuctionsFetchedSuccess(auctions)); }) .catch((err) => { dispatch(actions.fetchingAuctions(false)); @@ -46,33 +48,55 @@ class Auctions extends React.Component { } render() { - const { auctions } = this.props; - if (auctions.length === 0) { - return
loading~~
; - } else { + const { auctions, isFetching, hasErrored, error } = this.props; + if (isFetching) { + return ( + + + + Just a second! + Auctions are on the way. + + + ); + } + + if (hasErrored) { return ( - - - {auctions.map(auction => ( - -
this.goToAuction(auction.id)} > - ${_formatMoney(+auction.current_bid)} -
- -

- {auction.artwork.art_name} -

-

{auction.artwork.description}

- - - ) - )} - - + ); } + return ( + + + + {auctions.map(auction => ( + +
this.goToAuction(auction.id)} > + ${_formatMoney(+auction.current_bid)} +
+ +

+ {auction.artwork.art_name} +

+

{auction.artwork.description}

+ + + ) + )} + + + + + ); } } diff --git a/client/src/components/Home.jsx b/client/src/components/Home.jsx index 76dbaf5..fe34775 100644 --- a/client/src/components/Home.jsx +++ b/client/src/components/Home.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Grid, Card, Image, Divider, Container, Dimmer, Loader } from 'semantic-ui-react'; +import { Grid, Card, Image, Divider, Icon, Container, Dimmer, Loader, Message } from 'semantic-ui-react'; import ImageGallery from 'react-image-gallery'; import { connect } from 'react-redux'; import * as Auctions from '../actions/auctionActionCreator.jsx'; @@ -21,6 +21,50 @@ const _formatMoney = (money) => { return money.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }; +const MessageWrapper = ({ data, isFetching, hasErrored, error, Component, history }) => { + if (isFetching) { + return ( + + + + Just a second! + Content is on the way. + + + ); + } + + if (hasErrored) { + return ( + + + + ); + } + + if (data.length === 0) { + return ( + + + + ); + } + + return ( + + ); + +}; + // render the description ... as floating right of the image // closed auctions should be rendered differently from the ongoing ones const MainArt = ({ art, history }) => { @@ -36,33 +80,30 @@ const MainArt = ({ art, history }) => { ); }; -const MainArts = ({ mainArts, history }) => { - if (!mainArts[0]) { - return

loading...

; - } else { - let images = []; - mainArts.forEach((item) => { - const imageObj = { - original: `${item.artwork.image_url}?${item.id}`, - description: `${item.first_name} ${item.last_name} Closing Price: $${_formatMoney(+item.buyout_price)}`, - }; - images.push(imageObj); - }); - // shoud add acution id to onImage click - return ( -
- {onImageClick(e, history)}} - /> -
- ); - } +const MainArts = ({ data, history }) => { + const mainArts = data; + let images = []; + mainArts.forEach((item) => { + const imageObj = { + original: `${item.artwork.image_url}?${item.id}`, + description: `${item.first_name} ${item.last_name} Closing Price: $${_formatMoney(+item.buyout_price)}`, + }; + images.push(imageObj); + }); + // shoud add acution id to onImage click + return ( +
+ {onImageClick(e, history)}} + /> +
+ ); }; const HomeAuction = ({ homeAuction, history }) => { @@ -82,18 +123,15 @@ const HomeAuction = ({ homeAuction, history }) => { ); }; -const HomeAuctions = ({ homeAuctions, history }) => { - if (!homeAuctions[0]) { - return

loading~~~

; - } else { - return ( - - - {homeAuctions.map(homeAuction => )} - - - ); - } +const HomeAuctions = ({ data, history }) => { + const homeAuctions = data; + return ( + + + {homeAuctions.map(homeAuction => )} + + + ); }; const clickArtist = (id, history, dispatch) => { @@ -116,18 +154,15 @@ const HomeArtist = ({ artist, history }) => { ); }; -const HomeArtists = ({ homeArtists, history }) => { - if (!homeArtists[0]) { - return
loading~~~~
; - } else { - return ( - - - {homeArtists.map(homeArtist => )} - - - ); - } +const HomeArtists = ({ data, history }) => { + const homeArtists = data; + return ( + + + {homeArtists.map(homeArtist => )} + + + ); }; class Home extends Component { @@ -143,7 +178,9 @@ class Home extends Component { fetch(`/home`) .then((response) => { if (!response.ok) { - throw Error(response.statusText); + const error = new Error(response.statusText); + error.status = response.error; + throw error; } dispatch(Auctions.fetchingAuctions(false)); return response.json(); @@ -156,20 +193,42 @@ class Home extends Component { }) .catch(() => { dispatch(Auctions.fetchingAuctions(false)); - dispatch(Auctions.fetchAuctionErrored(true)); + dispatch(Auctions.fetchAuctionErrored(true, err)); }); } render () { + const { mainArts, homeAuctions, homeArtists, hasErrored, error, history, isFetching } = this.props; return (
- +

Auctions

- +

Artists

- +
); } @@ -181,7 +240,10 @@ const mapStateToProps = (state) => { return { mainArts: state.auctions.fetchedPassedAuctions, homeAuctions: state.auctions.fetchedOngoingAuctions, - homeArtists: state.auctions.fetchedFeaturedArts + homeArtists: state.auctions.fetchedFeaturedArts, + isFetching: state.auctions.isFetching, + hasErrored: state.auctions.hasErrored, + error: state.auctions.fetchAuctionsError }; }; diff --git a/client/src/components/Messages.jsx b/client/src/components/Messages.jsx new file mode 100644 index 0000000..792fb2c --- /dev/null +++ b/client/src/components/Messages.jsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { Message, Icon } from 'semantic-ui-react'; + +class Messages extends React.Component { + render() { + const { sendingBid, bidErrored, success, bid } = this.props; + + if (sendingBid) { + return ( + + + + Just a second! + Your bid is on the way. + + + ); + } + + if (bidErrored) { + return ( + + ); + } + + if (success) { + return ( + + ); + } + + return null; + } +} + +const mapStateToProps = (state) => { + return { + error: state.bid.error, + hasErrored: state.bid.bidErrored, + sendingBid: state.bid.sendingBid, + success: state.bid.success, + bid: state.bid.bid + }; +}; + +export default connect(mapStateToProps)(Messages); diff --git a/client/src/reducers/bidReducer.js b/client/src/reducers/bidReducer.js index 7f8b07a..282e7e2 100644 --- a/client/src/reducers/bidReducer.js +++ b/client/src/reducers/bidReducer.js @@ -25,6 +25,16 @@ const bidReducer = (state = initialState, action) => { error: action.error, bidErrored: true }; + case 'BID_SUCCESS': + return { + ...state, + success: true, + sendingBid: false + }; + case 'RESET': + return { + initialState + }; default: return state; } diff --git a/server/database/dummyData.js b/server/database/dummyData.js index a40507f..6aaf4c2 100644 --- a/server/database/dummyData.js +++ b/server/database/dummyData.js @@ -676,7 +676,7 @@ const auctions = [ owner_id: 2, artwork_id: 6, start_date: '2017-04-09 14:27:07', - end_date: '2017-05-05 14:27:07', + end_date: '2018-05-05 14:27:07', start_price: 13000, buyout_price: 20000, current_bid_id: null,