From f074b35c7a5d9ed9aa93b9dc2a77951268668de4 Mon Sep 17 00:00:00 2001
From: Sean Zeliq Urian <seanurian@gmail.com>
Date: Sun, 6 Jun 2021 00:48:52 +0700
Subject: [PATCH 1/5] [RED] implement test for indexing item

---
 .../components/ActivityTabel/index.test.tsx   | 548 +++++++++---------
 1 file changed, 276 insertions(+), 272 deletions(-)

diff --git a/src/scenes/ActivityLog/components/ActivityTabel/index.test.tsx b/src/scenes/ActivityLog/components/ActivityTabel/index.test.tsx
index 22660dc..a9ab717 100644
--- a/src/scenes/ActivityLog/components/ActivityTabel/index.test.tsx
+++ b/src/scenes/ActivityLog/components/ActivityTabel/index.test.tsx
@@ -7,314 +7,318 @@ import { AppContext } from 'contexts';
 import { mount } from 'enzyme';
 
 const dummyLog = {
-    status: 200,
-    data: {
-        username: "Test",
-        is_admin: false,
-        previous: true,
-        next: true,
-        count: 1,
-        results: [
-            {
-                action_type: "Delete",
-                model_name: "Account",
-                object_id: "12345",
-                recorded_at: "2020-05-31T23:03:35.854615+07:00",
-            },
-        ]
-    }
-}
+  status: 200,
+  data: {
+    username: 'Test',
+    is_admin: false,
+    previous: true,
+    next: true,
+    count: 1,
+    results: [
+      {
+        action_type: 'Delete',
+        model_name: 'Account',
+        object_id: '12345',
+        recorded_at: '2020-05-31T23:03:35.854615+07:00',
+      },
+    ],
+  },
+};
 
 jest.mock('axios');
 const mockedAxios = axios as jest.Mocked<typeof axios>;
 const testProps = {
-    services: {
-        main: useMainService('dummyToken'),
-    },
+  services: {
+    main: useMainService('dummyToken'),
+  },
 };
 
 it('ActivityTabel renders correctly', () => {
-    const instance = renderer.create(
-        <ActivityTabel />
-    );
+  const instance = renderer.create(<ActivityTabel />);
 
-    expect(instance).toBeTruthy();
+  expect(instance).toBeTruthy();
 });
 
 describe('load logs and generate log messages correctly', () => {
-    it('Monitoring case', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Create",
-                        model_name: "Monitoring Case",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ],
-                investigation_case: {
-                    case_subject: {
-                        name: "Test"
-                    }
-                }
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
+  it('Monitoring case', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Create',
+            model_name: 'Monitoring Case',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+        investigation_case: {
+          case_subject: {
+            name: 'Test',
+          },
+        },
+      },
     });
 
-    it('Investigation case', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Create",
-                        model_name: "Investigation Case",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ],
-                case_subject: {
-                    name: "Test"
-                }
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
-    });
+    const instance = mount(
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
+    );
 
-    it('Case subject', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Create",
-                        model_name: "Case Subject",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ],
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
+    expect(mockedAxios.request).toBeCalled();
+  });
+
+  it('Investigation case', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Create',
+            model_name: 'Investigation Case',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+        case_subject: {
+          name: 'Test',
+        },
+      },
     });
 
-    it('Create account', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                username: "Test",
-                is_admin: false,
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Create",
-                        model_name: "Account",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ]
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
-    });
+    const instance = mount(
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
+    );
 
-    it('Create account, but account deleted', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Create",
-                        model_name: "Account",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ]
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
+    expect(mockedAxios.request).toBeCalled();
+  });
+
+  it('Case subject', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Create',
+            model_name: 'Case Subject',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+      },
     });
 
-    it('Edit account', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                username: "Test",
-                is_admin: false,
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Edit",
-                        model_name: "Account",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ]
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
-    });
+    const instance = mount(
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
+    );
 
-    it('Edit account, but account deleted', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 404,
-            data: {
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Edit",
-                        model_name: "Account",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ]
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
-    });
+    expect(mockedAxios.request).toBeCalled();
+  });
 
