Dapp Cinemas

TimeslotActions.jsx

import { Menu } from '@headlessui/react'
import { TfiTicket } from 'react-icons/tfi'
import { BsFileEarmarkCheck, BsTrash3 } from 'react-icons/bs'
import { BiDotsVerticalRounded } from 'react-icons/bi'
import { setGlobalState } from '../store'
import { Link } from 'react-router-dom'
import { toast } from 'react-toastify'
import { markSlot } from '../services/blockchain'

const TimeslotActions = ({ slot }) => {
  const handleDelete = () => {
    setGlobalState('slot', slot)
    setGlobalState('deleteSlotModal', 'scale-100')
  }

  const handleCompletion = async () => {
    await toast.promise(
      new Promise(async (resolve, reject) => {
        await markSlot(slot)
          .then(() => resolve())
          .catch((error) => {
            console.log(error)
            reject(error)
          })
      }),
      {
        pending: 'Approve transaction...',
        success: 'Marked as completed 👌',
        error: 'Encountered error 🤯',
      }
    )
  }

  return (
    <Menu as="div" className="inline-block text-left">
      <Menu.Button
        className="inline-flex w-full justify-center
          rounded-md bg-black bg-opacity-10 px-4 py-2 text-sm
          font-medium text-black hover:bg-opacity-30 focus:outline-none
          focus-visible:ring-2 focus-visible:ring-white
          focus-visible:ring-opacity-75"
      >
        <BiDotsVerticalRounded size={17} />
      </Menu.Button>
      <Menu.Items
        className="absolute right-0 mt-2 w-56 origin-top-right
          divide-y divide-gray-100 rounded-md bg-white shadow-md 
          ing-1 ring-black ring-opacity-5 focus:outline-none"
      >
        {!slot.completed && (
          <Menu.Item>
            {({ active }) => (
              <button
                className={`flex justify-start items-center space-x-1 ${
                  active ? 'bg-red-500 text-white' : 'text-red-500'
                } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
                onClick={handleDelete}
              >
                <BsTrash3 size={17} />
                <span>Delete</span>
              </button>
            )}
          </Menu.Item>
        )}

        {!slot.completed && slot.seats > 0 && (
          <Menu.Item>
            {({ active }) => (
              <button
                className={`flex justify-start items-center space-x-1 ${
                  active ? 'bg-gray-200 text-black' : 'text-gray-900'
                } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
                onClick={handleCompletion}
              >
                <BsFileEarmarkCheck size={17} />
                <span>Finish up</span>
              </button>
            )}
          </Menu.Item>
        )}
        <Menu.Item>
          {({ active }) => (
            <Link
              className={`flex justify-start items-center space-x-1 ${
                active ? 'bg-gray-200 text-black' : 'text-gray-900'
              } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
              to={`/timeslot/${slot.movieId}/${slot.id}`}
            >
              <TfiTicket size={17} />
              <span>All Holders</span>
            </Link>
          )}
        </Menu.Item>
      </Menu.Items>
    </Menu>
  )
}

export default TimeslotActions

TimeSlotTable.jsx

import React from 'react'
import { convertTimestampToDate, convertTimestampToTime } from '../store'
import TimeslotActions from './TimeslotActions'
import { Link } from 'react-router-dom'

const TimeSlotTable = ({ slots }) => {
  return (
    <div className="overflow-x-auto">
      <table className="min-w-full bg-white">
        <thead>
          <tr className="border-b">
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Id
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Day
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Ticket
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Balance
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Starts
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Ends
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Capacity
            </th>
            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          {slots.map((slot, i) => (
            <tr key={i} className="border-b">
              <td className="px-6 py-4 whitespace-nowrap">{i + 1}</td>
              <td className="px-6 py-4 whitespace-nowrap text-blue-500">
                <Link to={`/timeslot/${slot.movieId}/${slot.id}`}>
                  {convertTimestampToDate(slot.day)}
                </Link>
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                {slot.ticketCost} ETH
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                {slot.balance} ETH
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                {convertTimestampToTime(slot.startTime)}
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                {convertTimestampToTime(slot.endTime)}
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                {slot.seats} / {slot.capacity}
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                <TimeslotActions slot={slot} />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default TimeSlotTable