psmattas/resolver
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Resolved] Avoid showing header avatar on notification box & resolve unique key error in stream component

Browse Source
This commit is contained in:
Qolzam
2018-02-05 10:57:14 +07:00
parent dc2dfdd73f
commit c2fbbf1bcb
3 changed files with 50 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/notify/NotifyComponent.tsx
View File

@@ -39,6 +39,9 @@ const styles = (theme: any) => ({
}, },
popperClose: { popperClose: {
pointerEvents: 'none' pointerEvents: 'none'
},
popperOpen: {
zIndex: 1
} }
}) })
@@ -121,7 +124,7 @@ export class NotifyComponent extends Component<INotifyComponentProps, INotifyCom
<Popper <Popper
placement='bottom-start' placement='bottom-start'
eventsEnabled={open} eventsEnabled={open}
className={classNames({ [classes.popperClose]: !open })} className={classNames({ [classes.popperClose]: !open }, { [classes.popperOpen]: open })}
> >
<ClickAwayListener onClickAway={onRequestClose}> <ClickAwayListener onClickAway={onRequestClose}>

90
src/components/stream/StreamComponent.tsx
View File

@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Button from 'material-ui/Button' import Button from 'material-ui/Button'
import { grey,teal } from 'material-ui/colors' import { grey, teal } from 'material-ui/colors'
import SvgCamera from 'material-ui-icons/PhotoCamera' import SvgCamera from 'material-ui-icons/PhotoCamera'
import Paper from 'material-ui/Paper' import Paper from 'material-ui/Paper'
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List' import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'
@@ -27,7 +27,7 @@ import { IStreamComponentState } from './IStreamComponentState'
import { Post } from 'core/domain/posts' import { Post } from 'core/domain/posts'
// - Create StreamComponent component class // - Create StreamComponent component class
export class StreamComponent extends Component<IStreamComponentProps,IStreamComponentState> { export class StreamComponent extends Component<IStreamComponentProps, IStreamComponentState> {
static propTypes = { static propTypes = {
/** /**
@@ -47,11 +47,11 @@ export class StreamComponent extends Component<IStreamComponentProps,IStreamComp
} }
styles = { styles = {
postWritePrimaryText : { postWritePrimaryText: {
color: grey[400], color: grey[400],
cursor: 'text' cursor: 'text'
}, },
postWtireItem : { postWtireItem: {
fontWeight: '200' fontWeight: '200'
} }
} }
@@ -60,7 +60,7 @@ export class StreamComponent extends Component<IStreamComponentProps,IStreamComp
* Component constructor * Component constructor
* @param {object} props is an object properties of component * @param {object} props is an object properties of component
*/ */
constructor (props: IStreamComponentProps) { constructor(props: IStreamComponentProps) {
super(props) super(props)
this.state = { this.state = {
@@ -121,14 +121,14 @@ export class StreamComponent extends Component<IStreamComponentProps,IStreamComp
}) })
} }
/** /**
* Create a list of posts * Create a list of posts
* @return {DOM} posts * @return {DOM} posts
*/ */
postLoad = () => { postLoad = () => {
let { posts ,match } = this.props let { posts, match } = this.props
let {tag} = match.params let { tag } = match.params
if (posts === undefined || !(Object.keys(posts).length > 0)) { if (posts === undefined || !(Object.keys(posts).length > 0)) {
return ( return (
@@ -144,13 +144,13 @@ export class StreamComponent extends Component<IStreamComponentProps,IStreamComp
let parsedPosts: any = [] let parsedPosts: any = []
Object.keys(posts).forEach((postId) => { Object.keys(posts).forEach((postId) => {
if (tag) { if (tag) {
let regex = new RegExp('#' + tag,'g') let regex = new RegExp('#' + tag, 'g')
let postMatch = posts[postId].body!.match(regex) let postMatch = posts[postId].body!.match(regex)
if (postMatch !== null) { if (postMatch !== null) {
parsedPosts.push({ ...posts[postId]}) parsedPosts.push({ ...posts[postId] })
} }
} else { } else {
parsedPosts.push({ ...posts[postId]}) parsedPosts.push({ ...posts[postId] })
} }
}) })
@@ -161,13 +161,13 @@ export class StreamComponent extends Component<IStreamComponentProps,IStreamComp
} else { } else {
postBack.divided = false postBack.divided = false
} }
sortedPosts.forEach((post: any, index: any) => { sortedPosts.forEach((post: Post, index: any) => {
let newPost: any = ( let newPost: any = (
<div key={post.id}> <div key={`${post.id!}-stream-div`}>
{index > 1 || (!postBack.divided && index > 0) ? <div style={{ height: '16px' }}></div> : ''} {index > 1 || (!postBack.divided && index > 0) ? <div style={{ height: '16px' }}></div> : ''}
<PostComponent post={post} /> <PostComponent key={`${post.id!}-stream-div-post`} post={post} />
</div> </div>
) )
@@ -187,12 +187,12 @@ export class StreamComponent extends Component<IStreamComponentProps,IStreamComp
* Scroll loader * Scroll loader
*/ */
scrollLoad = (page: number) => { scrollLoad = (page: number) => {
const {loadStream} = this.props const { loadStream } = this.props
loadStream!(page, 10) loadStream!(page, 10)
} }
componentWillMount () { componentWillMount() {
const {setHomeTitle} = this.props const { setHomeTitle } = this.props
setHomeTitle!() setHomeTitle!()
} }
@@ -200,38 +200,38 @@ export class StreamComponent extends Component<IStreamComponentProps,IStreamComp
* Reneder component DOM * Reneder component DOM
* @return {react element} return the DOM which rendered by component * @return {react element} return the DOM which rendered by component
*/ */
render () { render() {
const {tag, displayWriting, hasMorePosts } = this.props const { tag, displayWriting, hasMorePosts } = this.props
const postList = this.postLoad() as {evenPostList: Post[], oddPostList: Post[], divided: boolean} | any const postList = this.postLoad() as { evenPostList: Post[], oddPostList: Post[], divided: boolean } | any
return ( return (
<InfiniteScroll <InfiniteScroll
pageStart={0} pageStart={0}
loadMore={this.scrollLoad} loadMore={this.scrollLoad}
hasMore={hasMorePosts} hasMore={hasMorePosts}
useWindow={true} useWindow={true}
loader={<LoadMoreProgressComponent />} loader={<LoadMoreProgressComponent key='stream-load-more-progress' />}
> >
<div className='grid grid__gutters grid__1of2 grid__space-around animate-top'> <div className='grid grid__gutters grid__1of2 grid__space-around animate-top'>
<div className='grid-cell animate-top' style={{maxWidth: '530px', minWidth: '280px'}}> <div className='grid-cell animate-top' style={{ maxWidth: '530px', minWidth: '280px' }}>
{displayWriting && !tag {displayWriting && !tag
? (<PostWriteComponent open={this.state.openPostWrite} onRequestClose={this.handleClosePostWrite} edit={false} > ? (<PostWriteComponent open={this.state.openPostWrite} onRequestClose={this.handleClosePostWrite} edit={false} >
<Paper elevation={2}> <Paper elevation={2}>
<ListItem button <ListItem button
style={this.styles.postWtireItem as any} style={this.styles.postWtireItem as any}
onClick={this.handleOpenPostWrite} onClick={this.handleOpenPostWrite}
> >
<UserAvatarComponent fullName={this.props.fullName!} fileName={this.props.avatar!} size={36} /> <UserAvatarComponent fullName={this.props.fullName!} fileName={this.props.avatar!} size={36} />
<ListItemText inset primary={<span style={this.styles.postWritePrimaryText as any}> What's new with you? </span>} /> <ListItemText inset primary={<span style={this.styles.postWritePrimaryText as any}> What's new with you? </span>} />
<ListItemIcon> <ListItemIcon>
<SvgCamera /> <SvgCamera />
</ListItemIcon> </ListItemIcon>
</ListItem> </ListItem>
</Paper> </Paper>
<div style={{ height: '16px' }}></div> <div style={{ height: '16px' }}></div>
</PostWriteComponent>) </PostWriteComponent>)
: ''} : ''}
@@ -239,7 +239,7 @@ export class StreamComponent extends Component<IStreamComponentProps,IStreamComp
<div style={{ height: '16px' }}></div> <div style={{ height: '16px' }}></div>
</div> </div>
{postList.divided {postList.divided
? (<div className='grid-cell animate-top' style={{maxWidth: '530px', minWidth: '280px'}}> ? (<div className='grid-cell animate-top' style={{ maxWidth: '530px', minWidth: '280px' }}>
<div className='blog__right-list'> <div className='blog__right-list'>
{postList.oddPostList} {postList.oddPostList}
<div style={{ height: '16px' }}></div> <div style={{ height: '16px' }}></div>
@@ -249,7 +249,7 @@ export class StreamComponent extends Component<IStreamComponentProps,IStreamComp
</div> </div>
</InfiniteScroll> </InfiniteScroll>
) )
} }
} }
@@ -276,7 +276,7 @@ const mapDispatchToProps = (dispatch: any, ownProps: IStreamComponentProps) => {
* @return {object} props of component * @return {object} props of component
*/ */
const mapStateToProps = (state: any, ownProps: IStreamComponentProps) => { const mapStateToProps = (state: any, ownProps: IStreamComponentProps) => {
const {post} = state const { post } = state
return { return {
avatar: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].avatar : '', avatar: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].avatar : '',
fullName: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].fullName : '' fullName: state.user.info && state.user.info[state.authorize.uid] ? state.user.info[state.authorize.uid].fullName : ''

3
tslint.json
View File

@@ -41,8 +41,7 @@
"debug", "debug",
"info", "info",
"time", "time",
"timeEnd", "timeEnd"
"trace"
], ],
"no-consecutive-blank-lines": true, "no-consecutive-blank-lines": true,
"no-construct": true, "no-construct": true,