Redux News Reader

Web Development Full-Stack
1

Ive searched every thread here, checked the code 10 times, copy and paste from an working repo in case i wrote something bad, idk what to do anymore

//commentsSlice

// Import createAsyncThunk and createSlice here. import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; // Create loadCommentsForArticleId here. export const loadCommentsForArticleId = createAsyncThunk( 'comments/loadCommentsForArticleId', async(id) => { const data = await fetch(`api/articles/${id}/comments`); const json = await data.json(); console.log(json); return json; } ); // Create postCommentForArticleId here. export const postCommentForArticleId = createAsyncThunk( 'comments/postCommentForArticleId', async ({articleId, comment}) => { const requestBody = JSON.stringify({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: { // Add initial state properties here. byArticleId: {}, isLoadingComments: false, failedToLoadComments: false, createCommentIsPending: false, failedToCreateComment: false }, // Add extraReducers here. // extraReducers: { // [loadCommentsForArticleId.pending]: (state, action) => { // state.isLoadingComments = true; // state.failedToLoadComments = false; // }, // [loadCommentsForArticleId.fulfilled]: (state, action) => { // state.byArticleId[action.payload.articleId] = action.payload.comments; // state.isLoadingComments = false; // state.failedToLoadComments = false; // }, // [loadCommentsForArticleId.rejected]: (state, action) => { // state.isLoadingComments = false; // state.failedToLoadComments = true; // }, // [postCommentForArticleId.pending]: (state, action) => { // state.createCommentIsPending = true; // state.failedToCreateComment = false; // }, // [postCommentForArticleId.fulfilled]: (state, action) => { // // const articleId = action.payload.articleId // // state.byArticleId[articleId].push(action.payload); // state.createCommentIsPending = false; // state.failedToCreateComment = false; // state.byArticleId[action.payload.articleId].push(action.payload.comments); // }, // [postCommentForArticleId.rejected]: (state, action) => { // state.createCommentIsPending = false; // state.failedToCreateComment = true; // } // } extraReducers: (builder) => { builder .addCase(loadCommentsForArticleId.pending, (state) => { state.isLoadingComments = true; state.failedToLoadComments = true; }) .addCase(loadCommentsForArticleId.fulfilled, (state, action) => { state.isLoadingComments = false; state.failedToLoadComments = false; state.byArticleId = {[action.payload.articleId]: action.payload.comments} }) .addCase(loadCommentsForArticleId.rejected, (state) => { state.isLoadingComments = false; state.failedToLoadComments = false; }) .addCase(postCommentForArticleId.pending, (state) => { state.createCommentIsPending = true; state.failedToCreateComment = false; }) .addCase(postCommentForArticleId.fulfilled, (state, action) => { state.createCommentIsPending = false; state.failedToCreateComment = false; state.byArticleId[action.payload.articleId].push(action.payload) }) .addCase(postCommentForArticleId.rejected, (state) => { state.createCommentIsPending = false; state.failedToCreateComment = true; }) } }); 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;

//comments

import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { loadCommentsForArticleId, selectComments, isLoadingComments, } from '../comments/commentsSlice'; import { selectCurrentArticle } from '../currentArticle/currentArticleSlice'; import CommentList from '../../components/CommentList'; import CommentForm from '../../components/CommentForm'; const Comments = () => { const dispatch = useDispatch(); const article = useSelector(selectCurrentArticle); // Declare additional selected data here. const comments = useSelector(selectComments); const commentsAreLoading = useSelector(isLoadingComments); // Dispatch loadCommentsForArticleId with useEffect here. useEffect(() => { if (article !== undefined) { dispatch(loadCommentsForArticleId(article.id))}; }, [dispatch, article]); const commentsForArticleId = article ? comments[article.id] : []; if (commentsAreLoading) return <div>Loading Comments</div>; if (!article) return null; return ( <div className='comments-container'> <h3 className='comments-title'>Comments</h3> <CommentList comments={commentsForArticleId} /> <CommentForm articleId={article.id} /> </div> ); }; export default Comments;

//comentlist

import React from 'react'; import Comment from './Comment'; export default function CommentList({ comments }) { if (!comments) { return null; } return ( <ul className='comments-list'> { comments.map((c) => { return <Comment comment={c}/> }) } </ul> ); }
2

First codebyte:

It seems like you are trying to run a JavaScript file that uses ES6 modules syntax without indicating that it is a module. You need to specify that the script is an ES module by either adding "type": "module" to your package.json file, or by renaming the file to end with .mjs extension.

You can try to update your package.json file to include the "type": "module" field. Your package.json file should look like this:


{
  "name": "your-package-name",
  "version": "0.1.0",
  "type": "module",
  "dependencies": {
    "@reduxjs/toolkit": "^1.6.2"
  }
}

Second code byte:
It looks like you are trying to run a React component in a Node.js environment, which doesn’t support the import statement by default. To fix this issue, you need to set up a build process to compile your React code into JavaScript that Node.js can understand.

You can use a tool like babel to transpile your React code. Here’s how you can set up babel:

  1. Install @babel/cli, @babel/core, and @babel/preset-react packages by running this command in your project directory:

npm install --save-dev @babel/cli @babel/core @babel/preset-react

  1. Create a file named .babelrc in your project directory with the following content:

{
“presets”: [“@babel/preset-react”]
}

  1. Add a build script to your package.json file:

“scripts”: {
“build”: “babel src -d dist”
}

This script will compile the React code in the src directory and output the compiled JavaScript code to the dist directory.

  1. Run the build script by running the following command in your project directory:

npm run build

  1. Finally, you can run your Node.js application by running the following command in your project directory:

node dist/app.js

Replace app.js with the name of the file that contains your Node.js application code.

Third Codebyte:

The error message is indicating that you cannot use the import statement outside a module. This typically means that your JavaScript file is not being treated as an ES module. To fix this, you need to tell your JavaScript file that it’s an ES module by adding a "type": "module" field to your package.json file. Here’s how you can do it:

{
“name”: “your-project-name”,
“version”: “1.0.0”,
“type”: “module”, // Add this line
“dependencies”: {
// Your dependencies
}
}

  1. Save the file.
  2. Try running your code again and the error should be resolved.

let me know if you run into any problems :slight_smile: