Changed API Endpoints

Author: Rajeev Kumar Singh

polling-app-client/src/constants/index.js

@@ -1,5 +1,5 @@
-export const API_BASE_URL = 'http://localhost:5000';
-//export const API_BASE_URL = 'https://polls.callicoder.com';
+export const API_BASE_URL = 'http://localhost:5000/api';
+//export const API_BASE_URL = 'https://polls.callicoder.com/api';
 export const ACCESS_TOKEN = 'accessToken';
 
 export const POLL_LIST_SIZE = 30;

polling-app-client/src/user/profile/Profile.css

@@ -2,9 +2,7 @@
     margin-bottom: 44px;
     padding-top: 40px;
     padding-bottom: 20px;
-}
-
-.user-avatar {
+    margin: 0 auto;
     text-align: center;
 }
 
@@ -24,18 +22,34 @@
 
 .user-summary {
     text-align: center;
+    padding-top: 20px;
 }
 
 @media (min-width: 576px) {
-    .user-summary {
+    .user-details {
         text-align: left;
+        display: table;
     }    
+
+    .user-avatar, .user-summary {
+        float: left;
+        text-align: left;
+    }
+
+    .user-summary {
+        padding-top: 0;
+        padding-left: 40px;
+        width: calc(100% - 120px);
+    }
 }
 
 .user-summary .full-name {
     font-size: 30px;
     font-weight: 600;
     color: rgba(0,0,0,0.85);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 .user-summary .username {

polling-app-client/src/user/profile/Profile.js

@@ -79,20 +79,22 @@ class Profile extends Component {
             <div className="profile">
                 { 
                     this.state.user ? (
-                        <Row className="user-details">
-                            <Col xs={24} sm={8} md={9} className="user-avatar">
-                                <Avatar className="user-avatar-circle" style={{ backgroundColor: getAvatarColor(this.state.user.name)}}>
-                                    {this.state.user.name[0].toUpperCase()}
-                                </Avatar>
-                            </Col>
-                            <Col xs={24} sm={16} md={15} className="user-summary">
-                                <div className="full-name">{this.state.user.name}</div>
-                                <div className="username">@{this.state.user.username}</div>
-                                <div className="user-joined">
-                                    Joined {formatDate(this.state.user.joinedAt)}
+                        <div className="user-profile">
+                            <div className="user-details">
+                                <div className="user-avatar">
+                                    <Avatar className="user-avatar-circle" style={{ backgroundColor: getAvatarColor(this.state.user.name)}}>
+                                        {this.state.user.name[0].toUpperCase()}
+                                    </Avatar>
                                 </div>
-                            </Col>
-                            <Col xs={24}>
+                                <div className="user-summary">
+                                    <div className="full-name">{this.state.user.name}</div>
+                                    <div className="username">@{this.state.user.username}</div>
+                                    <div className="user-joined">
+                                        Joined {formatDate(this.state.user.joinedAt)}
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="user-poll-details">    
                                 <Tabs defaultActiveKey="1" 
                                     animated={false}
                                     tabBarStyle={tabBarStyle}
@@ -105,8 +107,8 @@ class Profile extends Component {
                                         <PollList username={this.props.match.params.username} type="USER_VOTED_POLLS" />
                                     </TabPane>
                                 </Tabs>
-                            </Col>
-                        </Row>    
+                            </div>  
+                        </div>  
                     ): null               
                 }
             </div>

polling-app-server/src/main/java/com/example/polls/config/SecurityConfig.java

@@ -86,11 +86,11 @@ protected void configure(HttpSecurity http) throws Exception {
                         "/**/*.css",
                         "/**/*.js")
                         .permitAll()
-                    .antMatchers("/auth/**")
+                    .antMatchers("/api/auth/**")
                         .permitAll()
-                    .antMatchers("/user/checkUsernameAvailability", "/user/checkEmailAvailability")
+                    .antMatchers("/api/user/checkUsernameAvailability", "/api/user/checkEmailAvailability")
                         .permitAll()
-                    .antMatchers(HttpMethod.GET, "/polls/**", "/users/**")
+                    .antMatchers(HttpMethod.GET, "/api/polls/**", "/api/users/**")
                         .permitAll()
                     .anyRequest()
                         .authenticated();

polling-app-server/src/main/java/com/example/polls/controller/AuthController.java

@@ -33,7 +33,7 @@
  * Created by rajeevkumarsingh on 02/08/17.
  */
 @RestController
-@RequestMapping("/auth")
+@RequestMapping("/api/auth")
 public class AuthController {
 
     @Autowired

polling-app-server/src/main/java/com/example/polls/controller/PollController.java

@@ -32,7 +32,7 @@
  */
 
 @RestController
-@RequestMapping("/polls")
+@RequestMapping("/api/polls")
 public class PollController {
 
     @Autowired

polling-app-server/src/main/java/com/example/polls/controller/UserController.java

@@ -17,6 +17,7 @@
 import org.springframework.web.bind.annotation.*;
 
 @RestController
+@RequestMapping("/api")
 public class UserController {
 
     @Autowired