Add edit and delete actions to posts and comments (#125)

app/javascript/components/Post/PostEditForm.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+
+import PostBoardSelect from './PostBoardSelect';
+import PostStatusSelect from './PostStatusSelect';
+
+import IPostStatus from '../../interfaces/IPostStatus';
+import IBoard from '../../interfaces/IBoard';
+import Button from '../common/Button';
+import Spinner from '../common/Spinner';
+
+interface Props {
+  title: string;
+  description?: string;
+  boardId: number;
+  postStatusId?: number;
+
+  isUpdating: boolean;
+  error: string;
+
+  handleChangeTitle(title: string): void;
+  handleChangeDescription(description: string): void;
+  handleChangeBoard(boardId: number): void;
+  handleChangePostStatus(postStatusId: number): void;
+
+  isPowerUser: boolean;
+  boards: Array<IBoard>;
+  postStatuses: Array<IPostStatus>;
+
+  toggleEditMode(): void;
+  handleUpdatePost(
+    title: string,
+    description: string,
+    boardId: number,
+    postStatusId: number,
+  ): void;
+}
+
+const PostEditForm = ({
+  title,
+  description,
+  boardId,
+  postStatusId,
+
+  isUpdating,
+  error,
+
+  handleChangeTitle,
+  handleChangeDescription,
+  handleChangeBoard,
+  handleChangePostStatus,
+
+  isPowerUser,
+  boards,
+  postStatuses,
+
+  toggleEditMode,
+  handleUpdatePost,
+}: Props) => (
+  <div className="postEditForm">
+    <div className="postHeader">
+      <input
+        type="text"
+        value={title}
+        onChange={e => handleChangeTitle(e.target.value)}
+        className="form-control"
+      />
+    </div>
+
+    {
+      isPowerUser ?
+        <div className="postSettings">
+          <PostBoardSelect
+            boards={boards}
+            selectedBoardId={boardId}
+            handleChange={newBoardId => handleChangeBoard(newBoardId)}
+          />
+          <PostStatusSelect
+            postStatuses={postStatuses}
+            selectedPostStatusId={postStatusId}
+            handleChange={newPostStatusId => handleChangePostStatus(newPostStatusId)}
+          />
+        </div>
+      :
+        null
+    }
+
+    <textarea
+      value={description}
+      onChange={e => handleChangeDescription(e.target.value)}
+      rows={5}
+      className="form-control"
+    />
+
+    <div className="postEditFormButtons">
+      <a onClick={toggleEditMode}>
+        { I18n.t('common.buttons.cancel') }
+      </a>
+      &nbsp;
+      <Button onClick={() => handleUpdatePost(title, description, boardId, postStatusId)}>
+        { isUpdating ? <Spinner /> : I18n.t('common.buttons.update') }
+      </Button>
+    </div>
+  </div>
+);
+
+export default PostEditForm;