fids/browser-domain/src/components/Home/Card/Card.tsx

import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Avatar, Space, Typography, Tag, Button, Modal } from "antd";
import { RightOutlined, ClockCircleOutlined, SwapOutlined, EnvironmentOutlined, CalendarOutlined } from "@ant-design/icons";

import "./Card.css";
import { getChatId, getSubscription, subscribeToFlight, unsubscribeFromFlight, editFlight } from "../../../Api";
import { Flight, FlightEdit, User } from "../../../Types";

// interface FlightProps {
//     id: number;
//     flight_code: string;
//     status: string;
//     origin: string;
//     destination: string;
//     departure_time: string;
//     arrival_time: string;
//     gate: string;
// }

interface CardProps {
    flight: Flight;
    user: User | undefined;
    subscribed: boolean;
    refresh: any;
    isAirline: boolean;
    isAdmin: boolean;
    refreshFlights: any;
}

const { Text } = Typography;

export const Card: React.FC<CardProps> = ({ flight, user, subscribed, refresh, refreshFlights, isAirline, isAdmin }) => {
    const [modalVisible, setModalVisible] = useState<boolean>(false);

    const navigate = useNavigate(); 

    const handleSubscribe = async (event: React.FormEvent) => {
        event.preventDefault();

        const token = localStorage.getItem("token");
        if (!token || !user) {
            return;
        }

        const data = {
            user_id: user.id,
            flight_id: flight.id
        }

        console.log(data)

        subscribeToFlight(data, token)
            .then(() => {
                refresh()
                getChatId(user.id, token)
                    .then(() => {})
                    .catch((error) => {
                        setModalVisible(true);
                    })
            })
            .catch((error) => {
        });
    };

    const handleEdit = async (event: React.FormEvent) => {
        event.preventDefault();
        navigate(`/edit-flight/${flight.id}`);
    };

    const handleDelete = async (event: React.FormEvent) => {
        event.preventDefault();

        const token = localStorage.getItem("token");
        if (!token || !user) {
            return;
        }

        let data: any = {
            status: "Deleted"
        }

        editFlight("" + flight.id, data, token)
            .then(() => {
                refreshFlights()
            })
            .catch((error) => {
                console.log(error)
        });
    };

    const handleModalClose = () => {
        setModalVisible(false);
    };

    const handleUnsubscribe = async (event: React.FormEvent) => {
        event.preventDefault();

        const token = localStorage.getItem("token");
        if (!token || !user) {
            return;
        }

        const data = {
            user_id: user.id,
            flight_id: flight.id
        }

        console.log(data)

        unsubscribeFromFlight(data, token)
            .then(() => {
                refresh()
            })
            .catch((error) => {
                console.log(error)
        });
    };

    console.log(flight.user_id)
    console.log(user?.id)

    return (
        <div className="flight-card">
            <Space size={8} align="center">
                <div>
                    <Text strong>{flight.flight_code} </Text>
                    <Text type="secondary">
                        {flight.origin} <SwapOutlined /> {flight.destination}
                    </Text>
                </div>
            </Space>
            <div className="flight-details">
                <Space size={8} direction="horizontal">
                    <Text strong>Status:</Text>
                    <Tag color={flight.status === "Scheduled" ? "green" : "orange"}>{flight.status}</Tag>
                </Space>
                <Space size={8} direction="vertical">
                    <Text strong>Departure:</Text>
                    <Space size={2} align="baseline">
                        <CalendarOutlined />
                        {flight.departure_time}
                    </Space>
                </Space>
                <Space size={8} direction="vertical">
                    <Text strong>Arrival:</Text>
                    <Space size={2} align="baseline">
                        <CalendarOutlined />
                        {flight.arrival_time}
                    </Space>
                </Space>
                <Space size={8} direction="horizontal">
                    <Text strong>Gate:</Text>
                    <Text>{flight.gate}</Text>
                </Space>
                <Space size={8} direction="horizontal">
                    <Text strong>ID:</Text>
                    <Text>{flight.id}</Text>
                </Space>
            </div>
            {!isAirline && !isAdmin ?
            (
                !(subscribed) ? 
                <Button type="primary" onClick={handleSubscribe}>
                    Subscribe
                </Button>
                :
                <Button type="primary" onClick={handleUnsubscribe}>
                    Unsubscribe
                </Button>
            )
             :
            (
                (user && flight.user_id == user.id) || isAdmin ? 
                <>
                <Button type="primary" onClick={handleEdit}>
                    Edit
                </Button>
                <Button type="primary" onClick={handleDelete}>
                    Delete
                </Button>
                </>
                :
                <></>
            )
            }
            <Modal
                title="Error"
                visible={modalVisible}
                onCancel={handleModalClose}
                footer={[
                    <Button key="ok" type="primary" onClick={handleModalClose}>
                        OK
                    </Button>
                ]}
            >
                <p>To start receiving messages open this link on your smartphone:
                    
                </p>
                <Link to={`https://t.me/fids_system_bot?start=${user?.id}`} target="_blank">
                    {`https://t.me/fids_system_bot?start=${user?.id}`}
                </Link>
            </Modal>
        </div>
    );
};