sync: master to staging (#641)

Set hardcoded date for demo (#640)

Co-authored-by: Manuel Miranda <[email protected]>

src/__tests__/components/DateRangeInput.test.tsx

@@ -11,7 +11,7 @@ jest.mock('react-tailwindcss-datepicker', () => jest.fn(
 
 describe('DateRangeInput', () => {
   beforeEach(() => {
-    jest.spyOn(DateTime, 'now').mockReturnValue(DateTime.fromISO('2023-01-30'));
+    jest.spyOn(DateTime, 'now').mockReturnValue(DateTime.fromISO('2023-01-30') as DateTime<true>);
   });
 
   afterEach(() => {
@@ -45,7 +45,7 @@ describe('DateRangeInput', () => {
         },
         configs: {
           shortcuts: {
-            today: {
+            t: {
               text: 'Today',
               period: {
                 start: DateTime.now().toJSDate(),
@@ -85,7 +85,7 @@ describe('DateRangeInput', () => {
         minDate: DateTime.fromISO('2022-01-01').toJSDate(),
         configs: {
           shortcuts: expect.objectContaining({
-            today: {
+            t: {
               text: 'Today',
               period: {
                 start: DateTime.fromISO('2023-01-30').toJSDate(),

src/__tests__/components/pages/accounts/AccountsTable.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
 import { DateTime } from 'luxon';
+import { render, screen } from '@testing-library/react';
 import { UseQueryResult } from '@tanstack/react-query';
 
 import { AccountsTable } from '@/components/pages/accounts';
@@ -54,9 +54,8 @@ describe('AccountsTable', () => {
           },
         ],
         data: [],
-        initialSort: {
-          desc: true,
-          id: 'total',
+        initialState: {
+          sorting: [{ id: 'total', desc: true }],
         },
         isExpanded: false,
         showHeader: false,

src/__tests__/components/pages/commodity/PricesTable.test.tsx

@@ -35,14 +35,14 @@ describe('PricesTable', () => {
     expect((Table as jest.Mock)).toHaveBeenLastCalledWith(
       {
         id: 'prices-table',
-        initialSort: {
-          desc: true,
-          id: 'date',
-        },
         initialState: {
           pagination: {
             pageSize: 7,
           },
+          sorting: [{
+            id: 'date',
+            desc: true,
+          }],
         },
         showPagination: true,
         data: [],

src/__tests__/components/pages/investments/InvestmentsTable.test.tsx

@@ -75,9 +75,8 @@ describe('InvestmentsTable', () => {
           },
         ],
         data: [],
-        initialSort: {
-          desc: true,
-          id: 'unrealizedProfit',
+        initialState: {
+          sorting: [{ id: 'unrealizedProfit', desc: true }],
         },
       },
       {},

src/__tests__/hooks/api/useInvestments.test.tsx

@@ -133,7 +133,6 @@ describe('useInvestment', () => {
       ],
       queryFn: expect.any(Function),
       enabled: true,
-      placeholderData: expect.any(Function),
     });
 
     const callArgs = (query.useQuery as jest.Mock).mock.calls[0][0];

src/app/dashboard/accounts/page.tsx

@@ -25,7 +25,6 @@ const IncomeExpenseHistogram = dynamic(() => import('@/components/pages/accounts
 export default function AccountsPage(): JSX.Element {
   const { data: earliestDate } = API.useStartDate();
   const { data, isLoading } = API.useAccounts();
-
   const [selectedDate, setSelectedDate] = React.useState(DateTime.now());
 
   if (isLoading) {

src/app/dashboard/layout.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import Modal from 'react-modal';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { keepPreviousData, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import Footer from '@/layout/Footer';
@@ -23,6 +23,7 @@ const queryClient = new QueryClient({
       refetchOnReconnect: false,
       refetchOnWindowFocus: false,
       gcTime: 300000,
+      placeholderData: keepPreviousData,
     },
   },
 });

src/components/DateRangeInput.tsx

@@ -20,7 +20,7 @@ export default function DateRangeInput({
 }: DateRangeInputProps): JSX.Element {
   const now = DateTime.now();
   const shortcuts: { [key: string]: { text: string, period: { start: Date, end: Date } } } = {
-    today: {
+    t: {
       text: 'Today',
       period: {
         start: now.toJSDate(),

src/components/Table.tsx

@@ -7,7 +7,6 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   getExpandedRowModel,
-  ColumnSort,
   ExpandedState,
   getPaginationRowModel,
 } from '@tanstack/react-table';
@@ -20,7 +19,6 @@ export type TableProps<T extends object> = {
   id: string,
   columns: ColumnDef<T>[],
   data: T[],
-  initialSort?: ColumnSort,
   showHeader?: boolean,
   showPagination?: boolean,
   tdClassName?: string,
@@ -30,7 +28,6 @@ export type TableProps<T extends object> = {
 export default function Table<T extends object = {}>(
   {
     id,
-    initialSort,
     showHeader = true,
     showPagination = false,
     tdClassName = 'px-6 py-4',
@@ -45,7 +42,6 @@ export default function Table<T extends object = {}>(
     enableExpanding: true,
     initialState: {
       ...props.initialState,
-      sorting: (initialSort && [initialSort]) || undefined,
       expanded: isExpanded as ExpandedState,
     },
     ...props,

src/components/pages/account/TransactionsTable.tsx

@@ -9,7 +9,7 @@ import Link from 'next/link';
 import { FaArrowUp, FaArrowDown } from 'react-icons/fa';
 import { BiEdit, BiXCircle } from 'react-icons/bi';
 import { Tooltip } from 'react-tooltip';
-import { keepPreviousData, useQuery, UseQueryResult } from '@tanstack/react-query';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
 
 import FormButton from '@/components/buttons/FormButton';
 import TransactionForm from '@/components/forms/transaction/TransactionForm';
@@ -126,7 +126,6 @@ function useTransaction(guid: string): UseQueryResult<Transaction> {
       }),
       queryKey,
     ),
-    placeholderData: keepPreviousData,
   });
 }
 

src/components/pages/accounts/AccountsTable.tsx

@@ -47,7 +47,9 @@ export default function AccountsTable(
       id="accounts-table"
       columns={columns}
       data={tree.leaves}
-      initialSort={{ id: 'total', desc: true }}
+      initialState={{
+        sorting: [{ id: 'total', desc: true }],
+      }}
       showHeader={false}
       tdClassName="p-2"
       getSubRows={row => row.leaves}

src/components/pages/commodity/PricesTable.tsx

@@ -21,11 +21,14 @@ export default function TransactionsTable({
       id="prices-table"
       columns={columns}
       data={prices}
-      initialSort={{ id: 'date', desc: true }}
       initialState={{
         pagination: {
           pageSize: 7,
         },
+        sorting: [{
+          id: 'date',
+          desc: true,
+        }],
       }}
       showPagination
     />

src/components/pages/investments/InvestmentsTable.tsx

@@ -28,7 +28,9 @@ export default function InvestmentsTable(): JSX.Element {
       id="investments-table"
       columns={columns}
       data={investments}
-      initialSort={{ id: 'unrealizedProfit', desc: true }}
+      initialState={{
+        sorting: [{ id: 'unrealizedProfit', desc: true }],
+      }}
     />
   );
 }

src/hooks/api/useInvestments.ts

@@ -1,5 +1,4 @@
 import {
-  keepPreviousData,
   useQuery,
   useQueryClient,
   UseQueryResult,
@@ -80,7 +79,6 @@ export function useInvestment(guid: string): UseQueryResult<InvestmentAccount> {
       `/${InvestmentAccount.CACHE_KEY.join('/')}/${guid}`,
     ),
     enabled: !!account && !!splits && !!mainCurrency,
-    placeholderData: keepPreviousData,
   });
 
   if (result.error) {

src/hooks/api/useSplits.ts

@@ -1,5 +1,4 @@
 import {
-  keepPreviousData,
   useQuery,
   UseQueryResult,
 } from '@tanstack/react-query';
@@ -83,7 +82,6 @@ export function useSplitsPagination(
         .getMany(),
       queryKey,
     ),
-    placeholderData: keepPreviousData,
   });
 
   return result;

src/layout/RootLayout.tsx

@@ -8,9 +8,12 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import '@/css/globals.css';
 import { Auth0Provider } from '@/lib/auth0-provider';
-import { isProd } from '@/helpers/env';
+import { isProd, isStaging } from '@/helpers/env';
 
 Settings.throwOnInvalid = true;
+if (isStaging()) {
+  Settings.now = () => 1704067200000; // 2023-01-01
+}
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -20,7 +23,7 @@ const queryClient = new QueryClient({
       refetchOnMount: true,
       refetchOnReconnect: false,
       refetchOnWindowFocus: false,
-      gcTime: 300000,
+      gcTime: 300000, // 5 minutes
     },
   },
 });

src/setupTests.ts

@@ -37,3 +37,4 @@ window.matchMedia = jest.fn().mockReturnValue({ matches: true });
 
 Settings.defaultZone = 'utc';
 Settings.throwOnInvalid = true;
+Settings.now = () => 1704067200000; // 2023-01-01