Merge master into release 0.6.3

src/components/create-post.jsx

@@ -35,9 +35,11 @@ export default class CreatePost extends React.Component {
       disabled: true,
       isMoreOpen: false
     })
-    attachmentIds.forEach(attachmentId => this.props.removeAttachment(null, attachmentId))
+    attachmentIds.forEach(this.removeAttachment)
   }
 
+  removeAttachment = (attachmentId) => this.props.removeAttachment(null, attachmentId)
+
   isPostTextEmpty = (postText) => {
     return postText == '' || /^\s+$/.test(postText)
   }
@@ -170,7 +172,10 @@ export default class CreatePost extends React.Component {
             disabled={this.state.disabled || this.props.createPostViewState.isPending}>Post</button>
         </div>
 
-        <PostAttachments attachments={this.props.createPostForm.attachments}/>
+        <PostAttachments
+          attachments={this.props.createPostForm.attachments}
+          isEditing={true}
+          removeAttachment={this.removeAttachment}/>
 
         <div className="dropzone-previews"></div>
 

src/components/feed.jsx

@@ -38,6 +38,7 @@ export default (props) => {
         saveEditingPost={props.saveEditingPost}
         deletePost={props.deletePost}
         addAttachmentResponse={props.addAttachmentResponse}
+        removeAttachment={props.removeAttachment}
         toggleCommenting={props.toggleCommenting}
         updateCommentingText={props.updateCommentingText}
         addComment={props.addComment}

src/components/footer.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 export default (props) => (
   <footer className='footer p-footer'>
-    &copy; FreeFeed 0.6.1 (February 1, 2016)<br/>
+    &copy; FreeFeed 0.6.3 (February 8, 2016)<br/>
     <a href="https://about.freefeed.net" target="_blank">About</a> | <a href="http://news.freefeed.net" target="_blank">Public News</a> | <a href="https://twitter.com/freefeednet" target="_blank">Twitter</a> | <a href="http://freefeed.reformal.ru/" target="_blank">Reformal: suggest new features</a>
   </footer>
 )

src/components/post-attachment-audio.jsx

@@ -13,16 +13,22 @@ export default (props) => {
     artistAndTitle = props.fileName + ' (' + formattedFileSize + ')'
   }
 
+  const removeAttachment = () => props.removeAttachment(props.id)
+
   return (
-    <div className='attachment'>
+    <div className="attachment">
       <div>
-        <audio src={props.url} title={artistAndTitle} preload='none' controls></audio>
+        <audio src={props.url} title={artistAndTitle} preload="none" controls></audio>
       </div>
       <div>
         <a href={props.url} title={artistAndTitle} target="_blank">
-          <i className='fa fa-file-audio-o'></i>
+          <i className="fa fa-file-audio-o"></i>
           <span>{artistAndTitle}</span>
         </a>
+
+        {props.isEditing ? (
+          <i className="remove-attachment fa fa-times" title="Remove audio file" onClick={removeAttachment}></i>
+        ) : false}
       </div>
     </div>
   )

src/components/post-attachment-general.jsx

@@ -5,12 +5,18 @@ export default (props) => {
   const formattedFileSize = numeral(props.fileSize).format('0.[0] b')
   const nameAndSize = props.fileName + ' (' + formattedFileSize + ')'
 
+  const removeAttachment = () => props.removeAttachment(props.id)
+
   return (
-    <div className='attachment'>
+    <div className="attachment">
       <a href={props.url} title={nameAndSize} target="_blank">
-        <i className='fa fa-file-o'></i>
+        <i className="fa fa-file-o"></i>
         <span>{nameAndSize}</span>
       </a>
+
+      {props.isEditing ? (
+        <i className="remove-attachment fa fa-times" title="Remove file" onClick={removeAttachment}></i>
+      ) : false}
     </div>
   )
 }

src/components/post-attachment-image.jsx

@@ -5,15 +5,21 @@ export default (props) => {
   const formattedFileSize = numeral(props.fileSize).format('0.[0] b')
   const nameAndSize = props.fileName + ' (' + formattedFileSize + ')'
 
+  const removeAttachment = () => props.removeAttachment(props.id)
+
   return (
-    <div className='attachment'>
+    <div className="attachment">
       <a href={props.url} title={nameAndSize} target="_blank">
         {props.thumbnailUrl ? (
           <img src={props.thumbnailUrl} alt={nameAndSize} />
         ) : (
           props.id
         )}
       </a>
+
+      {props.isEditing ? (
+        <a className="remove-attachment fa fa-times" title="Remove image" onClick={removeAttachment}></a>
+      ) : false}
     </div>
   )
 }

src/components/post-attachments.jsx

@@ -8,15 +8,33 @@ export default (props) => {
 
   const imageAttachments = attachments
     .filter(attachment => attachment.mediaType === 'image')
-    .map(attachment => (<ImageAttachment key={attachment.id} {...attachment}/>))
+    .map(attachment => (
+      <ImageAttachment
+        key={attachment.id}
+        isEditing={props.isEditing}
+        removeAttachment={props.removeAttachment}
+        {...attachment}/>
+    ))
 
   const audioAttachments = attachments
     .filter(attachment => attachment.mediaType === 'audio')
-    .map(attachment => (<AudioAttachment key={attachment.id} {...attachment}/>))
+    .map(attachment => (
+      <AudioAttachment
+        key={attachment.id}
+        isEditing={props.isEditing}
+        removeAttachment={props.removeAttachment}
+        {...attachment}/>
+    ))
 
   const generalAttachments = attachments
     .filter(attachment => attachment.mediaType === 'general')
-    .map(attachment => (<GeneralAttachment key={attachment.id} {...attachment}/>))
+    .map(attachment => (
+      <GeneralAttachment
+        key={attachment.id}
+        isEditing={props.isEditing}
+        removeAttachment={props.removeAttachment}
+        {...attachment}/>
+    ))
 
   return (attachments.length > 0 ? (
     <div className="attachments">

src/components/post-likes.jsx

@@ -3,45 +3,45 @@ import React from 'react'
 import UserName from './user-name'
 import {preventDefault} from '../utils'
 
-const renderLike = (user) => (
-  <li className="p-timeline-user-like" key={user.id}>
-    <UserName user={user}/>
-    <span>,&#32;</span>
-  </li>
-)
+const renderLike = (item, i, items) => (
+  <li key={item.id}>
+    {item.id !== 'more-likes' ? (
+      <UserName user={item}/>
+    ) : (
+      <a onClick={preventDefault(item.showMoreLikes)}>{item.omittedLikes} other people</a>
+    )}
 
-const renderLastLike = (user, omittedLikes = 0, showMoreLikes = null) => (
-  <li className="p-timeline-user-like" key={user.id}>
-    <UserName user={user}/>
-    <span>
-    { omittedLikes > 0 ? (
-      <span>
-        &nbsp;and&nbsp;
-        <a onClick={preventDefault(showMoreLikes)}>
-          {omittedLikes} other people
-        </a>
-      </span>
-    ) : false }
-    &nbsp;liked this
-    </span>
+    {i < items.length - 2 ? (
+      <span>, </span>
+    ) : i === items.length - 2 ? (
+      <span> and </span>
+    ) : (
+      <span> liked this</span>
+    )}
   </li>
 )
 
 export default ({likes, showMoreLikes, post}) => {
-  const hasLikes = likes.length > 0
-  const _showMoreLikes = () => showMoreLikes(post.id)
-  const likes_exclude_last = likes.slice(0, likes.length - 1).map(renderLike)
-  const last = hasLikes && likes[likes.length - 1]
-  const rendered_last = last ? renderLastLike(last, post.omittedLikes, _showMoreLikes) : false
+  if (!likes.length) {
+    return <div/>
+  }
+
+  const likeList = likes
+
+  if (post.omittedLikes) {
+    likeList.push({
+      id: 'more-likes',
+      omittedLikes: post.omittedLikes,
+      showMoreLikes: () => showMoreLikes(post.id)
+    })
+  }
 
-  const rendered_likes = rendered_last ? [...likes_exclude_last, rendered_last] : likes_exclude_last
+  const renderedLikes = likeList.map(renderLike)
 
-  return (hasLikes ? (
+  return (
     <div className="likes">
       <i className="fa fa-heart icon"></i>
-      <ul className="p-timeline-user-likes">
-        {rendered_likes}
-      </ul>
+      <ul>{renderedLikes}</ul>
     </div>
-  ) : <div/>)
+  )
 }

src/components/post.jsx

@@ -17,6 +17,8 @@ import {getToken} from '../services/auth'
 import PostMoreMenu from './post-more-menu'
 
 export default class Post extends React.Component {
+  removeAttachment = (attachmentId) => this.props.removeAttachment(this.props.id, attachmentId)
+
   render() {
     let props = this.props
 
@@ -285,7 +287,10 @@ export default class Post extends React.Component {
             </div>
           )}
 
-          <PostAttachments attachments={props.attachments}/>
+          <PostAttachments
+            attachments={props.attachments}
+            isEditing={props.isEditing}
+            removeAttachment={this.removeAttachment}/>
 
           <div className="dropzone-previews"></div>
 

src/components/sidebar.jsx

@@ -76,8 +76,10 @@ export default ({user, signOut, recentGroups}) => (
         You can even attach thumbnails of images from the page you share!
       </div>
       <div className='box-footer'>
-        Click and drag ​
-        <a className='bookmarklet-button' href="BOOKMARKLET_PLACEHOLDER" onclick='return false'>Share on FreeFeed</a>
+        Click and drag
+        {' '}
+        <a className="bookmarklet-button" href="BOOKMARKLET_PLACEHOLDER" onClick={preventDefault(() => false)}>Share on FreeFeed</a>
+        {' '}
         to&nbsp;your toolbar.
       </div>
     </div>

src/components/single-post.jsx

@@ -28,6 +28,7 @@ const SinglePostHandler = (props) => {
         saveEditingPost={props.saveEditingPost}
         deletePost={props.deletePost}
         addAttachmentResponse={props.addAttachmentResponse}
+        removeAttachment={props.removeAttachment}
         toggleCommenting={props.toggleCommenting}
         updateCommentingText={props.updateCommentingText}
         addComment={props.addComment}

src/components/user-feed.jsx

@@ -27,7 +27,8 @@ const UserFeedHandler = (props) => {
           createPostViewState={props.createPostViewState}
           createPost={props.createPost}
           createPostForm={props.createPostForm}
-          addAttachmentResponse={props.addAttachmentResponse}/>
+          addAttachmentResponse={props.addAttachmentResponse}
+          removeAttachment={props.removeAttachment}/>
       </div>
       {props.viewUser.blocked ?
         false :
@@ -48,8 +49,8 @@ function selectState(state) {
   const timelines = state.timelines
   const boxHeader = state.boxHeader
   const foundUser = Object.getOwnPropertyNames(state.users)
-  .map(key => state.users[key] || state.subscribers[key])
-  .filter(user => user.username === state.router.params.userName)[0]
+    .map(key => state.users[key] || state.subscribers[key])
+    .filter(user => user.username === state.router.params.userName)[0]
 
   const amIGroupAdmin = (
     authenticated &&
@@ -58,24 +59,24 @@ function selectState(state) {
     ((foundUser.administrators || []).indexOf(state.user.id) > -1)
   )
 
+  const currentRouteName = getCurrentRouteName(state.router)
+  const isItPostsPage = ['userComments', 'userLikes'].indexOf(currentRouteName) === -1
+
   const statusExtension = {
     authenticated,
     isLoading: state.routeLoadingState,
     isUserFound: !!foundUser,
     isItMe: (foundUser ? foundUser.username === user.username : false),
-    amIGroupAdmin: amIGroupAdmin,
+    isItPostsPage,
+    amIGroupAdmin,
     subscribed: authenticated && foundUser && (user.subscriptions.indexOf(foundUser.id) !== -1),
     blocked: authenticated && foundUser && (user.banIds.indexOf(foundUser.id) > -1),
   }
 
   const viewUser = {...(foundUser), ...statusExtension}
 
-  const currentRouteName = getCurrentRouteName(state.router)
-
-  const shouldShowBreadcrumbs = ['userComments', 'userLikes'].indexOf(currentRouteName) !== -1
-
   const breadcrumbs = {
-    shouldShowBreadcrumbs,
+    shouldShowBreadcrumbs: !isItPostsPage,
     user: viewUser,
     breadcrumb: currentRouteName.replace('user','')
   }

src/components/user-profile.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import {Link} from 'react-router'
-import {preventDefault} from '../utils'
+
+import {preventDefault, pluralForm} from '../utils'
 import CreatePost from './create-post'
+import PieceOfText from './piece-of-text'
 
 export default props => (
 <div>
@@ -16,33 +18,33 @@ export default props => (
           </div>
           <div className="description">
             <div className="name">{props.screenName}</div>
-            <div>{props.description}</div>
+            <PieceOfText text={props.description}/>
           </div>
         </div>
         {props.statistics && !props.blocked ? (
           <div className="col-sm-3 col-xs-12">
             <div className="profile-stats">
-              {props.statistics.subscriptions >= 0 ? (
+              {props.type !== 'group' && props.statistics.subscriptions >= 0 ? (
                 <div className="profile-stats-item">
-                  <Link to={`/${props.username}/subscriptions`}>{props.statistics.subscriptions} subscriptions</Link>
+                  <Link to={`/${props.username}/subscriptions`}>{pluralForm(props.statistics.subscriptions, 'subscription')}</Link>
                 </div>
               ) : false}
-              <wbr/>
+              {' '}
               {props.statistics.subscribers >= 0 ? (
                 <div className="profile-stats-item">
-                  <Link to={`/${props.username}/subscribers`}>{props.statistics.subscribers} subscribers</Link>
+                  <Link to={`/${props.username}/subscribers`}>{pluralForm(props.statistics.subscribers, 'subscriber')}</Link>
                 </div>
               ) : false}
-              <wbr/>
-              {props.statistics.comments >= 0 ? (
+              {' '}
+              {props.type !== 'group' && props.statistics.comments >= 0 ? (
                 <div className="profile-stats-item">
-                  <Link to={`/${props.username}/comments`}>{props.statistics.comments} comments</Link>
+                  <Link to={`/${props.username}/comments`}>{pluralForm(props.statistics.comments, 'comment')}</Link>
                 </div>
               ) : false}
-              <wbr/>
-              {props.statistics.likes >= 0 ? (
+              {' '}
+              {props.type !== 'group' && props.statistics.likes >= 0 ? (
                 <div className="profile-stats-item">
-                  <Link to={`/${props.username}/likes`}>{props.statistics.likes} likes</Link>
+                  <Link to={`/${props.username}/likes`}>{pluralForm(props.statistics.likes, 'like')}</Link>
                 </div>
               ) : false}
             </div>
@@ -81,14 +83,15 @@ export default props => (
     )
   ) : false}
 
-  {props.isItMe || (props.type === 'group' && props.subscribed) ? (
+  {(props.isItMe && props.isItPostsPage) || (props.type === 'group' && props.subscribed) ? (
     <CreatePost
       createPostViewState={props.createPostViewState}
       sendTo={props.sendTo}
       user={props.user}
       createPost={props.createPost}
       expandSendTo={props.expandSendTo}
       createPostForm={props.createPostForm}
-      addAttachmentResponse={props.addAttachmentResponse}/>
+      addAttachmentResponse={props.addAttachmentResponse}
+      removeAttachment={props.removeAttachment}/>
   ) : false}
 </div>)