Implemented user profile screen

Author: sivaprasadreddy

src/App.tsx

@@ -6,6 +6,7 @@ import Registration from "./pages/registration/Registration";
 import NavBar from "./components/layout/NavBar";
 import NewPost from "./pages/posts/NewPost";
 import NotFound from "./pages/error/NotFound";
+import UserProfile from "./pages/profile/UserProfile";
 
 const App = () => (
     <div className="App">
@@ -14,6 +15,7 @@ const App = () => (
             <Switch>
                 <Route path="/login" component={Login}/>
                 <Route path="/registration" component={Registration}/>
+                <Route path="/profile" component={UserProfile}/>
                 <Route path="/posts/new" component={NewPost}/>
 
                 <Route path="/posts" component={Posts} />

src/components/layout/NavBar.tsx

@@ -23,7 +23,7 @@ const NavBar = () => {
                 <li className="nav-item dropdown">
                     <NavLink className="nav-link dropdown-toggle" to="#" id="navbarDropdown" role="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                        <i className="fas fa-user"/> <span>{user.name}</span>
+                        <i className="fas fa-user"/> <span>{user.user.name}</span>
                     </NavLink>
                     <div className="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                         <NavLink className="dropdown-item" to="/profile">

src/pages/profile/UserProfile.tsx

@@ -0,0 +1,127 @@
+import React, {useEffect, useState} from "react";
+import { useHistory } from "react-router-dom";
+import {InputText} from "primereact/inputtext";
+import AuthService from "../../services/AuthService";
+import UserService, {UpdateUserModel} from "../../services/UserService";
+
+const UserProfile = () => {
+    const authService = new AuthService();
+    const userService = new UserService();
+    const history = useHistory();
+
+    const [id, setId] = useState(-1);
+    const [name, setName] = useState("");
+    const [bio, setBio] = useState("");
+    const [loc, setLoc] = useState("");
+    const [githubUsername, setGithubUsername] = useState("");
+    const [twitterUsername, setTwitterUsername] = useState("");
+
+    const getCurrentUserProfile = () => {
+        console.log("authService.getCurrentUser():", authService.getCurrentUser())
+        let userId = authService.getCurrentUser().user.id;
+        userService.getUserProfile(userId).then(response => {
+            const userProfile = response.data;
+            console.log("userProfile:", userProfile)
+            setId(userProfile.id)
+            setName(userProfile.name)
+            setBio(userProfile.bio || "")
+            setLoc(userProfile.location || "")
+            setGithubUsername(userProfile.githubUsername || "")
+            setTwitterUsername(userProfile.twitterUsername || "")
+        });
+    }
+
+    useEffect(()=> {
+        getCurrentUserProfile();
+    }, []);
+
+    const handleProfileUpdate = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!name.trim()) {
+            return;
+        }
+        const userProfile : UpdateUserModel = {
+            id: id,
+            name: name,
+            bio: bio,
+            location: loc,
+            githubUsername: githubUsername,
+            twitterUsername: twitterUsername
+        }
+        userService.updateUserProfile(userProfile)
+            .then((response) => {
+                console.log("update UserProfile success", response);
+                alert('Updated UserProfile successfully')
+            })
+            .catch(e => {
+                console.log("updateUserProfile error", e);
+                alert('Failed to update UserProfile, try again')
+            });
+    };
+
+    return (
+        <div className="container col-md-4">
+            <div className="card">
+                <div className="card-header text-center">
+                    <h3>My Profile</h3>
+                </div>
+                <div className="card-body">
+                    <form onSubmit={e => handleProfileUpdate(e)} className="row justify-content-center">
+                        <div className="form-group col-md-10">
+                            <label htmlFor="name">Name</label>
+                            <InputText
+                                id="name"
+                                className="form-control col-md-12"
+                                value={name}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+                            />
+                        </div>
+                        <div className="form-group col-md-10">
+                            <label htmlFor="email">Bio</label>
+                            <InputText
+                                id="bio"
+                                className="form-control col-md-12"
+                                value={bio}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setBio(e.target.value)}
+                            />
+                        </div>
+                        <div className="form-group col-md-10">
+                            <label htmlFor="password">Location</label>
+                            <InputText
+                                id="loc"
+                                className="form-control col-md-12"
+                                value={loc}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setLoc(e.target.value)}
+                            />
+                        </div>
+                        <div className="form-group col-md-10">
+                            <label htmlFor="password">GitHub UserName</label>
+                            <InputText
+                                id="ghUsername"
+                                className="form-control col-md-12"
+                                value={githubUsername}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGithubUsername(e.target.value)}
+                            />
+                        </div>
+                        <div className="form-group col-md-10">
+                            <label htmlFor="password">Twitter UserName</label>
+                            <InputText
+                                id="twUsername"
+                                className="form-control col-md-12"
+                                value={twitterUsername}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTwitterUsername(e.target.value)}
+                            />
+                        </div>
+                        <div className="form-group col-md-10">
+                            <button type="submit" className="btn btn-primary">
+                                Save
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default UserProfile;

src/pages/registration/Registration.tsx

@@ -12,7 +12,7 @@ const Registration = () => {
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
 
-    const handleLogin = (e: React.FormEvent) => {
+    const handleRegistration = (e: React.FormEvent) => {
         e.preventDefault();
         if (!name.trim() || !email.trim() || !password.trim()) {
             return;
@@ -35,7 +35,7 @@ const Registration = () => {
                     <h3>Registration Form</h3>
                 </div>
                 <div className="card-body">
-                    <form onSubmit={e => handleLogin(e)} className="row justify-content-center">
+                    <form onSubmit={e => handleRegistration(e)} className="row justify-content-center">
                         <div className="form-group col-md-10">
                             <label htmlFor="name">Name</label>
                             <InputText

src/services/AuthService.ts

@@ -1,6 +1,18 @@
 import {loadState, saveState, cleanState} from "../store/localStorage";
 import axios from "./axios-config";
 
+export interface LoginUserModel {
+
+    access_token: string,
+    user: UserModel
+}
+
+export interface UserModel {
+    id: number,
+    name: string,
+    email: string,
+    roles: string[]
+}
 export default class AuthService {
 
     performLogin = (credentials: {}) => {
@@ -15,7 +27,7 @@ export default class AuthService {
             });
     }
 
-    setCurrentUser = (user: {}) => {
+    setCurrentUser = (user: LoginUserModel) => {
         const state = loadState()
         const newState = {
             ...state,
@@ -24,7 +36,7 @@ export default class AuthService {
         saveState(newState);
     }
 
-    getCurrentUser = () => {
+    getCurrentUser = (): LoginUserModel => {
         const state = loadState()
         return state.user || {};
     }

src/services/UserService.ts

@@ -1,8 +1,25 @@
 import axios from "./axios-config";
 
+export interface UpdateUserModel {
+    id: number
+    name: string
+    bio: string
+    location: string
+    githubUsername: string
+    twitterUsername: string
+}
+
 export default class AuthService {
 
     performRegistration = (user: {}) => {
         return axios.post("/users", user);
     }
+
+    updateUserProfile = (user: UpdateUserModel) => {
+        return axios.put("/user", user);
+    }
+
+    getUserProfile = (id: number) => {
+        return axios.get<UpdateUserModel>("/users/"+id);
+    }
 }