victorAnumudu
80 lines
3.4 KiB
React
80 lines
3.4 KiB
React
import React, { useState } from "react";
|
|
import dataImage1 from "../../assets/images/data-table-user-1.png";
|
|
import dataImage2 from "../../assets/images/data-table-user-2.png";
|
|
import dataImage3 from "../../assets/images/data-table-user-3.png";
|
|
import dataImage4 from "../../assets/images/data-table-user-4.png";
|
|
import SelectBox from "../Helpers/SelectBox";
|
|
|
|
import PaginatedList from "../Pagination/PaginatedList";
|
|
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
|
|
|
export default function ActiveJobMessage({ activeJobMesList }) {
|
|
// const [currentPage, setCurrentPage] = useState(0);
|
|
// const indexOfFirstItem = Number(currentPage);
|
|
// const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
|
// const currentActiveJobMesList = activeJobMesList?.data?.slice(indexOfFirstItem, indexOfLastItem);
|
|
|
|
// const handlePagination = (e) => {
|
|
// handlePagingFunc(e,setCurrentPage)
|
|
// }
|
|
|
|
return (
|
|
<div className="w-full h-full max-h-[343px] overflow-y-auto">
|
|
<table className="wallet-activity w-full table-auto border-collapse text-left">
|
|
<thead className='border-b-2'>
|
|
<tr className='text-slate-600'>
|
|
<th className="p-2"></th>
|
|
</tr>
|
|
</thead>
|
|
{activeJobMesList?.data?.length ?
|
|
(
|
|
<tbody>
|
|
{activeJobMesList.data.map((item, index) =>
|
|
{
|
|
let imageLink = `${activeJobMesList?.image}${localStorage.getItem('session_token')}/contracts/${item.msg_uid}`
|
|
return (
|
|
<tr key={index} className='text-slate-500'>
|
|
<td>
|
|
<div className={`msg_box ${item.who}`}>
|
|
<div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
|
|
{item.msg_type == 'FILE' ?
|
|
<a href={imageLink} target="_blank" className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></a>
|
|
:
|
|
<span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
|
|
}
|
|
</div>
|
|
|
|
</td>
|
|
</tr>
|
|
)
|
|
}
|
|
)}
|
|
</tbody>
|
|
)
|
|
:
|
|
activeJobMesList.error ?
|
|
(
|
|
<tbody>
|
|
<tr className='text-slate-500'>
|
|
<td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
|
|
</tr>
|
|
</tbody>
|
|
)
|
|
:
|
|
<tbody>
|
|
<tr className='text-slate-500'>
|
|
<td className="p-2" colSpan={4}>No Message Found!</td>
|
|
</tr>
|
|
</tbody>
|
|
}
|
|
</table>
|
|
</div>
|
|
|
|
// <div className='flex flex-col justify-between'>
|
|
// PAGINATION BUTTON
|
|
// <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= activeJobMesList?.data?.length ? true : false} data={activeJobMesList?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
|
|
// END OF PAGINATION BUTTON
|
|
// </div>
|
|
)
|
|
}
|