[REFACTOR] fix error data when filtered not in first page

src/scenes/ActivityLog/components/ActivityList/index.tsx

 import React, { useContext, useEffect, useState } from 'react';
 import styled, { ThemeContext } from 'styled-components';
-import {
-  Box,
-  Text,
-  Gap,
-  Icon,
-  Field,
-  Button,
-  Checkbox,
-} from 'components';
+import { Box, Text, Gap, Icon, Field, Button, Checkbox } from 'components';
 import { AppContext } from 'contexts';
 import Loading from 'components/Loading';
 import { DateProps } from 'contexts/AppContext/types';
 import { Log } from 'scenes/ActivityLog/types/types';
-import { generateLogDetail, generateLogMessage } from "scenes/ActivityLog/utilities/utils";
-import { DEFAULT_THEME } from 'scenes/ActivityLog'
+import {
+  generateLogDetail,
+  generateLogMessage,
+} from 'scenes/ActivityLog/utilities/utils';
+import { DEFAULT_THEME } from 'scenes/ActivityLog';
 
 export default function ActivityList() {
   const { colors } = useContext(ThemeContext) || DEFAULT_THEME;
@@ -26,7 +21,7 @@ export default function ActivityList() {
   const [totalLog, setTotalLog] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
   const verticalLineHeight = (logList.length - 1) * 52;
-  const [roleFilterQuery, setRoleFilterQuery] = useState<String>("Semua Peran");
+  const [roleFilterQuery, setRoleFilterQuery] = useState<String>('Semua Peran');
   const [ignoreDateFilterQuery, setIgnoredateFilterQuery] = useState<boolean>(
     true
   );
@@ -51,27 +46,49 @@ export default function ActivityList() {
     margin-right: 20px;
   `;
 
-  const fetchLog = async (page: number, roleFilterQuery: String, dateFilterQuery: DateProps, ignoreDateFilterQuery: boolean) => {
+  const fetchLog = async (
+    page: number,
+    roleFilterQuery: String,
+    dateFilterQuery: DateProps,
+    ignoreDateFilterQuery: boolean
+  ) => {
     let dateOnly = {
       start_date: dateFilterQuery.start_date.toISOString().split('T')[0],
-      end_date: dateFilterQuery.end_date.toISOString().split('T')[0]
-    }
+      end_date: dateFilterQuery.end_date.toISOString().split('T')[0],
+    };
     setIsLoading(true);
-    const logResponse = await services.main.getLog(page, roleFilterQuery, dateOnly.start_date, dateOnly.end_date, ignoreDateFilterQuery);
+    const logResponse = await services.main.getLog(
+      page,
+      roleFilterQuery,
+      dateOnly.start_date,
+      dateOnly.end_date,
+      ignoreDateFilterQuery
+    );
+
+    console.log(logResponse);
 
     let logs: Log[] = [];
-    for (let log of logResponse.data.results) {
-      let logObject: Log = {
-        timestamp: new Date(log.recorded_at),
-        message: await generateLogMessage(log, services),
-        detail: await generateLogDetail(log, services),
-      };
-      logs.push(logObject);
+    console.log(logResponse.data.results);
+    if (
+      logResponse.data.results !== undefined &&
+      logResponse.data.results.length > 0
+    ) {
+      for (let log of logResponse.data.results) {
+        let logObject: Log = {
+          timestamp: new Date(log.recorded_at),
+          message: await generateLogMessage(log, services),
+          detail: await generateLogDetail(log, services),
+        };
+        logs.push(logObject);
+      }
+    } else {
+      setPage(1);
     }
     setLogList(logs);
     setNext(logResponse.data.next ? true : false);
     setPrev(logResponse.data.previous ? true : false);
     setTotalLog(logResponse.data.count);
+
     setIsLoading(false);
   };
 
@@ -125,7 +142,18 @@ export default function ActivityList() {
           updateValue={(value) => setRoleFilterQuery(value)}
         />
         <Gap gap={50} axis={Gap.Axis.Horizontal} />
-        <Button id="filter" onClick={() => fetchLog(page, roleFilterQuery, dateFilterQuery, ignoreDateFilterQuery)}>
+        <Button
+          id="filter"
+          onClick={() => {
+            fetchLog(
+              1,
+              roleFilterQuery,
+              dateFilterQuery,
+              ignoreDateFilterQuery
+            );
+            setPage(1);
+          }}
+        >
           Terapkan Filter
         </Button>
       </Box>
@@ -175,7 +203,7 @@ export default function ActivityList() {
         <Icon
           id="prev-button"
           cursor="pointer"
-          onClick={prev ? () => setPage(page - 1) : () => { }}
+          onClick={prev ? () => setPage(page - 1) : () => {}}
           src="/assets/icons/right-paging.svg"
           origin="50% 50%"
           height="16px"
@@ -188,7 +216,7 @@ export default function ActivityList() {
         <Icon
           id="next-button"
           cursor="pointer"
-          onClick={next ? () => setPage(page + 1) : () => { }}
+          onClick={next ? () => setPage(page + 1) : () => {}}
           src="/assets/icons/right-paging.svg"
           height="16px"
           opacity={next ? 1 : 0.5}

src/scenes/ActivityLog/components/ActivityTabel/index.tsx

 import React, { useContext, useEffect, useState } from 'react';
 import { ThemeContext } from 'styled-components';
-import {
-  Box,
-  Gap,
-  Icon,
-  Table,
-  Field,
-  Button,
-  Checkbox,
-} from 'components';
+import { Box, Gap, Icon, Table, Field, Button, Checkbox } from 'components';
 import { AppContext } from 'contexts';
 import { DateProps } from 'contexts/AppContext/types';
 import { Log } from 'scenes/ActivityLog/types/types';
-import { generateLogDetail, generateLogMessage } from "scenes/ActivityLog/utilities/utils";
+import {
+  generateLogDetail,
+  generateLogMessage,
+} from 'scenes/ActivityLog/utilities/utils';
 
 export default function ActivityTabel() {
   const { services } = useContext(AppContext);
@@ -22,7 +17,8 @@ export default function ActivityTabel() {
   const [totalLog, setTotalLog] = useState(0);
   const [dateAscending, setDateAscending] = useState(true);
   const [objAscending, setObjAscending] = useState(true);
-  const [roleFilterQuery, setRoleFilterQuery] = useState<String>("Semua Peran");
+  const [filterToggle, setFilterToggle] = useState<boolean>(true);
+  const [roleFilterQuery, setRoleFilterQuery] = useState<String>('Semua Peran');
   const [ignoreDateFilterQuery, setIgnoredateFilterQuery] = useState<boolean>(
     true
   );
@@ -31,21 +27,40 @@ export default function ActivityTabel() {
     end_date: new Date(),
   });
 
-  const fetchLog = async (page: number, roleFilterQuery: String, dateFilterQuery: DateProps, ignoreDateFilterQuery: boolean) => {
+  const fetchLog = async (
+    page: number,
+    roleFilterQuery: String,
+    dateFilterQuery: DateProps,
+    ignoreDateFilterQuery: boolean
+  ) => {
     let dateOnly = {
       start_date: dateFilterQuery.start_date.toISOString().split('T')[0],
-      end_date: dateFilterQuery.end_date.toISOString().split('T')[0]
-    }
-    const logResponse = await services.main.getLog(page, roleFilterQuery, dateOnly.start_date, dateOnly.end_date, ignoreDateFilterQuery);
+      end_date: dateFilterQuery.end_date.toISOString().split('T')[0],
+    };
+    const logResponse = await services.main.getLog(
+      page,
+      roleFilterQuery,
+      dateOnly.start_date,
+      dateOnly.end_date,
+      ignoreDateFilterQuery
+    );
 
     let logs: Log[] = [];
-    for (let log of logResponse.data.results) {
-      let logObject: Log = {
-        timestamp: new Date(log.recorded_at),
-        message: await generateLogMessage(log, services),
-        detail: await generateLogDetail(log, services),
-      };
-      logs.push(logObject);
+    if (
+      logResponse.data.results !== undefined &&
+      logResponse.data.results.length > 0
+    ) {
+      for (let log of logResponse.data.results) {
+        let logObject: Log = {
+          timestamp: new Date(log.recorded_at),
+          message: await generateLogMessage(log, services),
+          detail: await generateLogDetail(log, services),
+        };
+        logs.push(logObject);
+      }
+    } else {
+      setFilterToggle(!filterToggle);
+      setPage(1);
     }
     setLogList(logs);
     setLogTable(logs);
@@ -160,7 +175,19 @@ export default function ActivityTabel() {
           updateValue={(value) => setRoleFilterQuery(value)}
         />
         <Gap gap={50} axis={Gap.Axis.Horizontal} />
-        <Button id="filter" onClick={() => fetchLog(page, roleFilterQuery, dateFilterQuery, ignoreDateFilterQuery)}>
+        <Button
+          id="filter"
+          onClick={() => {
+            setFilterToggle(!filterToggle);
+            fetchLog(
+              1,
+              roleFilterQuery,
+              dateFilterQuery,
+              ignoreDateFilterQuery
+            );
+            setPage(1);
+          }}
+        >
           Terapkan Filter
         </Button>
       </Box>
@@ -190,6 +217,7 @@ export default function ActivityTabel() {
         Nama Objek (A-Z)
       </Box>
       <Table
+        key={String(filterToggle)}
         header={[
           'Hari, Tanggal',
           'Waktu',