109 lines
3.5 KiB
JavaScript
109 lines
3.5 KiB
JavaScript
import React, {useState, useEffect} from 'react';
|
||
import ProfileTableItem from './ProfileTableItem';
|
||
|
||
function ProfileTable({
|
||
selectedItems,
|
||
userData
|
||
}) {
|
||
|
||
const [isCheck, setIsCheck] = useState([]);
|
||
|
||
useEffect(() => {
|
||
selectedItems(isCheck);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [isCheck]);
|
||
|
||
const handleClick = e => {
|
||
const { id, checked } = e.target;
|
||
setIsCheck([...isCheck, id]);
|
||
if (!checked) {
|
||
setIsCheck(isCheck.filter(item => item !== id));
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{/* General */}
|
||
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">General 🖋️</h2>
|
||
<div className="overflow-x-auto w-[828px]">
|
||
<table className="w-[828px] table-auto w-full">
|
||
<tbody className="divide-slate-200 divide-y">
|
||
{userData.filter(data => data.category === 'General')
|
||
.map(data => {
|
||
return (
|
||
<ProfileTableItem
|
||
key={data.id}
|
||
id={data.id}
|
||
image={data.image}
|
||
value={data.value}
|
||
property={data.property}
|
||
status={data.status}
|
||
transactions={data.transactions}
|
||
avatars={data.avatars}
|
||
handleClick={handleClick}
|
||
isChecked={isCheck.includes(data.id)}
|
||
/>
|
||
)
|
||
})
|
||
}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{/* Nationality */}
|
||
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Nationality 🖋️</h2>
|
||
<div className="overflow-x-auto w-[828px]">
|
||
<table className="w-[828px] table-auto w-full">
|
||
<tbody className="text-sm divide-slate-200 divide-y ">
|
||
{userData.filter(data => data.category === 'Nationality')
|
||
.map(data => {
|
||
return (
|
||
<ProfileTableItem
|
||
key={data.id}
|
||
id={data.id}
|
||
image={data.image}
|
||
value={data.value}
|
||
property={data.property}
|
||
status={data.status}
|
||
transactions={data.transactions}
|
||
avatars={data.avatars}
|
||
handleClick={handleClick}
|
||
isChecked={isCheck.includes(data.id)}
|
||
/>
|
||
)
|
||
})
|
||
}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{/* Social */}
|
||
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Social 🖋️</h2>
|
||
<div className="overflow-x-auto w-[828px]">
|
||
<table className="w-[828px] table-auto w-full">
|
||
<tbody className="text-sm divide-slate-200 divide-y ">
|
||
{userData.filter(data => data.category === 'Social')
|
||
.map(data => {
|
||
return (
|
||
<ProfileTableItem
|
||
key={data.id}
|
||
id={data.id}
|
||
image={data.image}
|
||
value={data.value}
|
||
property={data.property}
|
||
status={data.status}
|
||
transactions={data.transactions}
|
||
avatars={data.avatars}
|
||
handleClick={handleClick}
|
||
isChecked={isCheck.includes(data.id)}
|
||
/>
|
||
)
|
||
})
|
||
}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default ProfileTable;
|