fixup! Change the Route for profile user stats

bestinbthomas · bestinbthomas · commit f2ce679a3395 · 2020-03-02T20:15:12.000+05:30
diff --git a/package.json b/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"
diff --git a/src/app/actions/ProfileUser.ts b/src/app/actions/ProfileUser.ts
@@ -1,17 +1,19 @@
-import * as ProfileUserInterfaces from 'app/types/User';
+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?: ProfileUserInterfaces.UserType;
+    userType?: UserInterfaces.UserType;
     fullName?: string;
     username?: string;
     email?: string;
@@ -21,7 +23,11 @@ export namespace ProfileUserActions {
   export const updateProfileUserDetails = (profileuserDetails: ProfileUserDetails) =>
     action(Type.UPDATE_PROFILE_USER_DETAILS, { profileuserDetails });
 
-  export const getUserDetails = () => action(Type.GET_PROFILE_USER_DETAILS);
+  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 });
 }
diff --git a/src/app/apiFetch/ProfileUser.ts b/src/app/apiFetch/ProfileUser.ts
@@ -9,9 +9,34 @@ export const getMatchStats = (username: string) => {
     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) => {
diff --git a/src/app/components/ProfileUserStats.tsx b/src/app/components/ProfileUserStats.tsx
@@ -1,9 +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.match.params.username);
-    return <p>This is the Page for Profile user stats</p>;
-  } 
+    // console.log(this.props.profileUserDetails);
+    return (
+      <div>
+        {
+          // @ts-ignore
+          <img src={Avatar[this.props.profileUserDetails.avatar]} />
+        }
+      </div>
+    );
+  }
 }
