Fakultas Ilmu Komputer UI

Commit c75f7ef0 authored by Sean Zeliq Urian's avatar Sean Zeliq Urian
Browse files

[REFACTOR] fix inconsistency total item when change page

parent 962e6b6b
......@@ -23,6 +23,7 @@ interface TableProps {
searchPlaceholder?: string;
maximumData?: number;
rowOnClick?: (row: Array<ValueType>) => void;
itemPerPage?: number;
}
const Click = styled.div`
......@@ -93,6 +94,7 @@ export default function Table({
onChange = async () => new Promise<Array<Array<ValueType>>>(() => []),
maximumData = -1,
rowOnClick,
itemPerPage,
}: TableProps) {
const { colors } = useContext(ThemeContext) || DEFAULT_THEME;
const [previousDataTotal, setPreviousDataTotal] = useState(0);
......@@ -118,18 +120,24 @@ export default function Table({
return;
setIsLoading(true);
const newData: Array<Array<ValueType>> = await onChange(
searchValue,
newPageNumber
);
setIsLoading(false);
await onChange(searchValue, newPageNumber).then((newData) => {
setIsLoading(false);
if (newData.length === 0 || newData[0].length === 0) return;
setPageNumber(newPageNumber);
setPreviousDataTotal(
previousDataTotal + (sign === 1 ? data.length : -newData.length)
);
setData([...newData]);
if (newData.length === 0 || newData[0].length === 0) return;
setPageNumber(newPageNumber);
setPreviousDataTotal(
previousDataTotal + (sign === 1 ? data.length : -newData.length)
);
if (
action === PageAction.Prev &&
previousDataTotal + data.length === maximumData
) {
setPreviousDataTotal(
previousDataTotal - (itemPerPage ? itemPerPage : 10)
);
}
setData([...newData]);
});
};
const [couldGoBack, couldGoNext] = [
......@@ -175,14 +183,14 @@ export default function Table({
<Button
data-test-id="search-button"
onClick={async () => {
const newPageNumber = 1;
const newPageNumber = pageNumber;
setIsLoading(true);
const newData = await onChange(searchValue, newPageNumber);
setIsLoading(false);
if (newData.length === 0 || newData[0].length === 0) return;
setPageNumber(newPageNumber);
setPreviousDataTotal(0);
setData([...newData]);
}}
>
......@@ -315,11 +323,15 @@ export default function Table({
data-test-id="prev-button"
id="prev-button"
cursor="pointer"
onClick={couldGoBack ? () => changePage(PageAction.Prev) : () => {}}
onClick={
couldGoBack && searchValue === ''
? () => changePage(PageAction.Prev)
: () => {}
}
src="/assets/icons/right-paging.svg"
origin="50% 50%"
height="16px"
opacity={couldGoBack ? 1 : 0.5}
opacity={couldGoBack && searchValue === '' ? 1 : 0.5}
transform="rotateZ(180deg)"
/>
<Gap gap={12} axis={Gap.Axis.Horizontal} />
......@@ -332,10 +344,14 @@ export default function Table({
data-test-id="next-button"
id="next-button"
cursor="pointer"
onClick={couldGoNext ? () => changePage(PageAction.Next) : () => {}}
onClick={
couldGoNext && searchValue === ''
? () => changePage(PageAction.Next)
: () => {}
}
src="/assets/icons/right-paging.svg"
height="16px"
opacity={couldGoNext ? 1 : 0.5}
opacity={couldGoNext && searchValue === '' ? 1 : 0.5}
/>
</Box>
</Box>
......
......@@ -163,9 +163,9 @@ export default function ActivityTabel() {
return tempData;
};
useEffect(() => {
fetchLog(page, roleFilterQuery, dateFilterQuery, ignoreDateFilterQuery);
}, [page]);
// useEffect(() => {
// fetchLog(page, roleFilterQuery, dateFilterQuery, ignoreDateFilterQuery);
// }, [page]);
return (
<>
......@@ -280,12 +280,26 @@ export default function ActivityTabel() {
data={getTableData()}
maximumData={totalLog}
onChange={async (val, pageInput) => {
setPage(pageInput);
setLogTable(
logList.filter((e) => (val ? e.detail.object.includes(val) : true))
);
return getTableData();
if (val) {
setLogTable(
logList.filter((e) =>
val ? e.detail.object.includes(val) : true
)
);
return getTableData();
} else {
setPage(pageInput);
return fetchLog(
pageInput,
roleFilterQuery,
dateFilterQuery,
ignoreDateFilterQuery
).then(() => {
return getTableData();
});
}
}}
itemPerPage={10}
/>
</>
);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment