Add select to change board of post

app/javascript/components/Post/PostBoardSelect.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { FormEvent } from 'react';
+
+import IBoard from '../../interfaces/IBoard';
+
+interface Props {
+  boards: Array<IBoard>;
+  selectedBoardId: number;
+  
+  handleChange(
+    newBoardId: number,
+  ): void;
+}
+
+const PostBoardSelect = ({
+  boards,
+  selectedBoardId,
+  handleChange,
+}: Props) => (
+  <select
+    value={selectedBoardId || 'Loading...'}
+    onChange={
+      (e: FormEvent) => (
+        handleChange(parseInt((e.target as HTMLSelectElement).value))
+    )}
+    id="selectPickerBoard"
+    className="selectPicker"
+  >
+    <optgroup label="Boards">
+      {boards.map((board, i) => (
+        <option value={board.id} key={i}>
+          {board.name}
+        </option>
+      ))}
+    </optgroup>
+  </select>
+);
+
+export default PostBoardSelect;

app/javascript/components/Post/PostP.tsx

@@ -2,8 +2,11 @@ import * as React from 'react';
 
 import IPost from '../../interfaces/IPost';
 import IPostStatus from '../../interfaces/IPostStatus';
+import IBoard from '../../interfaces/IBoard';
 
+import PostBoardSelect from './PostBoardSelect';
 import PostStatusSelect from './PostStatusSelect';
+import PostBoardLabel from '../shared/PostBoardLabel';
 import PostStatusLabel from '../shared/PostStatusLabel';
 import Comments from '../../containers/Comments';
 import { MutedText } from '../shared/CustomTexts';
@@ -13,12 +16,19 @@ import friendlyDate from '../../helpers/friendlyDate';
 interface Props {
   postId: number;
   post: IPost;
+  boards: Array<IBoard>;
   postStatuses: Array<IPostStatus>;
   isLoggedIn: boolean;
   isPowerUser: boolean;
   authenticityToken: string;
 
   requestPost(postId: number): void;
+
+  changePostBoard(
+    postId: number,
+    newBoardId: number,
+    authenticityToken: string,
+  ): void;
   changePostStatus(
     postId: number,
     newPostStatusId: number,
@@ -34,12 +44,14 @@ class PostP extends React.Component<Props> {
   render() {
     const {
       post,
+      boards,
       postStatuses,
 
       isLoggedIn,
       isPowerUser,
       authenticityToken,
 
+      changePostBoard,
       changePostStatus,
     } = this.props;
 
@@ -56,17 +68,31 @@ class PostP extends React.Component<Props> {
             <h2>{post.title}</h2>
             {
               isPowerUser && post ?
-                <PostStatusSelect
-                  postStatuses={postStatuses}
-                  selectedPostStatusId={post.postStatusId}
-                  handleChange={
-                    newPostStatusId => changePostStatus(post.id, newPostStatusId, authenticityToken)
-                  }
-                />
+                <div className="postSettings">
+                  <PostBoardSelect
+                    boards={boards}
+                    selectedBoardId={post.boardId}
+                    handleChange={
+                      newBoardId => changePostBoard(post.id, newBoardId, authenticityToken)
+                    }
+                  />
+                  <PostStatusSelect
+                    postStatuses={postStatuses}
+                    selectedPostStatusId={post.postStatusId}
+                    handleChange={
+                      newPostStatusId => changePostStatus(post.id, newPostStatusId, authenticityToken)
+                    }
+                  />
+                </div>
               :
-                <PostStatusLabel
-                  {...postStatuses.find(postStatus => postStatus.id === post.postStatusId)}
-                />
+                <div className="postInfo">
+                  <PostBoardLabel
+                    {...boards.find(board => board.id === post.boardId)}
+                  />
+                  <PostStatusLabel
+                    {...postStatuses.find(postStatus => postStatus.id === post.postStatusId)}
+                  />
+                </div>
             }
             <p className="postDescription">{post.description}</p>
             <MutedText>{friendlyDate(post.createdAt)}</MutedText>

app/javascript/components/Post/PostStatusSelect.tsx

@@ -17,25 +17,26 @@ const PostStatusSelect = ({
   selectedPostStatusId,
   handleChange,
 }: Props) => (
-  <React.Fragment>
-    <label htmlFor="postStatusSelect">Status:</label>
-    <select
-      value={selectedPostStatusId || 'none'}
-      onChange={
-        (e: FormEvent) => (
-          handleChange(parseInt((e.target as HTMLSelectElement).value))
-      )}
-      id="postStatusSelect"
-      className="selectPicker"
-    >
+  <select
+    value={selectedPostStatusId || 'Loading...'}
+    onChange={
+      (e: FormEvent) => (
+        handleChange(parseInt((e.target as HTMLSelectElement).value))
+    )}
+    id="selectPickerStatus"
+    className="selectPicker"
+  >
+    <optgroup label="Post statuses">
       {postStatuses.map((postStatus, i) => (
         <option value={postStatus.id} key={i}>
           {postStatus.name}
         </option>
       ))}
+    </optgroup>
+    <optgroup label="No post status">
       <option value="none">None</option>
-    </select>
-  </React.Fragment>
+    </optgroup>
+  </select>
 );
 
 export default PostStatusSelect;

app/javascript/components/Post/index.tsx

@@ -5,10 +5,12 @@ import createStoreHelper from '../../helpers/createStore';
 
 import Post from '../../containers/Post';
 
+import IBoard from '../../interfaces/IBoard';
 import IPostStatus from '../../interfaces/IPostStatus';
 
 interface Props {
   postId: number;
+  boards: Array<IBoard>;
   postStatuses: Array<IPostStatus>;
   isLoggedIn: boolean;
   isPowerUser: boolean;
@@ -27,6 +29,7 @@ class PostRoot extends React.Component<Props> {
   render() {
     const {
       postId,
+      boards,
       postStatuses,
       isLoggedIn,
       isPowerUser,
@@ -37,6 +40,7 @@ class PostRoot extends React.Component<Props> {
       <Provider store={this.store}>
         <Post
           postId={postId}
+          boards={boards}
           postStatuses={postStatuses}
 
           isLoggedIn={isLoggedIn}

app/javascript/components/shared/PostBoardLabel.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import IBoard from '../../interfaces/IBoard';
+
+const PostBoardLabel = ({ name }: IBoard) => (
+  <span className="badge badgeLight">{name}</span>
+);
+
+export default PostBoardLabel;