-    it('Delete account', () => {
-        mockedAxios.request.mockResolvedValue({
-            status: 200,
-            data: {
-                username: "Test",
-                is_admin: false,
-                previous: null,
-                next: null,
-                count: 1,
-                results: [
-                    {
-                        action_type: "Delete",
-                        model_name: "Account",
-                        object_id: "1234",
-                        recorded_at: "2020-05-31T23:03:35.854615+07:00",
-                    },
-                ]
-            }
-        });
-
-        const instance = mount(
-            <AppContext.Provider value={testProps}>
-                <ActivityTabel />
-            </AppContext.Provider>
-        );
-
-        expect(mockedAxios.request).toBeCalled();
+  it('Create account', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        username: 'Test',
+        is_admin: false,
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Create',
+            model_name: 'Account',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+      },
     });
-});
 
-it('fetch new logs and change page number when press next or previous button', () => {
-    mockedAxios.request.mockResolvedValue(dummyLog);
+    const instance = mount(
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
+    );
+
+    expect(mockedAxios.request).toBeCalled();
+  });
+
+  it('Create account, but account deleted', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Create',
+            model_name: 'Account',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+      },
+    });
 
     const instance = mount(
-        <AppContext.Provider value={testProps}>
-            <ActivityTabel />
-        </AppContext.Provider>
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
     );
+
     expect(mockedAxios.request).toBeCalled();
+  });
+
+  it('Edit account', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        username: 'Test',
+        is_admin: false,
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Edit',
+            model_name: 'Account',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+      },
+    });
 
-    let nextButton = instance.find('[data-test-id="next-button"]');
-    let prevButton = instance.find('[data-test-id="prev-button"]');
+    const instance = mount(
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
+    );
 
-    let pageNumber = instance.find('Text').findWhere(elem => elem.prop('id') === 'page-number');
-    expect(pageNumber.text()).toBe('1');
-    nextButton.at(0).simulate('click');
     expect(mockedAxios.request).toBeCalled();
+  });
+
+  it('Edit account, but account deleted', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 404,
+      data: {
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Edit',
+            model_name: 'Account',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+      },
+    });
+
+    const instance = mount(
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
+    );
 
-    prevButton.at(0).simulate('click');
-    pageNumber = instance.find('Text').findWhere(elem => elem.prop('id') === 'page-number');
-    expect(pageNumber.text()).toBe('1');
     expect(mockedAxios.request).toBeCalled();
-})
+  });
 
-it('Sort and filter are displayed and clickable', () => {
-    mockedAxios.request.mockResolvedValue(dummyLog);
+  it('Delete account', () => {
+    mockedAxios.request.mockResolvedValue({
+      status: 200,
+      data: {
+        username: 'Test',
+        is_admin: false,
+        previous: null,
+        next: null,
+        count: 1,
+        results: [
+          {
+            action_type: 'Delete',
+            model_name: 'Account',
+            object_id: '1234',
+            recorded_at: '2020-05-31T23:03:35.854615+07:00',
+          },
+        ],
+      },
+    });
 
     const instance = mount(
-        <AppContext.Provider value={testProps}>
-            <ActivityTabel />
-        </AppContext.Provider>
+      <AppContext.Provider value={testProps}>
+        <ActivityTabel />
+      </AppContext.Provider>
     );
-    expect(mockedAxios.request).toBeCalled();
 
-    let sortByDate = instance.find("#sortbydate");
-    let sortByObj = instance.find("#sortbyobj");
-    let filter = instance.find("#filter");
+    expect(mockedAxios.request).toBeCalled();
+  });
+});
 
