refactor Item state. clear buttons working. closes #24

collinmurd · Sep 8, 2024 · f837ca3 · f837ca3
1 parent 43e9c81
commit f837ca3
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 36 deletions.
diff --git a/app/src/components/Item/Item.test.tsx b/app/src/components/Item/Item.test.tsx
@@ -15,13 +15,13 @@ const mockData: IItem = {
 
 describe('Render', () => {
   it('should mark checked', () => {
-    render(<Item item={mockData} removeItem={jest.fn()} edit={false} />)
+    render(<Item item={mockData} removeItem={jest.fn()} updateItemState={jest.fn()} edit={false} />)
     expect(screen.getByRole('checkbox')).toHaveAttribute('checked');
   });
 
   it('should not mark unchecked', () => {
     mockData.checked = false;
-    render(<Item item={mockData} removeItem={jest.fn()} edit={false} />)
+    render(<Item item={mockData} removeItem={jest.fn()} updateItemState={jest.fn()} edit={false} />)
     expect(screen.getByRole('checkbox')).not.toHaveAttribute('checked');
   });
 })
@@ -33,7 +33,7 @@ describe('Check an item', () => {
   });
 
   it('should call the api when the box is checked', async () => {
-    render(<Item item={mockData} removeItem={jest.fn()} edit={false} />);
+    render(<Item item={mockData} removeItem={jest.fn()} updateItemState={jest.fn()} edit={false} />);
     (updateItem as jest.Mock).mockReturnValue(Promise.resolve({
       id: "1",
       description: "Apples",
@@ -48,7 +48,7 @@ describe('Check an item', () => {
 
   it('should call the api when the box is unchecked', async () => {
     mockData.checked = true;
-    render(<Item item={mockData} removeItem={jest.fn()} edit={false} />);
+    render(<Item item={mockData} removeItem={jest.fn()} updateItemState={jest.fn()} edit={false} />);
     (updateItem as jest.Mock).mockReturnValue(Promise.resolve({
       id: "1",
       description: "Apples",
@@ -67,7 +67,7 @@ describe('Delete an item', () => {
   it('should call removeItem when delete button is clicked', async () => {
     const removeItem = jest.fn();
     const user = userEvent.setup();
-    render(<Item item={mockData} removeItem={removeItem} edit={false} />)
+    render(<Item item={mockData} removeItem={removeItem} updateItemState={jest.fn()} edit={false} />)
 
     await user.click(screen.getByLabelText('Delete Apples'));
     expect(removeItem).toHaveBeenCalled();
@@ -78,7 +78,7 @@ describe('Edit an item', () => {
   it('should open the text box when the edit button is clicked', async () => {
     const removeItem = jest.fn();
     const user = userEvent.setup();
-    render(<Item item={mockData} removeItem={removeItem} edit={false} />)
+    render(<Item item={mockData} removeItem={removeItem} updateItemState={jest.fn()} edit={false} />)
 
     await user.click(await screen.findByLabelText('Edit Apples'));
 

diff --git a/app/src/components/Item/Item.tsx b/app/src/components/Item/Item.tsx
@@ -6,21 +6,22 @@ import classes from './Item.module.css'
 import { IconPencil, IconTrash } from "@tabler/icons-react";
 import { useExitOnEscape } from "../../hooks";
 
-export function Item(props: {item: IItem, removeItem: Function, edit: boolean}) {
-  const [itemDescription, setItemDescription] = useState(props.item.description);
-  const [checked, setChecked] = useState(props.item.checked);
+export interface IItemProps {
+  item: IItem,
+  edit: boolean,
+  removeItem: (item: IItem) => void,
+  updateItemState: (item: IItem) => void
+}
+
+export function Item(props: IItemProps) {
   const [editing, setEditing] = useState(props.edit);
 
   useExitOnEscape(handleEditFinished);
 
   function handleChecked(event: React.ChangeEvent<HTMLInputElement>) {
-    updateItem({
-      checked: event.target.checked,
-      description: itemDescription,
-      id: props.item.id,
-      section: props.item.section
-    });
-    setChecked(!checked)
+    props.item.checked = event.target.checked;
+    updateItem(props.item);
+    props.updateItemState(props.item);
   }
 
   function handleDelete() {
@@ -31,24 +32,33 @@ export function Item(props: {item: IItem, removeItem: Function, edit: boolean})
     setEditing(true);
   }
 
+  function handleDescriptionChanged(event: React.ChangeEvent<HTMLInputElement>) {
+    props.item.description = event.target.value;
+    props.updateItemState(props.item);
+  }
+
   function handleEditFinished() {
-    if (!itemDescription) {
-      // empty input, delete the item
-      handleDelete();
-    } else {
-      props.item.description = itemDescription;
-      setEditing(false);
-      updateItem(props.item);
+    if (editing) {
+      if (!props.item.description) {
+        // empty input, delete the item
+        handleDelete();
+      } else {
+        props.item.description = props.item.description;
+        setEditing(false);
+        console.log('here?')
+        console.log(props.item.id)
+        updateItem(props.item);
+      }
     }
   }
 
-  var descriptionContent = <span className={classes.itemDescription}>{itemDescription}</span>;
+  var descriptionContent = <span className={classes.itemDescription}>{props.item.description}</span>;
   var editButtons = (
     <div>
-      <ActionIcon variant="subtle" aria-label={'Edit ' + itemDescription} onClick={handleEditClicked}>
+      <ActionIcon variant="subtle" aria-label={'Edit ' + props.item.description} onClick={handleEditClicked}>
         <IconPencil />
       </ActionIcon>
-      <ActionIcon variant="subtle" aria-label={'Delete ' + itemDescription} onClick={handleDelete}>
+      <ActionIcon variant="subtle" aria-label={'Delete ' + props.item.description} onClick={handleDelete}>
         <IconTrash />
       </ActionIcon>
     </div>
@@ -58,15 +68,15 @@ export function Item(props: {item: IItem, removeItem: Function, edit: boolean})
     descriptionContent = (
       <TextInput
         className={classes.itemDescription}
-        value={itemDescription} 
+        value={props.item.description} 
         autoFocus
         onBlur={handleEditFinished}
-        onChange={e => setItemDescription(e.target.value)} />
+        onChange={handleDescriptionChanged} />
     );
 
     editButtons = (
       <div>
-        <ActionIcon variant="subtle" aria-label={'Delete ' + itemDescription} onClick={handleDelete}>
+        <ActionIcon variant="subtle" aria-label={'Delete ' + props.item.description} onClick={handleDelete}>
           <IconTrash />
         </ActionIcon>
       </div>
@@ -78,7 +88,7 @@ export function Item(props: {item: IItem, removeItem: Function, edit: boolean})
       <Flex align="center">
         <Checkbox
           type="checkbox"
-          checked={checked}
+          checked={props.item.checked}
           onChange={handleChecked} />
         {descriptionContent}
       </Flex>

diff --git a/app/src/components/List/List.test.tsx b/app/src/components/List/List.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen, waitFor, userEvent, UserEvent} from '../../testing-utils';
 import { IItem } from '@groceries/shared';
 import { List } from './List';
-import { deleteItem, getItems } from '../../services/api';
+import { batchDeleteItems, deleteItem, getItems } from '../../services/api';
 
 jest.mock('../../services/api')
 
@@ -136,6 +136,7 @@ describe('Clearing items', () => {
   var user: UserEvent;
   beforeEach(() => {
     (getItems as jest.Mock).mockReturnValue(Promise.resolve(mockData));
+    (batchDeleteItems as jest.Mock).mockReturnValue(Promise.resolve(""));
     user = userEvent.setup();
   });
 
@@ -155,6 +156,7 @@ describe('Clearing items', () => {
     render(<List setError={jest.fn()}/>)
     await user.click(await screen.findByRole('button', {name: 'Clear'}));
     await user.click(await screen.findByRole('menuitem', {name: 'Clear All'}));
+    expect(batchDeleteItems).toHaveBeenCalled();
     expect(screen.queryByText('Chicken')).toBeNull();
     expect(screen.queryByText('Steak')).toBeNull();
     expect(screen.queryByText('Apples')).toBeNull();
@@ -164,6 +166,7 @@ describe('Clearing items', () => {
     render(<List setError={jest.fn()}/>)
     await user.click(await screen.findByRole('button', {name: 'Clear'}));
     await user.click(await screen.findByRole('menuitem', {name: 'Clear Checked'}));
+    expect(batchDeleteItems).toHaveBeenCalled();
     expect(screen.queryByText('Chicken')).toBeInTheDocument();
     expect(screen.queryByText('Steak')).toBeNull();
     expect(screen.queryByText('Apples')).toBeInTheDocument();

diff --git a/app/src/components/List/List.tsx b/app/src/components/List/List.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { createItem, deleteItem, getItems } from '../../services/api';
+import { batchDeleteItems, createItem, deleteItem, getItems } from '../../services/api';
 import { Section } from '../Section/Section';
 import { Button, Loader, Menu, TextInput } from '@mantine/core';
 import { useExitOnEscape } from '../../hooks';
@@ -57,6 +57,15 @@ export function List(props: {setError: Function}) {
     });
   }
 
+  function updateItem(item: IItem) {
+    var itemToUpdate = items.find(i => i.id === item.id);
+    if (itemToUpdate) {
+      itemToUpdate = {...item}
+    }
+
+    setItems([...items]);
+  }
+
   function removeItem(item: IItem) {
     deleteItem(item)
       .then(_ => {
@@ -65,11 +74,21 @@ export function List(props: {setError: Function}) {
   }
 
   function clearAllItems() {
-    setItems([]);
+    batchDeleteItems(items
+        .filter(i => i.id)
+        .map(i => i.id!))
+      .then(() => {
+        setItems([]);
+      });
   }
 
   function clearCheckedItems() {
-    setItems([...items.filter(i => !i.checked)]);
+    batchDeleteItems(items
+        .filter(i => i.checked)
+        .map(i => i.id!))
+      .then(() => {
+        setItems([...items.filter(i => !i.checked)]);
+      });
   }
 
   // create section components
@@ -80,7 +99,7 @@ export function List(props: {setError: Function}) {
       addNewItem={addNewItem}>
         {items
           .filter(i => i.section === section)
-          .map(i => <Item key={i.id} item={i} removeItem={removeItem} edit={false} />)}
+          .map(i => <Item key={i.id} item={i} removeItem={removeItem} updateItemState={updateItem} edit={false} />)}
       </Section>
   );
 

diff --git a/app/src/components/Section/Section.test.tsx b/app/src/components/Section/Section.test.tsx
@@ -27,7 +27,7 @@ const mockData: IItem[] = [
 describe('Render', () => {
   it('should render', () => {
     render(<Section name={mockName} addNewItem={jest.fn()}>
-        {mockData.map(i => <Item key={i.id} item={i} removeItem={jest.fn()} edit={false} />)}
+        {mockData.map(i => <Item key={i.id} item={i} removeItem={jest.fn()} updateItemState={jest.fn()} edit={false} />)}
     </Section>)
   });
 });

diff --git a/app/src/services/api.tsx b/app/src/services/api.tsx
@@ -52,4 +52,8 @@ export async function updateItem(item: IItem): Promise<IItem> {
 
 export async function deleteItem(item: IItem) {
   return call('DELETE', `/items/${item.id}`);
+}
+
+export async function batchDeleteItems(ids: string[]) {
+  return call('POST', '/items:batchDelete', ids);
 }