deletePost and post.reverse().map

Hello ! i need help , my deletePost delete wrong post because i use

post.reverse().map for appear post from newest to oldest

so i dont know if i fix this or change methode (.reverse())

mport React, { useContext, useEffect, useState } from "react";
import LikeButton from "./LikeButton";
import ModifPost from "./modifPostButton";
import Corbeille from "./deletePost";
import {  useSelector } from "react-redux";
import { isEmpty } from "../Utils";
import '../../styles/Card.css';
import postReducer from "../../reducers/post.reducer";
import axios from "axios";

const Card = () => {
  
  const postData = useSelector((state) => state.postReducer);
  const userData = useSelector((state) => state.userReducer);
  const [post, setPost] = React.useState([]);
  const [user, setUser] = React.useState([]);
   function getPosts() {
   
      return axios
        .get(`${process.env.REACT_APP_API_URL}api/post/`)
        .then((res) => {
          
          setPost(res.data);
          }),[postData,userData]
        
    }
    
    getPosts();

    return (
    <div>
      <h1 className="text-3xl font-bold underline">List Post</h1>
      <section>
      <>
      {
          !isEmpty(post[0]) &&
          post.reverse().map((post) =>(
           <div className="post" key={post._id}>
              
              <div className="post-contenu">
                <img src={post.picture} className="img" alt="images"></img>
              </div>
              <div className="post-action">
                <LikeButton post={post}/>
                <ModifPost post={post} userData={userData}/>
                <Corbeille post={post} userData={userData} />
                
              </div>
            </div>
          )
          )}
          
          </>
          
          
          
      </section>
      
    </div>

  );
};

export default Card;

I don’t understand - you are saying that the delete worked properly but now that you added “reverse” it is no longer working?

The only way I could imagine that happening is if you are doing it by position in the list. But it looks like your data has an “_id” property which should be unique so that shouldn’t be an issue.

Once again, you haven’t provided all the relevant code. But I assume it is happening here:

                <Corbeille post={post} userData={userData} />

But you are not passing the index, so it should not matter what position it is in.

If I were you, I would trace through and find out.

  • What is the id being passed to your corbeille? Does it match the item you pressed?
  • What id is showing up in the reducer?
  • Can your reducer handle the delete properly?

Wait?

    getPosts();

Wait, you are refetching on every single render? That is a bad idea. First of all, it will make that call on every single render - that is waaaaayyy too much. Secondly, how do you know the data will be ready on the server before that call is made?

You have redux set up - why not let redux handle this? You should dispatch an action like LOAD_POSTS that will do the fetch and save them in redux - you use a selector to grab them. Then when you delete, you dispatch a DELETE_POST action with the id. That can make a call to delete the data.

Really there are different ways to handle that last one:

  1. make the delete request - if it returns the new list then update redux with that - if not, make a GET request and update with that.
  2. optimistically update the redux store and make your delete request to the server but don’t worry about it.
  3. a combination of the two - optimistically update the redux store(so the UI renders immediately) and make your delete and then update the store when that comes back - if it went correctly, the user won’t even notice

Those are pretty standard ways to handle these things. There are enhancements, like loading and error states, but this is the core. There are libraries like Redux Thunk and Redux Saga to help you deal with async things like this. There are also libraries to handle it all.

But that is closer to what you should be doing here.

The first thing I would do is get it working in redux, without the HTTP requests. You do all the CRUD activities - create, read, update, delete. Then add in the HTTP. When you first open the component, it loads the items from the server. When you create an item, it sends it to the server, etc.

Yes without .reverse Corbeille work but i need this antechronological post

I had used reduce for getPosts but the post dont appear so i change way to do