-    sortByDate.simulate("click");
-    sortByObj.simulate("click");
-    filter.simulate("click");
+it('fetch new logs and change page number when press next or previous button', () => {
+  mockedAxios.request.mockResolvedValue(dummyLog);
+
+  const instance = mount(
+    <AppContext.Provider value={testProps}>
+      <ActivityTabel />
+    </AppContext.Provider>
+  );
+  expect(mockedAxios.request).toBeCalled();
+
+  let nextButton = instance.find('[data-test-id="next-button"]');
+  let prevButton = instance.find('[data-test-id="prev-button"]');
+
+  let pageNumber = instance
+    .find('Text')
+    .findWhere((elem) => elem.prop('id') === 'page-number');
+  expect(pageNumber.text()).toBe('1');
+  nextButton.at(0).simulate('click');
+  expect(mockedAxios.request).toBeCalled();
+
+  prevButton.at(0).simulate('click');
+  pageNumber = instance
+    .find('Text')
+    .findWhere((elem) => elem.prop('id') === 'page-number');
+  expect(pageNumber.text()).toBe('1');
+  expect(mockedAxios.request).toBeCalled();
+});
 
-    let table = instance.find("Table");
-    expect(table).toBeTruthy();
-});
\ No newline at end of file
+it('Sort and filter are displayed and clickable', () => {
+  mockedAxios.request.mockResolvedValue(dummyLog);
+
+  const instance = mount(
+    <AppContext.Provider value={testProps}>
+      <ActivityTabel />
+    </AppContext.Provider>
+  );
+  expect(mockedAxios.request).toBeCalled();
+
+  let sortByIndex = instance.find('#sortbyindex');
+  let sortByDate = instance.find('#sortbydate');
+  let sortByObj = instance.find('#sortbyobj');
+  let filter = instance.find('#filter');
+
+  sortByIndex.at(0).simulate('click');
+  sortByDate.at(0).simulate('click');
+  sortByObj.at(0).simulate('click');
+  filter.at(0).simulate('click');
+
+  let table = instance.find('Table');
+  expect(table).toBeTruthy();
+});
-- 
GitLab


From 962e6b6be4080e79c02d3eec04d94289643bbf4b Mon Sep 17 00:00:00 2001
From: Sean Zeliq Urian <seanurian@gmail.com>
Date: Sun, 6 Jun 2021 00:49:14 +0700
Subject: [PATCH 2/5] [GREEN] implement indexing item

---
 .../components/ActivityTabel/index.tsx        | 53 +++++++++++++++++--
 src/scenes/ActivityLog/types/types.tsx        | 17 +++---
 src/scenes/ActivityLog/utilities/utils.tsx    |  1 +
 3 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/src/scenes/ActivityLog/components/ActivityTabel/index.tsx b/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
index d766dd9..97cd7fd 100644
--- a/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
+++ b/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { ThemeContext } from 'styled-components';
 import { Box, Gap, Icon, Table, Field, Button, Checkbox } from 'components';
 import { AppContext } from 'contexts';
 import { DateProps } from 'contexts/AppContext/types';
@@ -10,11 +9,13 @@ import {
 } from 'scenes/ActivityLog/utilities/utils';
 
 export default function ActivityTabel() {
+  const itemPerPage = 10;
   const { services } = useContext(AppContext);
   const [logList, setLogList] = useState<Log[]>([]);
   const [logTable, setLogTable] = useState<Log[]>([]);
   const [page, setPage] = useState(1);
   const [totalLog, setTotalLog] = useState(0);
+  const [indexAscending, setIndexAscending] = useState(false);
   const [dateAscending, setDateAscending] = useState(true);
   const [objAscending, setObjAscending] = useState(true);
   const [filterToggle, setFilterToggle] = useState<boolean>(true);
@@ -27,6 +28,13 @@ export default function ActivityTabel() {
     end_date: new Date(),
   });
 
+  const addNumber = (page: number, logs: any) => {
+    for (let i = 0; i < logs.length; i++) {
+      logs[i]['detail']['index'] = itemPerPage * (page - 1) + i + 1;
+    }
+    return logs;
+  };
+
   const fetchLog = async (
     page: number,
     roleFilterQuery: String,
@@ -69,11 +77,31 @@ export default function ActivityTabel() {
       setFilterToggle(!filterToggle);
       setPage(1);
     }
+    logs = addNumber(page, logs);
     setLogList(logs);
     setLogTable(logs);
     setTotalLog(logResponse.data.count);
   };
 
