Add Profile stats

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "predeploy": "npm run build",
     "test": "jest -i",
-    "start": "webpack-dev-server --mode development --hot --progress --color --port 3000",
+    "start": "webpack-dev-server --mode development --hot --progress --color --port 3000 --host 0.0.0.0",
     "build": "webpack -p --progress --colors",
     "lint": "prettier --write \"src/**/*.{ts,tsx,css}\" \"__tests__/**/*.{ts,tsx,css}\" && tslint --project .",
     "lint:fix": "tslint --project . --fix"
@@ -135,6 +135,7 @@
   "dependencies": {
     "@types/commonmark": "^0.27.3",
     "@types/react-router-dom": "^5.1.3",
+    "@types/react-sidebar": "^3.0.0",
     "@types/reactour": "^1.13.1",
     "bootstrap": "^4.2.1",
     "classnames": "^2.2.6",
@@ -158,6 +159,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^5.1.2",
     "react-router-redux": "^4.0.8",
+    "react-sidebar": "^3.0.2",
     "react-spinners": "^0.5.1",
     "react-split-pane": "^0.1.84",
     "reactour": "^1.16.0",

src/app/actions/ProfileUser.ts

@@ -0,0 +1,33 @@
+import * as ProfileInterfaces from 'app/types/ProfileUser';
+import * as UserInterfaces from 'app/types/User';
+import { action } from 'typesafe-actions';
+
+export namespace ProfileUserActions {
+  export enum Type {
+    GET_PROFILE_USER_DETAILS = 'GET_USER_DETAILS',
+    GET_MATCH_STATS = 'GET_MATCH_STATS',
+    UPDATE_PROFILE_USER_DETAILS = 'UPDATE_PROFILE_USER_DETAILS',
+    UPDATE_MATCH_STATS = 'UPDATE_MATCH_STATS',
+  }
+
+  interface ProfileUserDetails {
+    avatar?: string;
+    college?: string;
+    userType?: UserInterfaces.UserType;
+    fullName?: string;
+    username?: string;
+    email?: string;
+    country?: string;
+  }
+
+  export const updateProfileUserDetails = (profileuserDetails: ProfileUserDetails) =>
+    action(Type.UPDATE_PROFILE_USER_DETAILS, { profileuserDetails });
+
+  export const getUserDetails = (username: string) =>
+    action(Type.GET_PROFILE_USER_DETAILS, { username });
+
+  export const updateMatchStats = (matchStats: ProfileInterfaces.ProfileMatchStats) =>
+    action(Type.UPDATE_MATCH_STATS, { matchStats });
+
+  export const getMatchStats = (username: string) => action(Type.GET_MATCH_STATS, { username });
+}

src/app/actions/index.ts

@@ -7,3 +7,4 @@ export * from 'app/actions/User';
 export * from 'app/actions/Notification';
 export * from 'app/actions/code/Submission';
 export * from 'app/actions/MatchView';
+export * from 'app/actions/ProfileUser';

src/app/apiFetch/ProfileUser.ts

@@ -0,0 +1,45 @@
+/* tslint:disable:no-console*/
+import { jsonResponseWrapper } from 'app/apiFetch/utils';
+import { API_BASE_URL } from '../../config/config';
+
+export const getMatchStats = (username: string) => {
+  const URL = `${API_BASE_URL}user/match-stats/${encodeURIComponent(username)}`;
+  return fetch(URL, {
+    credentials: 'include',
+    method: 'GET',
+  })
+    .then((response) => {
+      console.log('fetch match response');
+      console.log(response);
+      return jsonResponseWrapper(response);
+    })
+    .then((data) => {
+      console.log('fetch match data');
+      console.log(data);
+      return data;
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};
+
+export const getUserProfile = (username: string) => {
+  const URL = `${API_BASE_URL}user/${username}`;
+  return fetch(URL, {
+    credentials: 'include',
+    method: 'GET',
+  })
+    .then((response) => {
+      console.log('fetch profile response');
+      console.log(response);
+      return jsonResponseWrapper(response);
+    })
+    .then((data) => {
+      console.log('fetch profile data');
+      console.log(data);
+      return data;
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};

src/app/components/Leaderboard/LeaderboardElement.tsx

@@ -16,7 +16,12 @@ const colors = ['#FFB900', '#69797E', '#847545', '#038387'];
 export class LeaderboardElement extends React.Component<LeaderboardInterfaces.ElementProps, {}> {
   public render() {
     const { player, index, isPlayAgainstDisabled, runMatch, currentUsername } = this.props;
-
+    let urlToProfile;
+    if (player.username === currentUsername) {
+      urlToProfile = `/profile`;
+    } else {
+      urlToProfile = `/profile/${player.username}`;
+    }
     const playerTotalMatches = player.numWin + player.numLoss + player.numTie;
 
     return (
@@ -86,9 +91,11 @@ export class LeaderboardElement extends React.Component<LeaderboardInterfaces.El
                   }}
                   title={player.username}
                 >
-                  <span>{`${player.username.substr(0, 15)}${
-                    player.username.length > 15 ? '...' : ''
-                  }`}</span>
+                  <a href={urlToProfile}>
+                    <span>{`${player.username.substr(0, 15)}${
+                      player.username.length > 15 ? '...' : ''
+                    }`}</span>
+                  </a>
                 </div>
                 <div
                   className={classnames(styles['leader-score_title'])}

src/app/components/ProfileUserStats.tsx

@@ -0,0 +1,21 @@
+import { Avatar } from 'app/types/Authentication/Register';
+import * as ProfileUserInterface from 'app/types/ProfileUser';
+import * as React from 'react';
+
+export default class ProfileUserStats extends React.Component<ProfileUserInterface.Props, {}> {
+  public componentDidMount() {
+    this.props.getUserDetails('');
+    this.props.getMatchStats(this.props.match.params.username);
+  }
+  public render() {
+    // console.log(this.props.profileUserDetails);
+    return (
+      <div>
+        {
+          // @ts-ignore
+          <img src={Avatar[this.props.profileUserDetails.avatar]} />
+        }
+      </div>
+    );
+  }
+}

src/app/components/UserProfileModal/UserStats.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export class UserStats extends React.Component {
+  public render() {
+    return <p>This is the Page for Current user stats</p>;
+  }
+}

src/app/components/UserProfileModal/index.tsx

@@ -1,6 +1,9 @@
+import { faChartLine, faLock, faUser } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PopUpMenu from 'app/components/PopUpMenu';
 import { EditPassword } from 'app/components/UserProfileModal/EditPassword';
 import { EditProfile } from 'app/components/UserProfileModal/EditProfile';
+import { UserStats } from 'app/components/UserProfileModal/UserStats';
 import * as styles from 'app/styles/UserProfileModal.module.css';
 import { AvatarId } from 'app/types/Authentication/Register';
 import * as UserProfileInterfaces from 'app/types/UserProfileModal';
@@ -25,14 +28,66 @@ export class UserProfileModal extends React.Component<
     this.state = {
       avatar: userDetails.avatar,
       country: userDetails.country,
+      currentPage: UserProfileInterfaces.SelectedPage.EDITPROFILE,
       fullName: userDetails.fullName,
       isPasswordPage: true,
       oldPassword: '',
       password: '',
       repeatPassword: '',
       username: userDetails.username,
     };
-    this.props.getUserDetails();
+  }
+
+  public renderSwitch(
+    param: UserProfileInterfaces.SelectedPage,
+    username: string,
+    fullName: string,
+    // tslint:disable-next-line
+    userDetails: any,
+    country: string,
+    avatar: string,
+    oldPassword: string,
+    password: string,
+    repeatPassword: string,
+  ) {
+    switch (param) {
+      case UserProfileInterfaces.SelectedPage.EDITPROFILE:
+        return (
+          <EditProfile
+            handleEditProfile={this.handleEditProfile}
+            onInputChange={this.onInputChange}
+            editProfileRef={this.editProfileRef}
+            reactFlagRef={this.reactFlagRef}
+            username={username}
+            fullName={fullName}
+            userDetails={userDetails}
+            country={country}
+            avatar={avatar}
+          />
+        );
+        break;
+
+      case UserProfileInterfaces.SelectedPage.EDITPASSWORD:
+        return (
+          <EditPassword
+            handleEditPassword={this.handleEditPassword}
+            onInputChange={this.onInputChange}
+            editPasswordRef={this.editPasswordRef}
+            oldPassword={oldPassword}
+            password={password}
+            repeatPassword={repeatPassword}
+            userDetails={userDetails}
+          />
+        );
+        break;
+
+      case UserProfileInterfaces.SelectedPage.USERSTATS:
+        return <UserStats />;
+        break;
+
+      default:
+        return <p>Default</p>;
+    }
   }
 
   public render() {
@@ -48,35 +103,72 @@ export class UserProfileModal extends React.Component<
     const { userDetails } = this.props;
     return (
       <Grid fluid={true} className={classnames(styles.UserEdit)}>
+        <div
+          style={{
+            borderRight: '2px solid #D3D3D3',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: '',
+            marginLeft: '10%',
+            marginTop: '10%',
+            position: 'absolute',
+          }}
+        >
+          <div
+            style={{ paddingBottom: '10px', paddingRight: '10px', cursor: 'pointer' }}
+            onClick={() => {
+              this.setState({
+                currentPage: UserProfileInterfaces.SelectedPage.EDITPROFILE,
+              });
+            }}
+          >
+            <FontAwesomeIcon icon={faUser} style={{ fontSize: '30' }} />
+            <label style={{ paddingLeft: '10px', cursor: 'pointer' }}>User Details</label>
+          </div>
+
+          <div
+            style={{ paddingBottom: '10px', paddingRight: '10px', cursor: 'pointer' }}
+            onClick={() => {
+              this.setState({
+                currentPage: UserProfileInterfaces.SelectedPage.EDITPASSWORD,
+              });
+            }}
+          >
+            <FontAwesomeIcon icon={faLock} style={{ fontSize: '30' }} />
+            <label style={{ paddingLeft: '10px', cursor: 'pointer' }}>User Credentials</label>
+          </div>
+
+          <div
+            style={{ paddingBottom: '10px', paddingRight: '10px', cursor: 'pointer' }}
+            onClick={() => {
+              this.setState({
+                currentPage: UserProfileInterfaces.SelectedPage.USERSTATS,
+              });
+            }}
+          >
+            <FontAwesomeIcon icon={faChartLine} style={{ fontSize: '30' }} />
+            <label style={{ paddingLeft: '10px', paddingRight: '10px', cursor: 'pointer' }}>
+              User Stats
+            </label>
+          </div>
+        </div>
         <Row
           className={
             this.state.isPasswordPage
               ? classnames(styles.editProfileElement)
               : classnames(styles.editPasswordElement)
           }
         >
-          {this.state.isPasswordPage ? (
-            <EditProfile
-              handleEditProfile={this.handleEditProfile}
-              onInputChange={this.onInputChange}
-              editProfileRef={this.editProfileRef}
-              reactFlagRef={this.reactFlagRef}
-              username={username}
-              fullName={fullName}
-              userDetails={userDetails}
-              country={country}
-              avatar={avatar}
-            />
-          ) : (
-            <EditPassword
-              handleEditPassword={this.handleEditPassword}
-              onInputChange={this.onInputChange}
-              editPasswordRef={this.editPasswordRef}
-              oldPassword={oldPassword}
-              password={password}
-              repeatPassword={repeatPassword}
-              userDetails={userDetails}
-            />
+          {this.renderSwitch(
+            this.state.currentPage,
+            username,
+            fullName,
+            userDetails,
+            country,
+            avatar,
+            oldPassword,
+            password,
+            repeatPassword,
           )}
         </Row>
         <Row>
@@ -87,12 +179,20 @@ export class UserProfileModal extends React.Component<
                 : classnames('labeltext', styles.passwordPageLink)
             }
             onClick={() => {
-              this.setState((prevState) => ({
-                isPasswordPage: !prevState.isPasswordPage,
-              }));
+              const newState =
+                this.state.currentPage === UserProfileInterfaces.SelectedPage.EDITPROFILE
+                  ? UserProfileInterfaces.SelectedPage.EDITPASSWORD
+                  : UserProfileInterfaces.SelectedPage.EDITPROFILE;
+              this.setState({
+                currentPage: newState,
+              });
             }}
           >
-            {this.state.isPasswordPage ? 'Want to change Credentials?' : 'Want to change Info?'}
+            {this.state.currentPage === UserProfileInterfaces.SelectedPage.EDITPROFILE
+              ? 'Want to change Credentials?'
+              : this.state.currentPage === UserProfileInterfaces.SelectedPage.EDITPASSWORD
+              ? 'Want to change Info?'
+              : null}
           </a>
         </Row>
         {this.state.isPasswordPage ? (