Add select to change board of post

app/javascript/actions/changePostBoard.ts

@@ -0,0 +1,42 @@
+import { Action } from 'redux';
+import { ThunkAction } from 'redux-thunk';
+import { State } from '../reducers/rootReducer';
+
+export const CHANGE_POST_BOARD_SUCCESS = 'CHANGE_POST_BOARD_SUCCESS';
+export interface ChangePostBoardSuccessAction {
+  type: typeof CHANGE_POST_BOARD_SUCCESS;
+  newBoardId;
+}
+
+const changePostBoardSuccess = (newBoardId: number): ChangePostBoardSuccessAction => ({
+  type: CHANGE_POST_BOARD_SUCCESS,
+  newBoardId,
+});
+
+export const changePostBoard = (
+  postId: number,
+  newBoardId: number,
+  authenticityToken: string,
+): ThunkAction<void, State, null, Action<string>> => async (dispatch) => {
+  try {
+    const response = await fetch(`/posts/${postId}`, {
+      method: 'PATCH',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': authenticityToken,
+      },
+      body: JSON.stringify({
+        post: {
+          board_id: newBoardId,
+        },
+      })
+    });
+
+    if (response.status === 204) {
+      dispatch(changePostBoardSuccess(newBoardId));
+    }
+  } catch (e) {
+    console.log(e);
+  }
+}

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;

app/javascript/containers/Post.tsx

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 
 import { requestPost } from '../actions/requestPost';
 import { requestComments } from '../actions/requestComments';
+import { changePostBoard } from '../actions/changePostBoard';
 import { changePostStatus } from '../actions/changePostStatus';
 
 import { State } from '../reducers/rootReducer';
@@ -18,6 +19,10 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(requestPost(postId));
   },
 
+  changePostBoard(postId: number, newBoardId: number, authenticityToken: string) {
+    dispatch(changePostBoard(postId, newBoardId, authenticityToken));
+  },
+
   changePostStatus(postId: number, newPostStatusId: number, authenticityToken: string) {
     if (isNaN(newPostStatusId)) newPostStatusId = null;
 

app/javascript/reducers/currentPostReducer.ts

@@ -5,6 +5,11 @@ import {
   POST_REQUEST_FAILURE,
 } from '../actions/requestPost';
 
+import {
+  ChangePostBoardSuccessAction,
+  CHANGE_POST_BOARD_SUCCESS,
+} from '../actions/changePostBoard';
+
 import {
   ChangePostStatusSuccessAction,
   CHANGE_POST_STATUS_SUCCESS,
@@ -55,6 +60,7 @@ const currentPostReducer = (
   state = initialState,
   action:
     PostRequestActionTypes |
+    ChangePostBoardSuccessAction |
     ChangePostStatusSuccessAction |
     CommentsRequestActionTypes |
     HandleCommentRepliesType |
@@ -82,6 +88,7 @@ const currentPostReducer = (
         error: action.error,
       };
 
+    case CHANGE_POST_BOARD_SUCCESS:
     case CHANGE_POST_STATUS_SUCCESS:
       return {
         ...state,

app/javascript/reducers/postReducer.ts

@@ -2,6 +2,10 @@ import {
   POST_REQUEST_SUCCESS,
 } from '../actions/requestPost';
 
+import {
+  CHANGE_POST_BOARD_SUCCESS,
+} from '../actions/changePostBoard';
+
 import {
   CHANGE_POST_STATUS_SUCCESS,
 } from '../actions/changePostStatus';
@@ -36,6 +40,12 @@ const postReducer = (
         createdAt: action.post.created_at,
       };
 
+    case CHANGE_POST_BOARD_SUCCESS:
+      return {
+        ...state,
+        boardId: action.newBoardId,
+      };
+
     case CHANGE_POST_STATUS_SUCCESS:
       return {
         ...state,

app/javascript/stylesheets/components/Post.scss

@@ -18,6 +18,26 @@
       .flex-grow-1,
       .p-3;
 
+    .postInfo {
+      @extend .d-flex;
+
+      span {
+        @extend .mr-2;
+      }
+    }
+
+    .postSettings {
+      @extend
+        .d-flex,
+        .justify-content-between;
+
+      .selectPicker {
+        @extend
+          .custom-select,
+          .mx-2;
+      }
+    }
+
     .postDescription {
       @extend
         .my-3;