Repair a bug in adding message automatically from Master page

app/actions/commentAction.jsx

@@ -2,12 +2,42 @@
 import * as types from 'actionTypes'
 
 
-// - Comment actions
-
+// - Add comment
 export const addComment = (comment) => {
  return{
  type: types.ADD_POST,
  comment
 
  }
 }
+
+// - Add comment to database
+export const dbAddComment = (newComment,callBack) => {
+ return (dispatch,getState) => {
+
+ var uid = getState().authorize.uid
+ var comment = {
+ postId: newComment.postId,
+ score:0,
+ text: newComment.text,
+ creationDate: moment.unix(),
+ userDisplayName: newComment.userDisplayName,
+ userAvatar: newComment.avatar
+ userId: newComment.userId
+ }
+
+
+ var commentRef = firebaseRef.child(`posts/${postId}/comments/pushId`).push(post)
+ return commentRef.then(()=>{
+ dispatch(addPost({
+ ...post,
+ id: postRef.key
+ }))
+ callBack()
+ })
+
+
+
+ }
+
+}

app/actions/globalActions.jsx

@@ -1,7 +1,7 @@
 // - Import image gallery action types
 import * as types from 'actionTypes'
 
- 
+
 // - Progress change
 export const progressChange = (percent, visible) => {
  return {

app/actions/imageGalleryActions.jsx

@@ -36,6 +36,13 @@ export const clearSelectData = () => {
 
 }
 
+// - Clear all data in image gallery store
+export const clearAllData = () => {
+ return{
+ type: types.CLEAT_ALL_DATA_IMAGE_GALLERY
+ }
+}
+
 // - Download image for image gallery
 export const downloadForImageGallery = () => {
  return (dispatch, getState) => {

app/actions/postActions.jsx

@@ -14,10 +14,14 @@ import * as postWritingActions from 'postWritingActions'
 
 
 
+// - Clea all data in post store
+export const clearAllData = () => {
+ return{
+ type: types.CLEAR_ALL_DATA_POST
+ }
+}
 
-
-// - Post actions
-
+// - Add a post with image
 export const addImagePost = (post) => {
  return{
  type: types.ADD_IMAGE_POST,
@@ -26,6 +30,7 @@ export const addImagePost = (post) => {
 
 }
 
+// - Add a normal post
 export var dbAddPost = (newPost,callBack) => {
  return(dispatch,getState) => {
 

app/components/ImageGallery.jsx

@@ -37,7 +37,7 @@ export class ImageGallery extends Component {
  }
  // Hide component
  close = () => {
- this.props.dispatch(imageGalleryActions.openImageGallery(false))
+ this.props.closeImageGallery()
  if(this.props.postWritingStatus)
  {
  document.body.classList.add('scrolling', 'dimmable', 'dimmed');
@@ -61,7 +61,7 @@ export class ImageGallery extends Component {
 
  // Handle Image uploader
  handleImageUploader = (evt) => {
- this.props.dispatch(imageUploaderActions.openImageUploader(true));
+ this.props.openImageUploader()
  }
 
  // Render DOM
@@ -101,10 +101,30 @@ export class ImageGallery extends Component {
  }
 }
 
-// - Connect component to redux state
-export default withRouter(connect((state) => {
- return {imageGalleryStatus: state.imageGallery.status,
+// - Map dispatch to props
+const mapDispatchToProps = (dispatch, ownProps) => {
+ return{
+ closeImageGallery: () => {
+ dispatch(imageGalleryActions.openImageGallery(false))
+ },
+ openImageGallery: () => {
+ dispatch(imageGalleryActions.openImageGallery(true))
+ },
+ openImageUploader: () => {
+ dispatch(imageUploaderActions.openImageUploader(true));
+ }
+
+ }
+}
+
+// - Map state to props
+const mapStateToProps = (state) => {
+ return {
+ imageGalleryStatus: state.imageGallery.status,
  postWritingStatus: state.postWriting.writeStatus,
  images: state.imageGallery.images
- }
-})(ImageGallery))
+ }
+}
+
+// - Connect component to redux store
+export default withRouter(connect(mapStateToProps,mapDispatchToProps)(ImageGallery))

app/components/Master.jsx

@@ -40,7 +40,8 @@ constructor(props){
  super(props);
  this.state = {
  loading: true,
- authed:false
+ authed:false,
+ dataLoaded:false
  };
  this.handleLoading = this.handleLoading.bind(this)
 
@@ -60,17 +61,24 @@ var {dispatch} = this.props
  this.removeListener = firebaseAuth().onAuthStateChanged((user) => {
 
  if (user) {
-  dispatch(authorizeActions.login(user.uid));
+ this.props.login(user)
  this.setState({
  loading: false
  })
- dispatch(imageGalleryActions.downloadForImageGallery())
- dispatch(postActions.dbGetPosts())
+ if (!this.state.dataLoaded) {
+ this.props.loadData()
+ this.setState({
+ dataLoded: true
+ })
+ }
  } else {
-  dispatch(authorizeActions.logout())
+ this.props.logout()
  this.setState({
  loading: false
  })
+ if(this.state.dataLoaded){
+ this.props.clearData()
+ }
  }
  })
 
@@ -103,11 +111,38 @@ componentWillUnmount = () => {
  }
 }
 
-export default withRouter(connect((state)=>{
+// - Map dispatch to props
+const mapDispatchToProps = (dispatch,ownProps) => {
+ console.log('start');
+ return{
+ loadData: () => {
+ dispatch(imageGalleryActions.downloadForImageGallery())
+ dispatch(postActions.dbGetPosts())
+ },
+ clearData: () => {
+ dispatch(imageGalleryActions.deleteAllData())
+ dispatch(postActions.deleteAllData())
+ },
+ login: (user) => {
+ dispatch(authorizeActions.login(user.uid))
+ },
+ logout: () => {
+ dispatch(authorizeActions.logout())
+ }
+
+
+ }
+ console.log('end');
+}
+
+// - Map state to props
+const mapStateToProps = (state)=>{
  return{
  uid: state.authorize.uid,
  authed: state.authorize.authed,
  global: state.global
  }
 
-})(Master))
+}
+// - Connect commponent to redux store
+export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Master))

app/components/PostWritePage.jsx

@@ -46,23 +46,20 @@ export class PostWritePage extends Component {
 
  // Hide componet
  close = () => {
- var dispatch = this.props.dispatch
- dispatch(imageGalleryActions.clearSelectData())
- dispatch(postWritingActions.clearePostWritePage())
+
  this.setState({
  body: ''
  })
- dispatch(postWritingActions.openPostWritePage(false))
-
+ this.props.closeWriting()
  }
 
  // Show component
  open = () => this.props.dispatch(postWritingActions.openPostWritePage(true))
 
 
- // Handle click to add image on post
+ // Handle click to open image gallery to add image on post
  handleImage= ()=> {
- this.props.dispatch(imageGalleryActions.openImageGallery(true))
+ this.props.openImageGallery()
 
  }
 
@@ -91,21 +88,21 @@ export class PostWritePage extends Component {
  var imageURL = this.props.selectURL
  var tags = PostAPI.getContentTags(this.state.body)
  if (imageURL) {
-  dispatch(postActions.dbAddImagePost({
+ this.props.addPost({
  body : this.state.body,
  tags : tags,
  image: imageURL,
  avatar: this.props.avatar,
  name: this.props.name
- }, this.close))
+ }, this.close)
  }
  else {
- dispatch(postActions.dbAddPost({
+ this.props.addPost({
  body : this.state.body,
  tags : tags,
  avatar: this.props.avatar,
  name: this.props.name
- },this.close))
+ },this.close)
  }
 
 
@@ -173,15 +170,39 @@ export class PostWritePage extends Component {
  }
 }
 
+// - Map dispatch to the props
+const mapDispatchToProps = (dispatch, ownProps) => {
+ return {
+ closeWriting: () => {
+ dispatch(imageGalleryActions.clearSelectData())
+ dispatch(postWritingActions.clearePostWritePage())
+ dispatch(postWritingActions.openPostWritePage(false))
+
+ },
+ openImageGallery: () =>{
+ dispatch(imageGalleryActions.openImageGallery(true))
+ },
+ addPost: (post,callBack) => {
+ console.log(post);
+ dispatch(postActions.dbAddImagePost(post, callBack))
+ }
+ }
+}
+
+// - Map state to props
+const mapStateToProps = (state) => {
+ return {
+ postWriteStatus: state.postWriting.writeStatus,
+ imageGalleryStaus: state.imageGallery.status,
+ selectImage: state.imageGallery.selectImage,
+ avatar: state.global.avatar,
+ name: state.user.info.name,
+ selectURL: state.imageGallery.selectURL,
+ selectImage: state.imageGallery.selectImage
+ }
+}
+
+
+// - Connect component to redux
 export default withRouter(connect(
- (state) => {
- return {
- postWriteStatus: state.postWriting.writeStatus,
- imageGalleryStaus: state.imageGallery.status,
- selectImage: state.imageGallery.selectImage,
- avatar: state.global.avatar,
- name: state.user.info.name,
- selectURL: state.imageGallery.selectURL,
- selectImage: state.imageGallery.selectImage
- }
-})(PostWritePage))
+ mapStateToProps ,mapDispatchToProps)(PostWritePage))

app/constants/actionTypes.jsx

@@ -11,13 +11,15 @@ export const ADD_IMAGE_POST = 'ADD_IMAGE_POST';
 export const ADD_VIDEO_POST = 'ADD_VIDEO_POST';
 export const ADD_POST = 'ADD_POST'
 export const ADD_LIST_POST = 'ADD_LIST_POST'
+export const CLEAR_ALL_DATA_POST = 'CLEAR_ALL_DATA_POST'
 
 /* image gallery actions */
 export const OPEN_IMAGE_GALLERY = 'OPEN_IMAGE_GALLERY';
 export const ADD_IMAGE_GALLERY = 'ADD_IMAGE_GALLERY'
 export const ADD_IMAGE_LIST_GALLERY = 'ADD_IMAGES_LIST_GALLERY'
 export const IMAGE_SELECT_GALLERY = 'IMAGE_SELECT_GALLERY'
 export const CLEARS_SELECT_IMAGE_GALLERY = 'CLEARS_SELECT_IMAGE_GALLERY'
+export const CLEAT_ALL_DATA_IMAGE_GALLERY = 'CLEAT_ALL_DATA_IMAGE_GALLERY'
 
 /* image uploader actions */
 export const OPEN_IMAGE_UPLOADER ='OPEN_IMAGE_UPLOADER';
@@ -51,3 +53,4 @@ export const USER_INFO = 'USER_INFO'
 /* global actions */
 export const PROGRESS_CHANGE = 'PROGRESS_CHANGE'
 export const AVATAR = 'AVATAR'
+export const LOADING = 'LOADING'

app/reducers/commentReducer.jsx

@@ -17,13 +17,7 @@ export var commentReducer = (state = defaultState, action ) =>{
  return[
  ...state,
  {
- id: uuid(),
- postId: state.comment.postId,
- score:0,
- text: state.comment.text,
- creationDate: moment.unix(),
- userDisplayName: state.comment.userDisplayName,
- userId: state.comment.userId
+ ...action.comment
  }
  ]
 

app/reducers/globalReducer.jsx

@@ -6,9 +6,11 @@ import * as types from 'actionTypes'
 var defaultState = {
  percent: '',
  visible: false,
- avatar: ''
+ avatar: '',
+ loadingStatus:true,
+ loadingForce: true
 }
- 
+
 
 // - Global reducer
 export const globalReducer = (state = defaultState, action) => {
@@ -23,7 +25,11 @@ switch (action.type) {
  return{
  avatar: action.avatar
  }
-
+ case types.LOADING:
+ return{
+ loadingStatus: action.status,
+ lodingForce: action.force
+ }
  break;
  default:
  return state