I am almost done but my comments are not posting and I don’t know why.
CommentForm
mport React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
createCommentIsPending,
postCommentForArticleId
} from '../features/comments/commentsSlice';
export default function CommentForm({ articleId }) {
const dispatch = useDispatch();
const [comment, setComment] = useState('');
// Declare isCreatePending here.
const handleSubmit = (e) => {
e.preventDefault();
dispatch(postCommentForArticleId(
{articleId,
comment
}
))
setComment('');
};
return (
<form onSubmit={handleSubmit}>
<label for='comment' className='label'>
Add Comment:
</label>
<div id='input-container'>
<input
id='comment'
value={comment}
onChange={(e) => setComment(e.currentTarget.value)}
type='text'
/>
<button
className='comment-button'
>
Submit
</button>
</div>
</form>
);
}
CommentSlice
/ Import createAsyncThunk and createSlice here.
import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
// Create loadCommentsForArticleId here.
export const loadCommentsForArticleId = createAsyncThunk("comments/loadCommentsForArticleId",
async (id) => {
const response = await fetch(`api/articles/${id}/comments`);
const json = await response.json();
return json;
}
)
// Create postCommentForArticleId here.
export const postCommentForArticleId = createAsyncThunk('comments/postCommentsForArticleId',
async ({articleId,comment}) => {
const requestBody = JSON.stringify({ articleId:articleId,comment:comment})
const response = await fetch(`api/articles/${articleId}/comments`,
{
method:'POST',
body: requestBody
});
const json = await response.json();
return json;
}
)
export const commentsSlice = createSlice({
name: 'comments',
initialState: {
byArticleId: {},
isLoadingComments: false,
failedToLoadComments: false,
createCommentIsPending:false,
failedToCreateComment:false,
},
extraReducers:{
[loadCommentsForArticleId.pending]: (state,action) => {
state.isLoadingComments = true;
state.failedLoadingComments = false;
},
[loadCommentsForArticleId.fulfilled]: (state,action) => {
state.isLoadingComments = false;
state.failedToLoadComments = false;
state.byArticleId[action.payload.articleId] = action.payload.comments;
},
[loadCommentsForArticleId.fulfilled]: (state,action) => {
state.isLoadingComments = false;
state.failedLoadingComments = true;
},
[postCommentForArticleId.pending]: (state,action) => {
state.createCommentIsPending = true;
state.failedToCreateComment = false;
},
[postCommentForArticleId.rejected]: (state,action) => {
state.createCommentIsPending = false;
state.failedToCreateComment = true;
},
[postCommentForArticleId.fulfilled]: (state, action) => {
state.createCommentIsPending = false;
state.failedToCreateComment = false;
state.byArticleId[action.payload.articleId].push(action.payload);
}
}
}
);
export const selectComments = (state) => state.comments.byArticleId;
export const isLoadingComments = (state) => state.comments.isLoadingComments;
export const createCommentIsPending = (state) => state.comments.createCommentIsPending;
export default commentsSlice.reducer;