remove alerts and add dynamic messages

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'
+  };
+}

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 (
-        <p>loading~~~</p>
+        <Message icon>
+          <Icon name="circle notched" loading />
+          <Message.Content>
+            <Message.Header>Just a second!</Message.Header>
+            Content is on the way.
+          </Message.Content>
+        </Message>
       );
     } else {
       const end = new Moment(auction.end_date);

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</Button>
             </span>
           </Form.Group>
+          <Messages />
         </Container>
       </Grid.Column>
     </Grid>

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 <div>loading~~</div>;
-    } else {
+    const { auctions, isFetching, hasErrored, error } = this.props;
+    if (isFetching) {
+      return (
+        <Message icon>
+          <Icon name="circle notched" loading />
+          <Message.Content>
+            <Message.Header>Just a second!</Message.Header>
+            Auctions are on the way.
+          </Message.Content>
+        </Message>
+      );
+    }
+
+    if (hasErrored) {
       return (
         <Container>
-          <Grid>
-            <Grid.Row columns={3}>
-              {auctions.map(auction => (
-                <Grid.Column className="frame-squre" key={auction.id}>
-                  <div className="imageLink thumbnails" style={{backgroundImage: `url(${auction.artwork.image_url})`}} onClick={() => this.goToAuction(auction.id)} >
-                  <a className="ui ribbon label black">${_formatMoney(+auction.current_bid)}</a>
-                  </div>
-                  <Container>
-                    <h4 className="artName">
-                      {auction.artwork.art_name}
-                    </h4>
-                    <p className="artworkDescription">{auction.artwork.description}</p>
-                  </Container>
-                </Grid.Column>
-                )
-              )}
-            </Grid.Row>
-          </Grid>
+          <Message
+            header="Something Went Wrong!"
+            content="There's been an error loading this page. How about checking out some art and coming back in a minute?"
+          />
         </Container>
       );
     }
+    return (
+      <Container>
+        <Grid>
+          <Grid.Row columns={3}>
+            {auctions.map(auction => (
+              <Grid.Column className="frame-squre" key={auction.id}>
+                <div className="imageLink thumbnails" style={{backgroundImage: `url(${auction.artwork.image_url})`}} onClick={() => this.goToAuction(auction.id)} >
+                <a className="ui ribbon label black">${_formatMoney(+auction.current_bid)}</a>
+                </div>
+                <Container>
+                  <h4 className="artName">
+                    {auction.artwork.art_name}
+                  </h4>
+                  <p className="artworkDescription">{auction.artwork.description}</p>
+                </Container>
+              </Grid.Column>
+              )
+            )}
+          </Grid.Row>
+        </Grid>
+        <Message
+          header="There doesn't seem to be any content here. Maybe you should make some."
+          content="Signing up is quick and easy, click here to get started."
+        />
+      </Container>
+    );
   }
 }