move item actions to row

src/components/caloriesList/CalorieRow.tsx

@@ -1,10 +1,12 @@
 import cx from 'classnames';
 import React, { MouseEvent } from 'react';
 import styles from './calorieRow.css';
+import { ItemActions } from './ItemActions';
 
 type CalorieRowProps = {
   item: CalorieValue,
   onRowClick?: (item: CalorieValue) => void,
+  removeItem: (itemToRemove: CalorieValue) => void,
   isSelected?: boolean
 };
 
@@ -12,7 +14,8 @@ function CalorieRow (props: CalorieRowProps) {
   const {
     item,
     isSelected = false,
-    onRowClick = Function.prototype
+    onRowClick = Function.prototype,
+    removeItem
   } = props;
 
   const onClick = (event: MouseEvent) => {
@@ -22,8 +25,14 @@ function CalorieRow (props: CalorieRowProps) {
 
   return (
     <div className={cx(styles.calorieRow, {[styles.selected]: isSelected})} {...{onClick}}>
-      <div className={styles.title}>{item.title}</div>
-      <div>{item.count}</div>
+      <div className="itemValues">
+        <div className={styles.title}>{item.title}</div>
+        <div>{item.count}</div>
+      </div>
+
+      { isSelected && (
+        <ItemActions {...{removeItem: () => removeItem(item)}} />
+      )}
     </div>
   );
 }

src/components/caloriesList/CaloriesList.tsx

@@ -3,7 +3,6 @@ import ReactSwipe from 'react-swipe';
 import { AppContext } from '../../layout/AppContext';
 import { haveSameDay } from '../../utils/date';
 import { CaloriesInput } from '../caloriesInput/CaloriesInput';
-import { ItemActions } from './ItemActions';
 import { ItemList } from './ItemList';
 import { ListEditBox } from './ListEditBox';
 import styles from './caloriesList.css';
@@ -30,11 +29,6 @@ function CaloriesList () {
     setCalorieItems(updatedCalories);
   }
 
-  function removeItem () {
-    setCalorieItems(calorieItems.filter((item) => item !== selectedItem));
-    setSelectedItem();
-  }
-
   function saveCalories (changedCalories: { title: string, count: number }) {
     if (!selectedItem) {
       return;
@@ -56,6 +50,11 @@ function CaloriesList () {
     setSelectedItem(updatedItem);
   }
 
+  function removeItem (itemToRemove: CalorieValue) {
+    setCalorieItems(calorieItems.filter((item) => item !== selectedItem));
+    setSelectedItem();
+  }
+
   function onRowClick (item: CalorieValue) {
     if (selectedItem === item) {
       return setSelectedItem(undefined);
@@ -103,20 +102,14 @@ function CaloriesList () {
       }}>
         {dayCalories.map(({date, items}) => {
           return (
-            <ItemList key={date} {...{items, selectedItem, onRowClick, onClick: () => setSelectedItem() }} />
+            <ItemList key={date} {...{items, selectedItem, onRowClick, onClick: () => setSelectedItem(), removeItem }} />
           );
         })}
       </ReactSwipe>
 
       <div className={styles.editBoxes}>
-        {selectedItem &&
-        <ListEditBox>
-          <ItemActions {...{removeItem}} />
-        </ListEditBox>
-        }
-
         <ListEditBox>
-          <CaloriesInput {...{addCalories, saveCalories, item: selectedItem}} />
+          <CaloriesInput {...{addCalories, saveCalories, item: selectedItem }} />
         </ListEditBox>
       </div>
     </section>

src/components/caloriesList/ItemActions.tsx

@@ -4,7 +4,7 @@ import { iconTypes } from '../icon/iconTypes';
 import styles from './itemActions.css';
 
 type ItemActionsProps = {
-  removeItem: () => void;
+  removeItem: () => void
 };
 
 function ItemActions (props: ItemActionsProps) {

src/components/caloriesList/ItemList.tsx

@@ -7,11 +7,12 @@ type ItemListProps = {
   className?: string,
   items: CalorieValue[],
   selectedItem?: CalorieValue,
-  onRowClick: (item: CalorieValue) => void
+  onRowClick: (item: CalorieValue) => void,
+  removeItem: (itemToRemove: CalorieValue) => void
 };
 
 function ItemList (props: ItemListProps) {
-  const {className, items, selectedItem, onRowClick, ...restProps} = props;
+  const {className, items, selectedItem, onRowClick, removeItem, ...restProps} = props;
 
   return (
     <section {...restProps} className={cx(styles.itemList, className)}>
@@ -19,7 +20,7 @@ function ItemList (props: ItemListProps) {
         // todo: use better key
         const isSelected = item === selectedItem;
         return (
-          <CalorieRow key={index} {...{item, onRowClick, isSelected}} />
+          <CalorieRow key={index} {...{item, onRowClick, isSelected, removeItem}} />
         );
       })}
     </section>