feat: EditPost

src/components/EditPostList.tsx

@@ -18,6 +18,7 @@ interface Props {
   postList: Post[];
 }
 
+// TODO: どこかの処理で、release が false の状態だと弾く処理が入っているようだ
 const EditPostList: React.FC<Props> = ({ postList }) => {
   return (
     <StyledSection>

src/pages/edit/EditPost.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+
+// import UploadFiles from '@/edit/upload/Upload';
+import CodeBlock from '@/CodeBlock';
+import Spinner from '@/Spinner';
+import { StyledReactMarkdown } from '~/pages/styledSinglePost';
+import useGetPost from '~/pages/useGetPost';
+
+import {
+  StyledArticle,
+  StyledButton,
+  StyledButtonWrapper,
+  StyledInputText,
+  StyledLabel,
+  StyledLabelInlineBlock,
+  StyledPreview,
+  StyledPreviewTitle,
+  StyledReturn,
+  StyledTextarea,
+  StyledTimestamp,
+} from './styledEditPost';
+import useEditPost from './useEditPost';
+
+const EditPost: React.FC = () => {
+  // NOTE: 初期化時に一度だけ読み込まれる
+  const post = useGetPost();
+
+  // TODO: 既に存在する記事データを初期値として一度だけ読み込む必要がある
+  useEffect(() => {
+    if (post) {
+      setTitle(post.title);
+      setContent(post.content);
+      setRelease(post.release);
+      console.log('effect');
+    }
+  }, [post]);
+
+  const {
+    title,
+    setTitle,
+    content,
+    setContent,
+    release,
+    setRelease,
+    onTitleChanged,
+    onContentChanged,
+    onReleaseChanged,
+    updatePost,
+    deletePost,
+  } = useEditPost();
+
+  return (
+    <StyledArticle>
+      {post ? (
+        <>
+          <h2>記事を編集する</h2>
+          <StyledLabel htmlFor={`editPostTitle-${post.id}`}>
+            タイトル
+          </StyledLabel>
+          <StyledInputText
+            type="text"
+            id={`editPostTitle-${post.id}`}
+            name={`editPostTitle-${post.id}`}
+            defaultValue={title}
+            onChange={onTitleChanged}
+          />
+          <StyledLabel htmlFor={`editPostContent-${post.id}`}>本文</StyledLabel>
+          <StyledTextarea
+            id={`editPostContent-${post.id}`}
+            name={`editPostContent-${post.id}`}
+            defaultValue={content}
+            onChange={onContentChanged}
+          ></StyledTextarea>
+          {/* <UploadFiles uploadPath={id} /> */}
+          <StyledLabelInlineBlock htmlFor={`editPostRelease-${post.id}`}>
+            公開フラグ
+          </StyledLabelInlineBlock>
+          <input
+            type="checkbox"
+            id={`editPostRelease-${post.id}`}
+            name={`editPostRelease-${post.id}`}
+            checked={release}
+            onChange={onReleaseChanged}
+          />
+          <StyledButtonWrapper>
+            <StyledButton onClick={() => updatePost(post.id)}>
+              この記事を更新する
+            </StyledButton>
+            <StyledButton onClick={() => deletePost(post.id)}>
+              この記事を削除する
+            </StyledButton>
+          </StyledButtonWrapper>
+          <StyledTimestamp>
+            作成日時: {post.createDate}
+            <br />
+            id: {post.id}
+          </StyledTimestamp>
+          <StyledPreview>
+            <StyledPreviewTitle>Preview</StyledPreviewTitle>
+            <h2>{post.title}</h2>
+            <StyledTimestamp>{post.createDate}</StyledTimestamp>
+            <StyledReactMarkdown
+              source={post.content ? post.content : ''}
+              renderers={{ code: CodeBlock }}
+            />
+          </StyledPreview>
+          <StyledReturn>
+            <Link to="/edit">投稿された記事一覧に行く</Link>
+          </StyledReturn>
+        </>
+      ) : (
+        <Spinner />
+      )}
+    </StyledArticle>
+  );
+};
+
+export default EditPost;

src/pages/edit/Pages.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 
-import SinglePost from '../SinglePost';
-import Top from '../Top';
+import SinglePost from '~/pages/SinglePost';
+import Top from '~/pages/Top';
+
 import Edit from './Edit';
+import EditPost from './EditPost';
 
 const Pages: React.FC = () => {
   return (
     <Switch>
       <Route exact path="/" component={Top} />
       <Route exact path="/edit" component={Edit} />
       <Route exact path="/:id" component={SinglePost} />
+      <Route exact path="/edit/:id" component={EditPost} />
     </Switch>
   );
 };

src/pages/edit/useEditPost.ts

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+
+interface Props {
+  title: string;
+  setTitle: React.Dispatch<React.SetStateAction<string>>;
+  content: string;
+  setContent: React.Dispatch<React.SetStateAction<string>>;
+  release: boolean;
+  setRelease: React.Dispatch<React.SetStateAction<boolean>>;
+  onTitleChanged: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onContentChanged: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onReleaseChanged: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  updatePost: (id: string) => void;
+  deletePost: (id: string) => undefined;
+}
+
+const useEditPost = (): Props => {
+  const [title, setTitle] = useState<string>('');
+  const [content, setContent] = useState<string>('');
+  const [release, setRelease] = useState<boolean>(false);
+
+  const onTitleChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value);
+  };
+
+  const onContentChanged = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(e.target.value);
+  };
+
+  const onReleaseChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRelease(e.target.checked);
+  };
+
+  const updatePost = (id: string) => {
+    // TODO: API に更新データを投げる
+    console.log(id);
+  };
+
+  const deletePost = (id: string) => {
+    const deleteConfirm = confirm('削除します');
+
+    if (!deleteConfirm) {
+      return undefined;
+    }
+
+    // TODO: API に削除指示を投げる
+    alert(`${id}を削除しました`);
+  };
+
+  return {
+    title,
+    setTitle,
+    content,
+    setContent,
+    release,
+    setRelease,
+    onTitleChanged,
+    onContentChanged,
+    onReleaseChanged,
+    updatePost,
+    deletePost,
+  };
+};
+
+export default useEditPost;