Skip to content

Commit 70d9e86

Browse files
Chethan2k1Chethan2k1
committed
Add State,Type,actions,reducers,apifetch,sagas for ProfileUser
1 parent 1dc1b1b commit 70d9e86

File tree

9 files changed

+295
-68
lines changed

9 files changed

+295
-68
lines changed

‎src/app/actions/ProfileUser.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as ProfileUserInterfaces from 'app/types/User';
2+
import { action } from 'typesafe-actions';
3+
4+
export namespace ProfileUserActions {
5+
export enum Type {
6+
GET_PROFILE_USER_DETAILS = 'GET_USER_DETAILS',
7+
GET_MATCH_STATS = 'GET_MATCH_STATS',
8+
UPDATE_PROFILE_USER_DETAILS = 'UPDATE_PROFILE_USER_DETAILS',
9+
}
10+
11+
interface ProfileUserDetails {
12+
avatar?: string;
13+
college?: string;
14+
userType?: ProfileUserInterfaces.UserType;
15+
fullName?: string;
16+
username?: string;
17+
email?: string;
18+
country?: string;
19+
}
20+
21+
export const updateUserDetails = (profileuserDetails: ProfileUserDetails) =>
22+
action(Type.UPDATE_PROFILE_USER_DETAILS, { profileuserDetails });
23+
24+
export const getUserDetails = () => action(Type.GET_PROFILE_USER_DETAILS);
25+
26+
export const getMatchStats = (username: string) => action(Type.GET_MATCH_STATS, { username });
27+
}

‎src/app/actions/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ export * from 'app/actions/User';
77
export * from 'app/actions/Notification';
88
export * from 'app/actions/code/Submission';
99
export * from 'app/actions/MatchView';
10+
export * from 'app/actions/ProfileUser';

‎src/app/apiFetch/ProfileUser.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* tslint:disable:no-console*/
2+
import { jsonResponseWrapper } from 'app/apiFetch/utils';
3+
import { API_BASE_URL } from '../../config/config';
4+
5+
export const getMatchStats = (username: string) => {
6+
const URL = `${API_BASE_URL}/match-stats/${encodeURIComponent(username)}`;
7+
return fetch(URL, {
8+
credentials: 'include',
9+
method: 'GET',
10+
})
11+
.then((response) => {
12+
return jsonResponseWrapper(response);
13+
})
14+
.then((data) => {
15+
return data;
16+
})
17+
.catch((error) => {
18+
console.error(error);
19+
});
20+
};

‎src/app/components/UserProfileModal/index.tsx‎

Lines changed: 114 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { faChartLine, faLock, faUser } from '@fortawesome/free-solid-svg-icons';
12
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
2-
import { faChartLine, faUser,faLock } from '@fortawesome/free-solid-svg-icons';
33
import { EditPassword } from 'app/components/UserProfileModal/EditPassword';
44
import { EditProfile } from 'app/components/UserProfileModal/EditProfile';
55
import * as styles from 'app/styles/UserProfileModal.module.css';
@@ -19,47 +19,14 @@ export class UserProfileModal extends React.Component<
1919
private editPasswordRef = React.createRef<HTMLFormElement>();
2020
private reactFlagRef = React.createRef<ReactFlagsSelect>();
2121

