posts.js.cjsx in octodmin-0.2.0

- old
+ new

@@ -3,38 +3,35 @@
 @Posts = React.createClass(
   propTypes:
     site: React.PropTypes.object.isRequired
 
   getInitialState: ->
-    { alert: null, loading: false, posts: null }
+    { loading: false, posts: null }
 
   fetchPosts: ->
     return if @state.loading
     @setState(loading: true)
     $.get("/api/posts").always(@handleResponse).done(@handleSuccess).fail(@handleError)
 
   handleResponse: ->
     @setState(loading: false) if @isMounted()
 
   handleSuccess: (response) ->
-    @setState(alert: null, posts: response.posts) if @isMounted()
+    @setState(posts: response.posts) if @isMounted()
 
   handleError: (error) ->
-    @setState(alert: "Could not load posts: #{error.statusText} (#{error.status})") if @isMounted()
+    $.growl("Could not load posts: #{error.statusText} (#{error.status})", growlError)
 
   componentWillMount: ->
     @fetchPosts()
     $(document).on("fetchPosts", @fetchPosts)
-    @timer = setInterval(@fetchPosts, 5000)
 
   componentWillUnmount: ->
     $(document).off("fetchPosts", @fetchPosts)
-    clearInterval(@timer)
 
   render: ->
     <div>
-      {<div className="alert alert-danger">{@state.alert}</div> if @state.alert}
       <NewPostPartial site={@props.site} />
 
       <Loader loaded={!!@state.posts}>
         {@state.posts?.map(((post) ->
           <PostPartial key={post.identifier} site={@props.site} post={post} />
@@ -57,11 +54,11 @@
 
   propTypes:
     site: React.PropTypes.object.isRequired
 
   getInitialState: ->
-    { alert: null, loading: false }
+    { loading: false }
 
   form: ->
     $(@refs.form.getDOMNode())
 
   handleSubmit: (event) ->
@@ -73,23 +70,20 @@
 
   handleResponse: ->
     @setState(loading: false)
 
   handleSuccess: (response) ->
-    @setState(alert: null)
     @form()[0].reset()
     $(document).trigger("fetchPosts")
     @transitionTo("post_edit", post_id: response.posts.identifier)
 
   handleError: (error) ->
-    @setState(alert: error.responseJSON?.errors.join(", "))
+    $.growl(error.responseJSON?.errors.join(", "), growlError)
 
   render: ->
     <div className="panel panel-default">
       <div className="panel-body">
-        {<div className="alert alert-danger">{@state.alert}</div> if @state.alert}
-
         <form ref="form" className="form-inline" onSubmit={@handleSubmit}>
           <fieldset className="row" disabled={@state.loading}>
             <div className="col-sm-9 form-group form-group-lg">
               <input className="form-control" style={width: '100%'} name="title" placeholder="Type the title of your new post here" required />
             </div>
@@ -108,11 +102,11 @@
   propTypes:
     site: React.PropTypes.object.isRequired
     post: React.PropTypes.object.isRequired
 
   getInitialState: ->
-    { alert: null, loading: false }
+    { loading: false }
 
   panelClass: ->
     if @props.post.added
       "success"
     else if @props.post.changed
@@ -157,27 +151,24 @@
 
   handleResponse: ->
     @setState(loading: false)
 
   handleSuccess: (response) ->
-    @setState(alert: null)
     $(document).trigger("fetchPosts")
 
   handleError: (error) ->
-    @setState(alert: "Could not load post: #{error.statusText} (#{error.status})")
+    $.growl("Could not load post: #{error.statusText} (#{error.status})", growlError)
 
   render: ->
     <div className="panel panel-#{@panelClass()}">
       <div className="panel-heading clearfix">
         <h3 className="panel-title pull-left">{@props.post.title}</h3>
         <div className="pull-right">
-          {moment((new Date(@props.post.date)).toISOString()).format("LLL")}
+          {moment((new Date(@props.post.date.replace(/-/g, "/"))).toISOString()).format("LLL")}
         </div>
       </div>
       <div className="panel-body">
-        {<div className="alert alert-danger">{@state.alert}</div> if @state.alert}
-
         <div className="row">
           <div className="col-sm-9 excerpt" dangerouslySetInnerHTML={{__html: @props.post.excerpt }} />
           <div className="col-sm-3 buttons">
             {if @props.post.deleted
               <div className="btn-group btn-group-sm">
@@ -203,11 +194,11 @@
 
   propTypes:
     site: React.PropTypes.object.isRequired
 
   getInitialState: ->
-    { alert: null, success: null, loading: false, post: null }
+    { loading: false, post: null }
 
   form: ->
     $(@refs.form.getDOMNode())
 
   frontMatter: ->
@@ -235,23 +226,19 @@
 
   handleResponse: ->
     @setState(loading: false)
 
   handleSuccess: (response) ->
-    @setState(alert: null, post: response.posts)
+    @setState(post: response.posts)
 
   handleFormSuccess: (response) ->
-    @setState(alert: null, success: "Post is updated")
-    setTimeout(@removeSuccess, 5000)
+    $.growl("Post is updated", growlSuccess)
     @transitionTo("post_edit", post_id: response.posts.identifier)
 
   handleError: (error) ->
-    @setState(alert: error.responseJSON?.errors.join(", "))
+    $.growl(error.responseJSON?.errors.join(", "), growlError)
 
-  removeSuccess: ->
-    @setState(success: null) if @isMounted()
-
   componentWillMount: ->
     @fetchPost()
 
   componentDidUpdate: ->
     return if !@state.post || !@refs.editor
@@ -266,12 +253,9 @@
         enable: false
     )
 
   render: ->
     <Loader loaded={!!@state.post}>
-      {<div className="alert alert-danger">{@state.alert}</div> if @state.alert}
-      {<div className="alert alert-success">{@state.success}</div> if @state.success}
-
       {if @state.post
         <form ref="form" className="form-horizontal post-edit" onSubmit={@handleSubmit}>
           <fieldset disabled={@state.loading}>
             <div className="form-group">
               <div className="col-sm-8">