13 profile page

src/components/loginComponents/login.js

@@ -1,14 +1,20 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import AuthenticationService from "../../services/authenticationService";
-
+import { redirect } from "../redirect";
+import {setID} from "../../services/sessionStorageManipulation";
 class Login extends React.Component {
     constructor(props) {
         super(props);
         this.authentication = new AuthenticationService();
         this.state = this.initialState();
+        this.bindThisAndThats();
+    }      
+
+    bindThisAndThats(){
         this.changeState = this.changeState.bind(this);
         this.onClickLogin = this.onClickLogin.bind(this);
+        this.failLogin = this.failLogin.bind(this);
     }
     initialState() {
         return {
@@ -19,17 +25,35 @@ class Login extends React.Component {
 
     changeState(event) {
         this.setState({
-            [event.target.name]: event.target.value
+            [event.target.name]: event.target.value,
+            badUsernameOrPassword: ""
+        });
+    }
+
+    successLogin(a) {
+        setID (a.sessionId);
+        redirect("/");
+    }
+    failLogin(e) {
+        this.setState({
+            badUsernameOrPassword: e.response.data.error.message
         });
     }
 
     onClickLogin(event) {
+        const {username, password} = this.state;
         event.preventDefault();
+        if( username === "" || password === ""){
+            this.setState({
+                badUsernameOrPassword: "These fields must not be empty"
+            });
+            return;
+        }
         let dataObj = {
-            username: this.state.username,
-            password: this.state.password
+            "username": username,
+            "password": password
         };
-        this.authentication.login(dataObj);
+        this.authentication.login(dataObj, this.successLogin, this.failLogin);
     }
     // onKeyDown(event) {
     //     event.preventDefault();
@@ -74,6 +98,8 @@ class Login extends React.Component {
 
                                         <input name="username" className="form-control" required type="text" value={this.state.username} placeholder="Username" onChange={this.changeState} />
                                     </div>
+                                    <div style={{ "color": "red" }}>{this.state.badUsernameOrPassword}</div>
+
                                     <div className="field-wrap">
 
                                         <input type="password" name="password" className="form-control" required value={this.state.password} placeholder="Password" onChange={this.changeState} />

src/components/loginComponents/register.js

@@ -12,7 +12,8 @@ class Register extends React.Component {
     bindThisAndThats() {
         this.onClickRegister = this.onClickRegister.bind(this);
         this.handleChange = this.handleChange.bind(this);
-        this.serverErrorHandler = this.serverErrorHandler.bind(this);
+        this.failRegister = this.failRegister.bind(this);
+        this.succesRegister = this.successRegister.bind(this);
     }
     initialState() {
         return {
@@ -37,7 +38,11 @@ class Register extends React.Component {
         });
 
     }
-    serverErrorHandler(e) {
+    successRegister(a) {
+        redirect("/");
+
+    }
+    failRegister(e) {
 
         this.setState({
             badUsername: e.response.data.error.message
@@ -48,8 +53,8 @@ class Register extends React.Component {
         const { username, name, email, password1, password2 } = this.state;
 
         event.preventDefault();
-        if (name === "") { this.setState({ badName: "This field is required" }); return; }
-        if (username === "") { this.setState({ badUsername: "This field is required" }); return; }
+        if (name === "") { this.setState({ badName: "Name field is required" }); return; }
+        if (username === "") { this.setState({ badUsername: "Username field is required" }); return; }
         if (!validateEmail(email)) { this.setState({ badEmail: "Email address is bad!" }); return; }
         if (password1.length < 6) { this.setState({ badPass: "Password must be at least 6 characters long" }); return; }
         if (password1 === password2) {
@@ -60,7 +65,7 @@ class Register extends React.Component {
                 "email": email
             };
 
-            this.authentication.register(dataObj, this.serverErrorHandler);
+            this.authentication.register(dataObj, this.succesRegister, this.failRegister);
         }
         else {
             this.setState({ badSecondPass: "Passwords do not match" });

src/components/navMenu.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import MainFeedPage from "./mainFeedPage";
-import comObj from "../services/communicationService";
+import {clearID} from "../services/sessionStorageManipulation";
 // import PostPage from "./postPage";
 import ProfilePage from "./profilePage";
 
@@ -12,8 +12,7 @@ class NavMenu extends React.Component {
 
     }
     logout() {
-        comObj.clearID();
-
+        clearID();
     }
 
     render() {

src/components/profilePage.js

@@ -1,23 +1,66 @@
 import React from "react";
 import dataObj from "../services/dataService";
+import { Link } from "react-router-dom";
 // MainPage = Feed Page
 
 class ProfilePage extends React.Component {
     constructor(props) {
         super(props);
+        this.state = this.initialState();
+        this.bindThisAndThats();
+    }
+    bindThisAndThats() {
+        this.getProfileSucces = this.getProfileSucces.bind(this);
+    }
+    initialState() {
+        return {
+            name: "Nicolas Cage",
+            picture: "profile.png",
+        };
+    }
+    componentWillMount() {
+
+        dataObj.getProfile(this.getProfileSucces, this.getProfileFail);
     }
 
+    getProfileSucces(a) {
+        console.log(a);
+        if (a.avatarUrl) {
+            this.setState({
+                name: a.name,
+                picture: a.avatarUrl,
+                about: a.about,
+                aboutShort: a.aboutShort,
+                commentsCount: a.commentsCount,
+                postsCount: a.postsCount
+            });
+        }else {
+            this.setState({
+                name: a.name,
+                about: a.about,
+                aboutShort: a.aboutShort,
+                commentsCount: a.commentsCount,
+                postsCount: a.postsCount
+
+            });
+        }
+    }
+    getProfileFail(a) {
+        console.log(a);
+        console.log("FAIL");
+    }
     render() {
-        dataObj.getProfile();
+        const { name, picture, edit } = this.state;
         return (
             <div className="profile">
                 <div className="container">
                     <div className="row">
                         <div className="profile-container">
                             <div className="img-container">
-                                <img src="profile.png" />
+                                <img src={picture} />
                             </div>
-                            <h2>My Name</h2>
+                            <h2>{name}</h2>
+                            <Link to="/mainFeedPage"> Edit Profile</Link>
                             <p>Beogradski institut za tehnologiju – BIT je škola za programiranje osnovana u Beogradu, s ciljem
                                 da svoje polaznike uči praktičnim i primenljivim znanjima u IT industriji. Tehnički deo programa je FrontEnd Stack,
                                 najčešće tražen od strane poslodavaca.

src/services/authenticationService.js

@@ -8,33 +8,15 @@ class AuthenticationService {
     bindThisAndThats() {
         this.login = this.login.bind(this);
         this.register = this.register.bind(this);
-        this.successLogin = this.successLogin.bind(this);
-        this.succesRegister = this.successRegister.bind(this);
+
     }
-    successLogin(a) {
-        comObj.setID(a.sessionId);
-        console.log(a);
-        redirect("/");
-    }
-    failLogin(a) {
-        console.log("Sranje si!");
-        console.log(a);
-    }
-    login(dataObj) {
+    login(dataObj, callbackSucces, callbackFail) {
         if (comObj.getID()) { alert("Vec postoji ulogovan korisnik"); return; }
-        comObj.post("login", dataObj, this.successLogin, this.failLogin);
-
-    }
-    successRegister(a) {
-        redirect("/");
+        comObj.post("login", dataObj, callbackSucces, callbackFail);
 
     }
-    failRegister(error) {
-        console.log(error.response.data.error.message);
-
-    }
-    register(dataObj, callbackFail) {
-        comObj.post("register", dataObj, this.succesRegister, callbackFail);
+    register(dataObj, callbackSucces, callbackFail) {
+        comObj.post("register", dataObj, callbackSucces, callbackFail);
     }
     logout() {
         comObj.clearID();
@@ -43,6 +25,16 @@ class AuthenticationService {
     isAuthenticated() {
         return !!sessionStorage.getItem("sessionID");
     }
+    getID() {
+        return sessionStorage.getItem(this.key);
+
+    }
+    setID(item){
+        sessionStorage.setItem(this.key, item);
+    }
+    clearID(){
+        sessionStorage.clear();
+    }
 
 }
 export default AuthenticationService;

src/services/profileDTO.js

@@ -8,6 +8,13 @@ class ProfileDTO{
         this._avatarUrl = input.avatarUrl;
         this._postsCount = input.postsCount;
         this._commentsCount = input.commentsCount;
+        this._userId = input.userId;
+    }
+    get userId(){
+        return this._userId;
+    }
+    set userId(a){
+        this._userId=a;
     }
     get name() {
         return this._name;

src/services/sessionStorageManipulation.js

@@ -0,0 +1,5 @@
+const a = "sessionID";
+export const setID = (id)  => sessionStorage.setItem(a, id);
+export const getID = ()  => sessionStorage.getItem(a);
+export const clearID = ()  => sessionStorage.removeItem(a);
+export const isAuthenticated = ()  =>  !!sessionStorage.getItem("sessionID");