Search Input for ANTD Table - reactjs

Question

I've managed to make a search input that allow search for the title and category of the project from the antd table but the initial data {dataSource} is not loaded with the data in dataLog (not sure is it because of AJAX request) and thus not loaded into the table, the data will only be shown when the first Search is performed at this case, here is my code:
const ListLogs = () => {
const [logs, setLogs] = useState([]);
const [search, setSearch] = useState("");
// const [latestFive, setLatestFive] = useState([]);
const [value, setValue] = useState("");
const timeAgo = (prevDate) => {
const diff = Number(new Date()) - prevDate;
const minute = 60 * 1000;
const hour = minute * 60;
const day = hour * 24;
const month = day * 30;
const year = day * 365;
switch (true) {
case diff < minute:
const seconds = Math.round(diff / 1000);
return `${seconds} ${seconds > 1 ? "seconds" : "second"} ago`;
case diff < hour:
return Math.round(diff / minute) + " minutes ago";
case diff < day:
return Math.round(diff / hour) + " hours ago";
case diff < month:
return Math.round(diff / day) + " days ago";
case diff < year:
return Math.round(diff / month) + " months ago";
case diff > year:
return Math.round(diff / year) + " years ago";
default:
return "";
}
};
const getAllLogs = async () => {
try {
const response = await fetch("http://localhost:5000/logs/");
const jsonData = await response.json();
setLogs(jsonData);
} catch (err) {
console.error(err.message);
}
};
const expandedRowRender = () => {
const columns = [
{ title: "Date", dataIndex: "date", key: "date" },
{ title: "Name", dataIndex: "name", key: "name" },
{
title: "Status",
key: "state",
render: () => (
<span>
<Badge status="success" />
Finished
</span>
),
},
{ title: "Upgrade Status", dataIndex: "upgradeNum", key: "upgradeNum" },
{
title: "Type",
dataIndex: "operation",
key: "operation",
render: () => {
return (
<div>
<Tag color="green">CREATE</Tag>
<Tag color="gold">UPDATE</Tag>
<Tag color="red">DELETE</Tag>
</div>
);
},
},
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
date: "2014-12-24 23:12:00",
name: "This is production name",
upgradeNum: "Upgraded: 56",
});
}
return <Table columns={columns} dataSource={data} />;
};
const dataLog = [];
for (let i = 0; i < logs.length; i++) {
dataLog.push({
key: i,
category: <Tag color="default">{logs[i].category}</Tag>,
title: logs[i].title,
id: logs[i].id,
lastUpdated:
new Date(logs[i].last_updated).toLocaleString() +
" " +
timeAgo(new Date(logs[i].last_updated).getTime()),
});
}
const [dataSource, setDataSource] = useState(dataLog);
console.log("dataSource: ", dataSource);
console.log("dataLog: ", dataLog);
const columns = [
{
title: "Category",
dataIndex: "category",
key: "category",
},
{
title: "Title",
dataIndex: "title",
key: "title",
},
{ title: "ID", dataIndex: "id", key: "id" },
{ title: "Last Updated", dataIndex: "lastUpdated", key: "lastUpdated" },
];
useEffect(() => {
setDataSource(dataLog);
getAllLogs();
}, []);
return (
<Fragment>
<div>
<header className="headerPage">
<h1> Logs </h1>
</header>
</div>
<div className="container">
<Input.Search
placeholder="Input search text"
value={value}
onChange={(e) => {
const currValue = e.target.value;
setValue(currValue);
const filteredData = dataLog.filter(
(entry) =>
entry.title.toLowerCase().includes(currValue.toLowerCase()) ||
entry.category.props.children
.toLowerCase()
.includes(currValue.toLowerCase())
);
console.log("filtered Data: ", filteredData);
setDataSource(filteredData);
}}
// allowClear
// onChange={(e) => setSearch(e.target.value)}
// style={{ width: 200, float: "right" }}
/>
<Table
bordered
className="components-table-demo-nested"
onRow={(i) => ({
onClick: (e) => {
history.push(
`/admin/viewLog/${i.id}/${i.category.props.children}`
);
},
})}
columns={columns}
// expandable={{ expandedRowRender }}
dataSource={dataSource} //tried {dataSource ? dataSource: dataLog} does not work as well
size="small"
pagination={false}
/>
</div>
</Fragment>
);
};
export default ListLogs;
Please enlighten me for this! Thank you

Answer 1

Short answer:
When we call setDataSource(dataLog) inside the useEffect hooks for initial render (mounting) that would save empty array in dataSource variable, which can be used for showing empty list icon or loading, we have to set data source again when the data is fetched so, we can use another useEffect hook for logs state variable and set data source in it.
useEffect(() => {
setDataSource(dataLog);
}, [logs]);
Details:
What we are trying to achieve with these hooks i.e. useEffect, is that we can write a code which can react when defined action occur, e.g. what we did in useEffect is that on initial render (mount phase), we set empty array and then call the API. After that when data arrives we set logs i.e. setLogs(jsonData).
Which will populate the logs variable, then that loop come into play and dataLog will get filled but after that we never set the data source again with this DataLog i.e. filled list of objects (we only did that in for mount phase in which dataLog was empty, or when onChange get triggered)
So, a simple solution can be to use useEffect hooks for logs variable so, whenever the logs variable change, it will set the data source as well. As defined above in short answer.
Thus, with these hooks, we can significantly refactor this code.
One More Thing:
I recommend using getAllLogs function with await keyword, that will make that async code works like sync one i.e.
useEffect(async () => {
await getAllLogs();
}, []);
I (try to) reproduce it here