Improve Post component

app/javascript/components/Board/PostListItem.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import PostStatusLabel from '../shared/PostStatusLabel';
+
 import IPostStatus from '../../interfaces/IPostStatus';
 
 interface Props {
@@ -26,15 +28,7 @@ const PostListItem = ({ id, title, description, postStatus}: Props) => (
           <span className="comment icon"></span>
           <span>0 comments</span>
         </div>
-        {
-          postStatus ?
-            <div className="postDetailsStatus">
-              <div className="dot" style={{backgroundColor: postStatus.color}}></div>
-              <span className="postStatusName">{postStatus.name}</span>
-            </div>
-          :
-            null
-        }
+        { postStatus ? <PostStatusLabel {...postStatus} /> : null }
       </div>
     </div>
   </a>

app/javascript/components/Board/PostStatusListItem.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import PostStatusLabel from '../shared/PostStatusLabel';
+
 interface Props {
   name: string;
   color: string;
@@ -19,8 +21,7 @@ const PostStatusListItem = ({
   <div className={"postStatusListItemContainer " + `postStatus${name.replace(/ /g, '')}`}>
     <a onClick={handleClick} className="postStatusListItemLink">
       <div className="postStatusListItem">
-        <div className="dot" style={{backgroundColor: color}}></div>
-        <span className="postStatusName">{name}</span>
+        <PostStatusLabel id={undefined} name={name} color={color} />
       </div>
     </a>
     {

app/javascript/components/Post/PostP.tsx

@@ -4,6 +4,7 @@ import IPost from '../../interfaces/IPost';
 import IPostStatus from '../../interfaces/IPostStatus';
 
 import PostStatusSelect from './PostStatusSelect';
+import PostStatusLabel from '../shared/PostStatusLabel';
 
 interface Props {
   postId: number;
@@ -39,9 +40,9 @@ class PostP extends React.Component<Props> {
 
     return (
       <div>
-        <h1>{post.title}</h1>
+        <h2>{post.title}</h2>
         {
-          isPowerUser ?
+          isPowerUser && post ?
             <PostStatusSelect
               postStatuses={postStatuses}
               selectedPostStatusId={post.postStatusId}
@@ -50,7 +51,9 @@ class PostP extends React.Component<Props> {
               }
             />
           :
-            <span>LLL</span>
+            <PostStatusLabel
+              {...postStatuses.find(postStatus => postStatus.id === post.postStatusId)}
+            />
         }
 
         <p>{post.description}</p>

app/javascript/components/Post/PostStatusSelect.tsx

@@ -18,7 +18,7 @@ const PostStatusSelect = ({
   handleChange,
 }: Props) => (
   <select
-    value={selectedPostStatusId || ''}
+    value={selectedPostStatusId || 'none'}
     onChange={
       (e: FormEvent) => (
         handleChange(parseInt((e.target as HTMLSelectElement).value))
@@ -30,7 +30,7 @@ const PostStatusSelect = ({
         {postStatus.name}
       </option>
     ))}
-    <option>None</option>
+    <option value="none">None</option>
   </select>
 );
 

app/javascript/components/shared/PostStatusLabel.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import IPostStatus from '../../interfaces/IPostStatus';
+
+const PostStatusLabel = ({
+  id,
+  name,
+  color,
+}: IPostStatus) => (
+  <div style={{display: 'flex'}}>
+    <div className="dot" style={{backgroundColor: color}}></div>
+    <span className="postStatusName">{name}</span>
+  </div>
+);
+
+export default PostStatusLabel;