Function ProjectCard

web/src/components/ProjectCard.tsx:48–251

({ item, settings }: ProjectCardProps)

}

function ProjectCard({ item, settings }: ProjectCardProps) {
    const queryClient = useQueryClient()

    const [deleteProjectDialogOpen, setDeleteProjectDialogOpen] =
        React.useState(false)

    const [projectOperation, setProjectOperation] = React.useState<
        'launch' | 'stop' | 'delete'
    >()
    const [projectStatusDialogOpen, setProjectStatusDialogOpen] =
        React.useState(false)

    const launchProjectMutation = useMutation({
        mutationFn: async () => {
            const response = await fetch(`/api/projects/${item.id}/start`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
            })
            const data = await response.json()
            return data
        },
        onSettled: () => {
            queryClient.invalidateQueries({ queryKey: ['projects'] })
        },
    })

    const stopProjectMutation = useMutation({
        mutationFn: async () => {
            const response = await fetch(`/api/projects/${item.id}/stop`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
            })
            const data = await response.json()
            return data
        },
        onSettled: () => {
            queryClient.invalidateQueries({ queryKey: ['projects'] })
        },
    })

    const deleteProjectMutation = useMutation({
        mutationFn: async () => {
            const response = await fetch(`/api/projects/${item.id}/delete`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
            })
            const data = await response.json()
            return data
        },
        onSettled: () => {
            queryClient.invalidateQueries({ queryKey: ['projects'] })
        },