huge refactor on web-api and web-app

This commit is contained in:
Boki 2025-06-18 10:20:05 -04:00
parent 1d299e52d4
commit 265e10a658
23 changed files with 1545 additions and 1233 deletions

File diff suppressed because it is too large Load diff

View file

@ -11,15 +11,22 @@ export const healthRoutes = new Hono();
// Basic health check
healthRoutes.get('/', c => {
return c.json({
logger.debug('Basic health check requested');
const response = {
status: 'healthy',
service: 'web-api',
timestamp: new Date().toISOString(),
});
};
logger.info('Basic health check successful', { status: response.status });
return c.json(response);
});
// Detailed health check with database connectivity
healthRoutes.get('/detailed', async c => {
logger.debug('Detailed health check requested');
const health = {
status: 'healthy',
service: 'web-api',
@ -31,6 +38,7 @@ healthRoutes.get('/detailed', async c => {
};
// Check MongoDB
logger.debug('Checking MongoDB connectivity');
try {
const mongoClient = getMongoDBClient();
if (mongoClient.connected) {
@ -38,26 +46,34 @@ healthRoutes.get('/detailed', async c => {
const db = mongoClient.getDatabase();
await db.admin().ping();
health.checks.mongodb = { status: 'healthy', message: 'Connected and responsive' };
logger.debug('MongoDB health check passed');
} else {
health.checks.mongodb = { status: 'unhealthy', message: 'Not connected' };
logger.warn('MongoDB health check failed - not connected');
}
} catch (error) {
const errorMessage = error instanceof Error ? error.message : 'Unknown error';
health.checks.mongodb = {
status: 'unhealthy',
message: error instanceof Error ? error.message : 'Unknown error',
message: errorMessage,
};
logger.error('MongoDB health check failed', { error: errorMessage });
}
// Check PostgreSQL
logger.debug('Checking PostgreSQL connectivity');
try {
const postgresClient = getPostgreSQLClient();
await postgresClient.query('SELECT 1');
health.checks.postgresql = { status: 'healthy', message: 'Connected and responsive' };
logger.debug('PostgreSQL health check passed');
} catch (error) {
const errorMessage = error instanceof Error ? error.message : 'Unknown error';
health.checks.postgresql = {
status: 'unhealthy',
message: error instanceof Error ? error.message : 'Unknown error',
message: errorMessage,
};
logger.error('PostgreSQL health check failed', { error: errorMessage });
}
// Overall status
@ -65,5 +81,19 @@ healthRoutes.get('/detailed', async c => {
health.status = allHealthy ? 'healthy' : 'unhealthy';
const statusCode = allHealthy ? 200 : 503;
if (allHealthy) {
logger.info('Detailed health check successful - all systems healthy', {
mongodb: health.checks.mongodb.status,
postgresql: health.checks.postgresql.status
});
} else {
logger.warn('Detailed health check failed - some systems unhealthy', {
mongodb: health.checks.mongodb.status,
postgresql: health.checks.postgresql.status,
overallStatus: health.status
});
}
return c.json(health, statusCode);
});

View file

@ -0,0 +1,381 @@
import { getLogger } from '@stock-bot/logger';
import { getPostgreSQLClient } from '@stock-bot/postgres-client';
import { getMongoDBClient } from '@stock-bot/mongodb-client';
import {
Exchange,
ExchangeWithMappings,
ProviderMapping,
CreateExchangeRequest,
UpdateExchangeRequest,
CreateProviderMappingRequest,
UpdateProviderMappingRequest,
ProviderExchange,
ExchangeStats,
} from '../types/exchange.types';
const logger = getLogger('exchange-service');
export class ExchangeService {
private postgresClient = getPostgreSQLClient();
private mongoClient = getMongoDBClient();
// Exchanges
async getAllExchanges(): Promise<ExchangeWithMappings[]> {
const exchangesQuery = `
SELECT
e.id,
e.code,
e.name,
e.country,
e.currency,
e.active,
e.visible,
e.created_at,
e.updated_at,
COUNT(pem.id) as provider_mapping_count,
COUNT(CASE WHEN pem.active = true THEN 1 END) as active_mapping_count,
COUNT(CASE WHEN pem.verified = true THEN 1 END) as verified_mapping_count,
STRING_AGG(DISTINCT pem.provider, ', ') as providers
FROM exchanges e
LEFT JOIN provider_exchange_mappings pem ON e.id = pem.master_exchange_id
WHERE e.visible = true
GROUP BY e.id, e.code, e.name, e.country, e.currency, e.active, e.visible, e.created_at, e.updated_at
ORDER BY e.code
`;
const exchangesResult = await this.postgresClient.query(exchangesQuery);
// Get all provider mappings
const mappingsQuery = `
SELECT
pem.*,
e.code as master_exchange_code,
e.name as master_exchange_name
FROM provider_exchange_mappings pem
JOIN exchanges e ON pem.master_exchange_id = e.id
WHERE e.visible = true
ORDER BY pem.master_exchange_id, pem.provider, pem.provider_exchange_code
`;
const mappingsResult = await this.postgresClient.query(mappingsQuery);
// Group mappings by exchange ID
const mappingsByExchange = mappingsResult.rows.reduce((acc, mapping) => {
const exchangeId = mapping.master_exchange_id;
if (!acc[exchangeId]) {
acc[exchangeId] = [];
}
acc[exchangeId].push(mapping);
return acc;
}, {} as Record<string, ProviderMapping[]>);
// Attach mappings to exchanges
return exchangesResult.rows.map(exchange => ({
...exchange,
provider_mappings: mappingsByExchange[exchange.id] || [],
}));
}
async getExchangeById(id: string): Promise<{ exchange: Exchange; provider_mappings: ProviderMapping[] } | null> {
const exchangeQuery = 'SELECT * FROM exchanges WHERE id = $1 AND visible = true';
const exchangeResult = await this.postgresClient.query(exchangeQuery, [id]);
if (exchangeResult.rows.length === 0) {
return null;
}
const mappingsQuery = `
SELECT
pem.*,
e.code as master_exchange_code,
e.name as master_exchange_name
FROM provider_exchange_mappings pem
JOIN exchanges e ON pem.master_exchange_id = e.id
WHERE pem.master_exchange_id = $1
ORDER BY pem.provider, pem.provider_exchange_code
`;
const mappingsResult = await this.postgresClient.query(mappingsQuery, [id]);
return {
exchange: exchangeResult.rows[0],
provider_mappings: mappingsResult.rows,
};
}
async createExchange(data: CreateExchangeRequest): Promise<Exchange> {
const query = `
INSERT INTO exchanges (code, name, country, currency, active, visible)
VALUES ($1, $2, $3, $4, $5, true)
RETURNING *
`;
const result = await this.postgresClient.query(query, [
data.code,
data.name,
data.country,
data.currency,
data.active,
]);
logger.info('Exchange created', {
exchangeId: result.rows[0].id,
code: data.code,
name: data.name,
});
return result.rows[0];
}
async updateExchange(id: string, updates: UpdateExchangeRequest): Promise<Exchange | null> {
const updateFields = [];
const values = [];
let paramIndex = 1;
Object.entries(updates).forEach(([key, value]) => {
updateFields.push(`${key} = $${paramIndex++}`);
values.push(value);
});
updateFields.push(`updated_at = NOW()`);
values.push(id);
const query = `
UPDATE exchanges
SET ${updateFields.join(', ')}
WHERE id = $${paramIndex}
RETURNING *
`;
const result = await this.postgresClient.query(query, values);
if (result.rows.length === 0) {
return null;
}
// If hiding an exchange, delete its provider mappings
if (updates.visible === false) {
await this.deleteProviderMappingsByExchangeId(id);
}
logger.info('Exchange updated', { exchangeId: id, updates });
return result.rows[0];
}
// Provider Mappings
async getAllProviderMappings(): Promise<ProviderMapping[]> {
const query = `
SELECT
pem.*,
e.code as master_exchange_code,
e.name as master_exchange_name,
e.active as master_exchange_active
FROM provider_exchange_mappings pem
JOIN exchanges e ON pem.master_exchange_id = e.id
WHERE e.visible = true
ORDER BY pem.provider, pem.provider_exchange_code
`;
const result = await this.postgresClient.query(query);
return result.rows;
}
async getProviderMappingsByProvider(provider: string): Promise<ProviderMapping[]> {
const query = `
SELECT
pem.*,
e.code as master_exchange_code,
e.name as master_exchange_name,
e.active as master_exchange_active
FROM provider_exchange_mappings pem
JOIN exchanges e ON pem.master_exchange_id = e.id
WHERE pem.provider = $1 AND e.visible = true
ORDER BY pem.provider_exchange_code
`;
const result = await this.postgresClient.query(query, [provider]);
return result.rows;
}
async createProviderMapping(data: CreateProviderMappingRequest): Promise<ProviderMapping> {
const query = `
INSERT INTO provider_exchange_mappings
(provider, provider_exchange_code, provider_exchange_name, master_exchange_id,
country_code, currency, confidence, active, verified, auto_mapped)
VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, false)
RETURNING *
`;
const result = await this.postgresClient.query(query, [
data.provider,
data.provider_exchange_code,
data.provider_exchange_name,
data.master_exchange_id,
data.country_code,
data.currency,
data.confidence,
data.active,
data.verified,
]);
logger.info('Provider mapping created', {
provider: data.provider,
provider_exchange_code: data.provider_exchange_code,
master_exchange_id: data.master_exchange_id,
});
return result.rows[0];
}
async updateProviderMapping(id: string, updates: UpdateProviderMappingRequest): Promise<ProviderMapping | null> {
const updateFields = [];
const values = [];
let paramIndex = 1;
Object.entries(updates).forEach(([key, value]) => {
updateFields.push(`${key} = $${paramIndex++}`);
values.push(value);
});
updateFields.push(`updated_at = NOW()`);
updateFields.push(`auto_mapped = false`); // Mark as manually managed
values.push(id);
const query = `
UPDATE provider_exchange_mappings
SET ${updateFields.join(', ')}
WHERE id = $${paramIndex}
RETURNING *
`;
const result = await this.postgresClient.query(query, values);
if (result.rows.length === 0) {
return null;
}
logger.info('Provider mapping updated', { mappingId: id, updates });
return result.rows[0];
}
async deleteProviderMappingsByExchangeId(exchangeId: string): Promise<number> {
const query = 'DELETE FROM provider_exchange_mappings WHERE master_exchange_id = $1';
const result = await this.postgresClient.query(query, [exchangeId]);
logger.info('Deleted provider mappings for hidden exchange', {
exchangeId,
deletedMappings: result.rowCount,
});
return result.rowCount || 0;
}
// Providers and Statistics
async getProviders(): Promise<string[]> {
const query = `
SELECT DISTINCT provider
FROM provider_exchange_mappings
ORDER BY provider
`;
const result = await this.postgresClient.query(query);
return result.rows.map(row => row.provider);
}
async getExchangeStats(): Promise<ExchangeStats> {
const query = `
SELECT
(SELECT COUNT(*) FROM exchanges WHERE visible = true) as total_exchanges,
(SELECT COUNT(*) FROM exchanges WHERE active = true AND visible = true) as active_exchanges,
(SELECT COUNT(DISTINCT country) FROM exchanges WHERE visible = true) as countries,
(SELECT COUNT(DISTINCT currency) FROM exchanges WHERE visible = true) as currencies,
(SELECT COUNT(*) FROM provider_exchange_mappings pem JOIN exchanges e ON pem.master_exchange_id = e.id WHERE e.visible = true) as total_provider_mappings,
(SELECT COUNT(*) FROM provider_exchange_mappings pem JOIN exchanges e ON pem.master_exchange_id = e.id WHERE pem.active = true AND e.visible = true) as active_provider_mappings,
(SELECT COUNT(*) FROM provider_exchange_mappings pem JOIN exchanges e ON pem.master_exchange_id = e.id WHERE pem.verified = true AND e.visible = true) as verified_provider_mappings,
(SELECT COUNT(DISTINCT provider) FROM provider_exchange_mappings pem JOIN exchanges e ON pem.master_exchange_id = e.id WHERE e.visible = true) as providers
`;
const result = await this.postgresClient.query(query);
return result.rows[0];
}
async getUnmappedProviderExchanges(provider: string): Promise<ProviderExchange[]> {
// Get existing mappings for this provider
const existingMappingsQuery = `
SELECT provider_exchange_code
FROM provider_exchange_mappings
WHERE provider = $1
`;
const existingMappings = await this.postgresClient.query(existingMappingsQuery, [provider]);
const mappedCodes = new Set(existingMappings.rows.map(row => row.provider_exchange_code));
const db = this.mongoClient.getDatabase();
let providerExchanges: ProviderExchange[] = [];
switch (provider) {
case 'eod': {
const eodExchanges = await db.collection('eodExchanges').find({ active: true }).toArray();
providerExchanges = eodExchanges
.filter(exchange => !mappedCodes.has(exchange.Code))
.map(exchange => ({
provider_exchange_code: exchange.Code,
provider_exchange_name: exchange.Name,
country_code: exchange.CountryISO2,
currency: exchange.Currency,
symbol_count: null,
}));
break;
}
case 'ib': {
const ibExchanges = await db.collection('ibExchanges').find({}).toArray();
providerExchanges = ibExchanges
.filter(exchange => !mappedCodes.has(exchange.exchange_id))
.map(exchange => ({
provider_exchange_code: exchange.exchange_id,
provider_exchange_name: exchange.name,
country_code: exchange.country_code,
currency: null,
symbol_count: null,
}));
break;
}
case 'qm': {
const qmExchanges = await db.collection('qmExchanges').find({}).toArray();
providerExchanges = qmExchanges
.filter(exchange => !mappedCodes.has(exchange.exchangeCode))
.map(exchange => ({
provider_exchange_code: exchange.exchangeCode,
provider_exchange_name: exchange.name,
country_code: exchange.countryCode,
currency: exchange.countryCode === 'CA' ? 'CAD' : 'USD',
symbol_count: null,
}));
break;
}
case 'unified': {
const unifiedExchanges = await db.collection('exchanges').find({}).toArray();
providerExchanges = unifiedExchanges
.filter(exchange => !mappedCodes.has(exchange.sourceCode || exchange.code))
.map(exchange => ({
provider_exchange_code: exchange.sourceCode || exchange.code,
provider_exchange_name: exchange.sourceName || exchange.name,
country_code: null,
currency: null,
symbol_count: null,
}));
break;
}
default:
throw new Error(`Unknown provider: ${provider}`);
}
return providerExchanges;
}
}
// Export singleton instance
export const exchangeService = new ExchangeService();

View file

@ -0,0 +1,103 @@
export interface Exchange {
id: string;
code: string;
name: string;
country: string;
currency: string;
active: boolean;
visible: boolean;
created_at: string;
updated_at: string;
}
export interface ExchangeWithMappings extends Exchange {
provider_mapping_count: string;
active_mapping_count: string;
verified_mapping_count: string;
providers: string | null;
provider_mappings: ProviderMapping[];
}
export interface ProviderMapping {
id: string;
provider: string;
provider_exchange_code: string;
provider_exchange_name: string;
master_exchange_id: string;
country_code: string | null;
currency: string | null;
confidence: number;
active: boolean;
verified: boolean;
auto_mapped: boolean;
created_at: string;
updated_at: string;
master_exchange_code?: string;
master_exchange_name?: string;
master_exchange_active?: boolean;
}
export interface CreateExchangeRequest {
code: string;
name: string;
country: string;
currency: string;
active?: boolean;
}
export interface UpdateExchangeRequest {
name?: string;
active?: boolean;
visible?: boolean;
country?: string;
currency?: string;
}
export interface CreateProviderMappingRequest {
provider: string;
provider_exchange_code: string;
provider_exchange_name?: string;
master_exchange_id: string;
country_code?: string;
currency?: string;
confidence?: number;
active?: boolean;
verified?: boolean;
}
export interface UpdateProviderMappingRequest {
active?: boolean;
verified?: boolean;
confidence?: number;
master_exchange_id?: string;
}
export interface ProviderExchange {
provider_exchange_code: string;
provider_exchange_name: string;
country_code: string | null;
currency: string | null;
symbol_count: number | null;
is_mapped?: boolean;
mapped_to_exchange_id?: string | null;
mapped_to_exchange_code?: string | null;
}
export interface ExchangeStats {
total_exchanges: number;
active_exchanges: number;
countries: number;
currencies: number;
total_provider_mappings: number;
active_provider_mappings: number;
verified_provider_mappings: number;
providers: number;
}
export interface ApiResponse<T = any> {
success: boolean;
data?: T;
error?: string;
message?: string;
total?: number;
}

View file

@ -0,0 +1,64 @@
import { Context } from 'hono';
import { getLogger } from '@stock-bot/logger';
import { ValidationError } from './validation';
import { ApiResponse } from '../types/exchange.types';
const logger = getLogger('error-handler');
export function handleError(c: Context, error: unknown, operation: string): Response {
logger.error(`Failed ${operation}`, { error });
// Handle validation errors
if (error instanceof ValidationError) {
const response: ApiResponse = {
success: false,
error: error.message,
};
return c.json(response, 400);
}
// Handle database constraint violations
if (error instanceof Error && error.message.includes('duplicate key')) {
const response: ApiResponse = {
success: false,
error: 'Resource already exists with this unique identifier',
};
return c.json(response, 409);
}
// Handle not found errors
if (error instanceof Error && error.message.includes('not found')) {
const response: ApiResponse = {
success: false,
error: error.message,
};
return c.json(response, 404);
}
// Generic error response
const response: ApiResponse = {
success: false,
error: error instanceof Error ? error.message : 'Unknown error occurred',
};
return c.json(response, 500);
}
export function createSuccessResponse<T>(
data: T,
message?: string,
total?: number
): ApiResponse<T> {
const response: ApiResponse<T> = {
success: true,
data,
};
if (message) {
response.message = message;
}
if (total !== undefined) {
response.total = total;
}
return response;
}

View file

@ -0,0 +1,161 @@
import { CreateExchangeRequest, CreateProviderMappingRequest } from '../types/exchange.types';
export class ValidationError extends Error {
constructor(message: string, public field?: string) {
super(message);
this.name = 'ValidationError';
}
}
export function validateCreateExchange(data: any): CreateExchangeRequest {
const { code, name, country, currency, active = true } = data;
if (!code || typeof code !== 'string') {
throw new ValidationError('Exchange code is required', 'code');
}
if (!name || typeof name !== 'string') {
throw new ValidationError('Exchange name is required', 'name');
}
if (!country || typeof country !== 'string') {
throw new ValidationError('Country is required', 'country');
}
if (!currency || typeof currency !== 'string') {
throw new ValidationError('Currency is required', 'currency');
}
if (code.length > 10) {
throw new ValidationError('Exchange code must be 10 characters or less', 'code');
}
if (country.length !== 2) {
throw new ValidationError('Country must be exactly 2 characters (e.g., US, CA, GB)', 'country');
}
if (currency.length !== 3) {
throw new ValidationError('Currency must be exactly 3 characters (e.g., USD, EUR, CAD)', 'currency');
}
return {
code: code.toUpperCase().trim(),
name: name.trim(),
country: country.toUpperCase().trim(),
currency: currency.toUpperCase().trim(),
active: Boolean(active),
};
}
export function validateCreateProviderMapping(data: any): CreateProviderMappingRequest {
const {
provider,
provider_exchange_code,
provider_exchange_name,
master_exchange_id,
country_code,
currency,
confidence = 1.0,
active = false,
verified = false,
} = data;
if (!provider || typeof provider !== 'string') {
throw new ValidationError('Provider is required', 'provider');
}
if (!provider_exchange_code || typeof provider_exchange_code !== 'string') {
throw new ValidationError('Provider exchange code is required', 'provider_exchange_code');
}
if (!master_exchange_id || typeof master_exchange_id !== 'string') {
throw new ValidationError('Master exchange ID is required', 'master_exchange_id');
}
// Validate currency is 3 characters or null
const cleanCurrency = currency && currency.length <= 3 ? currency : null;
return {
provider: provider.trim(),
provider_exchange_code: provider_exchange_code.trim(),
provider_exchange_name: provider_exchange_name?.trim(),
master_exchange_id: master_exchange_id.trim(),
country_code: country_code?.trim() || null,
currency: cleanCurrency,
confidence: Number(confidence),
active: Boolean(active),
verified: Boolean(verified),
};
}
export function validateUpdateExchange(data: any): any {
const updates: any = {};
if (data.name !== undefined) {
if (typeof data.name !== 'string') {
throw new ValidationError('Name must be a string', 'name');
}
updates.name = data.name.trim();
}
if (data.active !== undefined) {
updates.active = Boolean(data.active);
}
if (data.visible !== undefined) {
updates.visible = Boolean(data.visible);
}
if (data.country !== undefined) {
if (typeof data.country !== 'string' || data.country.length !== 2) {
throw new ValidationError('Country must be exactly 2 characters', 'country');
}
updates.country = data.country.toUpperCase().trim();
}
if (data.currency !== undefined) {
if (typeof data.currency !== 'string' || data.currency.length !== 3) {
throw new ValidationError('Currency must be exactly 3 characters', 'currency');
}
updates.currency = data.currency.toUpperCase().trim();
}
if (Object.keys(updates).length === 0) {
throw new ValidationError('No valid fields to update');
}
return updates;
}
export function validateUpdateProviderMapping(data: any): any {
const updates: any = {};
if (data.active !== undefined) {
updates.active = Boolean(data.active);
}
if (data.verified !== undefined) {
updates.verified = Boolean(data.verified);
}
if (data.confidence !== undefined) {
const confidence = Number(data.confidence);
if (isNaN(confidence) || confidence < 0 || confidence > 1) {
throw new ValidationError('Confidence must be a number between 0 and 1', 'confidence');
}
updates.confidence = confidence;
}
if (data.master_exchange_id !== undefined) {
if (typeof data.master_exchange_id !== 'string') {
throw new ValidationError('Master exchange ID must be a string', 'master_exchange_id');
}
updates.master_exchange_id = data.master_exchange_id.trim();
}
if (Object.keys(updates).length === 0) {
throw new ValidationError('No valid fields to update');
}
return updates;
}

View file

@ -1,5 +1,5 @@
{
"extends": "../../tsconfig.base.json",
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist"

View file

@ -1,6 +1,7 @@
import js from '@eslint/js';
import tseslint from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import globals from 'globals';
@ -13,11 +14,20 @@ export default [
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
globals: {
...globals.browser,
React: 'readonly',
},
parser: tsParser,
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
plugins: {
'@typescript-eslint': tseslint,
'react': react,
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
@ -26,6 +36,23 @@ export default [
...tseslint.configs.recommended.rules,
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
// React configuration
'react/react-in-jsx-scope': 'off', // Not needed with React 17+
'react/jsx-uses-react': 'off', // Not needed with React 17+
// TypeScript specific
'@typescript-eslint/no-explicit-any': 'warn', // Allow any but warn
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
// General ESLint rules
'no-undef': 'off', // TypeScript handles this
'no-console': 'warn',
},
settings: {
react: {
version: 'detect',
},
},
},
];

View file

@ -6,7 +6,7 @@
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint": "eslint . --report-unused-disable-directives --max-warnings 0",
"type-check": "tsc --noEmit"
},
"dependencies": {

View file

@ -10,7 +10,7 @@ import {
SortingState,
useReactTable,
} from '@tanstack/react-table';
import { useState, useRef, useEffect } from 'react';
import { useState, useRef } from 'react';
import { TableVirtuoso } from 'react-virtuoso';
// Tooltip wrapper for cells that might overflow
@ -93,10 +93,6 @@ export function DataTable<T>({
getRowCanExpand,
enableColumnResizing: true,
columnResizeMode: 'onChange',
getCenterTotalSize: () => {
// Force table to use full width
return '100%';
},
});
if (loading) {
@ -139,7 +135,9 @@ export function DataTable<T>({
const index = props['data-index'] as number;
const item = flatRows[index];
if (!item) return null;
if (!item) {
return null;
}
if (item.type === 'expanded') {
return (
@ -167,7 +165,7 @@ export function DataTable<T>({
maxWidth: `${cell.column.getSize()}px`,
}}
>
{(cell.column.columnDef as any).disableTooltip ? (
{(cell.column.columnDef as { disableTooltip?: boolean }).disableTooltip ? (
<div className="truncate overflow-hidden text-ellipsis whitespace-nowrap">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</div>

View file

@ -1,114 +1,55 @@
import { Dialog, DialogContent, DialogHeader, DialogTitle, Button } from '@/components/ui';
import { useCallback, useState } from 'react';
import { CreateExchangeRequest } from '../types';
import { useCallback } from 'react';
import { CreateExchangeRequest, AddExchangeDialogProps } from '../types';
import { validateExchangeForm } from '../utils/validation';
import { useFormValidation } from '../hooks/useFormValidation';
interface AddExchangeDialogProps {
isOpen: boolean;
onClose: () => void;
onCreateExchange: (request: CreateExchangeRequest) => Promise<any>;
}
const initialFormData: CreateExchangeRequest = {
code: '',
name: '',
country: '',
currency: '',
active: true,
};
export function AddExchangeDialog({
isOpen,
onClose,
onCreateExchange,
}: AddExchangeDialogProps) {
const [formData, setFormData] = useState<CreateExchangeRequest>({
code: '',
name: '',
country: '',
currency: '',
active: true,
});
const [loading, setLoading] = useState(false);
const [errors, setErrors] = useState<Record<string, string>>({});
const {
formData,
errors,
isSubmitting,
updateField,
handleSubmit,
reset,
} = useFormValidation(initialFormData, validateExchangeForm);
const validateForm = useCallback((): boolean => {
const newErrors: Record<string, string> = {};
if (!formData.code.trim()) {
newErrors.code = 'Exchange code is required';
} else if (formData.code.length > 10) {
newErrors.code = 'Exchange code must be 10 characters or less';
}
if (!formData.name.trim()) {
newErrors.name = 'Exchange name is required';
}
if (!formData.country.trim()) {
newErrors.country = 'Country is required';
} else if (formData.country.length !== 2) {
newErrors.country = 'Country must be exactly 2 characters (e.g., US, CA, GB)';
}
if (!formData.currency.trim()) {
newErrors.currency = 'Currency is required';
} else if (formData.currency.length !== 3) {
newErrors.currency = 'Currency must be exactly 3 characters (e.g., USD, EUR, CAD)';
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
}, [formData]);
const handleSubmit = useCallback(
async (e: React.FormEvent) => {
e.preventDefault();
if (!validateForm()) {
return;
}
setLoading(true);
try {
await onCreateExchange({
...formData,
code: formData.code.toUpperCase(),
country: formData.country.toUpperCase(),
currency: formData.currency.toUpperCase(),
});
// Reset form on success
setFormData({
code: '',
name: '',
country: '',
currency: '',
active: true,
});
setErrors({});
} catch (error) {
console.error('Error creating exchange:', error);
} finally {
setLoading(false);
}
const onSubmit = useCallback(
async (data: CreateExchangeRequest) => {
await onCreateExchange({
...data,
code: data.code.toUpperCase(),
country: data.country.toUpperCase(),
currency: data.currency.toUpperCase(),
});
},
[formData, validateForm, onCreateExchange]
[onCreateExchange]
);
const handleFormSubmit = useCallback(
(e: React.FormEvent) => {
e.preventDefault();
handleSubmit(onSubmit, onClose);
},
[handleSubmit, onSubmit, onClose]
);
const handleClose = useCallback(() => {
setFormData({
code: '',
name: '',
country: '',
currency: '',
active: true,
});
setErrors({});
reset();
onClose();
}, [onClose]);
const handleInputChange = useCallback(
(field: keyof CreateExchangeRequest, value: string | boolean) => {
setFormData(prev => ({ ...prev, [field]: value }));
// Clear error when user starts typing
if (errors[field]) {
setErrors(prev => ({ ...prev, [field]: '' }));
}
},
[errors]
);
}, [reset, onClose]);
return (
<Dialog open={isOpen} onOpenChange={handleClose}>
@ -120,7 +61,7 @@ export function AddExchangeDialog({
</p>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
<form onSubmit={handleFormSubmit} className="space-y-4">
{/* Exchange Code */}
<div>
<label htmlFor="code" className="block text-sm font-medium text-text-primary mb-1">
@ -130,7 +71,7 @@ export function AddExchangeDialog({
id="code"
type="text"
value={formData.code}
onChange={e => handleInputChange('code', e.target.value)}
onChange={e => updateField('code', e.target.value)}
placeholder="e.g., NASDAQ, NYSE, TSX"
className={`w-full px-3 py-2 border rounded-md bg-surface text-text-primary focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono ${
errors.code ? 'border-danger' : 'border-border'
@ -150,7 +91,7 @@ export function AddExchangeDialog({
id="name"
type="text"
value={formData.name}
onChange={e => handleInputChange('name', e.target.value)}
onChange={e => updateField('name', e.target.value)}
placeholder="e.g., NASDAQ Stock Market, New York Stock Exchange"
className={`w-full px-3 py-2 border rounded-md bg-surface text-text-primary focus:ring-2 focus:ring-primary-500 focus:border-primary-500 ${
errors.name ? 'border-danger' : 'border-border'
@ -170,7 +111,7 @@ export function AddExchangeDialog({
id="country"
type="text"
value={formData.country}
onChange={e => handleInputChange('country', e.target.value)}
onChange={e => updateField('country', e.target.value)}
placeholder="e.g., US, CA, GB"
className={`w-full px-3 py-2 border rounded-md bg-surface text-text-primary focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono ${
errors.country ? 'border-danger' : 'border-border'
@ -190,7 +131,7 @@ export function AddExchangeDialog({
id="currency"
type="text"
value={formData.currency}
onChange={e => handleInputChange('currency', e.target.value)}
onChange={e => updateField('currency', e.target.value)}
placeholder="e.g., USD, EUR, CAD"
className={`w-full px-3 py-2 border rounded-md bg-surface text-text-primary focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono ${
errors.currency ? 'border-danger' : 'border-border'
@ -207,7 +148,7 @@ export function AddExchangeDialog({
<input
type="checkbox"
checked={formData.active}
onChange={e => handleInputChange('active', e.target.checked)}
onChange={e => updateField('active', e.target.checked)}
className="rounded"
/>
<span className="text-sm text-text-primary">Active exchange</span>
@ -219,11 +160,11 @@ export function AddExchangeDialog({
{/* Action Buttons */}
<div className="flex justify-end gap-2 pt-4">
<Button type="button" variant="outline" onClick={handleClose} disabled={loading}>
<Button type="button" variant="outline" onClick={handleClose} disabled={isSubmitting}>
Cancel
</Button>
<Button type="submit" disabled={loading}>
{loading ? 'Creating...' : 'Create Exchange'}
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? 'Creating...' : 'Create Exchange'}
</Button>
</div>
</form>

View file

@ -32,7 +32,7 @@ export function AddProviderMappingDialog({
if (isOpen) {
loadProviders();
}
}, [isOpen]);
}, [isOpen, loadProviders]);
// Load unmapped exchanges when provider changes
useEffect(() => {
@ -42,7 +42,7 @@ export function AddProviderMappingDialog({
setUnmappedExchanges([]);
setSelectedProviderExchange('');
}
}, [selectedProvider]);
}, [selectedProvider, loadUnmappedExchanges]);
const loadProviders = useCallback(async () => {
setProvidersLoading(true);
@ -50,7 +50,7 @@ export function AddProviderMappingDialog({
const providersData = await fetchProviders();
setProviders(providersData);
} catch (error) {
console.error('Error loading providers:', error);
// Error loading providers - could add toast notification here
} finally {
setProvidersLoading(false);
}
@ -63,7 +63,7 @@ export function AddProviderMappingDialog({
const exchangesData = await fetchUnmappedProviderExchanges(provider);
setUnmappedExchanges(exchangesData);
} catch (error) {
console.error('Error loading unmapped exchanges:', error);
// Error loading unmapped exchanges - could add toast notification here
} finally {
setExchangesLoading(false);
}
@ -103,7 +103,7 @@ export function AddProviderMappingDialog({
await onCreateMapping(request);
} catch (error) {
console.error('Error creating provider mapping:', error);
// Error creating provider mapping - could add toast notification here
} finally {
setLoading(false);
}

View file

@ -29,7 +29,7 @@ export function DeleteExchangeDialog({
onClose();
}
} catch (error) {
console.error('Error deleting exchange:', error);
// Error deleting exchange - could add toast notification here
} finally {
setLoading(false);
}

View file

@ -1,11 +1,12 @@
import { DataTable } from '@/components/ui';
import { PlusIcon, XMarkIcon, CheckIcon, TrashIcon } from '@heroicons/react/24/outline';
import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
import { ColumnDef } from '@tanstack/react-table';
import { useCallback, useMemo, useState, useEffect } from 'react';
import { useCallback, useMemo, useState } from 'react';
import { useExchanges } from '../hooks/useExchanges';
import { Exchange, ProviderMapping } from '../types';
import { Exchange, ProviderMapping, EditingCell, AddProviderMappingDialogState, DeleteDialogState } from '../types';
import { AddProviderMappingDialog } from './AddProviderMappingDialog';
import { DeleteExchangeDialog } from './DeleteExchangeDialog';
import { sortProviderMappings, getProviderMappingColor, formatProviderMapping, formatDate } from '../utils/formatters';
export function ExchangesTable() {
const {
@ -19,17 +20,10 @@ export function ExchangesTable() {
refetch
} = useExchanges();
const [editingCell, setEditingCell] = useState<{ id: string; field: string } | null>(null);
const [editingCell, setEditingCell] = useState<EditingCell | null>(null);
const [editValue, setEditValue] = useState('');
const [addProviderDialog, setAddProviderDialog] = useState<{
exchangeId: string;
exchangeName: string;
} | null>(null);
const [deleteDialog, setDeleteDialog] = useState<{
exchangeId: string;
exchangeName: string;
providerMappingCount: number;
} | null>(null);
const [addProviderDialog, setAddProviderDialog] = useState<AddProviderMappingDialogState | null>(null);
const [deleteDialog, setDeleteDialog] = useState<DeleteDialogState | null>(null);
const handleCellEdit = useCallback(
async (id: string, field: string, value: string) => {
@ -246,13 +240,7 @@ export function ExchangesTable() {
// Get provider mappings directly from the exchange data
const mappings = row.original.provider_mappings || [];
// Sort mappings to show active ones first
const sortedMappings = [...mappings].sort((a, b) => {
if (a.active && !b.active) return -1;
if (!a.active && b.active) return 1;
return 0;
});
const sortedMappings = sortProviderMappings(mappings);
return (
<div className="flex flex-col gap-1">
@ -268,9 +256,8 @@ export function ExchangesTable() {
{mappings.length > 0 ? (
<div className="flex flex-wrap gap-1 text-xs">
{sortedMappings.slice(0, 3).map((mapping, index) => (
<span key={index} className={mapping.active ? 'text-green-500' : 'text-text-muted'}>
<span className={mapping.active ? 'font-bold text-green-500' : 'font-bold text-text-muted'}>{mapping.provider.toLowerCase()}</span>
<span className={mapping.active ? 'text-green-500' : 'text-text-muted'}>({mapping.provider_exchange_code})</span>
<span key={index} className={getProviderMappingColor(mapping)}>
{formatProviderMapping(mapping)}
</span>
))}
{sortedMappings.length > 3 && (
@ -321,7 +308,7 @@ export function ExchangesTable() {
size: 120,
cell: ({ getValue }) => (
<span className="text-xs text-text-muted">
{new Date(getValue() as string).toLocaleDateString()}
{formatDate(getValue() as string)}
</span>
),
},
@ -392,7 +379,7 @@ export function ExchangesTable() {
</div>
<div className="flex items-center gap-4 mt-1 text-xs text-text-muted">
<span>Confidence: {mapping.confidence}</span>
<span>Created: {new Date(mapping.created_at).toLocaleDateString()}</span>
<span>Created: {formatDate(mapping.created_at)}</span>
{mapping.auto_mapped && <span className="text-yellow-400">Auto-mapped</span>}
</div>
</div>

View file

@ -1,17 +1,16 @@
import { useCallback, useEffect, useState } from 'react';
import {
CreateProviderMappingRequest,
CreateExchangeRequest,
Exchange,
ExchangeDetails,
ExchangeStats,
ProviderMapping,
ProviderExchange,
CreateExchangeRequest,
UpdateExchangeRequest,
CreateProviderMappingRequest,
UpdateProviderMappingRequest,
} from '../types';
const API_BASE_URL = 'http://localhost:4000/api';
import { exchangeApi } from '../services/exchangeApi';
export function useExchanges() {
const [exchanges, setExchanges] = useState<Exchange[]>([]);
@ -19,29 +18,13 @@ export function useExchanges() {
const [error, setError] = useState<string | null>(null);
const fetchExchanges = useCallback(async () => {
console.log('fetchExchanges called');
try {
setLoading(true);
setError(null);
console.log('Making fetch request to:', `${API_BASE_URL}/exchanges`);
const response = await fetch(`${API_BASE_URL}/exchanges`);
if (!response.ok) {
throw new Error(`Failed to fetch exchanges: ${response.statusText}`);
}
const data = await response.json();
console.log('API response:', data);
if (data.success) {
console.log('Setting exchanges:', data.data);
setExchanges(data.data || []);
} else {
throw new Error(data.error || 'API returned error status');
}
const data = await exchangeApi.getExchanges();
setExchanges(data);
} catch (err) {
console.error('Error fetching exchanges:', err);
// Error fetching exchanges - error state will show in UI
setError(err instanceof Error ? err.message : 'Failed to fetch exchanges');
setExchanges([]);
} finally {
@ -50,30 +33,13 @@ export function useExchanges() {
}, []);
const updateExchange = useCallback(
async (id: string, updates: UpdateExchangeRequest) => {
async (id: string, updates: UpdateExchangeRequest): Promise<boolean> => {
try {
const response = await fetch(`${API_BASE_URL}/exchanges/${id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(updates),
});
if (!response.ok) {
throw new Error(`Failed to update exchange: ${response.statusText}`);
}
const result = await response.json();
if (!result.success) {
throw new Error(result.error || 'Failed to update exchange');
}
// Refresh the exchanges list
await fetchExchanges();
await exchangeApi.updateExchange(id, updates);
await fetchExchanges(); // Refresh the list
return true;
} catch (err) {
console.error('Error updating exchange:', err);
// Error updating exchange - error state will show in UI
setError(err instanceof Error ? err.message : 'Failed to update exchange');
return false;
}
@ -81,43 +47,39 @@ export function useExchanges() {
[fetchExchanges]
);
const fetchExchangeDetails = useCallback(async (id: string): Promise<ExchangeDetails | null> => {
try {
const response = await fetch(`${API_BASE_URL}/exchanges/${id}`);
if (!response.ok) {
throw new Error(`Failed to fetch exchange details: ${response.statusText}`);
const createExchange = useCallback(
async (request: CreateExchangeRequest): Promise<Exchange> => {
try {
const exchange = await exchangeApi.createExchange(request);
await fetchExchanges(); // Refresh the list
return exchange;
} catch (err) {
// Error creating exchange - error state will show in UI
setError(err instanceof Error ? err.message : 'Failed to create exchange');
throw err;
}
},
[fetchExchanges]
);
const result = await response.json();
if (!result.success) {
throw new Error(result.error || 'Failed to fetch exchange details');
const fetchExchangeDetails = useCallback(
async (id: string): Promise<ExchangeDetails | null> => {
try {
return await exchangeApi.getExchangeById(id);
} catch (err) {
// Error fetching exchange details - error state will show in UI
setError(err instanceof Error ? err.message : 'Failed to fetch exchange details');
return null;
}
return result.data;
} catch (err) {
console.error('Error fetching exchange details:', err);
setError(err instanceof Error ? err.message : 'Failed to fetch exchange details');
return null;
}
}, []);
},
[]
);
const fetchStats = useCallback(async (): Promise<ExchangeStats | null> => {
try {
const response = await fetch(`${API_BASE_URL}/exchanges/stats/summary`);
if (!response.ok) {
throw new Error(`Failed to fetch stats: ${response.statusText}`);
}
const result = await response.json();
if (!result.success) {
throw new Error(result.error || 'Failed to fetch stats');
}
return result.data;
return await exchangeApi.getExchangeStats();
} catch (err) {
console.error('Error fetching stats:', err);
// Error fetching stats - error state will show in UI
setError(err instanceof Error ? err.message : 'Failed to fetch stats');
return null;
}
@ -126,24 +88,9 @@ export function useExchanges() {
const fetchProviderMappings = useCallback(
async (provider?: string): Promise<ProviderMapping[]> => {
try {
const url = provider
? `${API_BASE_URL}/exchanges/provider-mappings/${provider}`
: `${API_BASE_URL}/exchanges/provider-mappings/all`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to fetch provider mappings: ${response.statusText}`);
}
const result = await response.json();
if (!result.success) {
throw new Error(result.error || 'Failed to fetch provider mappings');
}
return result.data || [];
return await exchangeApi.getProviderMappings(provider);
} catch (err) {
console.error('Error fetching provider mappings:', err);
// Error fetching provider mappings - error state will show in UI
setError(err instanceof Error ? err.message : 'Failed to fetch provider mappings');
return [];
}
@ -152,28 +99,12 @@ export function useExchanges() {
);
const updateProviderMapping = useCallback(
async (id: string, updates: UpdateProviderMappingRequest) => {
async (id: string, updates: UpdateProviderMappingRequest): Promise<boolean> => {
try {
const response = await fetch(`${API_BASE_URL}/exchanges/provider-mappings/${id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(updates),
});
if (!response.ok) {
throw new Error(`Failed to update provider mapping: ${response.statusText}`);
}
const result = await response.json();
if (!result.success) {
throw new Error(result.error || 'Failed to update provider mapping');
}
await exchangeApi.updateProviderMapping(id, updates);
return true;
} catch (err) {
console.error('Error updating provider mapping:', err);
// Error updating provider mapping - error state will show in UI
setError(err instanceof Error ? err.message : 'Failed to update provider mapping');
return false;
}
@ -181,49 +112,24 @@ export function useExchanges() {
[]
);
const createProviderMapping = useCallback(async (request: CreateProviderMappingRequest) => {
try {
const response = await fetch(`${API_BASE_URL}/exchanges/provider-mappings`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(request),
});
if (!response.ok) {
throw new Error(`Failed to create provider mapping: ${response.statusText}`);
const createProviderMapping = useCallback(
async (request: CreateProviderMappingRequest): Promise<ProviderMapping | null> => {
try {
return await exchangeApi.createProviderMapping(request);
} catch (err) {
// Error creating provider mapping - error state will show in UI
setError(err instanceof Error ? err.message : 'Failed to create provider mapping');
return null;
}
const result = await response.json();
if (!result.success) {
throw new Error(result.error || 'Failed to create provider mapping');
}
return result.data;
} catch (err) {
console.error('Error creating provider mapping:', err);
setError(err instanceof Error ? err.message : 'Failed to create provider mapping');
return null;
}
}, []);
},
[]
);
const fetchProviders = useCallback(async (): Promise<string[]> => {
try {
const response = await fetch(`${API_BASE_URL}/exchanges/providers/list`);
if (!response.ok) {
throw new Error(`Failed to fetch providers: ${response.statusText}`);
}
const result = await response.json();
if (!result.success) {
throw new Error(result.error || 'Failed to fetch providers');
}
return result.data || [];
return await exchangeApi.getProviders();
} catch (err) {
console.error('Error fetching providers:', err);
// Error fetching providers - error state will show in UI
setError(err instanceof Error ? err.message : 'Failed to fetch providers');
return [];
}
@ -232,20 +138,9 @@ export function useExchanges() {
const fetchUnmappedProviderExchanges = useCallback(
async (provider: string): Promise<ProviderExchange[]> => {
try {
const response = await fetch(`${API_BASE_URL}/exchanges/provider-exchanges/unmapped/${provider}`);
if (!response.ok) {
throw new Error(`Failed to fetch unmapped exchanges: ${response.statusText}`);
}
const result = await response.json();
if (!result.success) {
throw new Error(result.error || 'Failed to fetch unmapped exchanges');
}
return result.data || [];
return await exchangeApi.getUnmappedProviderExchanges(provider);
} catch (err) {
console.error('Error fetching unmapped exchanges:', err);
// Error fetching unmapped exchanges - error state will show in UI
setError(err instanceof Error ? err.message : 'Failed to fetch unmapped exchanges');
return [];
}
@ -253,37 +148,7 @@ export function useExchanges() {
[]
);
const createExchange = useCallback(async (request: CreateExchangeRequest) => {
try {
const response = await fetch(`${API_BASE_URL}/exchanges`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(request),
});
if (!response.ok) {
throw new Error(`Failed to create exchange: ${response.statusText}`);
}
const result = await response.json();
if (!result.success) {
throw new Error(result.error || 'Failed to create exchange');
}
// Refresh the exchanges list
await fetchExchanges();
return result.data;
} catch (err) {
console.error('Error creating exchange:', err);
setError(err instanceof Error ? err.message : 'Failed to create exchange');
throw err;
}
}, [fetchExchanges]);
useEffect(() => {
console.log('useExchanges useEffect triggered');
fetchExchanges();
}, [fetchExchanges]);

View file

@ -0,0 +1,62 @@
import { useState, useCallback } from 'react';
import { FormErrors } from '../types';
export function useFormValidation<T>(
initialData: T,
validateFn: (data: T) => FormErrors
) {
const [formData, setFormData] = useState<T>(initialData);
const [errors, setErrors] = useState<FormErrors>({});
const [isSubmitting, setIsSubmitting] = useState(false);
const updateField = useCallback((field: keyof T, value: T[keyof T]) => {
setFormData(prev => ({ ...prev, [field]: value }));
// Clear error when user starts typing
if (errors[field as string]) {
setErrors(prev => ({ ...prev, [field as string]: '' }));
}
}, [errors]);
const validate = useCallback((): boolean => {
const newErrors = validateFn(formData);
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
}, [formData, validateFn]);
const reset = useCallback(() => {
setFormData(initialData);
setErrors({});
setIsSubmitting(false);
}, [initialData]);
const handleSubmit = useCallback(async (
onSubmit: (data: T) => Promise<void>,
onSuccess?: () => void,
onError?: (error: unknown) => void
) => {
if (!validate()) return;
setIsSubmitting(true);
try {
await onSubmit(formData);
reset();
onSuccess?.();
} catch (error) {
onError?.(error);
} finally {
setIsSubmitting(false);
}
}, [formData, validate, reset]);
return {
formData,
errors,
isSubmitting,
updateField,
validate,
reset,
handleSubmit,
setIsSubmitting,
};
}

View file

@ -0,0 +1,135 @@
import {
ApiResponse,
Exchange,
ExchangeDetails,
ExchangeStats,
ProviderMapping,
ProviderExchange,
CreateExchangeRequest,
UpdateExchangeRequest,
CreateProviderMappingRequest,
UpdateProviderMappingRequest,
} from '../types';
const API_BASE_URL = 'http://localhost:4000/api';
class ExchangeApiService {
private async request<T>(
endpoint: string,
options?: RequestInit
): Promise<ApiResponse<T>> {
const url = `${API_BASE_URL}${endpoint}`;
const response = await fetch(url, {
headers: {
'Content-Type': 'application/json',
...options?.headers,
},
...options,
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const data = await response.json();
if (!data.success) {
throw new Error(data.error || 'API request failed');
}
return data;
}
// Exchanges
async getExchanges(): Promise<Exchange[]> {
const response = await this.request<Exchange[]>('/exchanges');
return response.data || [];
}
async getExchangeById(id: string): Promise<ExchangeDetails | null> {
const response = await this.request<ExchangeDetails>(`/exchanges/${id}`);
return response.data || null;
}
async createExchange(data: CreateExchangeRequest): Promise<Exchange> {
const response = await this.request<Exchange>('/exchanges', {
method: 'POST',
body: JSON.stringify(data),
});
if (!response.data) {
throw new Error('No exchange data returned');
}
return response.data;
}
async updateExchange(id: string, data: UpdateExchangeRequest): Promise<Exchange> {
const response = await this.request<Exchange>(`/exchanges/${id}`, {
method: 'PATCH',
body: JSON.stringify(data),
});
if (!response.data) {
throw new Error('No exchange data returned');
}
return response.data;
}
// Provider Mappings
async getProviderMappings(provider?: string): Promise<ProviderMapping[]> {
const endpoint = provider
? `/exchanges/provider-mappings/${provider}`
: '/exchanges/provider-mappings/all';
const response = await this.request<ProviderMapping[]>(endpoint);
return response.data || [];
}
async createProviderMapping(data: CreateProviderMappingRequest): Promise<ProviderMapping> {
const response = await this.request<ProviderMapping>('/exchanges/provider-mappings', {
method: 'POST',
body: JSON.stringify(data),
});
if (!response.data) {
throw new Error('No provider mapping data returned');
}
return response.data;
}
async updateProviderMapping(
id: string,
data: UpdateProviderMappingRequest
): Promise<ProviderMapping> {
const response = await this.request<ProviderMapping>(`/exchanges/provider-mappings/${id}`, {
method: 'PATCH',
body: JSON.stringify(data),
});
if (!response.data) {
throw new Error('No provider mapping data returned');
}
return response.data;
}
// Providers and Utilities
async getProviders(): Promise<string[]> {
const response = await this.request<string[]>('/exchanges/providers/list');
return response.data || [];
}
async getUnmappedProviderExchanges(provider: string): Promise<ProviderExchange[]> {
const response = await this.request<ProviderExchange[]>(
`/exchanges/provider-exchanges/unmapped/${provider}`
);
return response.data || [];
}
async getExchangeStats(): Promise<ExchangeStats> {
const response = await this.request<ExchangeStats>('/exchanges/stats/summary');
if (!response.data) {
throw new Error('No exchange stats data returned');
}
return response.data;
}
}
// Export singleton instance
export const exchangeApi = new ExchangeApiService();

View file

@ -0,0 +1,69 @@
// API Response types
export interface ApiResponse<T = unknown> {
success: boolean;
data?: T;
error?: string;
message?: string;
total?: number;
}
// Base entity types
export interface BaseEntity {
id: string;
created_at: string;
updated_at: string;
}
export interface ProviderMapping extends BaseEntity {
provider: string;
provider_exchange_code: string;
provider_exchange_name: string;
master_exchange_id: string;
country_code: string | null;
currency: string | null;
confidence: number;
active: boolean;
verified: boolean;
auto_mapped: boolean;
master_exchange_code?: string;
master_exchange_name?: string;
master_exchange_active?: boolean;
}
export interface Exchange extends BaseEntity {
code: string;
name: string;
country: string;
currency: string;
active: boolean;
visible: boolean;
provider_mapping_count: string;
active_mapping_count: string;
verified_mapping_count: string;
providers: string | null;
provider_mappings: ProviderMapping[];
}
export interface ExchangeDetails {
exchange: Exchange;
provider_mappings: ProviderMapping[];
}
export interface ProviderExchange {
provider_exchange_code: string;
provider_exchange_name: string;
country_code: string | null;
currency: string | null;
symbol_count: number | null;
}
export interface ExchangeStats {
total_exchanges: string;
active_exchanges: string;
countries: string;
currencies: string;
total_provider_mappings: string;
active_provider_mappings: string;
verified_provider_mappings: string;
providers: string;
}

View file

@ -0,0 +1,43 @@
// Component-specific types
export interface EditingCell {
id: string;
field: string;
}
export interface AddProviderMappingDialogState {
exchangeId: string;
exchangeName: string;
}
export interface DeleteDialogState {
exchangeId: string;
exchangeName: string;
providerMappingCount: number;
}
export interface FormErrors {
[key: string]: string;
}
// Dialog props interfaces
export interface BaseDialogProps {
isOpen: boolean;
onClose: () => void;
}
export interface AddExchangeDialogProps extends BaseDialogProps {
onCreateExchange: (request: import('./request.types').CreateExchangeRequest) => Promise<void>;
}
export interface AddProviderMappingDialogProps extends BaseDialogProps {
exchangeId: string;
exchangeName: string;
onCreateMapping: (request: import('./request.types').CreateProviderMappingRequest) => Promise<unknown>;
}
export interface DeleteExchangeDialogProps extends BaseDialogProps {
exchangeId: string;
exchangeName: string;
providerMappingCount: number;
onConfirmDelete: (exchangeId: string) => Promise<boolean>;
}

View file

@ -1,100 +1,7 @@
export interface ProviderMapping {
id: string;
provider: string;
provider_exchange_code: string;
provider_exchange_name: string;
master_exchange_id: string;
country_code: string | null;
currency: string | null;
confidence: number;
active: boolean;
verified: boolean;
auto_mapped: boolean;
created_at: string;
updated_at: string;
master_exchange_code?: string;
master_exchange_name?: string;
master_exchange_active?: boolean;
}
// Re-export all types from organized files
export * from './api.types';
export * from './request.types';
export * from './component.types';
export interface Exchange {
id: string;
code: string;
name: string;
country: string;
currency: string;
active: boolean;
visible: boolean;
created_at: string;
updated_at: string;
provider_mapping_count: string;
active_mapping_count: string;
verified_mapping_count: string;
providers: string | null;
provider_mappings: ProviderMapping[];
}
export interface ExchangeDetails {
exchange: Exchange;
provider_mappings: ProviderMapping[];
}
export interface ExchangesApiResponse {
success: boolean;
data: Exchange[];
total: number;
}
export interface UpdateExchangeRequest {
name?: string;
active?: boolean;
visible?: boolean;
country?: string;
currency?: string;
}
export interface UpdateProviderMappingRequest {
active?: boolean;
verified?: boolean;
confidence?: number;
master_exchange_id?: string;
}
export interface CreateProviderMappingRequest {
provider: string;
provider_exchange_code: string;
provider_exchange_name?: string;
master_exchange_id: string;
country_code?: string;
currency?: string;
confidence?: number;
active?: boolean;
verified?: boolean;
}
export interface CreateExchangeRequest {
code: string;
name: string;
country: string;
currency: string;
active?: boolean;
}
export interface ExchangeStats {
total_exchanges: string;
active_exchanges: string;
countries: string;
currencies: string;
total_provider_mappings: string;
active_provider_mappings: string;
verified_provider_mappings: string;
providers: string;
}
export interface ProviderExchange {
provider_exchange_code: string;
provider_exchange_name: string;
country_code: string | null;
currency: string | null;
symbol_count: number | null;
}
// Legacy compatibility - can be removed later
export type ExchangesApiResponse<T = unknown> = import('./api.types').ApiResponse<T>;

View file

@ -0,0 +1,35 @@
// Request types for API calls
export interface CreateExchangeRequest {
code: string;
name: string;
country: string;
currency: string;
active?: boolean;
}
export interface UpdateExchangeRequest {
name?: string;
active?: boolean;
visible?: boolean;
country?: string;
currency?: string;
}
export interface CreateProviderMappingRequest {
provider: string;
provider_exchange_code: string;
provider_exchange_name?: string;
master_exchange_id: string;
country_code?: string;
currency?: string;
confidence?: number;
active?: boolean;
verified?: boolean;
}
export interface UpdateProviderMappingRequest {
active?: boolean;
verified?: boolean;
confidence?: number;
master_exchange_id?: string;
}

View file

@ -0,0 +1,35 @@
import { ProviderMapping } from '../types';
export function formatDate(dateString: string): string {
return new Date(dateString).toLocaleDateString();
}
export function formatProviderMapping(mapping: ProviderMapping): string {
return `${mapping.provider.toLowerCase()}(${mapping.provider_exchange_code})`;
}
export function getProviderMappingColor(mapping: ProviderMapping): string {
return mapping.active ? 'text-green-500' : 'text-text-muted';
}
export function sortProviderMappings(mappings: ProviderMapping[]): ProviderMapping[] {
return [...mappings].sort((a, b) => {
// Active mappings first
if (a.active && !b.active) {
return -1;
}
if (!a.active && b.active) {
return 1;
}
// Then by provider name
return a.provider.localeCompare(b.provider);
});
}
export function truncateText(text: string, maxLength: number): string {
if (text.length <= maxLength) {
return text;
}
return text.substring(0, maxLength) + '...';
}

View file

@ -0,0 +1,38 @@
import { FormErrors } from '../types';
export function validateExchangeForm(data: {
code: string;
name: string;
country: string;
currency: string;
}): FormErrors {
const errors: FormErrors = {};
if (!data.code.trim()) {
errors.code = 'Exchange code is required';
} else if (data.code.length > 10) {
errors.code = 'Exchange code must be 10 characters or less';
}
if (!data.name.trim()) {
errors.name = 'Exchange name is required';
}
if (!data.country.trim()) {
errors.country = 'Country is required';
} else if (data.country.length !== 2) {
errors.country = 'Country must be exactly 2 characters (e.g., US, CA, GB)';
}
if (!data.currency.trim()) {
errors.currency = 'Currency is required';
} else if (data.currency.length !== 3) {
errors.currency = 'Currency must be exactly 3 characters (e.g., USD, EUR, CAD)';
}
return errors;
}
export function hasValidationErrors(errors: FormErrors): boolean {
return Object.keys(errors).length > 0;
}