22-
public renderSwitch(param:any,username:any,fullName:any,userDetails:any,country:any,avatar:any,oldPassword:any,password:any,repeatPassword:any) {
23-
switch(param) {
24-
case UserProfileInterfaces.SelectedPage.EDITPROFILE:
25-
return (<EditProfile
26-
handleEditProfile={this.handleEditProfile}
27-
onInputChange={this.onInputChange}
28-
editProfileRef={this.editProfileRef}
29-
reactFlagRef={this.reactFlagRef}
30-
username={username}
31-
fullName={fullName}
32-
userDetails={userDetails}
33-
country={country}
34-
avatar={avatar}
35-
/>);
36-
break;
37-
38-
case UserProfileInterfaces.SelectedPage.EDITPASSWORD:
39-
return (<EditPassword
40-
handleEditPassword={this.handleEditPassword}
41-
onInputChange={this.onInputChange}
42-
editPasswordRef={this.editPasswordRef}
43-
oldPassword={oldPassword}
44-
password={password}
45-
repeatPassword={repeatPassword}
46-
userDetails={userDetails}
47-
/>);
48-
break;
49-
50-
default:
51-
return <p>Hello World</p>;
52-
}
53-
}
54-
5522
constructor(props: UserProfileInterfaces.Props) {
5623
super(props);
5724
const { userDetails } = this.props;
5825
this.state = {
5926
avatar: userDetails.avatar,
6027
country: userDetails.country,
61-
fullName: userDetails.fullName,
6228
currentPage: UserProfileInterfaces.SelectedPage.EDITPROFILE,
29+
fullName: userDetails.fullName,
6330
isPasswordPage: true,
6431
oldPassword: '',
6532
password: '',
@@ -68,6 +35,54 @@ export class UserProfileModal extends React.Component<
6835
};
6936
}
7037