(https://github.com/GOANEX32/P7groupomania/blob/main/frontend/src/components/Post/Card.js)

And everything else I said …

Ill give you some pointers i see while readign your code.
Why call React.useState(), when you alreayd imported useState and can call it direcrtly.
Your axios seems to be paired with a dependency array which is innate of react hooks [postData,userData]. Im not aware of such syntax, maybe you meant to have a useEffect there? Or wrap getPosts in useCallback.
Its not alright to just call getPosts(). You most likely want to put it in useEffect with empty dependency array, or at least make sure it executes on componentDidMount.
If you get the wrong indexing, you might want to call reverse() after the map method. That way your elements will still have the reversed order you want, but the initial calculations would work with their default order.

For your delete request i dont know how to do

i know i try 2 way (but i have problem with 2)

your want i try getPost in useEffect ?

yes for reverse() i dont know why he dont work with my delete fucntion

J’ai corriger React.useState() et j’ai ajouter use Effect

https://github.com/GOANEX32/P7groupomania/blob/main/frontend/src/components/Post/Card.js

For your delete request i dont know how to do

I’m saying whatever HTTP call to delete an element. Whatever backend, implement a delete.

But…

Like I said, I would get it wired up with redux and no http calls first - everything in the app. Get all the CRUD operations working. Then add in HTTP support, with one of the approaches listed above.

Hello, every time i make action in render the order of post change and this action is cancel
https://github.com/GOANEX32/P7groupomania/blob/main/frontend/src/components/Post/Card.js

I think you’re going to need to describe your question in more detail for people to help you.

Maybe i can reverse sequence Descending Sort in mangoDB ?

it’s possible change the order in database ?

I don’t know, I guess, I don’t know what you have set up. In any case, I think it would make sense to do it on the front end. I would (if it is always needed in that order) I would just create a service layer that handles the fetching of data and handle it there. This a assumes that you are storing this in redux of something and are not still fetching the data on every render. If it needs to be changeable, then I’d still load it in redux, but sort it in the component, probably store it in state and use a useEffect to trigger a sort.

Ok youe want i use reduce with card but i have probleme with this but i can try,
look my delete if is good :https://github.com/GOANEX32/P7groupomania/blob/main/frontend/src/components/Post/deletePost.js

I think you’re going to need to describe your question in more detail for people to help you.

obviosly if you have any access to the database you can do this,

but also you are using Redux toolkit , you can store reversed array in your global state ,

just write reverse funtion in your reducer and make it save already reversed so that your data does’t gets reset again and again.

setPost(res.data.revers()) =======>>> if response data is and array,

I don’t understand what you are trying to do in your code.

Here in Card.js:

  const postData = useSelector((state) => state.postReducer);
  const userData = useSelector((state) => state.userReducer);
  const [post, setPost] = useState([]);
  const [user, setUser] = useState([]);
  useEffect(() => {
   function getPosts() {
   
      return axios
        .get(`${process.env.REACT_APP_API_URL}api/post/`)
        .then((res) => {
          
          setPost(res.data);
          }),[postData,userData]
        
    }
    getPosts();
  },[]);

What is the source of truth here? You see to be loading posts from redux. You have this local post. I have no idea what ,[postData,userData] is trying to do. Is post supposed to be multiple posts? Then it should be plural. But you shouldn’t be creating them here and in redux. You have to decide what you want to do. You have an egg and you’re trying to fry it, scramble it, make a custard and a cake all at the same time. Pick one.

As I said before, I think the smart thing to do is just focus on data in the app at first. Build an MVP with just data in redux, no backend. When you get that working, you add the backend, figuring out how to hydrate the data on load and how you handle updating the backend. But I don’t think you should be handling the backend in your components - that can work for small apps but it can get ugly fast.

For now, DO NOT MAINTAIN A STATE VERSION OF YOUR POSTS IN THE COMPONENT. Just connect to redux and let redux handle the state. That’s why it’s there. It will make it a lot easier and will keep your component clean of that logic.

As someone said, you can reverse your list or whatever in your reducer. Or you could build a memoized selector to access the data that way. But your component isn’t using the redux state so it doesn’t matter.

I can revers() here https://github.com/GOANEX32/P7groupomania/blob/main/frontend/src/actions/post.actions.js

When i trie reverse my post list (for see recent post firts),
my button Delete ,Delete wrong post