23 - Post Detial View

Author: codingforentrepreneurs

src/reactify-ui/src/posts/PostDetail.js

@@ -5,33 +5,75 @@ class PostDetail extends Component {
     constructor(props){
         super(props)
         this.state = {
-             slug: null
+             slug: null,
+             post: null,
+             doneLoading: false,
         }
     }
+
+    loadPost(slug){
+      const endpoint = `/api/posts/${slug}/` 
+      let thisComp = this
+      let lookupOptions = {
+          method: "GET",
+          headers: {
+              'Content-Type': 'application/json'
+          }
+      }
+
+      fetch(endpoint, lookupOptions)
+      .then(function(response){
+          if (response.status == 404){
+              console.log('Page not found')
+          }
+          return response.json()
+      }).then(function(responseData){
+          if (responseData.detail){
+              thisComp.setState({
+                  doneLoading: true,
+                  post: null
+              })
+          } else {
+           thisComp.setState({
+                  doneLoading: true,
+                  post: responseData
+              })
+          }
+      }).catch(function(error){
+          console.log("error", error)
+      })
+  }
     componentDidMount(){
         this.setState({
-                slug: null
+                slug: null,
+                post: null
             })
         if (this.props.match){
             const {slug} = this.props.match.params
             this.setState({
-                slug: slug
+                slug: slug,
+                doneLoading: false
             })
+            this.loadPost(slug)
         }
     }
     render(){
-        const {slug} = this.state
+        const {doneLoading} = this.state
+        const {post} = this.state
         return(
-            <p>{(slug !== null) ? <div>
-
-                {slug}
+            <p>{(doneLoading === true) ? <div>
+                {post === null ? "Not Found": 
+                <div>
+                <h1>{post.title}</h1>
+                {post.slug}
 
                 <p className='lead'><Link maintainScrollPosition={false} to={{
                     pathname: `/posts`,
                     state: { fromDashboard: false }
                   }}>Posts</Link></p>
-
-           </div> : "Not found"}</p>
+                </div>
+               }
+           </div> : "Loading..."}</p>
         )
     }
 }