[Update Package] Update material UI package which changed the UI code too.

2018-02-01 13:36:28 +07:00
parent 44200f53b4
commit cff405849f
73 changed files with 1999 additions and 1148 deletions
--- a/src/components/commentGroup/CommentGroupComponent.tsx
+++ b/src/components/commentGroup/CommentGroupComponent.tsx
@@ -2,25 +2,73 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import _ from 'lodash'
+import { NavLink } from 'react-router-dom'
 import { connect } from 'react-redux'
+import moment from 'moment'
+
 import Paper from 'material-ui/Paper'
-import FlatButton from 'material-ui/FlatButton'
+import Button from 'material-ui/Button'
 import TextField from 'material-ui/TextField'
 import Divider from 'material-ui/Divider'
-import { ListItem } from 'material-ui/List'
-import { grey400, darkBlack, lightBlack, tealA400 } from 'material-ui/styles/colors'
-import LinearProgress from 'material-ui/LinearProgress'
+import { ListItemIcon, ListItemText, ListItem } from 'material-ui/List'
+import { grey, teal } from 'material-ui/colors'
+import { LinearProgress } from 'material-ui/Progress'
+import { withStyles } from 'material-ui/styles'
+import { Manager, Target, Popper } from 'react-popper'
+import { Card, CardActions, CardHeader, CardMedia, CardContent } from 'material-ui'
+import Grow from 'material-ui/transitions/Grow'
+import ClickAwayListener from 'material-ui/utils/ClickAwayListener'
+import classNames from 'classnames'

 // - Import actions
 import * as commentActions from 'actions/commentActions'

 // - Import app components
 import CommentListComponent from 'components/CommentList'
-import UserAvatarComponent from 'components/userAvatar'
+import UserAvatar from 'components/userAvatar'

 import { ICommentGroupComponentProps } from './ICommentGroupComponentProps'
 import { ICommentGroupComponentState } from './ICommentGroupComponentState'
 import { Comment } from 'core/domain/comments/comment'
+import { ServerRequestModel } from 'models/server';
+import StringAPI from 'api/StringAPI';
+import { ServerRequestType } from 'constants/serverRequestType';
+import { ServerRequestStatusType } from 'actions/serverRequestStatusType';
+
+const styles = (theme: any) => ({
+  textField: {
+    fontWeight: 100,
+    fontSize: '14px'
+  },
+  header: {
+    padding: '2px 3px 3px 10px'
+  },
+  commentBody: {
+    color: 'black',
+    fontWeight: 100,
+    fontSize: '12px',
+    height: '100%',
+    border: 'none',
+    width: '100%',
+    outline: 'none',
+    resize: 'none'
+  },
+  author: {
+    fontSize: '10px',
+    paddingRight: '10px',
+    fontWeight: 400,
+    color: 'rgba(0,0,0,0.87)',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden'
+
+  },
+  noUnderline: {
+    display: 'none'
+  },
+  postButton: {
+    flexDirection: 'row-reverse'
+  }
+})

 /**
 * Create component class
@@ -28,29 +76,29 @@ import { Comment } from 'core/domain/comments/comment'
 export class CommentGroupComponent extends Component<ICommentGroupComponentProps, ICommentGroupComponentState> {

  static propTypes = {
-  /**
-   * If it's true comment box will be open
-   */
+    /**
+     * If it's true comment box will be open
+     */
    open: PropTypes.bool,
-  /**
-   * If it's true the comment is disable to write
-   */
+    /**
+     * If it's true the comment is disable to write
+     */
    disableComments: PropTypes.bool,
-  /**
-   * The post identifier which comment belong to
-   */
+    /**
+     * The post identifier which comment belong to
+     */
    postId: PropTypes.string,
-  /**
-   * If it's true the post owner is the logged in user which this post be long to the comment
-   */
+    /**
+     * If it's true the post owner is the logged in user which this post be long to the comment
+     */
    isPostOwner: PropTypes.bool,
