feat: remove observer

src/apps/admin/layout/index.tsx

@@ -15,13 +15,13 @@ interface AdminLayoutProps {
 }
 
 export default function AdminLayout(props: AdminLayoutProps) {
-  const navigate = useNavigate();
-  const { modal } = App.useApp();
-
   const { children } = props;
   const user = useRecoilValue(UserDataState);
   const initialName = getInitialName(user?.name ?? '');
 
+  const { modal } = App.useApp();
+  const navigate = useNavigate();
+
   const [openModalConfig, setOpenModalConfig] = useState(false);
   const onCancelModalConfig = () => setOpenModalConfig(false);
   // const onOpenModalConfig = () => setOpenModalConfig(true);

src/apps/admin/pages/report.tsx

@@ -3,7 +3,7 @@ import { API_URL, currencyFormatter } from '@pos/base';
 import { Fragment, useEffect, useState } from 'react';
 import { Card, Col, DatePicker, notification, Row, Table } from 'antd';
 import dayjs from 'dayjs';
-import lodash from 'lodash';
+import lodash, { concat } from 'lodash';
 import { v4 } from 'uuid';
 
 export default function ReportModule() {
@@ -186,7 +186,9 @@ export default function ReportModule() {
               pagination={false}
               loading={loadingDataItem}
               scroll={{ x: 'max-width', y: 350 }}
-              rowKey={(child) => child.key} // Make sure each child row has a unique key
+              rowKey={(child) => {
+                return child.key ?? child?.id ?? child.tr_item__item_name ?? child?.title;
+              }}
               expandable={{ expandedRowKeys: dataItemKeys, showExpandColumn: false }}
               rowClassName={(row) => (row.key ? 'row-group' : '')}
               rowHoverable={false}
@@ -251,7 +253,9 @@ export default function ReportModule() {
               pagination={false}
               loading={loadingDataItemMaster}
               scroll={{ x: 'max-width', y: 350 }}
-              rowKey={(child) => child.key} // Make sure each child row has a unique key
+              rowKey={(child) => {
+                return child.key ?? child?.id ?? child.tr_item__item_name ?? child?.title;
+              }}
               expandable={{ expandedRowKeys: dataItemMasterKeys, showExpandColumn: false }}
               rowClassName={(row) => (row.key ? 'row-group' : '')}
               rowHoverable={false}

src/apps/index.tsx

@@ -1,7 +1,7 @@
 import { Suspense, lazy } from 'react';
 import { RecoilRoot } from 'recoil';
 import { ConfigProvider, Flex, Spin, App as AntdApp } from 'antd';
-import { DebugObserver, ForbiddenAccessPage, NotFoundPage } from '@pos/base';
+import { ForbiddenAccessPage, NotFoundPage } from '@pos/base';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { APP_THEME } from '@pos/base/presentation/assets/themes';
 import { LoadingOutlined } from '@ant-design/icons';
@@ -12,7 +12,6 @@ const AppModule = lazy(() => import('./admin/index'));
 export default function App() {
   return (
     <RecoilRoot>
-      <DebugObserver />
       <ConfigProvider theme={APP_THEME.LIGHT}>
         <AntdApp>
           <Suspense

src/base/presentation/providers/index.ts

@@ -1 +0,0 @@
-export * from './recoil-debug-observer/recoil-debug-observer';

src/base/presentation/providers/recoil-debug-observer/recoil-debug-observer.tsx

@@ -1,21 +0,0 @@
-import { APP_MODE } from '@pos/base/infrastructure/constants';
-import { ReactNode, useEffect } from 'react';
-import { useRecoilSnapshot } from 'recoil';
-
-export function DebugObserver(): ReactNode {
-  const snapshot = useRecoilSnapshot();
-  useEffect(() => {
-    if (APP_MODE === 'development') {
-      console.debug(
-        '%c' + 'The following atoms were modified:',
-        'color:yellow; font-weight:bold; text-transform: uppercase;',
-      );
-      for (const node of snapshot.getNodes_UNSTABLE({ isModified: true })) {
-        console.debug('%c' + node.key, 'color:white; background-color:blue', snapshot.getLoadable(node));
-      }
-      console.debug('%c' + '----------------------------------------', 'color:white');
-    }
-  }, [snapshot]);
-
-  return null;
-}