Impl createPost feature but no update after creating post.

backend/app/src/posts/posts.service.ts

@@ -33,7 +33,12 @@ export class PostsService {
  select: {
  id: true,
  content: true,
- authorId: true,
+ author: {
+ select: {
+ id: true,
+ name: true,
+ },
+ },
  createdAt: true,
  },
  });

frontend/app/src/features/posts/api/posts.ts

@@ -1,10 +1,13 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import type {
  FindRequestInput,
- FindResponse,
  FindResponseSuccess,
+ CreateRequestInput,
+ CreateResponseSuccess,
 } from '../types';
 
+const END_POINT = 'posts';
+
 export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({
@@ -19,7 +22,7 @@ export const postsApi = createApi({
  findPosts: builder.query<FindResponseSuccess, FindRequestInput>({
  query: ({ page, take, accessToken }) => {
  return {
- url: 'posts',
+ url: END_POINT,
  params: {
  page,
  take,
@@ -30,7 +33,21 @@ export const postsApi = createApi({
  };
  },
  }),
+ createPost: builder.mutation<CreateResponseSuccess, CreateRequestInput>({
+ query: ({ content, accessToken }) => {
+ return {
+ method: 'POST',
+ url: END_POINT,
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ body: {
+ content,
+ },
+ };
+ },
+ }),
  }),
 });
 
-export const { useFindPostsQuery } = postsApi;
+export const { useFindPostsQuery, useCreatePostMutation } = postsApi;

frontend/app/src/features/posts/components/PostContainer/index.tsx

@@ -1,9 +1,10 @@
 import { useRouter } from 'next/router';
-import { useState, type FC } from 'react';
+import type { FC } from 'react';
 import ReactPaginate from 'react-paginate';
 import { useAppSelector } from 'src/app/hooks';
 import { useFindPostsQuery } from 'src/features/posts/api/posts';
 import { PostList } from '../PostList';
+import { PostForm } from '../PostForm';
 import paginatorStyles from './paginator.module.css';
 
 const TAKE = 10;
@@ -14,23 +15,19 @@ export const PostContainer: FC = () => {
  const page = isNaN(parseInt(router.query.page as string))
  ? DEFAULT_PAGE_NUMBER
  : parseInt(router.query.page as string);
- const { accessToken } = useAppSelector((state) => state.auth.signin);
 
  // src/pages/index.tsx内で、signinしていなかったら、このコンポーネントは使われないため、
  // signinState.accessTokenはある前提でこのコンポーネントが読み込まれている
+ const accessToken = useAppSelector(
+ (state) => state.auth.signin.accessToken
+ ) as string;
+
  const { data, error, isFetching, isLoading } = useFindPostsQuery({
  accessToken: accessToken as string,
  page: page,
  take: TAKE,
  });
 
- console.log({
- isFetching,
- isLoading,
- data,
- error,
- });
-
  if (isFetching) {
  return <p>Fetching...</p>;
  }
@@ -49,7 +46,9 @@ export const PostContainer: FC = () => {
 
  return (
  <div>
+ <PostForm />
  <p>トータル {data.total}件</p>
+
  <PostList posts={data.data} />
 
  {/* https://github.com/AdeleD/react-paginate#props */}

frontend/app/src/features/posts/components/PostForm/index.tsx

@@ -0,0 +1,71 @@
+import { ChangeEventHandler, FormEventHandler, useState, type FC } from 'react';
+import { useAppSelector } from 'src/app/hooks';
+import { useCreatePostMutation } from 'src/features/posts/api/posts';
+import { CreateRequestInput } from '../../types';
+import styles from './style.module.css';
+
+const MAX_CONTENT_LENGTH = 500;
+
+export const PostForm: FC = () => {
+ // src/pages/index.tsx内で、signinしていなかったら、このコンポーネントは使われないため、
+ // signinState.accessTokenはある前提でこのコンポーネントが読み込まれている
+ const accessToken = useAppSelector(
+ (state) => state.auth.signin.accessToken
+ ) as string;
+ const [requestInput, setRequestInput] = useState<CreateRequestInput>({
+ accessToken,
+ content: '',
+ });
+
+ const [createPost, { error, isLoading, isSuccess, reset }] =
+ useCreatePostMutation();
+
+ if (isSuccess && requestInput.content.length > 0) {
+ setRequestInput({
+ ...requestInput,
+ content: '',
+ });
+ reset();
+ }
+
+ const onChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+ setRequestInput({
+ ...requestInput,
+ [event.target.name]: event.target.value,
+ });
+ };
+
+ const onSubmitHandler: FormEventHandler<HTMLFormElement> = (event) => {
+ event.preventDefault();
+ createPost(requestInput);
+ };
+
+ const canPost = () => {
+ if (requestInput.content.trim().length === 0) return false;
+ // if (MAX_CONTENT_LENGTH < requestInput.content.length) return false;
+ if (isLoading) return false;
+
+ return true;
+ };
+
+ return (
+ <>
+ {error ? <p>{JSON.stringify(error)}</p> : null}
+ <form method="post" onSubmit={onSubmitHandler}>
+ <textarea
+ className={styles.textArea}
+ name="content"
+ id="content"
+ value={requestInput.content}
+ onChange={onChangeHandler}
+ ></textarea>
+ <div className={styles.belowTextAreaContainer}>
+ <span>
+ {requestInput.content.length}/{MAX_CONTENT_LENGTH}
+ </span>
+ <input type="submit" value="投稿する" disabled={!canPost()} />
+ </div>
+ </form>
+ </>
+ );
+};

frontend/app/src/features/posts/components/PostForm/style.module.css

@@ -0,0 +1,12 @@
+.textArea {
+ width: 100%;
+ height: 100px;
+ resize: none;
+}
+
+.belowTextAreaContainer {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 1rem;
+}

frontend/app/src/features/posts/types.ts

@@ -10,11 +10,6 @@ export type Post = {
  createdAt: Date;
 };
 
-export interface PostsState {
- posts: Post[];
- isLoading: boolean;
-}
-
 export type FindRequestInput = {
  page?: number;
  take?: number;
@@ -32,3 +27,18 @@ export type FindResponseError = {
 };
 
 export type FindResponse = FindResponseSuccess | FindResponseError;
+
+export type CreateRequestInput = {
+ content: string;
+ accessToken: string;
+};
+
+export type CreateResponseSuccess = Post;
+
+export type CreateResponseError = {
+ message: string;
+ statusCode: number;
+ error?: string;
+};
+
+export type CreateResponse = CreateResponseSuccess | CreateResponseError;