Redux News reader

[emmasecrest466096802]

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;