diff --git a/src/app/components/UserProfileModal/index.tsx b/src/app/components/UserProfileModal/index.tsx
@@ -1,6 +1,6 @@
-import PopUpMenu from 'app/components/PopUpMenu';
+import { faChartLine, faLock, faUser } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChartLine, faUser, faLock } from '@fortawesome/free-solid-svg-icons';
+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';
diff --git a/src/app/containers/ProfileUsersStats.ts b/src/app/containers/ProfileUsersStats.ts
@@ -14,7 +14,7 @@ const mapStateToProps = (rootState: RootState) => {
 const mapDispatchToProps = (dispatch: Dispatch) => {
   return {
     getMatchStats: (username: string) => dispatch(ProfileUserActions.getMatchStats(username)),
-    getUserDetails: () => dispatch(ProfileUserActions.getUserDetails()),
+    getUserDetails: (username: string) => dispatch(ProfileUserActions.getUserDetails(username)),
     updateProfileUserDetails: (
       updateProfileUserDetails: ProfileUserInterfaces.EditProfileUserDetails,
     ) => dispatch(ProfileUserActions.updateProfileUserDetails(updateProfileUserDetails)),
diff --git a/src/app/reducers/ProfileUser.ts b/src/app/reducers/ProfileUser.ts
@@ -7,6 +7,14 @@ const profileStoreIntialState: ProfileUserInterfaces.ProfileUserStoreState = {
   country: 'IN',
   email: '',
   fullName: '',
+  matchStats: {
+    auto: { wins: 0, losses: 0, ties: 0 },
+    faced: { wins: 0, losses: 0, ties: 0 },
+    initiated: { wins: 0, losses: 0, ties: 0 },
+    lastMatchAt: '',
+    numMatchches: 0,
+    userId: 0,
+  },
   type: '',
   userType: ProfileUserInterfaces.ProfileUserType.STUDENT,
   username: '',
@@ -40,6 +48,13 @@ export const profileuserReducer = (
       };
     }
 
+    case ProfileUserActions.Type.UPDATE_MATCH_STATS: {
+      return {
+        ...state,
+        matchStats: action.payload.matchStats,
+      };
+    }
+
     default:
       return state;
   }
diff --git a/src/app/routes.ts b/src/app/routes.ts
@@ -7,5 +7,5 @@ export enum Routes {
   GITHUB_OAUTH = '/login/github',
   GOOGLE_OAUTH = '/login/google',
   USER_ACTIVATION = '/user-activate',
-  PROFILE_USER_STATS = '/:username',
+  PROFILE_USER_STATS = '/profile::username',
 }
diff --git a/src/app/sagas/ProfileUser.ts b/src/app/sagas/ProfileUser.ts
@@ -3,13 +3,15 @@ import { ProfileUserActions, UserActions } from 'app/actions';
 import * as ProfileUserFetch from 'app/apiFetch/ProfileUser';
 import { avatarName } from 'app/types/Authentication/Register';
 import { resType } from 'app/types/sagas';
-import { call, put } from 'redux-saga/effects';
+import { all, call, put, takeEvery } from 'redux-saga/effects';
 import { ActionType } from 'typesafe-actions';
 
 export function* getMatchStats(action: ActionType<typeof ProfileUserActions.getMatchStats>) {
   try {
     const res = yield call(ProfileUserFetch.getMatchStats, action.payload.username);
     yield put(UserActions.updateErrorMessage(res.error));
+    console.log('saga match res');
+    console.log(res);
     if (res.type !== resType.ERROR) {
       const { avatarId, college, country, fullName, userType, username } = res.body;
       yield put(
@@ -27,3 +29,20 @@ export function* getMatchStats(action: ActionType<typeof ProfileUserActions.getM
     console.error(err);
   }
 }
+
+export function* getUserProfile(action: ActionType<typeof ProfileUserActions.getUserDetails>) {
+  try {
+    const res = yield call(ProfileUserFetch.getUserProfile, action.payload.username);
+    console.log('saga profile res');
+    console.log(res);
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+export function* profileSagas() {
+  yield all([
+    takeEvery(ProfileUserActions.Type.GET_MATCH_STATS, getMatchStats),
+    takeEvery(ProfileUserActions.Type.GET_PROFILE_USER_DETAILS, getUserProfile),
+  ]);
+}
diff --git a/src/app/store/index.ts b/src/app/store/index.ts
@@ -4,6 +4,7 @@ import { codeSagas } from 'app/sagas/Code';
 import { leaderboardSagas } from 'app/sagas/Leaderboard';
 import { matchSagas } from 'app/sagas/MatchView';
 import { notificationSagas } from 'app/sagas/Notification';
+import { profileSagas } from 'app/sagas/ProfileUser';
 import { submissionSagas } from 'app/sagas/Submission';
 import { userSagas } from 'app/sagas/User';
 import { applyMiddleware, createStore } from 'redux';
@@ -32,6 +33,7 @@ export function configureStore(initialState?: object) {
   const store = createStore(persistedReducer, initialState, middleware);
   sagaMiddleware.run(userSagas);
   sagaMiddleware.run(codeSagas);
+  sagaMiddleware.run(profileSagas);
   sagaMiddleware.run(leaderboardSagas);
   sagaMiddleware.run(submissionSagas);
   sagaMiddleware.run(matchSagas);
diff --git a/src/app/types/ProfileUser.ts b/src/app/types/ProfileUser.ts
@@ -1,4 +1,5 @@
 import { ProfileUserActions } from 'app/actions';
+import { RouteComponentProps } from 'react-router-dom';
 import { ActionType } from 'typesafe-actions';
 
 export enum ProfileUserType {
@@ -17,7 +18,9 @@ export interface EditProfileUserDetails {
 }
 
 const actions = {
+  getMatchStats: ProfileUserActions.getMatchStats,
   getUserDetails: ProfileUserActions.getUserDetails,
+  updateMatchStats: ProfileUserActions.updateMatchStats,
   updateProfileUserDetails: ProfileUserActions.updateProfileUserDetails,
 };
 
@@ -30,6 +33,22 @@ export interface ProfileUserStoreState {
   type: string;
   userType: ProfileUserType;
   username: string;
+  matchStats: ProfileMatchStats;
+}
+
+export interface MatchStatsItem {
+  wins: number;
+  losses: number;
+  ties: number;
+}
+
+export interface ProfileMatchStats {
+  auto: MatchStatsItem;
+  faced: MatchStatsItem;
+  initiated: MatchStatsItem;
+  lastMatchAt: string;
+  numMatchches: number;
+  userId: number;
 }
 
 export interface StateProps {
@@ -38,9 +57,14 @@ export interface StateProps {
 
 export interface DispatchProps {
   updateProfileUserDetails: (updateProfileUserDetails: EditProfileUserDetails) => void;
-  getUserDetails: () => void;
+  getUserDetails: (username: string) => void;
   getMatchStats: (username: string) => void;
 }
-export type Props = StateProps & DispatchProps;
+
+interface UrlMatchParams {
+  username: string;
+}
+
+export type Props = StateProps & DispatchProps & RouteComponentProps<UrlMatchParams>;
 
 export type ProfileUserStoreAction = ActionType<typeof actions>;

Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,5 @@ export enum Routes {`
`7`	`7`	`GITHUB_OAUTH = '/login/github',`
`8`	`8`	`GOOGLE_OAUTH = '/login/google',`
`9`	`9`	`USER_ACTIVATION = '/user-activate',`
`10`		`- PROFILE_USER_STATS = '/:username',`
	`10`	`+ PROFILE_USER_STATS = '/profile::username',`
`11`	`11`	`}`