Improve UI avatar and solve delete image bug

app/actions/imageGalleryActions.jsx

@@ -94,7 +94,7 @@ export const dbSaveImage = (imageURL,imageFullPath) => {
  * Delete an image from database
  * @param  {string} id of image
  */
-export const dbDeleteImage = (fullPath) => {
+export const dbDeleteImage = (id) => {
   return (dispatch, getState) => {
 
     // Get current user id
@@ -102,11 +102,11 @@ export const dbDeleteImage = (fullPath) => {
 
     // Write the new data simultaneously in the list
     var updates = {};
-    updates[`userFiles/${uid}/files/${fullPath}`] = null;
+    updates[`userFiles/${uid}/files/images/${id}`] = null;
 
     return firebaseRef.update(updates).then((result) => {
-      dispatch(deleteImage(fullPath))
+      dispatch(deleteImage(id))
-      console.log('image removed: ', fullPath);
+      console.log('image removed: ', id);
     }, (error) => {
       console.log(error);
     });

app/actions/userActions.jsx

@@ -85,7 +85,7 @@ export const dbUpdateUserInfo = (newInfo) => {
     let info = getState().user.info[uid]
     let updatedInfo = {
       avatar: newInfo.avatar || info.avatar || '',
-      banner: newInfo.banner || info.banner || '',
+      banner: newInfo.banner || info.banner || 'https://firebasestorage.googleapis.com/v0/b/open-social-33d92.appspot.com/o/images%2F751145a1-9488-46fd-a97e-04018665a6d3.JPG?alt=media&token=1a1d5e21-5101-450e-9054-ea4a20e06c57',
       email: newInfo.email || info.email || '',
       fullName: newInfo.fullName || info.fullName || '',
       tagLine: newInfo.tagLine || info.tagLine || ''

app/components/Blog.jsx

@@ -208,7 +208,7 @@ export class Blog extends Component {
 
                     <ListItem
                       primaryText={<span style={{ color: grey400, cursor: "text" }}> What's new with you? </span>}
-                      leftAvatar={<UserAvatar fileName={this.props.avatar} size={36} />}
+                      leftAvatar={<UserAvatar fullName={this.props.fullName} fileName={this.props.avatar} size={36} />}
                       rightIcon={<SvgCamera />}
                       style={{ padding: "7px 0px", fontWeight: "200" }}
                       onTouchTap={this.handleOpenPostWrite}
@@ -263,7 +263,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
 const mapStateToProps = (state, ownProps) => {
   return {
     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 : ''
   }
 }
 

app/components/Circle.jsx

@@ -145,7 +145,7 @@ export class Circle extends Component {
           style={{backgroundColor: '#e2e2e2'}}
             value={2}
             primaryText={fullName}
-            leftAvatar={<UserAvatar fileName={avatar}/>}
+            leftAvatar={<UserAvatar fullName={fullName} fileName={avatar}/>}
             onClick={()=> this.props.goTo(`/${key}`)}
           />)
         

app/components/Comment.jsx

@@ -255,7 +255,7 @@ export class Comment extends Component {
       <div className="animate-top" style={styles.comment} key={comment.id}>
         <Paper zDepth={0} className="animate2-top10" style={{ position: "relative", padding: "", display: (!this.state.display ? "block" : "none") }}>
           <div style={{ marginLeft: "0px", padding: "16px 56px 0px 72px", position: "relative" }}>
-            <NavLink to={`/${userId}`}><UserAvatar fileName={this.props.avatar} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", position: "absolute", top: "8px", left: "16px" }} size={36} /></NavLink>
+            <NavLink to={`/${userId}`}><UserAvatar fullName={this.props.fullName} fileName={this.props.avatar} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", position: "absolute", top: "8px", left: "16px" }} size={36} /></NavLink>
            <NavLink to={`/${userId}`}> <Author /></NavLink>
             {(!this.props.isCommentOwner && !this.props.isPostOwner && this.props.disableComments )? '' : (<RightIconMenu />)}
             <div style={{ outline: "none", marginLeft: "16px", flex: "auto", flexGrow: 1 }}>
@@ -300,11 +300,13 @@ const mapDispatchToProps = (dispatch, ownProps) => {
 const mapStateToProps = (state, ownProps) => {
   const {uid} = state.authorize
   const avatar = state.user.info && state.user.info[ownProps.comment.userId] ? state.user.info[ownProps.comment.userId].avatar || '' : ''
+  const fullName = state.user.info && state.user.info[ownProps.comment.userId] ? state.user.info[ownProps.comment.userId].fullName || '' : ''
   return {
     uid: uid,
     isCommentOwner: (uid === ownProps.comment.userId),
     info: state.user.info,
-    avatar
+    avatar,
+    fullName
     
 
   }

app/components/CommentGroup.jsx

@@ -142,9 +142,10 @@ static propTypes = {
         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={{ height: "60px", position: "", zIndex: "" }} innerDivStyle={{ padding: "6px 16px 16px 72px" }}
-          leftAvatar={<UserAvatar fileName={commentAvatar} style={{ top: "8px" }} size={36} />}
+          leftAvatar={<UserAvatar fullName={commentFullName} fileName={commentAvatar} style={{ top: "8px" }} size={36} />}
           secondaryText={<div style={{ height: "" }}>
             <span style={{
               fontSize: "13px",
@@ -209,7 +210,7 @@ static propTypes = {
         <Paper zDepth={0} className="animate2-top10" style={{ position: "relative", overflowY: "auto", padding: "12px 16px", display: (this.props.open ? "block" : "none") }}>
 
           <div style={{ display: "flex" }}>
-            <UserAvatar fileName={this.props.avatar} style={{ flex: "none", margin: "4px 0px" }} size={36} />
+            <UserAvatar 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}
@@ -261,6 +262,7 @@ const mapStateToProps = (state, ownProps) => {
   return {
     comments: state.comment.postComments[ownProps.postId],
     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 || '' : '',
     userInfo: state.user.info 
 
   }

app/components/EditProfile.jsx

@@ -88,7 +88,7 @@ export class EditProfile extends Component {
             /**
              * User banner address
              */
-            banner: this.props.banner || '',
+            banner: this.props.banner || 'https://firebasestorage.googleapis.com/v0/b/open-social-33d92.appspot.com/o/images%2F751145a1-9488-46fd-a97e-04018665a6d3.JPG?alt=media&token=1a1d5e21-5101-450e-9054-ea4a20e06c57',
             /**
              * User avatar address
              */
@@ -348,7 +348,7 @@ export class EditProfile extends Component {
                                     <SvgCamera style={{ fill: 'rgba(255, 255, 255, 0.88)', transform: 'translate(6px, 6px)' }} />
 
                                 </div>
-                                <UserAvatar fileName={this.state.avatar} size={90} style={styles.avatar} />
+                                <UserAvatar fullName={(this.props.info ? this.props.info.fullName : '')} fileName={this.state.avatar} size={90} style={styles.avatar} />
                             </div>
                             <div className='info'>
                                 <div className='fullName'>

app/components/HomeHeader.jsx

@@ -231,6 +231,7 @@ export class HomeHeader extends Component {
             {/* User avatar*/}
             <UserAvatar
               onTouchTap={this.handleAvatarTouchTap}
+              fullName={this.props.fullName}
               fileName={this.props.avatar}
               size={32}
               style={styles.avatarStyle}
@@ -276,6 +277,7 @@ const mapStateToProps = (state, ownProps) => {
   : 0
   return {
     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 : '',
     title: state.global.headerTitle,
     notifyCount
   }

app/components/ImageGallery.jsx

@@ -68,8 +68,8 @@ export class ImageGallery extends Component {
    * @param  {event} evt  passed by on click event on delete image
    * @param  {integer} id is the image identifier which selected to delete
    */
-  handleDeleteImage = (evt, fullPath) => {
+  handleDeleteImage = (evt, id) => {
-    this.props.deleteImage(fullPath)
+    this.props.deleteImage(id)
   }
 
   componentDidMount() {
@@ -88,12 +88,10 @@ export class ImageGallery extends Component {
   handleSendResizedImage = (event) => {
 
     const { resizedImage, fileName } = event.detail
-    const {saveImageGallery} = this.props
+    const {saveImageGallery, progressChange} = this.props
-    
+
     FileAPI.uploadImage(resizedImage, fileName, (percent, status) => {
-      console.log('============= Upload progress ===============');
+      progressChange(percent,status)
-      console.log(percent);
-      console.log('====================================');
     }).then((result) => {
 
       /* Add image to image gallery */
@@ -126,7 +124,7 @@ export class ImageGallery extends Component {
 
       return (<GridTile
         key={image.id}
-        title={<SvgDelete hoverColor={grey200} color="white" color="white" style={{ marginLeft: "5px", cursor: "pointer" }} onClick={evt => this.handleDeleteImage(evt, image.fullPath)} />}
+        title={<SvgDelete hoverColor={grey200} color="white" color="white" style={{ marginLeft: "5px", cursor: "pointer" }} onClick={evt => this.handleDeleteImage(evt, image.id)} />}
         subtitle={<span></span>}
         actionIcon={<SvgAddImage hoverColor={grey200} color="white" style={{ marginRight: "5px", cursor: "pointer" }} onClick={evt => this.handleSetImage(evt, image.URL,image.fullPath)} />}
       >
@@ -225,7 +223,8 @@ export class ImageGallery extends Component {
 const mapDispatchToProps = (dispatch, ownProps) => {
   return {
     saveImageGallery: (imageURL,imageFullPath) => dispatch(imageGalleryActions.dbSaveImage(imageURL,imageFullPath)),
-    deleteImage: (fullPath) => dispatch(imageGalleryActions.dbDeleteImage(fullPath))
+    deleteImage: (id) => dispatch(imageGalleryActions.dbDeleteImage(id)),
+    progressChange : (percent,status) => dispatch(globalActions.progressChange(percent, status))
 
   }
 }

app/components/NotifyItem.jsx

@@ -101,7 +101,7 @@ export class NotifyItem extends Component {
                             goTo(`/${notifierUserId}`)
                         }}
                     >
-                        <UserAvatar fileName={avatar} />
+                        <UserAvatar fullName={fullName} fileName={avatar} />
                     </NavLink>
                 </div>
                 <div className='info'>

app/components/Post.jsx

@@ -349,14 +349,14 @@ static propTypes = {
       </IconMenu>
     )
 
-    const {ownerUserId,setHomeTitle, goTo, ownerDisplayName,creationDate, avatar, isPostOwner,image, body} = this.props
+    const {ownerUserId,setHomeTitle, goTo, ownerDisplayName,creationDate, avatar, fullName, isPostOwner,image, body} = this.props
     // Define variables
     return (
       <Card>
         <CardHeader
           title={<NavLink to={`/${ownerUserId}`}>{ownerDisplayName}</NavLink>}
           subtitle={moment.unix(creationDate).fromNow() + " | public"}
-          avatar={<NavLink to={`/${ownerUserId}`}><UserAvatar fileName={avatar} size={36} /></NavLink>}
+          avatar={<NavLink to={`/${ownerUserId}`}><UserAvatar fullName={fullName} fileName={avatar} size={36} /></NavLink>}
         >
          {isPostOwner ? ( <div style={styles.rightIconMenu}><RightIconMenu /></div>) : ''}
         </CardHeader>
@@ -482,6 +482,7 @@ const mapStateToProps = (state, ownProps) => {
 
   return {
     avatar: state.user.info && state.user.info[ownProps.ownerUserId] ? state.user.info[ownProps.ownerUserId].avatar || '' : '',
+    fullName: state.user.info && state.user.info[ownProps.ownerUserId] ? state.user.info[ownProps.ownerUserId].fullName || '' : '',
     commentCount: state.comment.postComments[ownProps.id] ? Object.keys(state.comment.postComments[ownProps.id]).length : 0,
     voteCount: state.vote.postVotes[ownProps.id] ? Object.keys(state.vote.postVotes[ownProps.id]).length : 0,
     userVoteStatus: votes && Object.keys(votes).filter((key) => votes[key].userId === state.authorize.uid)[0] ? true : false,

app/components/PostWrite.jsx

@@ -329,7 +329,7 @@ export class PostWrite extends Component {
         <MenuItem onClick={this.handleToggleSharing} style={{ fontSize: "14px" }}>{!this.state.disableSharing ? 'Disable sharing' : 'Enable sharing'}</MenuItem>
       </IconMenu>
     )
-    var postAvatar = <UserAvatar fileName={this.props.avatar} style={{ top: "8px" }} size={40} />
+    var postAvatar = <UserAvatar fullName={this.props.name} fileName={this.props.avatar} style={{ top: "8px" }} size={40} />
 
     var author = (
       <div>

app/components/ProfileHead.jsx

@@ -181,7 +181,8 @@ export class ProfileHead extends Component {
             <div>
                 <Parallax strength={500} className="profile__parallax" bgStyle={{ position: 'relative' }}>
                     <Background>
-                        <ImgCover width='100%' height='510px' borderRadius='2px' fileName={this.props.banner || "a955488e-4a78-4bfb-8e8d-e0eb345386cd.jpeg"} />
+                        <ImgCover width='100%' height='510px' borderRadius='2px' 
+                        fileName={this.props.banner || "https://firebasestorage.googleapis.com/v0/b/open-social-33d92.appspot.com/o/images%2F751145a1-9488-46fd-a97e-04018665a6d3.JPG?alt=media&token=1a1d5e21-5101-450e-9054-ea4a20e06c57"} />
                     </Background>
 
                 </Parallax>
@@ -192,7 +193,7 @@ export class ProfileHead extends Component {
                     />
                     <div className='left'>
                         {/* User avatar*/}
-                        <div style={{ display: 'flex', justifyContent: 'center' }}><UserAvatar fileName={this.props.avatar} size={60} style={styles.avatar} /></div>
+                        <div style={{ display: 'flex', justifyContent: 'center' }}><UserAvatar fullName={this.props.fullName} fileName={this.props.avatar} size={60} style={styles.avatar} /></div>
                         <div className='info'>
                             <div className='fullName'>
                                 {this.props.fullName}

app/components/UserAvatar.jsx

@@ -16,7 +16,7 @@ import * as imageGalleryActions from 'imageGalleryActions'
 /**
  * Create component class
  */
-export class ImgCover extends Component {
+export class UserAvatar extends Component {
 
   static propTypes = {
 
@@ -24,6 +24,10 @@ export class ImgCover extends Component {
      * Use for getting url address from server
      */
     fileName: PropTypes.string.isRequired,
+    /**
+     * User full name
+     */
+    fullName: PropTypes.string.isRequired,
     /**
      * Avatar style
      */
@@ -62,11 +66,14 @@ export class ImgCover extends Component {
    * @return {react element} return the DOM which rendered by component
    */
   render() {
-    let { fileName, style, size, onTouchTap } = this.props
+    let { fileName, fullName, style, size, onTouchTap } = this.props
 
     return (
-      <Avatar src={fileName || ''} size={size || 36} style={style} onTouchTap={onTouchTap} />
+      <div style={{display: 'inherit'}}>
-
+       {(fileName && fileName !== '' && fileName !== 'noImage' ) 
+       ? ( <Avatar backgroundColor='#ffffff' src={fileName} size={size || 36} style={style} onTouchTap={onTouchTap} />)
+        : (<Avatar backgroundColor='#00bcd4' size={size || 36} style={style} onTouchTap={onTouchTap}>{fullName.slice(0, 1)}</Avatar>) }
+      </div>
     )
   }
 }
@@ -99,4 +106,4 @@ const mapStateToProps = (state, ownProps) => {
 }
 
 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)(ImgCover)
+export default connect(mapStateToProps, mapDispatchToProps)(UserAvatar)

app/components/UserBox.jsx

@@ -200,6 +200,7 @@ export class UserBox extends Component {
                 }}>
                     <div onClick={() => this.props.goTo(`/${this.props.userId}`)} style={{cursor:'pointer'}}>
                         <UserAvatar
+                            fullName={this.props.fullName}
                             fileName={this.props.avatar}
                             size={90}
                         />
@@ -285,7 +286,8 @@ const mapStateToProps = (state, ownProps) => {
         userBelongCircles: userBelongCircles || [],
         belongCirclesCount: userBelongCircles.length || 0,
         firstBelongCircle: userBelongCircles ? (circles ? circles[userBelongCircles[0]] : {}) : {},
-        avatar: state.user.info && state.user.info[ownProps.userId] ? state.user.info[ownProps.userId].avatar || '' : ''
+        avatar: state.user.info && state.user.info[ownProps.userId] ? state.user.info[ownProps.userId].avatar || '' : '',
+        fullName: state.user.info && state.user.info[ownProps.userId] ? state.user.info[ownProps.userId].fullName || '' : ''
     }
 }