Merge pull request TenaciousTurtles#98 from boybutcher/chatWindow

Tweaked inbox styling, more consistent navBar, createAuction restrictions

client/public/styling.css

@@ -1,5 +1,5 @@
 body {
-  padding-top: 110px;
+  padding-top: 125px;
 }
 
 .navbar {
@@ -8,10 +8,11 @@ body {
   overflow: hidden;
   position: fixed;
   top: 0;
-  width: 82%;
-  margin-left: -50px;
-  padding-left: 50px;
+  left: 0;
+  width: 100%;
   padding-bottom: 10px;
+  padding-left: 4%;
+  padding-right: 4%;
 }
 
 a {
@@ -134,6 +135,13 @@ a {
   z-index: 100;
 }
 
+.hiddenWindow {
+  position: fixed;
+  bottom: 0px;
+  right: 10px;
+  height: 2px;
+}
+
 .messageInput {
   position: /*fixed*/;
   bottom: 0;
@@ -170,7 +178,7 @@ a {
 .miniChatBar {
   cursor: pointer;
   position: fixed;
-  bottom: 5px;
+  bottom: 0px;
   right: 10px;
   width: 250px;
   height: 50px;

client/src/components/CreateAuction.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Form, Image, Container, Divider, Grid, Button } from 'semantic-ui-react';
+import { Form, Image, Container, Divider, Grid, Button, Message } from 'semantic-ui-react';
 import * as UserActions from '../actions/userActionCreator.jsx';
 
 class CreateAuction extends React.Component {
@@ -12,16 +12,17 @@ class CreateAuction extends React.Component {
       art_name: '',
       age: '',
       description: '',
-      length: '',
-      height: '',
-      width: '',
+      length: 0,
+      height: 0,
+      width: 0,
       categories: [],
       estimated_price: '',
       buyout_price: '',
       start_date: '',
       end_date: '',
       username: this.props.username,
       userId: this.props.userId,
+      isError: false,
     }
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleCategoryChange = this.handleCategoryChange.bind(this);
@@ -46,7 +47,6 @@ class CreateAuction extends React.Component {
       if (response.headers.get('x-username') && response.headers.get('x-userId')) {
         dispatch(UserActions.logInSuccess(response.headers.get('x-username'), response.headers.get('x-userId'), response.headers.get('x-type') === 'artist'));
       } else {
-        alert('You are not logged in, please log in~');
         this.props.history.push('/login');
       }
     })
@@ -107,7 +107,19 @@ class CreateAuction extends React.Component {
     if (!this.state.userId) {
       alert('you are not logged in, please sign up or log in');
       history.push('/login');
-    } else {
+    } 
+    else if (!this.state.image_url 
+      || !this.state.art_name 
+      || !this.state.age 
+      || !this.state.estimated_price 
+      || !this.state.buyout_price 
+      || !this.state.start_date 
+      || !this.state.end_date) {
+      this.setState({
+        isError: true
+      })
+    } 
+    else {
       return fetch(`/auctions`, {
         method: 'POST',
         headers: new Headers ({
@@ -124,9 +136,10 @@ class CreateAuction extends React.Component {
       })
       .then((data) => {
         alert('your auction was created successfully!');
-        //history.push('/auctions/' + data.id); //THIS DOESNT WORK YET. PROBABLY NEEDS TO FETCH
+        // history.push('/auctions/' + data.id);
       })
       .catch((error) => {
+        console.log('auction failed to create: ', error);
         alert('your auction failed to create! Please try again.');
       })
     }
@@ -166,13 +179,14 @@ class CreateAuction extends React.Component {
       })
     })
     .catch((error) => {
+      console.log('Uploading image failed! ', error);
     })
   }
 
   render() {
     return (
       <Container>
-        <Form>
+        <Form error={!!this.state.isError}>
           <Form.Group widths='equal'>
             <Form.Input 
               label='Piece name'
@@ -185,6 +199,7 @@ class CreateAuction extends React.Component {
             <Form.Input
               label='Year'
               name='age' 
+              type='number'
               placeholder='ex: 1911'
               onChange={this.handleInputChange}
               value={this.state.age}
@@ -197,6 +212,7 @@ class CreateAuction extends React.Component {
                 <Image src={this.state.preview_image} size='large'/>
               </Grid.Column>
               <Grid.Column width={8}>
+                <h5>Upload Image...</h5>
                 <input 
                   type='file' 
                   name='image' 
@@ -212,49 +228,38 @@ class CreateAuction extends React.Component {
                   value={this.state.description}
                 />
                 <Form.Group>
-                  <label>Categories</label>
-                  <Form.Field 
-                    label='Painting'
-                    control='input' 
-                    type='checkbox' 
-                    value='painting' 
-                    onChange={this.handleCategoryChange}
-                  />
-                  <Form.Field 
-                    label='Photography'
-                    control='input' 
-                    type='checkbox' 
-                    value='photography' 
-                    onChange={this.handleCategoryChange}
-                  />
-                  <Form.Field 
-                    label='Sculpture'
-                    control='input' 
-                    type='checkbox' 
-                    value='sculpture' 
-                    onChange={this.handleCategoryChange}
-                  />
                   <Form.Input 
-                    label='Height'
-                    name='height'
+                    label='Length'
+                    type='number'
+                    name='length'
                     placeholder='inches'
                     onChange={this.handleInputChange}
-                    value={this.state.height}
+                    value={this.state.length}
                   />
                   <Form.Input 
                     label='Width'
+                    type='number'
                     name='width'
                     placeholder='inches'
                     onChange={this.handleInputChange}
                     value={this.state.width}
                   />
+                  <Form.Input 
+                    label='Height'
+                    type='number'
+                    name='height'
+                    placeholder='inches'
+                    onChange={this.handleInputChange}
+                    value={this.state.height}
+                  />
                 </Form.Group>
               </Grid.Column>
             </Grid.Row>
           </Grid>
           <Form.Group widths='equal'>
             <Form.Input 
               label='Estimated value'
+              type='number'
               name='estimated_price' 
               placeholder='USD'
               onChange={this.handleInputChange} 
@@ -263,6 +268,7 @@ class CreateAuction extends React.Component {
             />
             <Form.Input 
               label='Buyout price'
+              type='number'
               name='buyout_price'
               placeholder='USD' 
               onChange={this.handleInputChange} 
@@ -273,21 +279,26 @@ class CreateAuction extends React.Component {
           <Form.Group widths='equal'>
             <Form.Input 
               label='Start date'
+              type='datetime-local'
               name='start_date'
-              placeholder='YYYY-MM-DD HH:MM:SS' 
               onChange={this.handleInputChange} 
               value={this.state.start_date}
               required
             />
             <Form.Input 
               label='End date'
+              type='datetime-local'
               name='end_date'
-              placeholder='YYYY-MM-DD HH:MM:SS' 
               onChange={this.handleInputChange} 
               value={this.state.end_date}
               required
             />
           </Form.Group>
+          <Message
+            error
+            header='Missing Required Fields'
+            content='Please fill out all required fields.'
+          />
           <Button onClick={(e) => this.handleSubmit(e)}>Submit Auction</Button>
         </Form>
         <Divider />

client/src/components/Inbox.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Segment } from 'semantic-ui-react';
+import { Segment, Grid } from 'semantic-ui-react';
 import * as ChatActions from './../actions/chatActionCreator.jsx';
 
 class Inbox extends React.Component {
@@ -85,37 +85,60 @@ class Inbox extends React.Component {
     return (
       <Segment className='inboxContainer'>
         <h3>INBOX</h3>
-        <ul>
           {
             this.props.inboxMessages.map(conversation => {
               let fullName = conversation.first_name + ' ' + conversation.last_name;
               let senderId = conversation.sender_id;
               let receiverId = conversation.receiver_id;
               if (this.props.userId !== conversation.sender_id) {
                 return (
-                  <li 
-                    className='inboxLink'
-                    value={conversation.sender_id} 
-                    name={fullName} 
-                    onClick={() => this.renderChatRoom(senderId, fullName)}
+                  <Segment
+                   className='inboxLink'
+                   value={conversation.sender_id} 
+                   name={fullName} 
+                   onClick={() => this.renderChatRoom(senderId, fullName)}
                   >
-                    <strong>{conversation.first_name} {conversation.last_name} </strong>"{conversation.text}"<strong> at: {conversation.message_date}</strong>
-                  </li>
+                    <Grid>
+                      <Grid.Row>
+                        <Grid.Column width={2}>
+                          <strong>{conversation.first_name} {conversation.last_name} </strong>
+                        </Grid.Column>
+                        <Grid.Column width={10}>
+                          "{conversation.text}"
+                        </Grid.Column>
+                        <Grid.Column width={4}>
+                          <strong> at: {conversation.message_date}</strong>
+                        </Grid.Column>
+                      </Grid.Row>
+                    </Grid>
+                  </Segment>
                 )
               } else {
                 return (
-                  <li 
+                  <Segment
                     className='inboxLink'
                     value={conversation.receiver_id} 
                     name={fullName} 
-                    onClick={() => this.renderChatRoom(receiverId, fullName)}>
-                    <strong>{conversation.first_name} {conversation.last_name} </strong>"{conversation.text}"<strong> at: {conversation.message_date}</strong>
-                  </li>
+                    onClick={() => this.renderChatRoom(receiverId, fullName)}
+                  >
+                    <Grid>
+                      <Grid.Row>
+                        <Grid.Column width={2}>
+                          <strong>{conversation.first_name} {conversation.last_name} </strong>
+                        </Grid.Column> 
+                        <Grid.Column width={10}>
+                          "{conversation.text}"
+                        </Grid.Column> 
+                        <Grid.Column width={4}>
+                          <strong> at: {conversation.message_date}</strong>
+                        </Grid.Column> 
+                      </Grid.Row>
+                    </Grid>
+                  </Segment>
                 )
               }
             })
           }
-        </ul>
       </Segment>
     )
   }

client/src/components/NavBar.jsx

@@ -55,7 +55,6 @@ class NavBar extends Component {
           <NavLink className='navLinks' to="/events" >Events</NavLink>
           {' | '}
           <NavLink className='navLinks' to="/contactus" >Contact us</NavLink>
-          <input className='navSearch' type="text" placeholder="search" />
         </span>
         <span className='authLink'>
           {username === '' ? LoggedOutNav : LoggedInNav}

client/src/components/WriteMessage.jsx

@@ -77,7 +77,7 @@ class WriteMessage extends React.Component {
   render() {
     if (!this.props.roomname || !this.props.receiverId) {
       return (
-        <div className='messageWindow'>
+        <div className='hiddenWindow'>
           <div style={{float:"left", clear: "both"}} ref={(el) => {this.messagesEnd = el;}}></div>
         </div>
       )