Merge releases/0.8.0 into release

package.json

@@ -31,6 +31,7 @@
     "react-dom": "~0.14.6",
     "react-dropzone-component": "^0.8.1",
     "react-google-recaptcha": "^0.5.2",
+    "react-helmet": "^2.3.1",
     "react-redux": "~4.0.6",
     "react-router": "^2.0.0",
     "react-router-redux": "^4.0.0",

src/components/create-post.jsx

@@ -68,6 +68,10 @@ export default class CreatePost extends React.Component {
     this.setState({ isMoreOpen: !this.state.isMoreOpen })
   }
 
+  componentWillUnmount() {
+    this.props.resetPostCreateForm()
+  }
+
   render() {
     let props = this.props
 

src/components/discussions.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {connect} from 'react-redux'
-import {createPost, expandSendTo} from '../redux/action-creators'
+import {createPost, resetPostCreateForm, expandSendTo} from '../redux/action-creators'
 import {joinPostData, joinCreatePostData, postActions} from './select-utils'
 import {getQuery} from '../utils'
 
@@ -16,6 +16,7 @@ const FeedHandler = (props) => {
       sendTo={props.sendTo}
       user={props.user}
       createPost={props.createPost}
+      resetPostCreateForm={props.resetPostCreateForm}
       expandSendTo={props.expandSendTo}
       createPostForm={props.createPostForm}
       addAttachmentResponse={props.addAttachmentResponse}
@@ -43,7 +44,7 @@ function selectState(state) {
   const createPostForm = joinCreatePostData(state)
   const timelines = state.timelines
   const boxHeader = state.boxHeader
-  const sendTo = {...state.sendTo, defaultFeed: user.username}
+  const sendTo = {...state.sendTo, defaultFeed: null}
 
   return { user, authenticated, visibleEntries, createPostViewState, createPostForm, timelines, boxHeader, sendTo }
 }
@@ -52,6 +53,7 @@ function selectActions(dispatch) {
   return {
     ...postActions(dispatch),
     createPost: (feeds, postText, attachmentIds, more) => dispatch(createPost(feeds, postText, attachmentIds, more)),
+    resetPostCreateForm: (...args) => dispatch(resetPostCreateForm(...args)),
     expandSendTo: () => dispatch(expandSendTo())
   }
 }

src/components/footer.jsx

@@ -3,7 +3,7 @@ import {Link} from 'react-router'
 
 export default (props) => (
   <footer className="footer">
-    &copy; FreeFeed 0.7.0 (March 2, 2016)<br/>
-    <Link to="/about">About</Link> | <Link to="/freefeed">News</Link> | <a href="https://twitter.com/freefeednet" target="_blank">Twitter</a> | <a href="https://status.freefeed.net/" target="_blank">Status</a>
+    &copy; FreeFeed 0.8.0 (March 19, 2016)<br/>
+    <Link to="/about">About</Link> | <Link to="/freefeed">News</Link> | <a href="https://twitter.com/freefeednet" target="_blank">Twitter</a> | <a href="https://status.freefeed.net/" target="_blank">Status</a> | <a href="https://dev.freefeed.net/" target="_blank">Development</a>
   </footer>
 )

src/components/group-create-form.jsx

@@ -4,29 +4,41 @@ import {Link} from 'react-router'
 import {preventDefault} from '../utils'
 import throbber16 from 'assets/images/throbber-16.gif'
 
+import GroupFeedTypePicker from './group-feed-type-picker'
+
 export default class GroupCreateForm extends React.Component {
   constructor(props) {
     super(props)
 
     this.state = {
       username: '',
       screenName: '',
-      description: ''
+      description: '',
+      isPrivate: '0',
+      isRestricted: '0'
     }
   }
 
   handleChange = (property) => (event) => {
     const newState = {}
     newState[property] = event.target.value
-    this.setState(newState);
+    this.setState(newState)
+  }
+
+  handlePrivacyTypeChange = (privacySettings) => {
+    this.setState(privacySettings)
   }
 
   saveSettings = () => {
     if (this.props.status !== 'loading') {
-      this.props.createGroup(this.state.username, this.state.screenName, this.state.description)
+      this.props.createGroup(this.state)
     }
   }
 
+  componentWillUnmount() {
+    this.props.resetGroupCreateForm()
+  }
+
   render() {
     return (
       <div>
@@ -37,13 +49,16 @@ export default class GroupCreateForm extends React.Component {
               <input id="username" className="form-control" name="username" type="text" value={this.state.username} onChange={this.handleChange('username')}/>
             </div>
             <div className="form-group">
-              <label htmlFor="screenName">Screen name:</label>
+              <label htmlFor="screenName">Display name:</label>
               <input id="screenName" className="form-control" name="screenName" type="text" value={this.state.screenName} onChange={this.handleChange('screenName')}/>
             </div>
             <div className="form-group">
               <label htmlFor="description">Description:</label>
               <textarea id="description" className="form-control" name="description" value={this.state.description} onChange={this.handleChange('description')} maxLength="1500"/>
             </div>
+            <GroupFeedTypePicker isPrivate={this.state.isPrivate}
+                                 isRestricted={this.state.isRestricted}
+                                 updateGroupPrivacySettings={this.handlePrivacyTypeChange} />
             <p>
               <button className="btn btn-default" type="submit">Create</button>
               {this.props.status === 'loading' ? (

src/components/group-create.jsx

@@ -3,7 +3,7 @@ import {Link} from 'react-router'
 import {connect} from 'react-redux'
 import _ from 'lodash'
 
-import {createGroup} from '../redux/action-creators'
+import {createGroup, resetGroupCreateForm} from '../redux/action-creators'
 import GroupCreateForm from './group-create-form'
 import throbber100 from 'assets/images/throbber.gif'
 
@@ -15,6 +15,7 @@ const GroupCreate = (props) => (
     <div className="box-body">
       <GroupCreateForm
         createGroup={props.createGroup}
+        resetGroupCreateForm={props.resetGroupCreateForm}
         {...props.groupCreateForm}/>
     </div>
   </div>
@@ -28,7 +29,8 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    createGroup: (...args) => dispatch(createGroup(...args))
+    createGroup: (...args) => dispatch(createGroup(...args)),
+    resetGroupCreateForm: (...args) => dispatch(resetGroupCreateForm(...args))
   }
 }
 

src/components/group-feed-type-picker.jsx

@@ -0,0 +1,82 @@
+import React from 'react'
+
+export default class GroupFeedTypePicker extends React.Component {
+
+  handleChange = (property) => (event) => {
+    this.props.updateGroupPrivacySettings({ [property]: event.target.value })
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="row form-group">
+          <div className="col-sm-3">
+            <label>Who can view posts:</label>
+          </div>
+
+          <div className="col-sm-9">
+            <label className="option-box">
+              <div className="input">
+                <input type="radio"
+                       name="isPrivate"
+                       value="0"
+                       checked={this.props.isPrivate === '0'} 
+                       onChange={this.handleChange('isPrivate')}/>
+              </div>
+              <div className="option">
+                Everyone (public group)
+              </div>
+            </label>
+
+            <label className="option-box">
+              <div className="input">
+                <input type="radio"
+                       name="isPrivate"
+                       value="1"
+                       checked={this.props.isPrivate === '1'}  
+                       onChange={this.handleChange('isPrivate')}/>
+              </div>
+              <div className="option">
+                Group members (private group)
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <div className="row form-group">
+          <div className="col-sm-3">
+            <label>Who can write posts:</label>
+          </div>
+
+          <div className="col-sm-9">
+            <label className="option-box">
+              <div className="input">
+                <input type="radio"
+                       name="isRestricted"
+                       value="0"
+                       checked={this.props.isRestricted === '0'}  
+                       onChange={this.handleChange('isRestricted')}/>
+              </div>
+              <div className="option">
+                Every group member
+              </div>
+            </label>
+
+            <label className="option-box">
+              <div className="input">
+                <input type="radio"
+                       name="isRestricted"
+                       value="1"
+                       checked={this.props.isRestricted === '1'} 
+                       onChange={this.handleChange('isRestricted')}/>
+              </div>
+              <div className="option">
+                Group administrators only
+              </div>
+            </label>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

src/components/group-settings-form.jsx

@@ -2,46 +2,76 @@ import React from 'react'
 import {preventDefault} from '../utils'
 import throbber16 from 'assets/images/throbber-16.gif'
 
+import GroupFeedTypePicker from './group-feed-type-picker'
+
 export default class GroupSettingsForm extends React.Component {
   constructor(props) {
     super(props)
 
     this.state = {
       screenName: this.props.group.screenName,
-      description: this.props.group.description
+      description: this.props.group.description,
+      isPrivate: this.props.group.isPrivate,
+      isRestricted:  this.props.group.isRestricted,
+      isWarningDisplayed: false
     }
   }
 
   componentWillReceiveProps = (newProps) => {
-    this.setState({
-      screenName: newProps.group.screenName,
-      description: newProps.group.description
-    })
+    if(newProps.status !== "loading") {
+      this.setState({
+        screenName: newProps.group.screenName,
+        description: newProps.group.description,
+        isPrivate: newProps.group.isPrivate,
+        isRestricted: newProps.group.isRestricted,
+        isWarningDisplayed: false
+      })
+    }
   }
 
   handleChange = (property) => (event) => {
     const newState = {}
     newState[property] = event.target.value
-    this.setState(newState);
+    this.setState(newState)
+  }
+
+  handlePrivacyTypeChange = (privacySettings) => {
+    const newState = {
+      ...privacySettings,
+      isWarningDisplayed: (
+        this.props.group.isPrivate == 1 &&
+        privacySettings.hasOwnProperty('isPrivate') &&
+        privacySettings.isPrivate == 0
+      )
+    }
+    this.setState(newState)
   }
 
   saveSettings = () => {
+    this.setState({ isWarningDisplayed: false })
     if (this.props.status !== 'loading') {
-      this.props.updateGroup(this.props.group.id, this.state.screenName, this.state.description)
+      this.props.updateGroup(this.props.group.id, this.state)
     }
   }
 
+  componentWillUnmount() {
+    this.props.resetGroupUpdateForm()
+  }
+
   render() {
     return (
       <form onSubmit={preventDefault(this.saveSettings)}>
         <div className="form-group">
-          <label htmlFor="screenName">Screen name:</label>
+          <label htmlFor="screenName">Display name:</label>
           <input id="screenName" className="form-control" name="screenName" type="text" value={this.state.screenName} onChange={this.handleChange('screenName')}/>
         </div>
         <div className="form-group">
           <label htmlFor="description">Description:</label>
           <textarea id="description" className="form-control" name="description" value={this.state.description} onChange={this.handleChange('description')} maxLength="1500"/>
         </div>
+        <GroupFeedTypePicker isPrivate={this.state.isPrivate}
+                             isRestricted={this.state.isRestricted}
+                             updateGroupPrivacySettings={this.handlePrivacyTypeChange} />
         <p>
           <button className="btn btn-default" type="submit">Update</button>
           {this.props.status === 'loading' ? (
@@ -50,6 +80,11 @@ export default class GroupSettingsForm extends React.Component {
             </span>
           ) : false}
         </p>
+        {this.state.isWarningDisplayed ? (
+          <div className="alert alert-warning" role="alert">
+            You are about to change the group type from private to public. It means anyone will be able to read its posts and comments, which are only available to group members now.
+          </div>
+        ) : false}  
         {this.props.status === 'success' ? (
           <div className="alert alert-info" role="alert">Updated!</div>
         ) : this.props.status === 'error' ? (

src/components/group-settings.jsx

@@ -3,7 +3,7 @@ import {Link} from 'react-router'
 import {connect} from 'react-redux'
 import _ from 'lodash'
 
-import {updateGroup} from '../redux/action-creators'
+import {updateGroup, resetGroupUpdateForm} from '../redux/action-creators'
 import GroupSettingsForm from './group-settings-form'
 import throbber100 from 'assets/images/throbber.gif'
 
@@ -26,6 +26,7 @@ const GroupSettings = (props) => (
         <GroupSettingsForm
           group={props.group}
           updateGroup={props.updateGroup}
+          resetGroupUpdateForm={props.resetGroupUpdateForm}
           {...props.groupSettingsForm}/>
       </div>
     </div>
@@ -53,7 +54,8 @@ function mapStateToProps(state, ownProps) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    updateGroup: (...args) => dispatch(updateGroup(...args))
+    updateGroup: (...args) => dispatch(updateGroup(...args)),
+    resetGroupUpdateForm: (...args) => dispatch(resetGroupUpdateForm(...args))
   }
 }
 

src/components/groups.jsx

@@ -2,8 +2,8 @@ import React from 'react'
 import {connect} from 'react-redux'
 import {Link} from 'react-router'
 
-import TileUserList from './tile-user-list'
-
+import {tileUserListFactory, PLAIN} from './tile-user-list'
+const TileList = tileUserListFactory({type: PLAIN, size: 'large'})
 
 const GroupsHandler = (props) => {
   return (
@@ -21,7 +21,7 @@ const GroupsHandler = (props) => {
           </div>
         </div>
 
-        <TileUserList {...props} size="large" />
+        <TileList users={props.users}/>
       </div>
       <div className="box-footer"></div>
     </div>