-  /**
-   * Toggle on show/hide comment by passing callback from parent component
-   */
+    /**
+     * Toggle on show/hide comment by passing callback from parent component
+     */
    onToggleRequest: PropTypes.func,
-  /**
-   * The user identifier of the post owner which comment belong to
-   */
+    /**
+     * The user identifier of the post owner which comment belong to
+     */
    ownerPostUserId: PropTypes.string

  }
@@ -66,11 +114,29 @@ export class CommentGroupComponent extends Component<ICommentGroupComponentProps
      zIndex: 5
    },
    writeCommentTextField: {
-      width: '100%'
+      width: '100%',
+      fontWeight: 100,
+      fontSize: '14px'
    },
    progressbar: {
      height: '1.5px',
-      backgroundColor: 'rgb(245, 243, 243)'
+      backgroundColor: 'rgb(245, 243, 243)',
+      color: teal['A400']
+    },
+    secondaryText: {
+      fontSize: '13px',
+      lineHeight: '20px',
+      color: 'rgba(0,0,0,0.87)',
+      fontWeight: 300,
+      whiteSpace: 'pre-wrap'
+    },
+    primaryText: {
+      fontSize: '13px',
+      paddingRight: '10px',
+      fontWeight: 400,
+      color: 'rgba(0,0,0,0.87)',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden'
    }
  }

@@ -121,7 +187,8 @@ export class CommentGroupComponent extends Component<ICommentGroupComponentProps
   * @param  {event} evt is an event passed by change comment text callback funciton
   * @param  {string} data is the comment text which user writes
   */
