Untitled

 avatar
user_5257650
plain_text
7 months ago
18 kB
2
Indexable
Never
import Dropdown from '@/components/Dropdown';
import { turboFootballUrl } from '@/lib/api/getAxios';
import { Dialog, Transition } from '@headlessui/react';
import axios from 'axios';
import { MantineReactTable } from 'mantine-react-table';
import moment from 'moment';
import Image from 'next/image';
import Link from 'next/link';
import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
import { toast } from 'react-hot-toast';
import { BiSolidCopy } from 'react-icons/bi';
import { BsTrash } from 'react-icons/bs';
import { FaPaperPlane } from 'react-icons/fa';
import { FiEdit } from 'react-icons/fi';
import { IoIosFootball } from 'react-icons/io';
import { useQuery } from 'react-query';

function LiveMatchList() {
    const [isLoading, setIsLoading] = useState(true);
    const [deleteModal, setDeleteModal] = useState(false);
    const [deleteObj, setDeleteObj] = useState({});
    const [realData, setRealData] = useState([]);
    const statusRefs = useRef(null);

    const handleStatusChange = (e, id) => {
        statusRefs.current[id].checked = !statusRefs.current[id].checked;
        console.log(statusRefs.current[id]);
    };

    const {
        isLoading: isLoading1,
        data: live_matches,
        refetch,
    } = useQuery('live_matches', async () => {
        const { data } = await turboFootballUrl.post('/api/admin/v1/matches');
        return data?.data;
    });

    useEffect(() => {
        if (!isLoading1) {
            setRealData(live_matches);
        }
        setIsLoading(false);
    }, [live_matches, isLoading1]);

    const columns = useMemo(
        () => [
            {
                id: 'team_one_image',
                header: 'Team One',
                columnDefType: 'display',
                enableColumnOrdering: false,
                Cell: ({ row }) => (
                    <div className="flex items-center">
                        {row?.original?.team_one_image ? (
                            <Image className="h-12 w-12 rounded-full" src={row?.original?.team_one_image} width={0} height={0} sizes="100vw" alt="Team Image" />
                        ) : (
                            <Image src="/default-placeholder.png" width={0} height={0} sizes="100vw" className="h-12 w-12 rounded-full" alt="Image" />
                        )}

                        <span className="ml-2">{row?.original?.team_one_name}</span>
                    </div>
                ),
            },
            {
                id: 'team_two_image',
                header: 'Team Two',
                columnDefType: 'display',
                enableColumnOrdering: false,
                Cell: ({ row }) => (
                    <div className="flex items-center">
                        {row?.original?.team_one_image ? (
                            <Image className="h-12 w-12 rounded-full" src={row?.original?.team_two_image} width={0} height={0} sizes="100vw" alt="Team Image" />
                        ) : (
                            <Image src="/default-placeholder.png" width={0} height={0} sizes="100vw" className="h-12 w-12 rounded-full" alt="Image" />
                        )}
                        <span className="ml-2">{row?.original?.team_two_name}</span>
                    </div>
                ),
            },
            {
                accessorKey: 'title',
                header: 'Title & Time',
                mantineTableHeadCellProps: {
                    align: 'center',
                },
                mantineTableBodyCellProps: {
                    align: 'center',
                },
                Cell: ({ row }) => (
                    <div>
                        <p className="mb-1 text-center text-sm font-medium">{row.original.title}</p>
                        <p className="text-center">{moment(row.original.time).format('MMMM Do YYYY / h:mm')}</p>
                    </div>
                ),
                size: 150,
            },
            {
                accessorKey: 'status',
                header: 'Status',
                mantineTableHeadCellProps: {
                    align: 'center',
                },
                mantineTableBodyCellProps: {
                    align: 'center',
                },
                Cell: ({ row }) => {
                    return row.original.status == '1' ? <span className="badge rounded-full bg-success">Active</span> : <span className="badge rounded-full bg-danger">Inactive</span>;
                    // return (
                    //     <div>
                    //         <label className="relative h-6 w-12">
                    //             <input
                    //                 name="is_featured"
                    //                 type="checkbox"
                    //                 className="custom_switch peer absolute z-10 h-full w-full cursor-pointer opacity-0"
                    //                 id="custom_switch_checkbox1"
                    //                 ref={(el) => (statusRefs.current[row.original.id] = el)}
                    //                 checked={row.original.status == '1'}
                    //                 onChange={(e) => handleStatusChange(e, row.original.id)}
                    //             />
                    //             <span className="block h-full cursor-pointer rounded-full bg-danger before:absolute before:bottom-1 before:left-1 before:h-4 before:w-4 before:rounded-full before:bg-white before:transition-all before:duration-300 peer-checked:bg-success peer-checked:before:left-7 dark:bg-dark dark:before:bg-white-dark dark:peer-checked:before:bg-white"></span>
                    //         </label>
                    //     </div>
                    // );
                },
            },
            {
                id: 'edit',
                header: 'Action',
                columnDefType: 'display',
                enableColumnOrdering: false,
                Cell: ({ row }) => (
                    <div>
                        <Dropdown
                            placement="left-start"
                            btnClassName="btn btn-primary btn-sm dropdown-toggle"
                            button={
                                <>
                                    Action
                                    <span>
                                        <svg className="inline-block h-4 w-4 ltr:ml-1 rtl:mr-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M19 9L12 15L5 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                        </svg>
                                    </span>
                                </>
                            }
                        >
                            <ul className="mt-2 !min-w-[170px] rounded-md bg-[#ebebeb]">
                                <li>
                                    <Link
                                        href={`/admin/notifications/create?title=${row?.original?.team_one_name} vs ${row?.original?.team_two_name}&body=Enjoy Live Match`}
                                        className="flex cursor-pointer items-center px-5 py-2 hover:rounded-md hover:bg-[#f0f8ff]"
                                    >
                                        <FaPaperPlane className="mr-2 text-sm" /> Send Notification
                                    </Link>
                                </li>
                                <li>
                                    <Link href={`/admin/live_matches/edit/${row.original.id}`} className="flex cursor-pointer items-center px-5 py-2 hover:rounded-md hover:bg-[#f0f8ff]">
                                        <FiEdit className="mr-2 text-sm" /> Edit
                                    </Link>
                                </li>
                                <li>
                                    <Link href={`/admin/live_matches/clone/${row.original.id}`} className="flex cursor-pointer items-center px-5 py-2 hover:rounded-md hover:bg-[#f0f8ff]">
                                        <BiSolidCopy className="mr-2 text-sm" /> Clone
                                    </Link>
                                </li>
                                <li>
                                    <div
                                        onClick={() => {
                                            setDeleteModal(true);
                                            setDeleteObj(row.original);
                                        }}
                                        className="flex cursor-pointer items-center justify-start px-5 py-2 hover:rounded-md hover:bg-[#f0f8ff]"
                                    >
                                        <BsTrash className="mr-2 text-sm" /> Delete
                                    </div>
                                </li>
                            </ul>
                        </Dropdown>
                    </div>
                ),
                mantineTableHeadCellProps: {
                    align: 'center',
                },
                mantineTableBodyCellProps: {
                    align: 'center',
                },
            },
        ],
        []
    );

    const handleConfirmClick = async () => {
        setIsLoading(true);
        setDeleteModal(false);

        try {
            // Delete from the main panel
            const { data } = await turboFootballUrl.delete(`api/admin/v1/match/${deleteObj?.unique_id}`);
            if (data?.status) {
                setDeleteObj({});
                toast.success('Match deleted successfully from the main panel!');
            }

            // Delete from other panels
            const panelsToDeleteFrom = deleteObj.panel.filter((panel) => panel.status);

            const axiosPromises = panelsToDeleteFrom.map(async (panel) => {
                const panelUrl = panel.value + `/api/admin/v1/match/${deleteObj?.unique_id}`;

                const axiosConfig = {
                    headers: {
                        'content-type': 'application/json',
                        Accept: 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        api_key: panel.api_key,
                    },
                };

                try {
                    await axios.delete(panelUrl, axiosConfig);
                    return `Match deleted successfully from ${panel.label} panel!`;
                } catch (error) {
                    return `Match already deleted from ${panel.label} panel: ${error.message}`;
                }
            });

            const responses = await Promise.all(axiosPromises);
            responses.forEach((response) => {
                toast.success(response);
            });

            refetch();
        } catch (error) {
            console.error('Error deleting match:', error);
        }

        setIsLoading(false);
    };

    return (
        <div>
            <div className="col-md-12 bg-light text-right">
                <Link href="/admin/live_matches/create" className="btn btn-outline-primary inline cursor-pointer">
                    Add New Live Match
                </Link>

                <div className="mt-10">
                    {isLoading || isLoading1 ? (
                        <div className="flex justify-center border-b border-[#f6f6f657] px-10 pt-10">
                            <div className="animate-bounce">
                                <IoIosFootball className="animate-spin text-6xl text-blue-400" />
                            </div>
                        </div>
                    ) : (
                        <MantineReactTable
                            columns={columns}
                            data={realData || []}
                            enableRowDragging={true}
                            enableRowOrdering={true}
                            defaultDisplayColumn={true}
                            autoResetPageIndex={false}
                            enableSorting={false}
                            mantineRowDragHandleProps={({ table }) => ({
                                onDragEnd: async () => {
                                    const { draggingRow, hoveredRow } = table.getState();

                                    let array = [...realData];
                                    const elementToMove = array.splice(draggingRow.index, 1)[0];
                                    array.splice(hoveredRow.index, 0, elementToMove);

                                    const updatedArray = array.map((obj, index) => ({
                                        ...obj,
                                        position: index + 1,
                                    }));
                                    setRealData(updatedArray);
                                    await turboFootballUrl.post('/api/admin/v1/sort_matches', updatedArray).then((res) => {
                                        if (res?.data?.status) {
                                            toast.success('Matches sorted successfully!');
                                        }
                                    });
                                },
                            })}
                        />
                    )}
                </div>
                <div className="mb-5">
                    <Transition appear show={deleteModal} as={Fragment}>
                        <Dialog as="div" open={deleteModal} onClose={() => setDeleteModal(false)}>
                            <Transition.Child
                                as={Fragment}
                                enter="ease-out duration-300"
                                enterFrom="opacity-0"
                                enterTo="opacity-100"
                                leave="ease-in duration-200"
                                leaveFrom="opacity-100"
                                leaveTo="opacity-0"
                            >
                                <div className="fixed inset-0" />
                            </Transition.Child>
                            <div className="fixed inset-0 z-[999] overflow-y-auto bg-[black]/60">
                                <div className="flex min-h-screen items-center justify-center px-4">
                                    <Transition.Child
                                        as={Fragment}
                                        enter="ease-out duration-300"
                                        enterFrom="opacity-0 scale-95"
                                        enterTo="opacity-100 scale-100"
                                        leave="ease-in duration-200"
                                        leaveFrom="opacity-100 scale-100"
                                        leaveTo="opacity-0 scale-95"
                                    >
                                        <Dialog.Panel as="div" className="panel my-8 w-full max-w-lg overflow-hidden rounded-lg border-0 p-0 text-black dark:text-white-dark">
                                            <div className="flex items-center justify-between bg-[#fbfbfb] px-5 py-3 dark:bg-[#121c2c]">
                                                <h5 className="text-lg font-bold">Delete Confirmation</h5>
                                                <button type="button" className="text-white-dark hover:text-dark" onClick={() => setDeleteModal(false)}>
                                                    <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        width="20"
                                                        height="20"
                                                        viewBox="0 0 24 24"
                                                        fill="none"
                                                        stroke="currentColor"
                                                        strokeWidth="1.5"
                                                        strokeLinecap="round"
                                                        strokeLinejoin="round"
                                                    >
                                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                                    </svg>
                                                </button>
                                            </div>
                                            <div className="p-5">
                                                <p>
                                                    You are deleting <span className="font-semibold text-danger">{deleteObj?.title}</span> Live Match and its associated streaming sources!
                                                </p>
                                                <div className="mt-8 flex items-center justify-end">
                                                    <button type="button" className="btn btn-primary" onClick={() => setDeleteModal(false)}>
                                                        Not Now
                                                    </button>
                                                    <button type="button" className="btn btn-outline-danger ltr:ml-4 rtl:mr-4" onClick={handleConfirmClick}>
                                                        Confirm
                                                    </button>
                                                </div>
                                            </div>
                                        </Dialog.Panel>
                                    </Transition.Child>
                                </div>
                            </div>
                        </Dialog>
                    </Transition>
                </div>
            </div>
        </div>
    );
}

export default LiveMatchList;
Leave a Comment