({
createCategory: jest.fn()
}));
-// Mock the CategoriesContext
-jest.mock('../../../contexts/CategoriesContext', () => {
- const originalModule = jest.requireActual('../../../contexts/CategoriesContext');
-
- return {
- ...originalModule,
- CategoriesContextProvider: ({ children }: { children: React.ReactNode }) => (
-
- {children}
-
- )
- };
-});
-
describe('CategoryAutocomplete', () => {
+ jest.setTimeout(10000); // Add a 10-second timeout for all tests in this suite
+
const mockOnSelect = jest.fn();
- const mockContext = {
- loadedData: [] as Category[],
- setSearch: jest.fn(),
- setFilter: jest.fn(),
- setOrder: jest.fn(),
- loadNext: jest.fn(),
- refreshing: false,
- hasAnotherPage: false,
- total: 0,
- order: {},
- filter: {},
- search: {},
- limit: 10,
- loadAll: false,
- params: {},
- initiated: false,
- initialLoadComplete: false,
- noResults: false,
- expands: {},
- addModel: jest.fn(),
- removeModel: jest.fn(),
- getModel: jest.fn()
- };
+
beforeEach(() => {
mockOnSelect.mockClear();
@@ -105,30 +61,33 @@ describe('CategoryAutocomplete', () => {
expect(input).toHaveValue('Test');
});
- it('calls onSelect when category is selected', async () => {
- const testCategory = { id: 1, name: 'Test Category', can_be_primary: true, description: '' };
+ it('calls onSelect when existing category is selected', async () => {
+ const testCategory = mockCategory({ id: 1, name: 'Test Category' });
renderWithMantine(
);
const input = screen.getByPlaceholderText('Search categories...');
fireEvent.change(input, { target: { value: 'Test Category' } });
+
// Wait for the options to appear
await waitFor(() => {
expect(screen.getByText('Test Category')).toBeInTheDocument();
});
+
// Click the option
fireEvent.click(screen.getByText('Test Category'));
+
// Wait for the onSelect callback to be called
await waitFor(() => {
expect(mockOnSelect).toHaveBeenCalledWith(testCategory);
- }, { timeout: 1000 });
+ });
});
it('creates new category when non-existent category is selected', async () => {
- const newCategory: Category = { id: 2, name: 'New Category', can_be_primary: true };
+ const newCategory = mockCategory({ id: 2, name: 'New Category' });
(CategoryRequests.createCategory as jest.Mock).mockResolvedValueOnce(newCategory);
renderWithMantine(
);
@@ -137,12 +96,18 @@ describe('CategoryAutocomplete', () => {
fireEvent.change(input, { target: { value: 'New Category' } });
// Wait for the option to appear
- const option = await screen.findByText('New Category');
- fireEvent.click(option);
+ await waitFor(() => {
+ expect(screen.getByText('New Category')).toBeInTheDocument();
+ });
+
+ // Click the option
+ fireEvent.click(screen.getByText('New Category'));
// Wait for the category creation and onSelect callback
await waitFor(() => {
expect(CategoryRequests.createCategory).toHaveBeenCalledWith('New Category');
+ });
+ await waitFor(() => {
expect(mockOnSelect).toHaveBeenCalledWith(newCategory);
});
});
@@ -156,12 +121,18 @@ describe('CategoryAutocomplete', () => {
fireEvent.change(input, { target: { value: 'New Category' } });
// Wait for the option to appear
- const option = await screen.findByText('New Category');
- fireEvent.click(option);
+ await waitFor(() => {
+ expect(screen.getByText('New Category')).toBeInTheDocument();
+ });
+
+ // Click the option
+ fireEvent.click(screen.getByText('New Category'));
// Wait for the category creation attempt
await waitFor(() => {
expect(CategoryRequests.createCategory).toHaveBeenCalledWith('New Category');
+ });
+ await waitFor(() => {
expect(mockOnSelect).not.toHaveBeenCalled();
});
});
@@ -188,41 +159,6 @@ describe('CategoryAutocomplete', () => {
});
});
- it('calls onSelect with existing category when selected', () => {
- const existingCategory = { id: 1, name: 'Action', can_be_primary: true, description: '' };
- mockContext.loadedData = [existingCategory];
-
- renderWithMantine(
);
-
- const input = screen.getByPlaceholderText('Search categories...');
- fireEvent.change(input, { target: { value: 'Action' } });
-
- fireEvent.click(screen.getByText('Action'));
-
- expect(mockOnSelect).toHaveBeenCalledWith(existingCategory);
- });
-
- it('creates a new category when selecting a non-existent one', async () => {
- const newCategory = { id: 4, name: 'New Category', can_be_primary: true };
- (CategoryRequests.createCategory as jest.Mock).mockResolvedValueOnce(newCategory);
-
- renderWithRouter(
);
-
- const input = screen.getByPlaceholderText('Search categories...');
- fireEvent.change(input, { target: { value: 'New Category' } });
-
- await waitFor(() => {
- expect(screen.getByText('New Category')).toBeInTheDocument();
- });
-
- fireEvent.click(screen.getByText('New Category'));
-
- await waitFor(() => {
- expect(CategoryRequests.createCategory).toHaveBeenCalledWith('New Category');
- expect(mockOnSelect).toHaveBeenCalledWith(newCategory);
- });
- });
-
it('clears input when ref.clearInput is called', async () => {
const ref = React.createRef<{ clearInput: () => void }>();
@@ -242,14 +178,14 @@ describe('CategoryAutocomplete', () => {
it('prioritizes categories passed in prioritizedCategories prop', async () => {
const prioritizedCategories = [
- { id: 4, name: 'Strategy', can_be_primary: true },
- { id: 5, name: 'Simulation', can_be_primary: true }
+ mockCategory({ id: 4, name: 'Strategy' }),
+ mockCategory({ id: 5, name: 'Simulation' })
];
renderWithRouter(
);
@@ -257,22 +193,14 @@ describe('CategoryAutocomplete', () => {
fireEvent.change(input, { target: { value: 'S' } });
await waitFor(() => {
- expect(screen.getByText('Strategy')).toBeInTheDocument();
+ const options = screen.getAllByRole('option');
+ expect(options[0]).toHaveTextContent('Strategy');
});
-
- expect(screen.getByText('Simulation')).toBeInTheDocument();
-
- const dropdownItems = screen.getAllByRole('option');
- expect(dropdownItems[0]).toHaveTextContent('Strategy');
- expect(dropdownItems[1]).toHaveTextContent('Simulation');
- });
-
- test('handles category selection', async () => {
- renderWithRouter(
);
- const input = screen.getByPlaceholderText('Search categories...');
- fireEvent.change(input, { target: { value: 'Test Category' } });
await waitFor(() => {
- expect(screen.getByText('Test Category')).toBeInTheDocument();
+ // It's possible options might need to be fetched again if the DOM could change between waits.
+ // For this specific case, assuming options remain stable after the first waitFor.
+ const options = screen.getAllByRole('option');
+ expect(options[1]).toHaveTextContent('Simulation');
});
});
});
\ No newline at end of file
diff --git a/src/components/GeneralUIElements/CategoryAutocomplete/index.tsx b/src/components/GeneralUIElements/CategoryAutocomplete/index.tsx
index 611aa430..5bddbadc 100644
--- a/src/components/GeneralUIElements/CategoryAutocomplete/index.tsx
+++ b/src/components/GeneralUIElements/CategoryAutocomplete/index.tsx
@@ -1,6 +1,5 @@
-import React, { useState, useEffect, useCallback, forwardRef } from 'react';
+import React, {useState, useEffect, forwardRef, useMemo} from 'react';
import { Autocomplete, Loader } from '@mantine/core';
-import { useDebouncedValue } from '@mantine/hooks';
import { CategoriesContext, CategoriesContextProvider, CategoriesContextState } from '../../../contexts/CategoriesContext';
import Category from '../../../models/category';
import CategoryRequests from '../../../services/requests/CategoryRequests';
@@ -21,14 +20,13 @@ interface CategoryAutocompleteContentProps extends CategoryAutocompleteProps {
const CategoryAutocompleteContent = forwardRef<{ clearInput: () => void }, CategoryAutocompleteContentProps>(({
onSelect,
- prioritizedCategories = [],
+ prioritizedCategories ,
placeholder = 'Search categories...',
label,
required = false,
context
}, ref) => {
const [searchValue, setSearchValue] = useState('');
- const [debouncedSearch] = useDebouncedValue(searchValue, 300);
const [loading, setLoading] = useState(false);
const [options, setOptions] = useState
([]);
@@ -37,9 +35,6 @@ const CategoryAutocompleteContent = forwardRef<{ clearInput: () => void }, Categ
clearInput: () => setSearchValue('')
}));
- // Create a map of prioritized category IDs for quick lookup
- const prioritizedIds = new Set(prioritizedCategories.map(cat => cat.id));
-
// Use the context to search for categories
const setInput = (search: string) => {
setSearchValue(search)
@@ -52,25 +47,32 @@ const CategoryAutocompleteContent = forwardRef<{ clearInput: () => void }, Categ
context.setSearch('name', search);
};
+ // Create a map of prioritized category IDs for quick lookup
+ const prioritizedIds = useMemo(() => new Set((prioritizedCategories ?? []).map(cat => cat.id)), [prioritizedCategories]);
+
+ // Create a map to track unique category names (case-insensitive)
+ const uniqueNames = useMemo(() => {
+ const newUniqueNames = new Map();
+ if (prioritizedCategories) {
+ // First add prioritized categories
+ prioritizedCategories.forEach(cat => {
+ newUniqueNames.set(cat.name.toLowerCase(), cat);
+ });
+
+ // Then add search results, preserving prioritized categories
+ const results = context.loadedData || [];
+ results.forEach((cat: Category) => {
+ const lowerName = cat.name.toLowerCase();
+ if (!newUniqueNames.has(lowerName)) {
+ newUniqueNames.set(lowerName, cat);
+ }
+ });
+
+ }
+ return newUniqueNames;
+ }, [prioritizedCategories, context.loadedData])
+
useEffect(() => {
- const results = context.loadedData || [];
-
- // Create a map to track unique category names (case-insensitive)
- const uniqueNames = new Map();
-
- // First add prioritized categories
- prioritizedCategories.forEach(cat => {
- uniqueNames.set(cat.name.toLowerCase(), cat);
- });
-
- // Then add search results, preserving prioritized categories
- results.forEach((cat: Category) => {
- const lowerName = cat.name.toLowerCase();
- if (!uniqueNames.has(lowerName)) {
- uniqueNames.set(lowerName, cat);
- }
- });
-
// Convert back to array and sort
const uniqueResults = Array.from(uniqueNames.values());
const sortedResults = uniqueResults.sort((a: Category, b: Category) => {
@@ -94,7 +96,7 @@ const CategoryAutocompleteContent = forwardRef<{ clearInput: () => void }, Categ
setOptions(sortedResults);
}
setLoading(false);
- }, [searchValue, context.loadedData]);
+ }, [searchValue, uniqueNames, prioritizedIds]);
const handleSelect = async (selectedValue: string) => {
if (!selectedValue) {
diff --git a/src/components/GeneralUIElements/ConfirmationPageContent/index.test.tsx b/src/components/GeneralUIElements/ConfirmationPageContent/index.test.tsx
index b3eb9bd4..8790c860 100644
--- a/src/components/GeneralUIElements/ConfirmationPageContent/index.test.tsx
+++ b/src/components/GeneralUIElements/ConfirmationPageContent/index.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import ConfirmationPageContent from './index';
diff --git a/src/components/GeneralUIElements/DataList/index.test.tsx b/src/components/GeneralUIElements/DataList/index.test.tsx
index fa57d3b8..b9afbbda 100644
--- a/src/components/GeneralUIElements/DataList/index.test.tsx
+++ b/src/components/GeneralUIElements/DataList/index.test.tsx
@@ -1,29 +1,22 @@
-import React from 'react';
import { screen, fireEvent, render } from '@testing-library/react';
-import DataList, { RangeFilterColumn } from '.';
-import { renderWithRouter } from '../../../test-utils';
+import DataList from '.';
import { MantineProvider } from '@mantine/core';
-import { useHistory } from 'react-router-dom';
import { BasePaginatedContextState } from '../../../contexts/BasePaginatedContext';
import { defaultBaseContext } from '../../../contexts/BasePaginatedContext';
+import BaseModel from '../../../models/base-model';
+import { CellContext } from '@tanstack/react-table';
// Mock useHistory
jest.mock('react-router-dom', () => ({
useHistory: jest.fn(),
}));
-interface TestItem {
- id: number;
+interface TestItem extends BaseModel {
name: string;
date: string;
score: number;
}
-const mockData: TestItem[] = [
- { id: 1, name: 'Test Item 1', date: '2024-01-01', score: 100 },
- { id: 2, name: 'Test Item 2', date: '2024-01-02', score: 200 },
-];
-
const columns = [
{
accessorKey: 'name',
@@ -32,12 +25,12 @@ const columns = [
{
accessorKey: 'date',
header: 'Date',
- cell: (info: { getValue: () => string }) => new Date(info.getValue()).toLocaleDateString(),
+ cell: (info: CellContext) => new Date(info.getValue() as string).toLocaleDateString(),
},
{
accessorKey: 'score',
header: 'Score',
- cell: (info: { getValue: () => number }) => info.getValue().toFixed(1),
+ cell: (info: CellContext) => (info.getValue() as number).toFixed(1),
meta: {
filterType: 'range'
}
@@ -69,6 +62,7 @@ describe('DataList', () => {
limit: 20,
loadAll: false,
params: {},
+ lastLoadedPage: undefined,
loadNext: jest.fn(),
refreshData: jest.fn(),
setFilter: jest.fn(),
@@ -97,9 +91,9 @@ describe('DataList', () => {
});
it('renders data table with provided data', () => {
- const data = [
- { id: 1, name: 'Test Item 1', date: '2024-01-01', score: 100 },
- { id: 2, name: 'Test Item 2', date: '2024-01-02', score: 200 }
+ const data: TestItem[] = [
+ { id: 1, name: 'Test Item 1', date: '2024-01-01', score: 100, created_at: '', updated_at: '' },
+ { id: 2, name: 'Test Item 2', date: '2024-01-02', score: 200, created_at: '', updated_at: '' }
];
const contextWithData = {
@@ -142,8 +136,8 @@ describe('DataList', () => {
it('handles bulk selection when enabled', () => {
const onBulkSelect = jest.fn();
- const data = [
- { id: 1, name: 'Test Item 1', date: '2024-01-01', score: 100 }
+ const data: TestItem[] = [
+ { id: 1, name: 'Test Item 1', date: '2024-01-01', score: 100, created_at: '', updated_at: '' }
];
const contextWithData = {
diff --git a/src/components/GeneralUIElements/DataList/index.tsx b/src/components/GeneralUIElements/DataList/index.tsx
index 5c6376d3..40016dfd 100644
--- a/src/components/GeneralUIElements/DataList/index.tsx
+++ b/src/components/GeneralUIElements/DataList/index.tsx
@@ -8,41 +8,41 @@ import {
ColumnFiltersState,
getSortedRowModel,
SortingState,
- ColumnDef,
Row,
- Column, AccessorColumnDef, AccessorKeyColumnDef
+ Column, AccessorKeyColumnDef
} from '@tanstack/react-table';
import { Table, Text, Paper, TextInput, Stack, ActionIcon, rem, Loader, Checkbox } from '@mantine/core';
import { IconArrowUp, IconArrowDown, IconArrowsUpDown } from '@tabler/icons-react';
import { useHistory } from 'react-router-dom';
import RangeFilter, { RangeFilterValue, rangeFilterFn } from './RangeFilter';
import { BasePaginatedContextState } from '../../../contexts/BasePaginatedContext';
+import BaseModel from '../../../models/base-model';
-export interface RangeFilterColumn {
- valueCallback?: (row: any) => number | undefined | null;
+export interface RangeFilterColumn {
+ valueCallback?: (row: T) => number | undefined | null;
disableServerSearch?: boolean;
}
-export interface DataListProps {
+export interface DataListProps {
context: BasePaginatedContextState;
- columns: any[];
+ columns: AccessorKeyColumnDef[];
onRowClick?: (row: T) => void;
onArrangeData?: (data: T[]) => T[];
- onFilterChanged?: (columnId: string, value: any) => boolean;
+ onFilterChanged?: (columnId: string, value: unknown) => boolean;
rowIdField?: keyof T;
detailPath?: string;
- rangeFields?: Record;
+ rangeFields?: Record>;
dataTestId?: string;
bulkSelectEnabled?: boolean;
onBulkSelect?: (id: number) => void;
selectedItems?: Set;
}
-const handleTableFilter = >(
+const handleTableFilter = (
row: Row,
columnId: string,
value: unknown,
- rangeFields: Record
+ rangeFields: Record>
): boolean => {
if (!value) return true;
@@ -66,7 +66,7 @@ const handleTableFilter = >(
return String(cellValue).toLowerCase().includes(String(value).toLowerCase());
};
-const DataList = >({
+const DataList = ({
context,
columns,
onRowClick,
@@ -93,7 +93,7 @@ const DataList = >({
if (context.total && context.total > maxResults) {
setMaxResults(context.total);
}
- }, [context.total]);
+ }, [context.total, maxResults]);
// Sync input values with column filters
useEffect(() => {
@@ -104,7 +104,7 @@ const DataList = >({
setInputValues(newInputValues);
}, [columnFilters]);
- const handleTableFilterChange = (updater: any) => {
+ const handleTableFilterChange = (updater: ColumnFiltersState | ((old: ColumnFiltersState) => ColumnFiltersState)) => {
const newFilters = typeof updater === 'function' ? updater(columnFilters) : updater;
setColumnFilters(newFilters);
@@ -114,11 +114,22 @@ const DataList = >({
}
// Otherwise update context filters
- newFilters.forEach((filter: any) => {
+ newFilters.forEach((filter: { id: string; value: unknown }) => {
if (onFilterChanged && onFilterChanged(filter.id, filter.value)) {
return;
}
- context.setFilter(filter.id, filter.value || null);
+ const val = filter.value;
+ let finalValue: string | number | null | undefined;
+
+ if (typeof val === 'string' || typeof val === 'number') {
+ finalValue = val || null; // Handles empty strings and 0 becoming null
+ } else if (val === null || val === undefined) {
+ finalValue = val; // val is already null or undefined
+ } else {
+ // For booleans, objects, and any other types, pass null.
+ finalValue = null;
+ }
+ context.setFilter(filter.id, finalValue);
});
};
@@ -126,7 +137,7 @@ const DataList = >({
// Update table filter state
const newFilters = columnFilters.filter(f => f.id !== column.id);
if (value) {
- newFilters.push({ id: column.id, value: value as string } as any);
+ newFilters.push({ id: column.id, value: value });
}
setColumnFilters(newFilters);
@@ -138,7 +149,7 @@ const DataList = >({
return;
}
- const key = (column.columnDef as AccessorKeyColumnDef).accessorKey as string
+ const key = (column.columnDef as AccessorKeyColumnDef).accessorKey as string;
if (key) {
context.setFilter(key, value ? 'like,*' + value + '*' : null);
}
@@ -167,7 +178,7 @@ const DataList = >({
}
};
- const handleSortingChange = (updater: any) => {
+ const handleSortingChange = (updater: SortingState | ((old: SortingState) => SortingState)) => {
const newSorting = typeof updater === 'function' ? updater(sorting) : updater;
setSorting(newSorting);
@@ -178,9 +189,9 @@ const DataList = >({
// Otherwise update context order
if (newSorting.length > 0) {
- const { columnId, desc } = newSorting[0];
+ const { id, desc } = newSorting[0];
// Find the column definition
- const key = columns.find(col => col.id === columnId)?.accessorKey as string;
+ const key = columns.find(col => col.id === id)?.accessorKey as string;
context.setOrder(key, desc ? 'DESC' : 'ASC');
} else {
@@ -192,7 +203,6 @@ const DataList = >({
};
useEffect(() => {
-
const observer = new IntersectionObserver(
entries => {
if (entries[0].isIntersecting && !context.refreshing && context.hasAnotherPage) {
@@ -213,7 +223,7 @@ const DataList = >({
observerRef.current.disconnect();
}
};
- }, [lastRowRef.current, observerRef.current]);
+ }, [context.refreshing, context.hasAnotherPage, context.loadNext, context]);
const tableData = useMemo(() => {
return onArrangeData ? onArrangeData(context.loadedData) : context.loadedData;
diff --git a/src/components/GeneralUIElements/GrayInput/index.test.tsx b/src/components/GeneralUIElements/GrayInput/index.test.tsx
index 68bf4d6f..c57a0871 100644
--- a/src/components/GeneralUIElements/GrayInput/index.test.tsx
+++ b/src/components/GeneralUIElements/GrayInput/index.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { render, screen } from '@testing-library/react';
import GrayInput from './index';
diff --git a/src/components/GeneralUIElements/GrayInput/index.tsx b/src/components/GeneralUIElements/GrayInput/index.tsx
index 860f3a8d..ce157ef9 100644
--- a/src/components/GeneralUIElements/GrayInput/index.tsx
+++ b/src/components/GeneralUIElements/GrayInput/index.tsx
@@ -1,10 +1,9 @@
-import React, {PropsWithChildren} from 'react'
+import React, { PropsWithChildren} from 'react'
import './index.scss';
-interface Props extends PropsWithChildren {
-}
+type Props = {}
-const GrayInput: React.FC = ({ children }) => {
+const GrayInput: React.FC> = ({ children }) => {
return (
{children}
diff --git a/src/components/GeneralUIElements/Modal/index.tsx b/src/components/GeneralUIElements/Modal/index.tsx
index 51d78445..6bb4be7d 100644
--- a/src/components/GeneralUIElements/Modal/index.tsx
+++ b/src/components/GeneralUIElements/Modal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, PropsWithChildren } from 'react';
import './index.scss';
export interface ModalProps {
@@ -10,11 +10,7 @@ export interface ModalProps {
contentLabel?: string;
}
-interface ContentModalProps extends ModalProps {
- children: React.ReactNode;
-}
-
-const ContentModal: React.FC
= ({
+const ContentModal: React.FC> = ({
isOpen,
onRequestClose,
title,
diff --git a/src/components/GeneralUIElements/UnderlinedInput/index.test.tsx b/src/components/GeneralUIElements/UnderlinedInput/index.test.tsx
index 2a4dbf94..984c8615 100644
--- a/src/components/GeneralUIElements/UnderlinedInput/index.test.tsx
+++ b/src/components/GeneralUIElements/UnderlinedInput/index.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { render, screen } from '@testing-library/react';
import UnderlinedInput from './index';
diff --git a/src/components/GeneralUIElements/UnderlinedInput/index.tsx b/src/components/GeneralUIElements/UnderlinedInput/index.tsx
index d62fdc1f..e7b7ee6a 100644
--- a/src/components/GeneralUIElements/UnderlinedInput/index.tsx
+++ b/src/components/GeneralUIElements/UnderlinedInput/index.tsx
@@ -1,10 +1,9 @@
-import React, {PropsWithChildren} from 'react'
+import React, { PropsWithChildren } from 'react'
import './index.scss';
-interface Props extends PropsWithChildren {
-}
+type Props = {}
-const UnderlinedInput: React.FC = ({ children }) => {
+const UnderlinedInput: React.FC> = ({ children }) => {
return (
{children}
diff --git a/src/components/InputWrapper/index.test.tsx b/src/components/InputWrapper/index.test.tsx
index 532ffb0d..c627ffd5 100644
--- a/src/components/InputWrapper/index.test.tsx
+++ b/src/components/InputWrapper/index.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { render } from '@testing-library/react';
import Input from './index';
diff --git a/src/components/InputWrapper/index.tsx b/src/components/InputWrapper/index.tsx
index 5284ef01..88302434 100644
--- a/src/components/InputWrapper/index.tsx
+++ b/src/components/InputWrapper/index.tsx
@@ -1,7 +1,7 @@
-import React, {PropsWithChildren} from 'react'
+import React, { PropsWithChildren } from 'react'
import './index.scss';
-interface Props extends PropsWithChildren
{
+interface Props {
label: string
subtext?: string
error?: string
@@ -9,7 +9,7 @@ interface Props extends PropsWithChildren {
rounded?: boolean
}
-const InputWrapper: React.FC = ({ label, error, color, rounded, subtext, children }) => {
+const InputWrapper: React.FC> = ({ label, error, color, rounded, subtext, children }) => {
const wrapperClasses = (color ? ' ' + color : '') + (rounded ? ' rounded' : '')
return (
diff --git a/src/components/LoadingIndicator/index.test.tsx b/src/components/LoadingIndicator/index.test.tsx
index d123baef..4f4645bf 100644
--- a/src/components/LoadingIndicator/index.test.tsx
+++ b/src/components/LoadingIndicator/index.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { render } from '@testing-library/react';
import LoadingIndicatorComponent from './'
diff --git a/src/components/LoadingScreen/index.test.tsx b/src/components/LoadingScreen/index.test.tsx
index bfa13bd2..e51b0447 100644
--- a/src/components/LoadingScreen/index.test.tsx
+++ b/src/components/LoadingScreen/index.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { render } from '@testing-library/react';
import LoadingScreen from './index';
diff --git a/src/components/Menu/MenuLink/index.test.tsx b/src/components/Menu/MenuLink/index.test.tsx
index 15df4502..3855f367 100644
--- a/src/components/Menu/MenuLink/index.test.tsx
+++ b/src/components/Menu/MenuLink/index.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { screen } from '@testing-library/react';
import MenuLink from './index';
import { renderWithRouter } from '../../../test-utils';
diff --git a/src/components/Menu/index.test.tsx b/src/components/Menu/index.test.tsx
index 68a05741..ef21f774 100644
--- a/src/components/Menu/index.test.tsx
+++ b/src/components/Menu/index.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
import { screen } from '@testing-library/react';
import Menu from './index';
import { mockUser } from '../../test-utils/mocks/models';
@@ -7,7 +7,7 @@ import { renderWithProviders, MeContextProvider as RealMeContextProvider } from
// Passthrough mock for MeContextProvider (default and named)
jest.mock('../../contexts/MeContext', () => {
const actual = jest.requireActual('../../contexts/MeContext');
- const Passthrough = ({ children }: { children: React.ReactNode }) => React.createElement(React.Fragment, null, children);
+ const Passthrough: React.FC
> = ({ children }) => React.createElement(React.Fragment, null, children);
return {
__esModule: true,
...actual,
diff --git a/src/components/Modals/CollectionsModal/CollectionItem/index.test.tsx b/src/components/Modals/CollectionsModal/CollectionItem/index.test.tsx
index 0e46b524..6536a6b1 100644
--- a/src/components/Modals/CollectionsModal/CollectionItem/index.test.tsx
+++ b/src/components/Modals/CollectionsModal/CollectionItem/index.test.tsx
@@ -4,7 +4,6 @@ import { MantineProvider } from '@mantine/core';
import CollectionItemComponent from './index';
import CollectionManagementRequests from '../../../../services/requests/CollectionManagementRequests';
import CollectionItem from '../../../../models/user/collection-items';
-import { HasType } from '../../../../models/has-type';
import { mockCollection } from '../../../../test-utils/mocks/models/collection';
import { mockCollectionItem } from '../../../../test-utils/mocks/models/collection-items';
import { mockCollectionItemCategory } from '../../../../test-utils/mocks/models/collection-item-category';
@@ -51,15 +50,21 @@ const renderWithProviders = (ui: React.ReactElement) => {
};
describe('CollectionItemComponent', () => {
- const mockItem: HasType = {
+ const mockItem = {
id: 1,
- type: 'release',
+ type: 'user' as const,
created_at: '2024-03-20T00:00:00Z',
updated_at: '2024-03-20T00:00:00Z'
};
const testCollectionItem = mockCollectionItem({
- collection_item_categories: [mockCollectionItemCategory()]
+ id: 100,
+ item_id: mockItem.id,
+ item_type: mockItem.type,
+ collection_item_categories: [mockCollectionItemCategory({
+ id: 50,
+ category: mockCategory({ id: 2, name: 'Action' })
+ })]
});
const testCollection = mockCollection({
diff --git a/src/components/Modals/CollectionsModal/CollectionItem/index.tsx b/src/components/Modals/CollectionsModal/CollectionItem/index.tsx
index 62a011db..f84dd072 100644
--- a/src/components/Modals/CollectionsModal/CollectionItem/index.tsx
+++ b/src/components/Modals/CollectionsModal/CollectionItem/index.tsx
@@ -1,6 +1,6 @@
import React, { useState, useRef, useMemo } from 'react';
import { Button, Stack, Text, ActionIcon } from '@mantine/core';
-import { IconX, IconPlus, IconTrash } from '@tabler/icons-react';
+import { IconTrash } from '@tabler/icons-react';
import Collection from '../../../../models/user/collection';
import CollectionItem from '../../../../models/user/collection-items';
import CategoryAutocomplete from '../../../GeneralUIElements/CategoryAutocomplete';
@@ -9,7 +9,6 @@ import { CollectionItemCategory } from '../../../../models/user/collection-item-
import CollectionManagementRequests from '../../../../services/requests/CollectionManagementRequests';
import { CollectionItemsContextState } from '../../../../contexts/CollectionItemsContext';
import './index.scss';
-import BaseModel from '../../../../models/base-model';
import { HasType } from '../../../../models/has-type';
import { isInCollection } from '../../../../util/collection-utils';
@@ -27,10 +26,10 @@ const handleAddToCollection = async (
try {
// Create the collection item
const collectionItemData = {
- item_id: item.id,
- item_type: item.type,
+ item_id: item.id as number,
+ item_type: 'user',
order: 0
- };
+ } as Partial;
const newCollectionItem = await CollectionManagementRequests.createCollectionItem(collection, collectionItemData);
@@ -61,10 +60,10 @@ const handleBulkAddToCollection = async (
// Create collection items for each item
const collectionItemPromises = items.map(item => {
const collectionItemData = {
- item_id: item.id,
- item_type: item.type,
+ item_id: item.id as number,
+ item_type: 'user',
order: 0
- };
+ } as Partial;
return CollectionManagementRequests.createCollectionItem(collection, collectionItemData);
});
@@ -121,13 +120,10 @@ const handleRemoveFromCollection = async (
const handleAddCategory = async (
collectionItem: CollectionItem,
category: Category,
- setLoadingCategoryId: (id: number | null) => void,
collectionItemsContext: CollectionItemsContextState
): Promise => {
if (!collectionItem || !category || !collectionItem.id || !category.id) return;
-
- setLoadingCategoryId(category.id);
-
+
try {
const categoryData = {
category_id: category.id,
@@ -162,7 +158,9 @@ const handleAddCategory = async (
category: {
id: category.id,
name: category.name,
- can_be_primary: category.can_be_primary
+ can_be_primary: category.can_be_primary,
+ created_at: category.created_at,
+ updated_at: category.updated_at
}
};
@@ -175,7 +173,6 @@ const handleAddCategory = async (
} catch (error) {
console.error('Error adding category:', error);
} finally {
- setLoadingCategoryId(null);
}
};
@@ -183,13 +180,10 @@ const handleAddCategory = async (
const handleRemoveCategory = async (
collection: Collection,
collectionItemCategory: CollectionItemCategory,
- setLoadingCategoryId: (id: number | null) => void,
collectionItemsContext: CollectionItemsContextState
): Promise => {
if (!collectionItemCategory || !collectionItemCategory.id) return;
-
- setLoadingCategoryId(collectionItemCategory.category_id);
-
+
try {
await CollectionManagementRequests.deleteCollectionItemCategory(collectionItemCategory.id);
@@ -223,7 +217,6 @@ const handleRemoveCategory = async (
} catch (error) {
console.error('Error removing category:', error);
} finally {
- setLoadingCategoryId(null);
}
};
@@ -233,7 +226,6 @@ interface CollectionItemProps {
collectionItemsContext: CollectionItemsContextState;
isBulkOperation?: boolean;
selectedItems?: Set;
- isCommonCollection?: boolean;
}
const CollectionItemComponent: React.FC = ({
@@ -241,12 +233,9 @@ const CollectionItemComponent: React.FC = ({
item,
collectionItemsContext,
isBulkOperation = false,
- selectedItems,
- isCommonCollection = false
+ selectedItems
}) => {
const [loadingCollectionId, setLoadingCollectionId] = useState(null);
- const [loadingCategoryId, setLoadingCategoryId] = useState(null);
- const [selectedCategories, setSelectedCategories] = useState<{[key: number]: Category}>({});
const categoryAutocompleteRef = useRef<{ clearInput: () => void } | null>(null);
const itemIsInCollection = useMemo((): boolean => {
@@ -254,42 +243,53 @@ const CollectionItemComponent: React.FC = ({
return isInCollection(item, collection.id, collectionItemsContext);
}, [collection.id, collectionItemsContext, item]);
- const collectionItem = collection.id && itemIsInCollection ? collectionItemsContext[collection.id]?.loadedData.find(
- (ci: CollectionItem) => ci.item_id === item.id
- ) : null;
+ const collectionItem = collection.id && itemIsInCollection
+ ? collectionItemsContext[collection.id as keyof typeof collectionItemsContext]?.loadedData?.find(
+ (ci: CollectionItem) => ci.item_id === item.id
+ )
+ : null;
const categories = collectionItem?.collection_item_categories || [];
// Get selected releases for bulk operation
const selectedReleases = useMemo(() => {
if (!isBulkOperation || !selectedItems || !collection.id) return [];
+ const collectionState = collectionItemsContext[collection.id as keyof typeof collectionItemsContext];
+ if (!collectionState) return [];
// Get all items that are selected but not already in the collection
- const collectionState = collectionItemsContext[collection.id];
- const existingItemIds = new Set(collectionState?.loadedData?.map(item => item.item_id) ?? []);
+ const existingItemIds = new Set(collectionState.loadedData?.map((item: CollectionItem) => item.item_id) ?? []);
return Array.from(selectedItems)
.filter(item => item.id !== undefined && !existingItemIds.has(item.id));
}, [isBulkOperation, selectedItems, collectionItemsContext, collection.id]);
// Function to handle category selection
const handleCategorySelect = async (category: Category) => {
- if (!collection.id || !category || !collectionItem) return;
-
- setSelectedCategories(prev => ({
- ...prev,
- [collection.id!]: category
- }));
-
- // Add the category to the collection item
- await handleAddCategory(
- collectionItem,
+ if (!collection.id) return;
+ const collectionState = collectionItemsContext[collection.id as keyof typeof collectionItemsContext];
+ if (!collectionState) return;
+
+ const collectionItem = collectionState.loadedData?.find(
+ (ci: CollectionItem) => ci.item_id === item.id && ci.item_type === item.type
+ );
+
+ if (collectionItem && category) {
+ await handleAddCategory(
+ collectionItem,
+ category,
+ collectionItemsContext
+ );
+ // Clear the CategoryAutocomplete input after successful addition
+ if (categoryAutocompleteRef.current && typeof categoryAutocompleteRef.current.clearInput === 'function') {
+ categoryAutocompleteRef.current.clearInput();
+ }
+ }
+ };
+
+ const handleCategoryRemove = async (category: CollectionItemCategory) => {
+ await handleRemoveCategory(
+ collection,
category,
- setLoadingCategoryId,
collectionItemsContext
);
-
- // Clear the CategoryAutocomplete input after successful addition
- if (categoryAutocompleteRef.current && typeof categoryAutocompleteRef.current.clearInput === 'function') {
- categoryAutocompleteRef.current.clearInput();
- }
};
return (
@@ -314,12 +314,7 @@ const CollectionItemComponent: React.FC = ({
variant="subtle"
color="red"
size="sm"
- onClick={() => handleRemoveCategory(
- collection,
- category,
- setLoadingCategoryId,
- collectionItemsContext
- )}
+ onClick={() => handleCategoryRemove(category)}
>
@@ -333,14 +328,10 @@ const CollectionItemComponent: React.FC = ({
)
diff --git a/src/components/AuthenticatedRoute/index.test.tsx b/src/components/AuthenticatedRoute/index.test.tsx
index 826f340f..84bb0dd6 100644
--- a/src/components/AuthenticatedRoute/index.test.tsx
+++ b/src/components/AuthenticatedRoute/index.test.tsx
@@ -1,11 +1,8 @@
-import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import { MemoryRouter, Route, Switch } from 'react-router-dom';
import AuthenticatedRoute from './index';
import { TokenState } from '../../data/persistent/persistent.state';
import { connect } from '../../data/connect';
-import { Provider } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit';
// Mock the connect function
jest.mock('../../data/connect', () => ({
@@ -63,6 +60,8 @@ describe('AuthenticatedRoute', () => {
renderWithRouter(undefined, '/protected');
await waitFor(() => {
expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+ });
+ await waitFor(() => {
expect(screen.getByText('Splash Page')).toBeInTheDocument();
});
});
diff --git a/src/components/BottomStickySection/index.test.tsx b/src/components/BottomStickySection/index.test.tsx
index 40113538..f579823b 100644
--- a/src/components/BottomStickySection/index.test.tsx
+++ b/src/components/BottomStickySection/index.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import { render } from '@testing-library/react';
import BottomStickySection from './index';
diff --git a/src/components/BottomStickySection/index.tsx b/src/components/BottomStickySection/index.tsx
index 71928ebf..00a19a3c 100644
--- a/src/components/BottomStickySection/index.tsx
+++ b/src/components/BottomStickySection/index.tsx
@@ -1,7 +1,7 @@
-import React, {PropsWithChildren, useState} from 'react';
+import React, {PropsWithChildren} from 'react';
import './index.scss';
-interface Props extends PropsWithChildren