+  const sortLogByIndex = () => {
+    if (indexAscending) {
+      setLogTable(
+        logList.sort((a, b) => {
+          if (a.detail.index === b.detail.index) return 0;
+          return a.detail.index > b.detail.index ? 1 : -1;
+        })
+      );
+    } else {
+      setLogTable(
+        logList.sort((a, b) => {
+          if (a.detail.index === b.detail.index) return 0;
+          return a.detail.index < b.detail.index ? 1 : -1;
+        })
+      );
+    }
+    setIndexAscending(!indexAscending);
+  };
+
   const sortLogByDate = () => {
     if (dateAscending) {
       setLogTable(
@@ -112,8 +140,9 @@ export default function ActivityTabel() {
     setObjAscending(!objAscending);
   };
 
-  const getTableData = () =>
-    logTable.map(({ timestamp, detail }) => [
+  const getTableData = () => {
+    let tempData = logTable.map(({ timestamp, detail }) => [
+      detail.index,
       timestamp.toLocaleString('id-ID', {
         weekday: 'long',
         year: 'numeric',
@@ -131,6 +160,8 @@ export default function ActivityTabel() {
         ? detail.object.slice(0, 77) + '...'
         : detail.object,
     ]);
+    return tempData;
+  };
 
   useEffect(() => {
     fetchLog(page, roleFilterQuery, dateFilterQuery, ignoreDateFilterQuery);
@@ -201,6 +232,17 @@ export default function ActivityTabel() {
       <Box width="100%" axis={Box.Axis.Horizontal} margin="2em 2em">
         Urutkan dengan
         <Gap gap={40} axis={Gap.Axis.Horizontal} />
+        <Icon
+          src="/assets/icons/right-paging.svg"
+          width="20px"
+          height="17px"
+          id="sortbyindex"
+          onClick={sortLogByIndex}
+          transform={indexAscending ? 'rotateZ(-90deg)' : 'rotateZ(90deg)'}
+        />
+        <Gap gap={12} axis={Gap.Axis.Horizontal} />
+        No
+        <Gap gap={40} axis={Gap.Axis.Horizontal} />
         <Icon
           src="/assets/icons/right-paging.svg"
           width="20px"
@@ -226,6 +268,7 @@ export default function ActivityTabel() {
       <Table
         key={String(filterToggle)}
         header={[
+          'No.',
           'Hari, Tanggal',
           'Waktu',
           'Aktivitas',
@@ -237,10 +280,10 @@ export default function ActivityTabel() {
         data={getTableData()}
         maximumData={totalLog}
         onChange={async (val, pageInput) => {
+          setPage(pageInput);
           setLogTable(
-            logList.filter((e) => (val ? e.detail.object === val : true))
+            logList.filter((e) => (val ? e.detail.object.includes(val) : true))
           );
-          setPage(pageInput);
           return getTableData();
         }}
       />
diff --git a/src/scenes/ActivityLog/types/types.tsx b/src/scenes/ActivityLog/types/types.tsx
index b1f2028..b98486f 100644
--- a/src/scenes/ActivityLog/types/types.tsx
+++ b/src/scenes/ActivityLog/types/types.tsx
@@ -1,12 +1,13 @@
 export interface Log {
-    timestamp: Date;
-    message: string;
-    detail: LogDetail;
+  timestamp: Date;
+  message: string;
+  detail: LogDetail;
 }
 
 export interface LogDetail {
-    activity: string;
-    authorRole: 'admin' | 'kader';
-    authorName: string;
-    object: string;
-}
\ No newline at end of file
+  index: number;
+  activity: string;
+  authorRole: 'admin' | 'kader';
+  authorName: string;
+  object: string;
+}
diff --git a/src/scenes/ActivityLog/utilities/utils.tsx b/src/scenes/ActivityLog/utilities/utils.tsx
index 380c24b..e84766b 100644
--- a/src/scenes/ActivityLog/utilities/utils.tsx
+++ b/src/scenes/ActivityLog/utilities/utils.tsx
@@ -85,6 +85,7 @@ const generateLogDetail = async (
   services: any
 ): Promise<LogDetail> => {
   let logDetail: LogDetail = {
+    index: log.index,
     activity: log.model_name,
     authorRole: log.author.is_admin ? 'admin' : 'kader',
     authorName: log.author.username,
-- 
GitLab


From c75f7ef0095759f38b3d9396b603e77348fffc75 Mon Sep 17 00:00:00 2001
From: Sean Zeliq Urian <seanurian@gmail.com>
Date: Sun, 6 Jun 2021 12:16:49 +0700
Subject: [PATCH 3/5] [REFACTOR] fix inconsistency total item when change page

---
 src/components/Table/index.tsx                | 50 ++++++++++++-------
 .../components/ActivityTabel/index.tsx        | 30 ++++++++---
 2 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 0ade5ed..6298a6f 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -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>
diff --git a/src/scenes/ActivityLog/components/ActivityTabel/index.tsx b/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
index 97cd7fd..22719a9 100644
--- a/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
+++ b/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
@@ -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}
       />
     </>
   );
-- 
GitLab


From b151c5c781708ec583efce804cbd6d3c3beffdca Mon Sep 17 00:00:00 2001
From: Sean Zeliq Urian <seanurian@gmail.com>
Date: Sun, 6 Jun 2021 12:53:32 +0700
Subject: [PATCH 4/5] [GREEN] change item per page max 20

---
 src/scenes/ActivityLog/components/ActivityList/index.tsx  | 2 +-
 src/scenes/ActivityLog/components/ActivityTabel/index.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/scenes/ActivityLog/components/ActivityList/index.tsx b/src/scenes/ActivityLog/components/ActivityList/index.tsx
index c15cd89..7916f98 100644
--- a/src/scenes/ActivityLog/components/ActivityList/index.tsx
+++ b/src/scenes/ActivityLog/components/ActivityList/index.tsx
@@ -201,7 +201,7 @@ export default function ActivityList() {
 
       <Box width="100%" mainAxis="flex-end">
         <Text color={colors.mediumGray}>
-          {((page - 1) * 10 + logList.length).toString() + ' dari ' + totalLog}
+          {((page - 1) * 20 + logList.length).toString() + ' dari ' + totalLog}
         </Text>
         <Gap gap={12} axis={Gap.Axis.Horizontal} />
         <Icon
diff --git a/src/scenes/ActivityLog/components/ActivityTabel/index.tsx b/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
index 22719a9..fdff4f0 100644
--- a/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
+++ b/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
@@ -9,7 +9,7 @@ import {
 } from 'scenes/ActivityLog/utilities/utils';
 
 export default function ActivityTabel() {
-  const itemPerPage = 10;
+  const itemPerPage = 20;
   const { services } = useContext(AppContext);
   const [logList, setLogList] = useState<Log[]>([]);
   const [logTable, setLogTable] = useState<Log[]>([]);
@@ -299,7 +299,7 @@ export default function ActivityTabel() {
             });
           }
         }}
-        itemPerPage={10}
+        itemPerPage={20}
       />
     </>
   );
-- 
GitLab


From ac348b0c1c6cd0a7787d0d793798c53c9ea9373d Mon Sep 17 00:00:00 2001
From: Sean Zeliq Urian <sean.zeliq@ui.ac.id>
Date: Sun, 6 Jun 2021 17:07:35 +0700
Subject: [PATCH 5/5] [CHORUS] Remove unecessary line of code

---
 src/scenes/ActivityLog/components/ActivityTabel/index.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/scenes/ActivityLog/components/ActivityTabel/index.tsx b/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
index fdff4f0..b197711 100644
--- a/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
+++ b/src/scenes/ActivityLog/components/ActivityTabel/index.tsx
@@ -163,10 +163,6 @@ export default function ActivityTabel() {
     return tempData;
   };
 
-  // useEffect(() => {
-  //   fetchLog(page, roleFilterQuery, dateFilterQuery, ignoreDateFilterQuery);
-  // }, [page]);
-
   return (
     <>
       <Box width="60%" margin="2em" axis={Box.Axis.Vertical}>
-- 
GitLab