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;

app/javascript/containers/Post.tsx

@@ -17,6 +17,8 @@ const mapDispatchToProps = (dispatch) => ({
   },
 
   changePostStatus(postId: number, newPostStatusId: number, authenticityToken: string) {
+    if (isNaN(newPostStatusId)) newPostStatusId = null;
+
     dispatch(changePostStatus(postId, newPostStatusId, authenticityToken));
   },
 });

app/javascript/stylesheets/application.scss

@@ -9,4 +9,14 @@
 
 .gravatar {
   border-radius: 16px;
+}
+
+.dot {
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-right: 4px;
 }

app/javascript/stylesheets/components/Board.scss

@@ -199,16 +199,6 @@
   }
 }
 
-.dot {
-  width: 16px;
-  height: 16px;
-  border-radius: 100%;
-
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-right: 4px;
-}
-
 .infoText {
   display: block;
   text-align: center;

app/javascript/stylesheets/components/Roadmap.scss

@@ -34,12 +34,6 @@
       border-bottom-width: 1px;
       margin-bottom: 8px;
     }
-    
-    .dot {
-      width: 16px;
-      height: 16px;
-      border-radius: 100%;
-    }
 
     .infoText {
       text-align: center;
@@ -47,7 +41,6 @@
     }
     
     .columnTitle {
-      margin: 0 8px;
       font-weight: 700;
     }