EasyDeliveryReact/src/components/ParcelsListComponent.js

import {ScrollPanel} from "primereact/scrollpanel";
import React, {Component, useEffect, useState} from "react";
import {Button} from "primereact/button";
import {SPRING_SERVER} from "../config";

export default function (props) {
    const userDataUrl = SPRING_SERVER + '/api/users/' + props.username;
    const [userData, setUserData] = useState()

    useEffect(() => {
        fetch(userDataUrl, {
            headers: {
                "Authorization": "Bearer " + localStorage.getItem("access_token"),
            }
        })
            .then(response => response.json())
            .then(data => {
                setUserData(data)
            })

    },[])

    function removeParcel(item){
        const deleteUrl = SPRING_SERVER + '/deliveries/' + item.id ;
        fetch(deleteUrl, {
            method: 'DELETE',
            headers: {
                "Authorization": "Bearer " + localStorage.getItem("access_token"),
            }
        }).then(() => {
            fetch(userDataUrl, {
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem("access_token"),
                }
            })
                .then(response => response.json())
                .then(data => {
                    console.log(data)
                    setUserData(data)
                })
        })

    }

    return (
        <ScrollPanel className="w-11 my-2 surface-200 max-h-10rem border-round shadow-3 ">
            {userData?.deliveries?.map((parcel, index) =>
                <div key={index} className="flex flex-row">
                    <div className="m-1 p-1 w-full surface-300 border-round flex flex-column">
                        <div className="font-bold">
                            {parcel.packets[0].name}
                        </div>
                        <div className="flex flex-row">
                            <div>{parcel.deliveryAddress}</div>
                        </div>
                    </div>
                    <Button
                        onClick={() => removeParcel(parcel)}
                        className="text-900 bg-red-200 border-1 border-black-alpha-10 border-round p-1 m-1 flex flex-column align-items-center justify-content-center">
                        <i className="pi pi-trash"></i>
                    </Button>
                </div>
            )}
        </ScrollPanel>
    )
}