Users-Wrench/src/components/JobGroups/GroupMemberTable.jsx

import React, { useState } from 'react'
import { handlePagingFunc } from '../Pagination/HandlePagination';
import PaginatedList  from '../Pagination/PaginatedList';
import DeleteMember from './DeleteMember';

export default function GroupMemberTable({selectedList}) {
  
    // Handle Pagination
    const [currentPage, setCurrentPage] = useState(0);
    const indexOfFirstItem = Number(currentPage);
    const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);

    const currentSelectedList = selectedList?.slice(indexOfFirstItem, indexOfLastItem);
  
  
    const handlePagination = (e) => {
      handlePagingFunc(e, setCurrentPage);
    };

    const [deletePopout, setDeletePopout] = useState({
        status: false,
        data: {}
    })

    const handleDeleteMember = (item) => {
        setDeletePopout({
            status: true,
            data: {...item}
        })
    }
   
    return (
        <div className={`w-full p-8 bg-white dark:bg-dark-gray overflow-hidden rounded-2xl section-shadow`}>
            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[300px]">
              <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
                <tbody>
                  <>
                    <tr className='font-bold text-sm text-dark-gray dark:text-white whitespace-nowrap'>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th></th>
                    </tr>
                    <tr>
                        <td className='p-[1px] bg-slate-400 dark:bg-white rounded-full' colSpan="4"></td>
                    </tr>
                    {selectedList && selectedList?.length > 0 ? (
                      currentSelectedList?.length ? (
                        currentSelectedList.map((value, index) => (
                        <tr key={value.uid} className="font-medium text-sm text-dark-gray dark:text-white whitespace-nowrap">
                          <td className="p-1">{value?.firstname}</td>
                          <td className="p-1">{value?.lastname}</td>
                          <td className="p-1">{value?.email}</td>
                          <td className="p-1 text-right">
                            <button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-3'>X</button>
                          </td>
                        </tr>
                        ))
                      ) : (
                        <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                          <td className="p-2">
                            No Members Found
                          </td>
                        </tr>
                      )
                    ) : (
                      <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                        <td className="p-2">No Members Found</td>
                      </tr>
                    )}
                  </>
                </tbody>
              </table>
    
              {/* PAGINATION BUTTON */}
              <PaginatedList
                onClick={handlePagination}
                prev={currentPage == 0 ? true : false}
                next={
                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
                  currentSelectedList?.length
                    ? true
                    : false
                }
                data={currentSelectedList}
                start={indexOfFirstItem}
                stop={indexOfLastItem}
              />
              {/* END OF PAGINATION BUTTON */}
            </div>
    
          {/* DELETE MEMBER POPOUT */}
          {deletePopout.status &&
                <DeleteMember 
                    action={()=>setDeletePopout({status:false, data:{}})}
                    situation={deletePopout.status}
                    details={deletePopout.data}
                />
            }
          {/* END OF DELETE MEMBER POPOUT */}
        </div>
      );
    };