debug: comment out useUrgency logic in components and tests

Author: Nika Kolesnikova

src/components/ListItem.jsx

@@ -8,42 +8,42 @@ import { DeleteIconWithTooltip, tooltipStyle } from './DeleteIconWithTooltip';
 import {
 	ListItem as MaterialListItem,
 	Tooltip,
-	IconButton,
+	// IconButton,
 	ListItemButton,
 	ListItemIcon,
 	ListItemText,
 	Checkbox,
 } from '@mui/material';
-import {
-	Restore as OverdueIcon,
-	RestartAlt as SoonIcon,
-	RadioButtonUnchecked as KindOfSoonIcon,
-	RemoveCircle as NotSoonIcon,
-	RadioButtonChecked as InactiveIcon,
-} from '@mui/icons-material';
+// import {
+// 	Restore as OverdueIcon,
+// 	RestartAlt as SoonIcon,
+// 	RadioButtonUnchecked as KindOfSoonIcon,
+// 	RemoveCircle as NotSoonIcon,
+// 	RadioButtonChecked as InactiveIcon,
+// } from '@mui/icons-material';
 
 import './ListItem.css';
 
 const currentDate = new Date();
 
-const urgencyStatusIcons = {
-	overdue: OverdueIcon,
-	soon: SoonIcon,
-	kindOfSoon: KindOfSoonIcon,
-	notSoon: NotSoonIcon,
-	inactive: InactiveIcon,
-};
-
-const urgencyStatusStyle = {
-	fontSize: '2.5rem',
-	color: 'white',
-};
-
-const toolTipStyle = {
-	fontSize: '1.5rem',
-	marginBlockStart: '0',
-	marginBlockEnd: '0',
-};
+// const urgencyStatusIcons = {
+// 	overdue: OverdueIcon,
+// 	soon: SoonIcon,
+// 	kindOfSoon: KindOfSoonIcon,
+// 	notSoon: NotSoonIcon,
+// 	inactive: InactiveIcon,
+// };
+
+// const urgencyStatusStyle = {
+// 	fontSize: '2.5rem',
+// 	color: 'white',
+// };
+
+// const toolTipStyle = {
+// 	fontSize: '1.5rem',
+// 	marginBlockStart: '0',
+// 	marginBlockEnd: '0',
+// };
 
 const calculateIsPurchased = (dateLastPurchased) => {
 	if (!dateLastPurchased) {
@@ -57,7 +57,8 @@ const calculateIsPurchased = (dateLastPurchased) => {
 	return currentDate < oneDayLater;
 };
 
-export function ListItem({ item, listPath, itemUrgencyStatus }) {
+export function ListItem({ item, listPath }) {
+	// export function ListItem({ item, listPath, itemUrgencyStatus }) {
 	const { open, isOpen, toggleDialog } = useConfirmDialog();
 	const [isPurchased, setIsPurchased] = useState(() =>
 		calculateIsPurchased(item.dateLastPurchased),
@@ -96,7 +97,7 @@ export function ListItem({ item, listPath, itemUrgencyStatus }) {
 		return;
 	};
 
-	const UrgencyStatusIcon = urgencyStatusIcons[itemUrgencyStatus];
+	// const UrgencyStatusIcon = urgencyStatusIcons[itemUrgencyStatus];
 
 	const props = {
 		handleDelete: handleDeleteItem,
@@ -113,7 +114,7 @@ export function ListItem({ item, listPath, itemUrgencyStatus }) {
 		<>
 			{open && <ConfirmDialog props={props} />}
 			<MaterialListItem className="ListItem">
-				{UrgencyStatusIcon && (
+				{/* {UrgencyStatusIcon && (
 					<Tooltip
 						title={<p style={toolTipStyle}>{itemUrgencyStatus}</p>}
 						placement="left"
@@ -123,7 +124,7 @@ export function ListItem({ item, listPath, itemUrgencyStatus }) {
 							<UrgencyStatusIcon sx={urgencyStatusStyle} fontSize="large" />
 						</IconButton>
 					</Tooltip>
-				)}
+				)} */}
 				<ListItemButton role={undefined} onClick={handleChange} dense>
 					<ListItemIcon>
 						<Tooltip

src/views/List.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { useEnsureListPath, useUrgency } from '../hooks';
-import { getUrgency } from '../utils/urgencyUtils';
+import { useEnsureListPath } from '../hooks';
+// import { useEnsureListPath, useUrgency } from '../hooks';
+// import { getUrgency } from '../utils/urgencyUtils';
 // import { List as UnorderedList, Box } from '@mui/material';
 // import Grid from '@mui/material/Grid2';
 import { ListItem, AddItems, TextInputElement } from '../components';
@@ -11,20 +12,21 @@ import { ListItem, AddItems, TextInputElement } from '../components';
 // operations like filtering and sorting items.
 
 export const List = React.memo(function List({ data, listPath }) {
-	const { urgencyObject } = useUrgency(data);
+	// const { urgencyObject } = useUrgency(data);
 	const [searchItem, setSearchItem] = useState('');
 
 	// Redirect to home if no list path is nulls
 	if (useEnsureListPath()) return <></>;
 	const listName = listPath.slice(listPath.indexOf('/') + 1);
 
-	const sortedItems = Object.values(urgencyObject).flat();
+	// const sortedItems = Object.values(urgencyObject).flat();
 
 	const handleTextChange = (event) => {
 		setSearchItem(event.target.value);
 	};
 
-	const filteredItems = sortedItems.filter((item) =>
+	const filteredItems = data.filter((item) =>
+		// const filteredItems = sortedItems.filter((item) =>
 		item?.name?.toLowerCase().includes(searchItem.toLowerCase()),
 	);
 
@@ -70,13 +72,13 @@ export const List = React.memo(function List({ data, listPath }) {
 
 					<ul>
 						{filteredItems.map((item) => {
-							const itemUrgencyStatus = getUrgency(item.name, urgencyObject);
+							// const itemUrgencyStatus = getUrgency(item.name, urgencyObject);
 							return (
 								<ListItem
 									key={item.id}
 									item={item}
 									listPath={listPath}
-									itemUrgencyStatus={itemUrgencyStatus}
+									// itemUrgencyStatus={itemUrgencyStatus}
 								/>
 							);
 						})}

tests/List.test.jsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { List } from '../src/views/List';
 import { mockShoppingListData } from '../src/mocks/__fixtures__/shoppingListData';
-import { useStateWithStorage, useEnsureListPath } from '../src/hooks';
+import { useStateWithStorage } from '../src/hooks';
 import {
 	getDateLastPurchasedOrDateCreated,
 	getDaysFromDate,
@@ -12,20 +12,20 @@ import {
 vi.mock('../src/hooks', () => ({
 	useEnsureListPath: vi.fn(),
 	useStateWithStorage: vi.fn(),
-	useUrgency: vi.fn(() => ({
-		getUrgency: vi.fn((name) => {
-			if (name === 'nutella') return 'soon';
-			if (name === 'Cheese') return 'overdue';
-			return 'notSoon';
-		}),
-		urgencyObject: {
-			overdue: [{ name: 'nutella', id: '0T1ByXr8YJSOzujOlLMI' }],
-			soon: [{ name: 'Cheese', id: '1MFWOWMCzDtEHQboFZfR' }],
-			kindOfSoon: [],
-			notSoon: [{ name: 'Jam', id: 'MnUiYUmhg8iCzX1eMxW8' }],
-			inactive: [],
-		},
-	})),
+	// useUrgency: vi.fn(() => ({
+	// 	getUrgency: vi.fn((name) => {
+	// 		if (name === 'nutella') return 'soon';
+	// 		if (name === 'Cheese') return 'overdue';
+	// 		return 'notSoon';
+	// 	}),
+	// 	urgencyObject: {
+	// 		overdue: [{ name: 'nutella', id: '0T1ByXr8YJSOzujOlLMI' }],
+	// 		soon: [{ name: 'Cheese', id: '1MFWOWMCzDtEHQboFZfR' }],
+	// 		kindOfSoon: [],
+	// 		notSoon: [{ name: 'Jam', id: 'MnUiYUmhg8iCzX1eMxW8' }],
+	// 		inactive: [],
+	// 	},
+	// })),
 }));
 
 vi.mock('../src/utils', () => ({