peterwood/finance
1
0
Fork 0
mirror of https://github.com/acedanger/finance.git synced 2025-12-05 22:50:12 -08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Reorganize imports and improve code consistency across components and API routes

Browse Source
This commit is contained in:
GitHub Copilot
2025-05-05 06:59:13 -04:00
parent d8a70e0f08
commit ad6693d1d7
14 changed files with 87 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AccountSummary.astro
View File

@@ -1,6 +1,6 @@
---
import { formatCurrency } from '../utils';
import type { Account } from '../types';
import { formatCurrency } from '../utils';
interface Props {
account: Account;

13
src/components/AccountSummary.tsx
View File

@@ -1,14 +1,11 @@
import React, { useState, useEffect } from 'react';
import { useStore } from '@nanostores/react';
import type React from 'react';
import { useEffect, useState } from 'react';
import { currentAccountId as currentAccountIdStore, refreshKey } from '../stores/transactionStore';
import type { Account } from '../types';
import { formatCurrency } from '../utils';
import { currentAccountId as currentAccountIdStore, refreshKey } from '../stores/transactionStore';
interface AccountSummaryProps {
// No props needed, data comes from store and fetch
}
export default function AccountSummary({}: AccountSummaryProps) {
export default function AccountSummary() {
const currentAccountId = useStore(currentAccountIdStore);
const refreshCounter = useStore(refreshKey);
const [account, setAccount] = useState<Account | null>(null);
@@ -42,7 +39,7 @@ export default function AccountSummary({}: AccountSummaryProps) {
};
fetchDetails();
}, [currentAccountId, refreshCounter]);
}, [currentAccountId]);
// Determine content based on state
let balanceContent: React.ReactNode;

26
src/components/AddTransactionForm.tsx
View File

