feat: EditPostList の状態排除、Style

src/components/EditPostList.test.tsx

@@ -2,35 +2,33 @@ import '@testing-library/jest-dom/extend-expect';
 
 import React from 'react';
 // NOTE: React Router をテストする場合は MemoryRouter を使用する
-import { MemoryRouter } from 'react-router-dom';
+import { Link, MemoryRouter } from 'react-router-dom';
 
 import { render, screen } from '~/testUtil';
 
-import EditPostList, { Props } from './EditPostList';
+import EditPostList, { Post } from './EditPostList';
 
-const posts = [
+const postList: Post[] = [
   {
     id: 'a1b2c3',
-    title: 'test title',
-    content: 'test content',
     release: true,
     createDate: '2021年1月10日 00:57',
+    routerLink: <Link to="/edit/a1b2c3">test title</Link>,
   },
   {
     id: 'b2c3d4',
-    title: 'test title2',
-    content: 'test content2',
     release: true,
     createDate: '2021年1月11日 00:57',
+    routerLink: <Link to="/edit/b2c3d4">test title2</Link>,
   },
 ];
 
 it('should render: EditPostList に投稿記事一覧の各リンクが存在するか', () => {
   render(
     <MemoryRouter>
-      <EditPostList posts={posts} />
+      <EditPostList postList={postList} />
     </MemoryRouter>
   );
 
-  expect(screen.getAllByRole('link')).toHaveLength(posts.length);
+  expect(screen.getAllByRole('link')).toHaveLength(postList.length);
 });

src/components/EditPostList.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 import {
   StyledPost,
@@ -8,32 +7,32 @@ import {
   StyledTimestamp,
 } from './styledEditPostList';
 
-interface Post {
+export interface Post {
   id: string;
-  title: string;
   release: boolean;
   createDate: string;
+  routerLink: React.ReactNode;
 }
 
-export interface Props {
-  posts: Post[];
+interface Props {
+  postList: Post[];
 }
 
-const EditPostList: React.FC<Props> = ({ posts }) => {
+const EditPostList: React.FC<Props> = ({ postList }) => {
   return (
     <StyledSection>
       <h2>投稿された記事一覧</h2>
       <StyledPosts>
-        {posts.map((post) => (
-          <StyledPost key={post.id}>
+        {postList.map(({ id, release, createDate, routerLink }) => (
+          <StyledPost key={id}>
             <div>
-              {!post.release && <span>【非公開】</span>}
-              <Link to={`/edit/${post.id}`}>{post.title}</Link>
+              {!release && <span>【非公開】</span>}
+              {routerLink}
             </div>
             <StyledTimestamp>
-              作成日時: {post.createDate}
+              作成日時: {createDate}
               <br />
-              id: {post.id}
+              id: {id}
             </StyledTimestamp>
           </StyledPost>
         ))}

src/pages/edit/Edit.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import CreatePost from '@/CreatePost';
-import EditPostList from '@/EditPostList';
+import EditPostList, { Post as EditPost } from '@/EditPostList';
 import Login from '@/Login';
 import Spinner from '@/Spinner';
 import useGetPosts from '~/pages/useGetPosts';
@@ -20,6 +21,21 @@ const Edit: React.FC = () => {
 
   const { status, titleDateList } = useGetPosts();
 
+  const titleDateListAddLink = () => {
+    const titleDateListFix: EditPost[] = [];
+
+    titleDateList.map(({ id, title, release, createDate }) => {
+      titleDateListFix.push({
+        id,
+        release,
+        createDate,
+        routerLink: <Link to={`/edit/${id}`}>{title}</Link>,
+      });
+    });
+
+    return titleDateListFix;
+  };
+
   return (
     <>
       <article>
@@ -34,9 +50,7 @@ const Edit: React.FC = () => {
           <Spinner />
         )}
         {status === 'success' ? (
-          <>
-            <EditPostList posts={titleDateList} />
-          </>
+          <EditPostList postList={titleDateListAddLink()} />
         ) : (
           <Spinner />
         )}

src/pages/edit/styledEditPost.ts

@@ -0,0 +1,72 @@
+import { styled } from '@linaria/react';
+
+export const StyledArticle = styled.article`
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 40px 40px 0 40px;
+`;
+
+export const StyledLabel = styled.label`
+  display: block;
+  h2 + & {
+    margin-top: 20px;
+  }
+  input + & {
+    margin-top: 20px;
+  }
+  textarea + & {
+    margin-top: 20px;
+  }
+`;
+
+export const StyledLabelInlineBlock = styled.label`
+  display: inline-block;
+  margin-top: 20px;
+`;
+
+export const StyledInputText = styled.input`
+  width: 100%;
+  label + & {
+    margin-top: 4px;
+  }
+`;
+
+export const StyledTextarea = styled.textarea`
+  width: 100%;
+  max-width: 100%;
+  min-height: 400px;
+  label + & {
+    margin-top: 4px;
+  }
+`;
+
+export const StyledButtonWrapper = styled.div`
+  padding-top: 20px;
+`;
+
+export const StyledButton = styled.button`
+  & + button {
+    margin-left: 20px;
+    color: #f66;
+  }
+`;
+
+export const StyledTimestamp = styled.div`
+  padding-top: 20px;
+`;
+
+export const StyledPreviewTitle = styled.div`
+  margin-bottom: 40px;
+  font-size: 1.6rem;
+`;
+
+export const StyledPreview = styled.div`
+  margin: 40px 0 0 0;
+  padding: 40px 0;
+  border-top: 1px solid #999;
+  border-bottom: 1px solid #999;
+`;
+
+export const StyledReturn = styled.div`
+  padding: 40px 0;
+`;