From 5fb4b4095f59e1cd40a7ce8c5e9254077372ac80 Mon Sep 17 00:00:00 2001 From: Qolzam Date: Sun, 25 Feb 2018 22:36:28 +0700 Subject: [PATCH] [New Feature] Add more fields for edit profile --- package.json | 1 + public/index.html | 2 +- src/actions/userActions.ts | 18 ++- .../editProfile/EditProfileComponent.tsx | 114 +++++++++++++++--- .../editProfile/IEditProfileComponentState.ts | 25 ++++ .../shareDialog/ShareDialogComponent.tsx | 8 +- src/core/domain/users/profile.ts | 6 +- src/locale/en.json | 4 + yarn.lock | 23 +++- 9 files changed, 172 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 550513c..27c1cbe 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "lodash": "^4.17.4", "material-ui": "^1.0.0-beta.34", "material-ui-icons": "^1.0.0-beta.17", + "material-ui-pickers": "^1.0.0-beta.15.1", "moment": "^2.18.1", "morgan": "^1.8.1", "node-sass-chokidar": "0.0.3", diff --git a/public/index.html b/public/index.html index 9d705e0..bf397a4 100644 --- a/public/index.html +++ b/public/index.html @@ -106,7 +106,7 @@ padding: 0.01em 16px; } - + diff --git a/src/actions/userActions.ts b/src/actions/userActions.ts index 6ab3075..8ac7b66 100644 --- a/src/actions/userActions.ts +++ b/src/actions/userActions.ts @@ -34,7 +34,11 @@ export const dbGetUserInfo = () => { fullName: userProfile.fullName, banner: userProfile.banner, tagLine: userProfile.tagLine, - creationDate: userProfile.creationDate + creationDate: userProfile.creationDate, + birthday: userProfile.birthday, + companyName: userProfile.companyName, + webUrl: userProfile.webUrl, + twitterId: userProfile.twitterId, })) }) .catch((error: SocialError) => dispatch(globalActions.showMessage(error.message))) @@ -63,7 +67,11 @@ export const dbGetUserInfoByUserId = (uid: string, callerKey: string) => { fullName: userProfile.fullName, banner: userProfile.banner, tagLine: userProfile.tagLine, - creationDate: userProfile.creationDate + creationDate: userProfile.creationDate, + birthday: userProfile.birthday, + companyName: userProfile.companyName, + webUrl: userProfile.webUrl, + twitterId: userProfile.twitterId, })) switch (callerKey) { @@ -87,7 +95,7 @@ export const dbGetUserInfoByUserId = (uid: string, callerKey: string) => { */ export const dbUpdateUserInfo = (newProfile: Profile) => { return (dispatch: any, getState: Function) => { - + console.trace('newProfile', newProfile) // Get current user id let uid: string = getState().authorize.uid @@ -98,6 +106,10 @@ export const dbUpdateUserInfo = (newProfile: Profile) => { email: newProfile.email || profile.email || '', fullName: newProfile.fullName || profile.fullName || '', tagLine: newProfile.tagLine || profile.tagLine || '', + birthday: newProfile.birthday, + companyName: newProfile.companyName || '', + webUrl: newProfile.webUrl || '', + twitterId: newProfile.twitterId || '', creationDate: newProfile.creationDate } return userService.updateUserProfile(uid,updatedProfile).then(() => { diff --git a/src/components/editProfile/EditProfileComponent.tsx b/src/components/editProfile/EditProfileComponent.tsx index 01fbf7c..243f309 100644 --- a/src/components/editProfile/EditProfileComponent.tsx +++ b/src/components/editProfile/EditProfileComponent.tsx @@ -3,6 +3,7 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import PropTypes from 'prop-types' import { getTranslate, getActiveLanguage } from 'react-localize-redux' +import moment from 'moment/moment' import { grey } from 'material-ui/colors' import IconButton from 'material-ui/IconButton' @@ -25,6 +26,7 @@ import TextField from 'material-ui/TextField' import Input, { InputLabel } from 'material-ui/Input' import { FormControl, FormHelperText } from 'material-ui/Form' import { withStyles } from 'material-ui/styles' +import { TimePicker, DatePicker, DateTimePicker } from 'material-ui-pickers' // - Import app components import ImgCover from 'components/imgCover' @@ -72,11 +74,19 @@ const styles = (theme: any) => ({ width: '100%' } }, - bottomSpace: { + bottomPaperSpace: { height: 16, [theme.breakpoints.down('xs')]: { height: 90 } + }, + box: { + padding: '0px 24px 0px', + display: 'flex' + + }, + bottomTextSpace: { + marginBottom: 15 } }) @@ -130,11 +140,6 @@ export class EditProfileComponent extends Component { - const { fullNameInput, tagLineInput, avatar, banner } = this.state + const { fullNameInput, tagLineInput, avatar, banner, selectedBirthday, companyName, webUrl, twitterId} = this.state + const {info} = this.props if (this.state.fullNameInput.trim() === '') { this.setState({ @@ -274,7 +300,11 @@ export class EditProfileComponent extends Component 0 ? selectedBirthday : ((info && info.birthday) ? info!.birthday! : 0) }) } } @@ -313,6 +343,14 @@ export class EditProfileComponent extends Component { + console.trace('changed', date) + this.setState({ selectedBirthday: date.unix() }) + } + componentDidMount() { this.handleResize(null) } @@ -324,6 +362,7 @@ export class EditProfileComponent extends Component @@ -385,31 +424,70 @@ export class EditProfileComponent extends Component
{translate!('profile.personalInformationLabel')}
-
- +
+ {translate!('profile.fullName')} + value={this.state.fullNameInput} + /> {this.state.fullNameInputError}
-
-
- +
+ {translate!('profile.tagline')} + value={this.state.tagLineInput} + /> {this.state.fullNameInputError}
-
+
+ +
+
+ +
+
+ +
+
+ +
+
-
+
diff --git a/src/components/editProfile/IEditProfileComponentState.ts b/src/components/editProfile/IEditProfileComponentState.ts index 154dc4d..b477878 100644 --- a/src/components/editProfile/IEditProfileComponentState.ts +++ b/src/components/editProfile/IEditProfileComponentState.ts @@ -65,4 +65,29 @@ export interface IEditProfileComponentState { */ openAvatar: boolean + /** + * Default birth day + */ + defaultBirthday: Date + + /** + * Seleted birth day + */ + selectedBirthday: number + + /** + * Web URL + */ + webUrl: string + + /** + * User company name + */ + companyName: string + + /** + * User twitter id + */ + twitterId: string + } diff --git a/src/components/shareDialog/ShareDialogComponent.tsx b/src/components/shareDialog/ShareDialogComponent.tsx index 6573d5b..e34f9b8 100644 --- a/src/components/shareDialog/ShareDialogComponent.tsx +++ b/src/components/shareDialog/ShareDialogComponent.tsx @@ -105,7 +105,7 @@ export class ShareDialogComponent extends Component @@ -121,7 +121,7 @@ export class ShareDialogComponent extends Component @@ -137,7 +137,7 @@ export class ShareDialogComponent extends Component @@ -153,7 +153,7 @@ export class ShareDialogComponent extends Component diff --git a/src/core/domain/users/profile.ts b/src/core/domain/users/profile.ts index dc7cbbe..c50f63d 100644 --- a/src/core/domain/users/profile.ts +++ b/src/core/domain/users/profile.ts @@ -7,7 +7,11 @@ export class Profile extends BaseDomain { public banner: string, public tagLine: string, public creationDate: number, - public email?: string | null + public email?: string | null, + public birthday?: number, + public webUrl?: string, + public companyName?: string, + public twitterId?: string ) { super() diff --git a/src/locale/en.json b/src/locale/en.json index fd92ef1..9325ab8 100644 --- a/src/locale/en.json +++ b/src/locale/en.json @@ -60,6 +60,10 @@ "updateButton": "UPDATE", "fullName": "Full Name", "tagline": "Tagline", + "birthday": "Birthday", + "companyName": "Company Name", + "twitterId": "Twitter", + "webUrl": "Web address", "personalInformationLabel": "Personal Information", "headPostsLabel": "${userName}'s posts", "nothingSharedLabel": " Nothing shared", diff --git a/yarn.lock b/yarn.lock index b08eb74..9188a5b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2076,7 +2076,7 @@ es6-set@~0.1.5: es6-symbol "3.1.1" event-emitter "~0.3.5" -es6-symbol@3.1.1, es6-symbol@^3.1.1, es6-symbol@~3.1.1: +es6-symbol@3.1.1, es6-symbol@^3.1.0, es6-symbol@^3.1.1, es6-symbol@~3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77" dependencies: @@ -4426,6 +4426,13 @@ material-ui-icons@^1.0.0-beta.17: dependencies: recompose "^0.26.0" +material-ui-pickers@^1.0.0-beta.15.1: + version "1.0.0-beta.15.1" + resolved "https://registry.yarnpkg.com/material-ui-pickers/-/material-ui-pickers-1.0.0-beta.15.1.tgz#37f29e8e26a1b5fbc8a183a61fe1d8f9e830d47c" + dependencies: + moment-range "^3.0.3" + react-text-mask "^5.0.2" + material-ui@^1.0.0-beta.34: version "1.0.0-beta.34" resolved "https://registry.yarnpkg.com/material-ui/-/material-ui-1.0.0-beta.34.tgz#bea328d3d34df7ab8bf01c936d08adee11195b80" @@ -4660,6 +4667,12 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd dependencies: minimist "0.0.8" +moment-range@^3.0.3: + version "3.1.1" + resolved "https://registry.yarnpkg.com/moment-range/-/moment-range-3.1.1.tgz#5c52cf9fab29db9dd9bcd86d37e52b04a7a7271a" + dependencies: + es6-symbol "^3.1.0" + moment@^2.18.1: version "2.20.1" resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd" @@ -5871,7 +5884,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0: +prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0: version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -6276,6 +6289,12 @@ react-tap-event-plugin@^3.0.2: dependencies: fbjs "^0.8.6" +react-text-mask@^5.0.2: + version "5.1.0" + resolved "https://registry.yarnpkg.com/react-text-mask/-/react-text-mask-5.1.0.tgz#490aa519aae73398d491edd675c821dc947b764b" + dependencies: + prop-types "^15.5.6" + react-transition-group@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"