Skip to content
This repository has been archived by the owner on Jul 2, 2022. It is now read-only.

Commit

Permalink
Merge pull request #122 from ipragmatech/v0.7.0
Browse files Browse the repository at this point in the history 
[Enhancement] Adding features and bugs resolved (#120) , (#119), (#118), (#117), (#116)
  • Loading branch information
@Qolzam
Qolzam authored Jun 29, 2019
2 parents b5e69f6 + 2f99ee1 commit e68125b
Show file tree
Hide file tree
Showing 9 changed files with 263 additions and 235 deletions.
7 changes: 7 additions & 0 deletions cors.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
[
{
"origin": ["http://localhost:3000"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
231 changes: 76 additions & 155 deletions src/components/commentGroup/CommentGroupComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,17 @@ import Paper from '@material-ui/core/Paper';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import StringAPI from 'api/StringAPI';
import classNames from 'classnames';
import CommentListComponent from 'components/commentList';
import UserAvatar from 'components/userAvatar';
import { ServerRequestType } from 'constants/serverRequestType';
import { Comment } from 'core/domain/comments';
import { User } from 'core/domain/users';
import { Map } from 'immutable';
import _ from 'lodash';
import moment from 'moment/moment';
import PropTypes from 'prop-types';
import * as R from 'ramda';
import React, { Component } from 'react';
import { withTranslation } from 'react-i18next';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import * as commentActions from 'store/actions/commentActions';
import { ServerRequestStatusType } from 'store/actions/serverRequestStatusType';
import { userSelector } from 'store/reducers/users/userSelector';
Expand Down Expand Up @@ -163,9 +159,10 @@ export class CommentGroupComponent extends Component<ICommentGroupComponentProps
}

// Binding functions to `this`
this.commentList = this.commentList.bind(this)
this.handlePostComment = this.handlePostComment.bind(this)
this.clearCommentWrite = this.clearCommentWrite.bind(this)
this.commentWriteBox = this.commentWriteBox.bind(this)
this.loadCommentsList = this.loadCommentsList.bind(this)
}

/**
Expand Down Expand Up @@ -208,179 +205,103 @@ export class CommentGroupComponent extends Component<ICommentGroupComponentProps

}

/**
* Get comments' DOM
* @return {DOM} list of comments' DOM
*/
commentList = () => {
const {classes} = this.props
let comments = Map(this.props.commentSlides!).toJS()
if (comments) {
comments = _.fromPairs(_.toPairs(comments)
.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({
id: commentId,
...comments![commentId]
})
})
if (parsedComments.length === 2) {
parsedComments.push(parsedComments[0])
} else if (parsedComments.length === 1) {
parsedComments.push(parsedComments[0])
parsedComments.push(parsedComments[0])
}
return parsedComments.map((comment, index) => {
const commentAvatar = comment.userAvatar
const commentFullName = comment.userDisplayName

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: 400,
fontSize: '8px'
}}>{moment(comment.creationDate!).local().fromNow()}</span>
</div>
)
return (
<Paper key={comment.id! + '-index:' + index} elevation={0} className='animate2-top10'>
<Card elevation={0}>
<CardHeader
classes={{content: classes.cardHeaderContent}}
className={classes.header}
title={<Author />}
avatar={<UserAvatar fullName={commentFullName!} fileName={commentAvatar!} size={24} />}
subheader={commentBody}
>
</CardHeader>

</Card>

</Paper>
)
})
}
}

shouldComponentUpdate(nextProps: ICommentGroupComponentProps, nextState: ICommentGroupComponentState) {

let shouldUpdate = false

if (!R.equals(this.state, nextState)) {
shouldUpdate = true
}

if (nextProps.open !== this.props.open) {
} else if (nextProps.open !== this.props.open) {
shouldUpdate = true
}

if (nextProps.disableComments !== this.props.disableComments) {
} else if (nextProps.disableComments !== this.props.disableComments) {
shouldUpdate = true
}

if (nextProps.commentsRequestStatus !== this.props.commentsRequestStatus) {
} else if (nextProps.commentsRequestStatus !== this.props.commentsRequestStatus) {
shouldUpdate = true
}

if (!nextProps.commentSlides!.equals(this.props.commentSlides!)) {
} else if ((nextProps.comments!) !== (this.props.comments!)) {
shouldUpdate = true
}

if (!nextProps.comments!.equals(this.props.comments!)) {
shouldUpdate = true
}

return shouldUpdate
}

/**
* Comment list box
*/
commentWriteBox = () => {
const { classes, postId, fullName, avatar, t } = this.props
return (
<div>
<Divider />
<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={t!('comment.addCommentPlaceholder')}
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}>
{t!('comment.postButton')}
</Button>
</CardActions>
</Card>
</Paper>
</div>
)
}