38+
public renderSwitch(
39+
param: UserProfileInterfaces.SelectedPage,
40+
username: string,
41+
fullName: string,
42+
// tslint:disable-next-line
43+
userDetails: any,
44+
country: string,
45+
avatar: string,
46+
oldPassword: string,
47+
password: string,
48+
repeatPassword: string,
49+
) {
50+
switch (param) {
51+
case UserProfileInterfaces.SelectedPage.EDITPROFILE:
52+
return (
53+
<EditProfile
54+
handleEditProfile={this.handleEditProfile}
55+
onInputChange={this.onInputChange}
56+
editProfileRef={this.editProfileRef}
57+
reactFlagRef={this.reactFlagRef}
58+
username={username}
59+
fullName={fullName}
60+
userDetails={userDetails}
61+
country={country}
62+
avatar={avatar}
63+
/>
64+
);
65+
break;
66+
67+
case UserProfileInterfaces.SelectedPage.EDITPASSWORD:
68+
return (
69+
<EditPassword
70+
handleEditPassword={this.handleEditPassword}
71+
onInputChange={this.onInputChange}
72+
editPasswordRef={this.editPasswordRef}
73+
oldPassword={oldPassword}
74+
password={password}
75+
repeatPassword={repeatPassword}
76+
userDetails={userDetails}
77+
/>
78+
);
79+
break;
80+
81+
default:
82+
return <p>Hello World</p>;
83+
}
84+
}
85+
7186
public render() {
7287
const {
7388
fullName,
@@ -81,49 +96,73 @@ export class UserProfileModal extends React.Component<
8196
const { userDetails } = this.props;
8297
return (
8398
<Grid fluid={true} className={classnames(styles.UserEdit)}>
84-
<div style={{display:'flex',flexDirection:'column',justifyContent:'',position:"absolute",marginLeft:'10%',marginTop:'10%',borderRight:'2px solid #D3D3D3'}}>
85-
86-
<div style={{paddingBottom:'10px',paddingRight:'10px',cursor:'pointer'}}
87-
onClick={() => {
88-
this.setState({
89-
currentPage:UserProfileInterfaces.SelectedPage.EDITPROFILE,
90-
});
91-
}}
92-
>
93-
<FontAwesomeIcon icon={faUser} style={{fontSize:'30'}} />
94-
<label style={{paddingLeft:'10px',cursor:'pointer'}}>User Details</label>
95-
</div>
96-
97-
<div style={{paddingBottom:'10px',paddingRight:'10px',cursor:'pointer'}}
98-
onClick={() => {
99-
this.setState({
100-
currentPage:UserProfileInterfaces.SelectedPage.EDITPASSWORD,
101-
});
102-
}}
103-
>
104-
<FontAwesomeIcon icon={faLock} style={{fontSize:'30'}} />
105-
<label style={{paddingLeft:'10px',cursor:'pointer'}}>User Credentials</label>
106-
</div>
99+
<div
100+
style={{
101+
borderRight: '2px solid #D3D3D3',
102+
display: 'flex',
103+
flexDirection: 'column',
104+
justifyContent: '',
105+
marginLeft: '10%',
106+
marginTop: '10%',
107+
position: 'absolute',
108+
}}
109+
>
110+
<div
111+
style={{ paddingBottom: '10px', paddingRight: '10px', cursor: 'pointer' }}
112+
onClick={() => {
113+
this.setState({
114+
currentPage: UserProfileInterfaces.SelectedPage.EDITPROFILE,
115+
});
116+
}}
117+
>
118+
<FontAwesomeIcon icon={faUser} style={{ fontSize: '30' }} />
119+
<label style={{ paddingLeft: '10px', cursor: 'pointer' }}>User Details</label>
120+
</div>
107121

108-
<div style={{paddingBottom:'10px',paddingRight:'10px',cursor:'pointer'}}
122+
<div
123+
style={{ paddingBottom: '10px', paddingRight: '10px', cursor: 'pointer' }}
109124
onClick={() => {
110125
this.setState({
111-
currentPage:UserProfileInterfaces.SelectedPage.USERSTATS,
126+
currentPage: UserProfileInterfaces.SelectedPage.EDITPASSWORD,
112127
});
113-
}}>
114-
<FontAwesomeIcon icon={faChartLine} style={{fontSize:'30'}} />
115-
<label style={{paddingLeft:'10px',paddingRight:'10px',cursor:'pointer'}}>User Stats</label>
116-
</div>
128+
}}
129+
>
130+
<FontAwesomeIcon icon={faLock} style={{ fontSize: '30' }} />
131+
<label style={{ paddingLeft: '10px', cursor: 'pointer' }}>User Credentials</label>
132+
</div>
117133

134+
<div
135+
style={{ paddingBottom: '10px', paddingRight: '10px', cursor: 'pointer' }}
136+
onClick={() => {
137+
this.setState({
138+
currentPage: UserProfileInterfaces.SelectedPage.USERSTATS,
139+
});
140+
}}
141+
>
142+
<FontAwesomeIcon icon={faChartLine} style={{ fontSize: '30' }} />
143+
<label style={{ paddingLeft: '10px', paddingRight: '10px', cursor: 'pointer' }}>
144+
User Stats
145+
</label>
118146
</div>
147+
</div>
119148
<Row
120149
className={
121150
this.state.isPasswordPage
122151
? classnames(styles.editProfileElement)
123152
: classnames(styles.editPasswordElement)
124153
}
125154
>
126-
{this.renderSwitch(this.state.currentPage,username,fullName,userDetails,country,avatar,oldPassword,password,repeatPassword)}
155+
{this.renderSwitch(
156+
this.state.currentPage,
157+
username,
158+
fullName,
159+
userDetails,
160+
country,
161+
avatar,
162+
oldPassword,
163+
password,
164+
repeatPassword,
165+
)}
127166
</Row>
128167
<Row>
129168
<a
@@ -133,13 +172,20 @@ export class UserProfileModal extends React.Component<
133172
: classnames('labeltext', styles.passwordPageLink)
134173
}
135174
onClick={() => {
136-
let newState=this.state.currentPage===UserProfileInterfaces.SelectedPage.EDITPROFILE?UserProfileInterfaces.SelectedPage.EDITPASSWORD:UserProfileInterfaces.SelectedPage.EDITPROFILE;
175+
const newState =
176+
this.state.currentPage === UserProfileInterfaces.SelectedPage.EDITPROFILE
177+
? UserProfileInterfaces.SelectedPage.EDITPASSWORD
178+
: UserProfileInterfaces.SelectedPage.EDITPROFILE;
137179
this.setState({
138-
currentPage: newState
180+
currentPage: newState,
139181
});
140182
}}
141183
>
142-
{ (this.state.currentPage===UserProfileInterfaces.SelectedPage.EDITPROFILE) ? 'Want to change Credentials?' : (this.state.currentPage===UserProfileInterfaces.SelectedPage.EDITPASSWORD) ? 'Want to change Info?':null}
184+
{this.state.currentPage === UserProfileInterfaces.SelectedPage.EDITPROFILE
185+
? 'Want to change Credentials?'
186+
: this.state.currentPage === UserProfileInterfaces.SelectedPage.EDITPASSWORD
187+
? 'Want to change Info?'
188+
: null}
143189
</a>
144190
</Row>
145191
{this.state.isPasswordPage ? (

‎src/app/reducers/ProfileUser.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { ProfileUserActions } from 'app/actions';
2+
import * as ProfileUserInterfaces from 'app/types/ProfileUser';
3+
4+
const profileStoreIntialState: ProfileUserInterfaces.ProfileUserStoreState = {
5+
avatar: '',
6+
college: '',
7+
country: 'IN',
8+
email: '',
9+
fullName: '',
10+
type: '',
11+
userType: ProfileUserInterfaces.ProfileUserType.STUDENT,
12+
username: '',
13+
};
14+
15+
export const profileuserReducer = (
16+
state = profileStoreIntialState,
17+
action: ProfileUserInterfaces.ProfileUserStoreAction,
18+
) => {
19+
switch (action.type) {
20+
case ProfileUserActions.Type.UPDATE_PROFILE_USER_DETAILS: {
21+
const {
22+
avatar,
23+
college,
24+
country,
25+
email,
26+
fullName,
27+
userType,
28+
username,
29+
} = action.payload.profileuserDetails;
30+
31+
return {
32+
...state,
33+
avatar: avatar !== undefined ? avatar : state.avatar,
34+
college: college !== undefined ? college : state.college,
35+
country: country !== undefined ? country : state.country,
36+
email: email !== undefined ? email : state.email,
37+
fullName: fullName !== undefined ? fullName : state.fullName,
38+
type: userType !== undefined ? userType : state.type,
39+
username: username !== undefined ? username : state.username,
40+
};
41+
}
42+
43+
default:
44+
return state;
45+
}
46+
};

‎src/app/reducers/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { gameLogReducer } from 'app/reducers/GameLog';
66
import { leaderboardReducer } from 'app/reducers/Leaderboard';
77
import { matchesReducer } from 'app/reducers/MatchView';
88
import { notificationReducer } from 'app/reducers/Notification';
9+
import { profileuserReducer } from 'app/reducers/ProfileUser';
910
import { userReducer } from 'app/reducers/User';
1011
import * as CodeInterfaces from 'app/types/code/Code';
1112
import * as EditorInterfaces from 'app/types/code/Editor';
@@ -15,6 +16,7 @@ import * as GameLogInterfaces from 'app/types/GameLog';
1516
import * as LeaderboardInterfaces from 'app/types/Leaderboard';
1617
import * as MatchInterfaces from 'app/types/MatchView';
1718
import * as NotificationInterfaces from 'app/types/Notification';
19+
import * as ProfileUserInterfaces from 'app/types/ProfileUser';
1820
import * as UserInterfaces from 'app/types/User';
1921
import { routerReducer, RouterState } from 'react-router-redux';
2022
import { combineReducers } from 'redux';
@@ -27,6 +29,7 @@ export const rootReducer = combineReducers({
2729
leaderboard: leaderboardReducer,
2830
match: matchesReducer,
2931
notification: notificationReducer,
32+
profileUser: profileuserReducer,
3033
router: routerReducer,
3134
submission: submissionReducer,
3235
user: userReducer,
@@ -42,5 +45,6 @@ export interface RootState {
4245
router: RouterState;
4346
gameLog: GameLogInterfaces.GameLogStoreState;
4447
user: UserInterfaces.UserStoreState;
48+
profileuser: ProfileUserInterfaces.ProfileUserStoreState;
4549
submission: SubmissionInterfaces.SubmissionStoreState;
4650
}

0 commit comments

Comments
 (0)