@@ -1,18 +1,16 @@
import React, { useState, useEffect } from 'react';
import { useStore } from '@nanostores/react';
import type { Transaction } from '../types';
import type React from 'react';
import { useEffect, useState } from 'react';
// Import store atoms and actions
import {
currentAccountId as currentAccountIdStore,
transactionToEdit as transactionToEditStore,
cancelEditingTransaction,
currentAccountId as currentAccountIdStore,
transactionSaved,
transactionToEdit as transactionToEditStore,
} from '../stores/transactionStore';
import type { Transaction } from '../types';
// Remove props that now come from the store
interface AddTransactionFormProps {}
export default function AddTransactionForm({}: AddTransactionFormProps) {
export default function AddTransactionForm() {
// --- Read state from store ---
const currentAccountId = useStore(currentAccountIdStore);
const transactionToEdit = useStore(transactionToEditStore);
@@ -44,7 +42,7 @@ export default function AddTransactionForm({}: AddTransactionFormProps) {
try {
const dateObj = new Date(transactionToEdit.date);
// Check if date is valid before formatting
if (!isNaN(dateObj.getTime())) {
if (!Number.isNaN(dateObj.getTime())) {
// Directly format the date object (usually interpreted as UTC midnight)
// into the YYYY-MM-DD format required by the input.
// No timezone adjustment needed here.
@@ -87,8 +85,8 @@ export default function AddTransactionForm({}: AddTransactionFormProps) {
if (!amount) {
errors.push('Amount is required');
} else {
const amountNum = parseFloat(amount);
if (isNaN(amountNum)) {
const amountNum = Number.parseFloat(amount);
if (Number.isNaN(amountNum)) {
errors.push('Amount must be a valid number');
} else if (amountNum === 0) {
errors.push('Amount cannot be zero');
@@ -98,8 +96,8 @@ export default function AddTransactionForm({}: AddTransactionFormProps) {
errors.push('Date is required');
} else {
try {
const dateObj = new Date(date + 'T00:00:00'); // Treat input as local date
if (isNaN(dateObj.getTime())) {
const dateObj = new Date(`${date}T00:00:00`); // Treat input as local date
if (Number.isNaN(dateObj.getTime())) {
errors.push('Invalid date format');
}
} catch (e) {
@@ -134,7 +132,7 @@ export default function AddTransactionForm({}: AddTransactionFormProps) {
accountId: currentAccountId,
date: date, // Send as YYYY-MM-DD string
description: description.trim(),
amount: parseFloat(amount),
amount: Number.parseFloat(amount),
};
const method = editingId ? 'PUT' : 'POST';

2
src/components/MainContent.astro
View File

@@ -1,6 +1,6 @@
---
import TransactionTable from './TransactionTable.tsx';
import type { Account } from '../types';
import TransactionTable from './TransactionTable.tsx';
interface Props {
account: Account;

2
src/components/Sidebar.astro
View File

@@ -1,7 +1,7 @@
---
import type { Account } from '../types';
import AccountSummary from './AccountSummary.tsx'; // Import the React component instead of the Astro one
import AddTransactionForm from './AddTransactionForm.tsx';
import type { Account } from '../types';
interface Props {
accounts: Account[];

4
src/components/TransactionTable.astro
View File

@@ -1,6 +1,6 @@
---
import { formatCurrency, formatDate } from '../utils';
import type { Transaction } from '../types';
import { formatCurrency, formatDate } from '../utils';
interface Props {
transactions: Transaction[];
@@ -10,7 +10,7 @@ const { transactions } = Astro.props;
// Sort transactions by date descending for display
const sortedTransactions = [...transactions].sort(
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
);
// TODO: UI/UX Improvements

26
src/components/TransactionTable.tsx
View File

@@ -1,17 +1,15 @@
import React, { useState, useEffect } from 'react';
import { useStore } from '@nanostores/react';
import React, { useState, useEffect } from 'react';
import {
currentAccountId as currentAccountIdStore,
refreshKey,
startEditingTransaction,
triggerRefresh,
} from '../stores/transactionStore';
import type { Transaction } from '../types';
import { formatCurrency, formatDate } from '../utils';
import {
startEditingTransaction,
currentAccountId as currentAccountIdStore,
triggerRefresh,
refreshKey,
} from '../stores/transactionStore';
interface TransactionTableProps {}
export default function TransactionTable({}: TransactionTableProps) {
export default function TransactionTable() {
const currentAccountId = useStore(currentAccountIdStore);
const refreshCounter = useStore(refreshKey);
@@ -44,10 +42,10 @@ export default function TransactionTable({}: TransactionTableProps) {
};
fetchTransactions();
}, [currentAccountId, refreshCounter]);
}, [currentAccountId]);
const sortedTransactions = [...transactions].sort(
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
);
const handleDelete = async (txnId: string) => {
@@ -76,7 +74,7 @@ export default function TransactionTable({}: TransactionTableProps) {
console.log(`Transaction ${txnId} deleted successfully.`);
setTransactions((currentTransactions) =>
currentTransactions.filter((txn) => txn.id !== txnId)
currentTransactions.filter((txn) => txn.id !== txnId),
);
triggerRefresh();
@@ -139,6 +137,7 @@ export default function TransactionTable({}: TransactionTableProps) {
</td>
<td>
<button
type="button"
className="action-btn edit-btn"
title="Edit transaction"
onClick={() => handleEdit(txn)}
@@ -146,6 +145,7 @@ export default function TransactionTable({}: TransactionTableProps) {
Edit
</button>
<button
type="button"
className="action-btn delete-btn"
title="Delete transaction"
onClick={() => handleDelete(txn.id)}

2
src/pages/api/transactions/[id]/index.ts
View File

@@ -1,5 +1,5 @@
import type { APIRoute } from 'astro';
import { transactions, accounts } from '../../../../data/store';
import { accounts, transactions } from '../../../../data/store';
import type { Transaction } from '../../../../types';
export const PUT: APIRoute = async ({ request, params }) => {

2
src/pages/api/transactions/index.ts
View File

@@ -11,7 +11,7 @@
*/
import type { APIRoute } from 'astro';
import { transactions, accounts } from '../../../data/store';
import { accounts, transactions } from '../../../data/store';
import type { Transaction } from '../../../types';
/**

6
src/pages/index.astro
View File

@@ -1,7 +1,7 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import Sidebar from '../components/Sidebar.astro';
import MainContent from '../components/MainContent.astro';
import Sidebar from '../components/Sidebar.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import type { Account, Transaction } from '../types';
export interface Props {
@@ -28,7 +28,7 @@ const initialAccount: Account = accounts[0] || {
let initialTransactions: Transaction[] = [];
if (initialAccount.id) {
const transactionsResponse = await fetch(
`${baseUrl}/api/accounts/${initialAccount.id}/transactions`
`${baseUrl}/api/accounts/${initialAccount.id}/transactions`,
);
initialTransactions = await transactionsResponse.json();
}

25
src/test/accounts.test.ts
View File

@@ -1,13 +1,14 @@
import { describe, it, expect } from 'vitest';
import { GET as listAccounts } from '../pages/api/accounts/index';
import { GET as getAccount } from '../pages/api/accounts/[id]/index';
import { GET as listTransactions } from '../pages/api/accounts/[id]/transactions/index';
import type { APIContext } from 'astro';
import { describe, expect, it } from 'vitest';
import { listAccounts } from '../pages/api/accounts';
import { getAccount } from '../pages/api/accounts/[id]';
import { listTransactions } from '../pages/api/accounts/[id]/transactions';
import { createMockAPIContext } from './setup';
describe('Accounts API', () => {
describe('GET /api/accounts', () => {
it('should return all accounts', async () => {
const response = await listAccounts(createMockAPIContext() as any);
const response = await listAccounts(createMockAPIContext());
const accounts = await response.json();
expect(response.status).toBe(200);
@@ -19,7 +20,9 @@ describe('Accounts API', () => {
describe('GET /api/accounts/:id', () => {
it('should return a specific account', async () => {
const response = await getAccount(createMockAPIContext({ params: { id: '1' } }) as any);
const response = await getAccount(
createMockAPIContext({ params: { id: '1' } }) as APIContext,
);
const account = await response.json();
expect(response.status).toBe(200);
@@ -28,7 +31,9 @@ describe('Accounts API', () => {
});
it('should return 404 for non-existent account', async () => {
const response = await getAccount(createMockAPIContext({ params: { id: '999' } }) as any);
const response = await getAccount(
createMockAPIContext({ params: { id: '999' } }) as APIContext,
);
const error = await response.json();
expect(response.status).toBe(404);
@@ -38,7 +43,9 @@ describe('Accounts API', () => {
describe('GET /api/accounts/:id/transactions', () => {
it('should return transactions for an account', async () => {
const response = await listTransactions(createMockAPIContext({ params: { id: '1' } }) as any);
const response = await listTransactions(
createMockAPIContext({ params: { id: '1' } }) as APIContext,
);
const transactions = await response.json();
expect(response.status).toBe(200);
@@ -48,7 +55,7 @@ describe('Accounts API', () => {
it('should return empty array for account with no transactions', async () => {
const response = await listTransactions(
createMockAPIContext({ params: { id: '999' } }) as any
createMockAPIContext({ params: { id: '999' } }) as APIContext,
);
const transactions = await response.json();

27
src/test/setup.ts
View File

@@ -1,29 +1,20 @@
import type { APIContext } from 'astro';
import { beforeEach } from 'vitest';
import { accounts, transactions } from '../data/store';
import type { APIContext } from 'astro';
// Create a mock APIContext factory
export function createMockAPIContext<T extends Record<string, string> = Record<string, string>>({
params = {} as T,
} = {}): Partial<APIContext> {
export function createMockAPIContext(options: Partial<APIContext> = {}): APIContext {
return {
params,
props: {},
request: new Request('http://localhost:4321'),
site: new URL('http://localhost:4321'),
generator: 'test',
url: new URL('http://localhost:4321'),
clientAddress: '127.0.0.1',
cookies: new Headers() as any, // Cast Headers to cookies as we don't need cookie functionality in tests
cookies: new Headers(),
redirect: () => new Response(),
locals: {},
preferredLocale: undefined,
preferredLocaleList: [],
currentLocale: undefined,
routePattern: '/api/[...path]',
originPathname: '/api',
getActionResult: () => undefined,
isPrerendered: false,
site: new URL('http://localhost:4321'),
generator: 'test',
params: {},
...options,
};
}
@@ -43,7 +34,7 @@ beforeEach(() => {
name: 'Test Savings',
last4: '5678',
balance: 5000.0,
}
},
);
// Reset transactions to initial state
@@ -62,6 +53,6 @@ beforeEach(() => {
date: '2025-04-24',
description: 'Test Transaction 2',
amount: 100.0,
}
},
);
});

43
src/test/transactions.test.ts
View File

@@ -7,13 +7,12 @@
// - Add load testing for API endpoints
// - Implement test data factories
import { describe, it, expect } from 'vitest';
import { POST as createTransaction } from '../pages/api/transactions/index';
import {
PUT as updateTransaction,
DELETE as deleteTransaction,
} from '../pages/api/transactions/[id]/index';
import type { APIContext } from 'astro';
import { describe, expect, it } from 'vitest';
import { accounts, transactions } from '../data/store';
import { createTransaction } from '../pages/api/transactions';
import { updateTransaction } from '../pages/api/transactions/[id]';
import { DELETE as deleteTransaction } from '../pages/api/transactions/[id]/index';
import type { Transaction } from '../types';
import { createMockAPIContext } from './setup';
@@ -28,7 +27,7 @@ describe('Transactions API', () => {
amount: -25.0,
};
const ctx = createMockAPIContext() as any;
const ctx = createMockAPIContext() as APIContext;
ctx.request = new Request('http://localhost:4321/api/transactions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
@@ -50,7 +49,7 @@ describe('Transactions API', () => {
// Missing required fields
};
const ctx = createMockAPIContext() as any;
const ctx = createMockAPIContext() as APIContext;
ctx.request = new Request('http://localhost:4321/api/transactions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
@@ -72,7 +71,7 @@ describe('Transactions API', () => {
amount: 100,
};
const ctx = createMockAPIContext() as any;
const ctx = createMockAPIContext() as APIContext;
ctx.request = new Request('http://localhost:4321/api/transactions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
@@ -87,7 +86,7 @@ describe('Transactions API', () => {
});
it('should reject invalid request body', async () => {
const ctx = createMockAPIContext() as any;
const ctx = createMockAPIContext() as APIContext;
ctx.request = new Request('http://localhost:4321/api/transactions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
@@ -111,7 +110,7 @@ describe('Transactions API', () => {
amount: -75.0,
};
const ctx = createMockAPIContext({ params: { id: '1' } }) as any;
const ctx = createMockAPIContext({ params: { id: '1' } }) as APIContext;
ctx.request = new Request('http://localhost:4321/api/transactions/1', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
@@ -128,7 +127,7 @@ describe('Transactions API', () => {
});
it('should reject update with invalid request body', async () => {
const ctx = createMockAPIContext({ params: { id: '1' } }) as any;
const ctx = createMockAPIContext({ params: { id: '1' } }) as APIContext;
ctx.request = new Request('http://localhost:4321/api/transactions/1', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
@@ -143,7 +142,7 @@ describe('Transactions API', () => {
});
it('should reject update for non-existent transaction', async () => {
const ctx = createMockAPIContext({ params: { id: '999' } }) as any;
const ctx = createMockAPIContext({ params: { id: '999' } }) as APIContext;
ctx.request = new Request('http://localhost:4321/api/transactions/999', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
@@ -161,7 +160,7 @@ describe('Transactions API', () => {
// First update the transaction to point to a non-existent account
transactions[0].accountId = '999';
const ctx = createMockAPIContext({ params: { id: '1' } }) as any;
const ctx = createMockAPIContext({ params: { id: '1' } }) as APIContext;
ctx.request = new Request('http://localhost:4321/api/transactions/1', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
@@ -187,7 +186,7 @@ describe('Transactions API', () => {
const oldTransaction = transactions.find((t) => t.id === '1');
if (!oldTransaction) throw new Error('Test transaction not found');
const ctx = createMockAPIContext({ params: { id: '1' } }) as any;
const ctx = createMockAPIContext({ params: { id: '1' } }) as APIContext;
ctx.request = new Request('http://localhost:4321/api/transactions/1', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
@@ -211,7 +210,7 @@ describe('Transactions API', () => {
});
it('should reject update without transaction ID', async () => {
const ctx = createMockAPIContext() as any;
const ctx = createMockAPIContext() as APIContext;
ctx.request = new Request('http://localhost:4321/api/transactions/undefined', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
@@ -230,7 +229,7 @@ describe('Transactions API', () => {
const savedAccounts = [...accounts];
accounts.length = 0;
const ctx = createMockAPIContext({ params: { id: '1' } }) as any;
const ctx = createMockAPIContext({ params: { id: '1' } }) as APIContext;
ctx.request = new Request('http://localhost:4321/api/transactions/1', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
@@ -248,7 +247,7 @@ describe('Transactions API', () => {
});
it("should reject update when new account doesn't exist", async () => {
const ctx = createMockAPIContext({ params: { id: '1' } }) as any;
const ctx = createMockAPIContext({ params: { id: '1' } }) as APIContext;
ctx.request = new Request('http://localhost:4321/api/transactions/1', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
@@ -273,7 +272,7 @@ describe('Transactions API', () => {
const initialCount = transactions.length;
const response = await deleteTransaction(
createMockAPIContext({ params: { id: '1' } }) as any
createMockAPIContext({ params: { id: '1' } }) as APIContext,
);
expect(response.status).toBe(204);
@@ -282,7 +281,7 @@ describe('Transactions API', () => {
});
it('should reject delete without transaction ID', async () => {
const response = await deleteTransaction(createMockAPIContext() as any);
const response = await deleteTransaction(createMockAPIContext() as APIContext);
const error = await response.json();
@@ -292,7 +291,7 @@ describe('Transactions API', () => {
it('should return 404 for non-existent transaction', async () => {
const response = await deleteTransaction(
createMockAPIContext({ params: { id: '999' } }) as any
createMockAPIContext({ params: { id: '999' } }) as APIContext,
);
const error = await response.json();
@@ -313,7 +312,7 @@ describe('Transactions API', () => {
transactions.push(testTransaction);
const response = await deleteTransaction(
createMockAPIContext({ params: { id: 'test-delete' } }) as any
createMockAPIContext({ params: { id: 'test-delete' } }) as APIContext,
);
const error = await response.json();

2
src/utils.ts
View File

@@ -8,7 +8,7 @@ export function formatCurrency(amount: number): string {
// Basic date formatting
export function formatDate(dateString: string): string {
const date = new Date(dateString + 'T00:00:00'); // Ensure correct parsing as local date
const date = new Date(`${dateString}T00:00:00`); // Ensure correct parsing as local date
return new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'short',