Form/PaymentsTable: optimize

Components/Calculation/Form/Payments/PaymentsTable/index.jsx

@@ -1,9 +1,7 @@
 import Alert from 'Elements/Alert';
 import Table from 'Elements/Table';
-import { chunk } from 'lodash';
-import { toJS } from 'mobx';
+import { computed } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { useMemo } from 'react';
 import { useStore } from 'stores/hooks';
 import styled from 'styled-components';
 import { Box, Flex } from 'UIKit/grid';
@@ -23,10 +21,10 @@ const TableWrapper = styled.div`
 const TablesGroupGrid = styled(Box)`
   display: flex;
   flex-direction: column;
+  gap: 10px;
   ${min('laptop')} {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 5px;
   }
 `;
 
@@ -45,31 +43,37 @@ const Validation = observer(() => {
 
 const SPLIT_NUMBER = 12;
 
+function TablePart({ num }) {
+  const store = useStore();
+  const { payments } = store.$tables;
+
+  const values = payments.values.slice(num * SPLIT_NUMBER, num * SPLIT_NUMBER + SPLIT_NUMBER);
+
+  const dataSource = values.map((value, index) => ({
+    key: index + num * SPLIT_NUMBER,
+    num: index + num * SPLIT_NUMBER,
+    paymentRelation: value,
+  }));
+
+  return (
+    <TableWrapper>
+      <Table size="small" columns={columns} dataSource={dataSource} pagination={false} />
+    </TableWrapper>
+  );
+}
+
 const TablesGroup = observer(() => {
   const store = useStore();
   const { payments } = store.$tables;
 
-  const values = toJS(payments.values);
+  const valuesLength = computed(() => payments.values.length).get();
 
-  const data = useMemo(
-    // prettier-ignore
-    () => values.map((value, index) => ({
-      key: index,
-      num: index,
-      paymentRelation: value,
-    })),
-    [values]
-  );
+  const tablesNumber = Math.ceil(valuesLength / SPLIT_NUMBER);
 
-  const tables = useMemo(
-    // prettier-ignore
-    () => chunk(data, SPLIT_NUMBER).map((dataSource) => (
-      <TableWrapper>
-        <Table size="small" columns={columns} dataSource={dataSource} pagination={false} />
-      </TableWrapper>
-      )),
-    [data]
-  );
+  const tables = [];
+  for (let i = 0; i < tablesNumber; i += 1) {
+    tables.push(<TablePart key={i} num={i} />);
+  }
 
   return <TablesGroupGrid>{tables}</TablesGroupGrid>;
 });
@@ -77,8 +81,8 @@ const TablesGroup = observer(() => {
 export default function TablePayments() {
   return (
     <Grid>
-      <TablesGroup />
       <Validation />
+      <TablesGroup />
     </Grid>
   );
 }