Add route for /profile/:user and Add the required container

Author: Chethan2k1

src/app/actions/ProfileUser.ts

@@ -18,7 +18,7 @@ export namespace ProfileUserActions {
     country?: string;
   }
 
-  export const updateUserDetails = (profileuserDetails: ProfileUserDetails) =>
+  export const updateProfileUserDetails = (profileuserDetails: ProfileUserDetails) =>
     action(Type.UPDATE_PROFILE_USER_DETAILS, { profileuserDetails });
 
   export const getUserDetails = () => action(Type.GET_PROFILE_USER_DETAILS);

src/app/apiFetch/ProfileUser.ts

@@ -3,7 +3,7 @@ import { jsonResponseWrapper } from 'app/apiFetch/utils';
 import { API_BASE_URL } from '../../config/config';
 
 export const getMatchStats = (username: string) => {
-  const URL = `${API_BASE_URL}/match-stats/${encodeURIComponent(username)}`;
+  const URL = `${API_BASE_URL}user/match-stats/${encodeURIComponent(username)}`;
   return fetch(URL, {
     credentials: 'include',
     method: 'GET',

src/app/components/Leaderboard/LeaderboardElement.tsx

@@ -16,7 +16,11 @@ const colors = ['#FFB900', '#69797E', '#847545', '#038387'];
 export class LeaderboardElement extends React.Component<LeaderboardInterfaces.ElementProps, {}> {
   public render() {
     const { player, index, isPlayAgainstDisabled, runMatch, currentUsername } = this.props;
-
+    if (player.username === currentUsername) {
+      const urlToProfile = `/profile`;
+    } else {
+      const urlToProfile = `/profile/${player.username}`;
+    }
     const playerTotalMatches = player.numWin + player.numLoss + player.numTie;
 
     return (
@@ -86,9 +90,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,8 @@
+import * as ProfileUserInterface from 'app/types/ProfileUser';
+import * as React from 'react';
+
+export class ProfileUserStats extends React.Component<ProfileUserInterface.Props, {}> {
+  public render() {
+    return <p>This is the Page for Profile user stats</p>;
+  }
+}

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

@@ -2,6 +2,7 @@ import { faChartLine, faLock, faUser } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 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 * as UserProfileInterfaces from 'app/types/UserProfileModal';
 import classnames from 'classnames';
@@ -78,8 +79,12 @@ export class UserProfileModal extends React.Component<
         );
         break;
 
+      case UserProfileInterfaces.SelectedPage.USERSTATS:
+        return <UserStats />;
+        break;
+
       default:
-        return <p>Hello World</p>;
+        return <p>Default</p>;
     }
   }
 

src/app/containers/ProfileUsersStats.ts

@@ -0,0 +1,33 @@
+import { ProfileUserActions } from 'app/actions';
+import { ProfileUserStats } from 'app/components/ProfileUserStats';
+import { RootState } from 'app/reducers';
+import * as ProfileUserInterfaces from 'app/types/ProfileUser';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+const mapStateToProps = (rootState: RootState) => {
+  return {
+    profileUserDetails: rootState.profileUser,
+  };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => {
+  return {
+    getMatchStats: (username: string) => dispatch(ProfileUserActions.getMatchStats(username)),
+    getUserDetails: () => dispatch(ProfileUserActions.getUserDetails()),
+    updateProfileUserDetails: (
+      updateProfileUserDetails: ProfileUserInterfaces.EditProfileUserDetails,
+    ) => dispatch(ProfileUserActions.updateProfileUserDetails(updateProfileUserDetails)),
+  };
+};
+
+const profileUserContainer = connect<
+  ProfileUserInterfaces.StateProps,
+  ProfileUserInterfaces.DispatchProps,
+  {}
+>(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ProfileUserStats);
+
+export default profileUserContainer;

src/app/index.tsx

@@ -4,6 +4,7 @@ import Register from 'app/containers/Authentication/Register';
 import Dashboard from 'app/containers/Dashboard';
 import Leaderboard from 'app/containers/Leaderboard';
 import UserProfileModal from 'app/containers/UserProfileModal';
+import profileUserContainer from 'app/containers/ProfileUsersStats'
 import { Routes } from 'app/routes';
 // @ts-ignore
 import { initializeRendererAssets } from 'codecharacter-renderer';
@@ -24,6 +25,7 @@ export const App = hot(module)(() => (
       <Route exact path={Routes.REGISTER} component={Register} />
       <Route exact path={Routes.LEADERBOARD} component={Leaderboard} />
       <Route exact path={Routes.USER_PROFILE_MODEL} component={UserProfileModal} />
+      <Route exact path={Routes.PROFILE_USER_STATS} component={profileUserContainer} />
     </Switch>
     <PopUpMenu />
     <Sugar background="#484848" color="white" />

src/app/reducers/index.ts

@@ -45,6 +45,6 @@ export interface RootState {
   router: RouterState;
   gameLog: GameLogInterfaces.GameLogStoreState;
   user: UserInterfaces.UserStoreState;
-  profileuser: ProfileUserInterfaces.ProfileUserStoreState;
+  profileUser: ProfileUserInterfaces.ProfileUserStoreState;
   submission: SubmissionInterfaces.SubmissionStoreState;
 }

src/app/routes.ts

@@ -4,4 +4,5 @@ export enum Routes {
   REGISTER = '/register',
   LEADERBOARD = '/leaderboard',
   USER_PROFILE_MODEL = '/profile',
+  PROFILE_USER_STATS = '/profile/:username',
 }