/**
* Loading Comments listItem
*
*/
loadCommentsList = () => {
const { postId, commentsRequestStatus, open} = this.props
const comments: Map<string, Comment> = this.props.comments || Map({})
const showComments = (comments! ? (
<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} postId={postId}/>
</Paper>) : '')
const loadComments = ((commentsRequestStatus === ServerRequestStatusType.Sent) ? <LinearProgress style={this.styles.progressbar} variant='indeterminate' /> : showComments)
return (
loadComments
)
}

/**
* Reneder component DOM
*
*
*/
render () {
const { classes, postId, fullName, avatar, commentsRequestStatus, open, commentSlides, t } = this.props
const comments: Map<string, Comment> = this.props.comments || Map({})
/**
* Comment list box
*/
const commentWriteBox = (
<div>
<Divider />
<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={t!('comment.addCommentPlaceholder')}
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}>
{t!('comment.postButton')}
</Button>
</CardActions>
</Card>
</Paper>
</div>
)

const showComments = ( !comments.isEmpty()
? (
<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} postId={postId}/>
</Paper>)
: '')
const loadComments = ((commentsRequestStatus === ServerRequestStatusType.Sent) ? <LinearProgress style={this.styles.progressbar} variant='indeterminate' /> : showComments)
const { postId, open} = this.props
/**
* Return Elements
*/
return (
<div key={postId + '-comments-group'}>
<Divider />
<div style={commentSlides && !commentSlides.isEmpty() ? { display: 'block' } : { display: 'none' }}>
<div style={open ? { display: 'block' } : { display: 'none' }}>
<Paper elevation={0} className='animate-top' style={!open ? { display: 'block' } : { display: 'none' }}>

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

<div className='comment__list-show'>
{this.commentList()}

</div>
</div>
</Paper>

</Paper>
</div>
{
open ? loadComments : ''
}
{
(!this.props.disableComments && open )
? commentWriteBox
: ''
}
{open ? this.loadCommentsList() : ''}
{(!this.props.disableComments && open ) ? this.commentWriteBox() : ''}
</div>
)
}
Expand All @@ -404,16 +325,16 @@ const mapDispatchToProps = (dispatch: any, ownProps: ICommentGroupComponentProps
* Map state to props
*/
const mapStateToProps = (state: Map<string, any>, ownProps: ICommentGroupComponentProps) => {
const { ownerPostUserId, postId } = ownProps
const { postId } = ownProps
const uid = state.getIn(['authorize', 'uid'], 0)
const requestId = StringAPI.createServerRequestId(ServerRequestType.CommentGetComments, postId)
const commentsRequestStatus = state.getIn(['server', 'request', requestId])
const commentSlides = state.getIn(['post', 'entities', ownerPostUserId, postId, 'comments'], Map({}))
// const commentSlides = state.getIn(['post', 'entities', ownerPostUserId, postId, 'comments'], Map({}))
const user = userSelector.getUserProfileById(state, {userId: uid}).toJS() as User
return {

commentsRequestStatus : commentsRequestStatus ? commentsRequestStatus.status : ServerRequestStatusType.NoAction,
commentSlides,
// commentSlides,
avatar: user.avatar || '',
fullName: user.fullName || ''

Expand Down
17 changes: 10 additions & 7 deletions src/components/followDialog/FollowDialogComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,11 +114,12 @@ export class FollowDialogComponent extends Component<IFollowDialogProps, IFollow

if (followRequest && followRequest.status === ServerRequestStatusType.Sent) {
return
}
if (!isFollowed) {
} else if (isFollowed) {
this.onRequestOpenAddCircle()
} else if (followingCircle!) {
followUser!(followingCircle!.get('id'), { avatar, userId, fullName })
} else {
this.onRequestOpenAddCircle()
followUser!(userId, { avatar, userId, fullName })
}
}

Expand All @@ -141,8 +142,10 @@ export class FollowDialogComponent extends Component<IFollowDialogProps, IFollow
* Handle request open for add circle box
*/
onRequestOpenAddCircle = () => {
const { openSelectCircles, userId } = this.props
openSelectCircles!(userId)
const { openSelectCircles, userId, followingCircle } = this.props
if (followingCircle!){
openSelectCircles!(userId)
}
}

/**
Expand Down Expand Up @@ -239,7 +242,7 @@ export class FollowDialogComponent extends Component<IFollowDialogProps, IFollow

/**
* Reneder component DOM
*
*
*/
render() {
const { disabledDoneCircles } = this.state
Expand Down Expand Up @@ -365,7 +368,7 @@ const mapStateToProps = (state: Map<string, any>, ownProps: IFollowDialogProps)
const isSelecteCirclesOpen = state.getIn(['circle', 'openSelecteCircles', ownProps.userId], [])
const userBox = userSelector.getUserProfileById(state, { userId: ownProps.userId }).toJS() as User
return {

isSelecteCirclesOpen,
isFollowed,
selectedCircles,
Expand Down
Loading

0 comments on commit e68125b

Please sign in to comment.