-  handleOnChange = (evt: any, data: any) => {
+  handleChange = (event: any) => {
+    const data = event.target.value
    this.setState({ commentText: data })
    if (data.length === 0 || data.trim() === '') {
      this.setState({
@@ -142,10 +209,11 @@ export class CommentGroupComponent extends Component<ICommentGroupComponentProps
   * @return {DOM} list of comments' DOM
   */
  commentList = () => {
+    const {classes} = this.props
    let comments = this.props.commentSlides
    if (comments) {
      comments = _.fromPairs(_.toPairs(comments)
-      .sort((a: any, b: any) => parseInt(b[1].creationDate,10) - parseInt(a[1].creationDate,10)))
+        .sort((a: any, b: any) => parseInt(b[1].creationDate, 10) - parseInt(a[1].creationDate, 10)))
      let parsedComments: Comment[] = []
      Object.keys(comments).forEach((commentId) => {
        parsedComments.push({
@@ -160,34 +228,41 @@ export class CommentGroupComponent extends Component<ICommentGroupComponentProps
        parsedComments.push(parsedComments[0])
      }
      return parsedComments.map((comment, index) => {
-        const {userInfo} = this.props
+        const { userInfo } = this.props

        const commentAvatar = userInfo && userInfo[comment.userId!] ? userInfo[comment.userId!].avatar || '' : ''
        const commentFullName = userInfo && userInfo[comment.userId!] ? userInfo[comment.userId!].fullName || '' : ''

-        return (<ListItem key={index} style={this.styles.commentItem as any} innerDivStyle={{ padding: '6px 16px 16px 72px' }}
-          leftAvatar={<UserAvatarComponent fullName={commentFullName} fileName={commentAvatar} style={{ top: '8px' }} size={36} />}
-          secondaryText={<div style={{ height: '' }}>
-            <span style={{
-              fontSize: '13px',
-              paddingRight: '10px',
-              fontWeight: 400,
-              color: 'rgba(0,0,0,0.87)',
-              textOverflow: 'ellipsis',
-              overflow: 'hidden'
-            }}>
-              {comment.userDisplayName}:
-            </span>
-            <span style={{
-              fontSize: '13px',
-              lineHeight: '20px',
-              color: 'rgba(0,0,0,0.87)',
-              fontWeight: 300,
-              whiteSpace: 'pre-wrap'
-            }}>{comment.text}</span>
-          </div>}
-          secondaryTextLines={2}
-        />
+        const commentBody = (
+          <div style={{ outline: 'none', flex: 'auto', flexGrow: 1 }}>
+              <div className={classNames('animate2-top10', classes.commentBody)} >
+              {comment.text}
+              </div>
+          </div>
+        )
+
+        const Author = () => (
+          <div>
+            <NavLink to={`/${comment.userId!}`}> <span className={classes.author}>{comment.userDisplayName}</span></NavLink><span style={{
+              fontWeight: 100,
+              fontSize: '8px'
+            }}>{moment.unix(comment.creationDate!).fromNow()}</span>
+          </div>
+        )
+        return (
+        <Paper key={comment.id! + '-index:' + index} elevation={0} className='animate2-top10'>
+          <Card elevation={0}>
+            <CardHeader
+            className={classes.header}
+              title={ <Author />}
+              avatar={<UserAvatar fullName={commentFullName!} fileName={commentAvatar!} size={24} />}
+              subheader={commentBody}
+            >
+            </CardHeader>
+
+          </Card>
+
+        </Paper>
        )
      })
    }
@@ -198,47 +273,62 @@ export class CommentGroupComponent extends Component<ICommentGroupComponentProps
   * @return {react element} return the DOM which rendered by component
   */
  render () {
-    const {comments} = this.props
+    const { comments, classes, postId, fullName, avatar, getCommentsRequest, open, commentSlides } = this.props

    /**
     * Comment list box
     */
    const commentWriteBox = (<div>
      <Divider />
-      <Paper zDepth={0} className='animate2-top10' style={{ position: 'relative', overflowY: 'auto', padding: '12px 16px', display: (this.props.open ? 'block' : 'none') }}>
-
-        <div style={{ display: 'flex' }}>
-          <UserAvatarComponent fullName={this.props.fullName!} fileName={this.props.avatar!} style={{ flex: 'none', margin: '4px 0px' }} size={36} />
-          <div style={{ outline: 'none', marginLeft: '16px', flex: 'auto', flexGrow: 1 }}>
-            <TextField
-              value={this.state.commentText}
-              onChange={this.handleOnChange}
-              hintText='Add a comment...'
-              underlineShow={false}
-              multiLine={true}
-              rows={1}
-              hintStyle={{ fontWeight: 100, fontSize: '14px' }}
-              rowsMax={4}
-              textareaStyle={{ fontWeight: 100, fontSize: '14px' }}
-              style={this.styles.writeCommentTextField}
-            />
-          </div>
+      <Paper key={postId! + '-commentwrite'} elevation={0} className='animate2-top10'>
+          <Card elevation={0}>
+            <CardHeader
+            className={classes.header}
+              avatar={<UserAvatar fullName={fullName!} fileName={avatar!} size={24} />}
+              subheader={<TextField
+                autoFocus
+                placeholder={'Add a comment...'}
+                multiline
+                rowsMax='4'
+                InputProps={{
+                  disableUnderline: true,
+                  autoFocus: true,
+                  fullWidth: true
+                }}
+                value={this.state.commentText}
+                onChange={this.handleChange}
+                className={classes.textField}
+                fullWidth={true}
+              />}
+            >
+            </CardHeader>
+                <CardActions className={classes.postButton} >
+          <Button color='primary' disabled={this.state.postDisable} onClick={this.handlePostComment}>
+        Post
+        </Button>
+                  </CardActions>
+          </Card>
+        </Paper>
        </div>
-        <FlatButton primary={true} disabled={this.state.postDisable} label='Post' style={{ float: 'right', clear: 'both', zIndex: 5, margin: '0px 5px 5px 0px', fontWeight: 400 }} onClick={this.handlePostComment} />
-      </Paper>
-      </div>)
+)

+    const showComments = ( comments && Object.keys(comments).length > 0
+    ? (<Paper elevation={0} style={open ? { display: 'block', padding: '0px 0px' } : { display: 'none', padding: '12px 16px' }}>
+      <CommentListComponent comments={comments!} isPostOwner={this.props.isPostOwner} disableComments={this.props.disableComments} />
+    </Paper>)
+    : '')
+    const loadComments = (( getCommentsRequest === undefined || (getCommentsRequest && getCommentsRequest!.status !== ServerRequestStatusType.OK)) ? <LinearProgress style={this.styles.progressbar} mode='indeterminate' /> : showComments)
    /**
     * Return Elements
     */
    return (
-      <div>
-        <div style={this.props.commentSlides && Object.keys(this.props.commentSlides).length > 0 ? { display: 'block' } : { display: 'none' }}>
+      <div key={postId + '-comments'}>
+        <div style={commentSlides && Object.keys(commentSlides).length > 0 ? { display: 'block' } : { display: 'none' }}>
          <Divider />
-          <Paper zDepth={0} className='animate-top' style={!this.props.open ? { display: 'block' } : { display: 'none' }}>
+          <Paper elevation={0} className='animate-top' style={!open ? { display: 'block' } : { display: 'none' }}>

            <div style={{ position: 'relative', height: '60px' }} >
-              <FlatButton label='  ' style={this.styles.toggleShowList} fullWidth={true} onClick={this.props.onToggleRequest} />
+              <Button style={this.styles.toggleShowList} fullWidth={true} onClick={this.props.onToggleRequest} > {' '}</Button>

              <div className='comment__list-show'>
                {this.commentList()}
@@ -247,20 +337,14 @@ export class CommentGroupComponent extends Component<ICommentGroupComponentProps
            </div>
          </Paper>
          {
-            !comments
-              ? this.props.open ? <LinearProgress style={this.styles.progressbar} mode='indeterminate' color={tealA400} /> : ''
-              : (Object.keys(comments).length > 0
-                    ? (<Paper zDepth={0} style={this.props.open ? { display: 'block', padding: '0px 0px' } : { display: 'none', padding: '12px 16px' }}>
-                     <CommentListComponent comments={comments} isPostOwner={this.props.isPostOwner} disableComments={this.props.disableComments}/>
-                     </Paper>)
-                     : '')
+            open ? loadComments : ''
          }

        </div>
        {
-          !this.props.disableComments
-          ? commentWriteBox
-          : ''
+          (!this.props.disableComments && open )
+            ? commentWriteBox
+            : ''
        }
      </div>
    )
@@ -276,7 +360,7 @@ export class CommentGroupComponent extends Component<ICommentGroupComponentProps
 const mapDispatchToProps = (dispatch: any, ownProps: ICommentGroupComponentProps) => {
  return {
    send: (text: string, postId: string, callBack: Function) => {
-      dispatch(commentActions.dbAddComment(ownProps.ownerPostUserId,{
+      dispatch(commentActions.dbAddComment(ownProps.ownerPostUserId, {
        postId: postId,
        text: text
      }, callBack))
@@ -291,11 +375,13 @@ const mapDispatchToProps = (dispatch: any, ownProps: ICommentGroupComponentProps
 * @return {object}          props of component
 */
 const mapStateToProps = (state: any, ownProps: ICommentGroupComponentProps) => {
-  const {post, user, authorize} = state
-  const {ownerPostUserId, postId} = ownProps
+  const { post, user, authorize, server } = state
+  const {request} = server
+  const { ownerPostUserId, postId } = ownProps
  const commentSlides = post.userPosts[ownerPostUserId] && post.userPosts[ownerPostUserId][postId] ? post.userPosts[ownerPostUserId][postId].comments : {}
-
+  const getCommentsRequest: ServerRequestModel = request ? request[StringAPI.createServerRequestId(ServerRequestType.CommentGetComments, postId)] : null
  return {
+    getCommentsRequest,
    commentSlides,
    avatar: user.info && user.info[state.authorize.uid] ? user.info[authorize.uid].avatar || '' : '',
    fullName: user.info && user.info[state.authorize.uid] ? user.info[authorize.uid].fullName || '' : '',
@@ -305,4 +391,4 @@ const mapStateToProps = (state: any, ownProps: ICommentGroupComponentProps) => {
 }

 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)(CommentGroupComponent as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(CommentGroupComponent as any) as any)