HackerpackList.js

import React, { useCallback, useState, useEffect } from 'react'
import { useSelector } from 'react-redux'

import { Grid2 as Grid, Box, Typography } from '@mui/material'
import CompanySection from 'components/hackerpack/CompanySection'

import { useTranslation } from 'react-i18next'
import { IconButton } from '@mui/material'
import DeleteIcon from '@mui/icons-material/Delete'
import EditIcon from '@mui/icons-material/Edit'

import HackerpackService from 'services/hackerpack'
import * as AuthSelectors from 'reducers/auth/selectors'
import { useNavigate } from 'react-router-dom'

export default ({ data = [] }) => {
    const navigate = useNavigate()
    const { t } = useTranslation()
    const idToken = useSelector(AuthSelectors.getIdToken)
    const [hackerpack, setHackerpack] = useState(data)

    useEffect(() => {
        HackerpackService.getFullHackerpack().then(pack => {
            if (pack) setHackerpack(pack)
        })
    }, [])

    const handleRemove = useCallback(
        slug => {
            console.log(hackerpack)
            HackerpackService.deleteHackerpack(idToken, slug)
            setHackerpack(
                hackerpack.filter(function (obj) {
                    return obj.slug !== slug
                }),
            )
        },
        [hackerpack, idToken],
    )

    return (
        <Box mt={3}>
            <Typography variant="h6" gutterBottom>
                {t('Your_hackerpack_')}
            </Typography>
            <Grid container spacing={3}>
                {hackerpack.map(company => (
                    <>
                        <Box p={2}>
                            <IconButton
                                edge="end"
                                aria-label="delete"
                                onClick={() => handleRemove(company.slug)}
                            >
                                <DeleteIcon />
                            </IconButton>
                            <IconButton
                                edge="end"
                                aria-label="edit"
                                onClick={() =>
                                    navigate(`admin/hackerpack/${company.slug}`)
                                }
                            >
                                <EditIcon />
                            </IconButton>
                            <CompanySection
                                name={company.name}
                                description={company.description}
                                icon={company.icon}
                                link={company.link}
                            />
                        </Box>
                    </>
                ))}
            </Grid>
        </Box>
    )
}