add selected item to appContext; unset selected item on remove and date change

src/components/caloriesList/CaloriesDateInput.tsx

@@ -4,11 +4,12 @@ import { getDateString } from '../../utils/date';
 import styles from './caloriesDateInput.css';
 
 function CaloriesDateInput () {
-  const {selectedDate, setSelectedDate} = useContext(AppContext);
+  const {selectedDate, setSelectedDate, setSelectedItem} = useContext(AppContext);
 
   function onDateChange (event: ChangeEvent<HTMLInputElement>) {
     const newDate = (new Date(event.target.value)).getTime();
     setSelectedDate(newDate);
+    setSelectedItem();
   }
 
   const date = new Date(selectedDate);

src/components/caloriesList/CaloriesList.tsx

@@ -9,12 +9,14 @@ import { ListEditBox } from './ListEditBox';
 import styles from './caloriesList.css';
 
 function CaloriesList () {
-  const {calorieItems = [], setCalorieItems, selectedDate, setSelectedDate} = useContext(AppContext);
-  const [selectedItem, setSelectedItem] = useState<CalorieValue>();
-
-  useEffect(() => {
-    setSelectedItem(undefined);
-  }, [selectedDate]);
+  const {
+    calorieItems = [],
+    setCalorieItems,
+    selectedDate,
+    setSelectedDate,
+    selectedItem,
+    setSelectedItem
+  } = useContext(AppContext);
 
   function addCalories (addedCalories: { title: string, count: number }) {
     const updatedCalories = [
@@ -30,6 +32,7 @@ function CaloriesList () {
 
   function removeItem () {
     setCalorieItems(calorieItems.filter((item) => item !== selectedItem));
+    setSelectedItem();
   }
 
   function saveCalories (changedCalories: { title: string, count: number }) {
@@ -61,7 +64,7 @@ function CaloriesList () {
     return setSelectedItem(item);
   }
 
-  const swipeItem = (date: number, items: CalorieValue[]) => ({ date, items });
+  const swipeItem = (date: number, items: CalorieValue[]) => ({date, items});
 
   const dayCalories = [
     selectedDate - 3600 * 24 * 1000,
@@ -98,7 +101,7 @@ function CaloriesList () {
           height: '100%'
         }
       }}>
-        {dayCalories.map(({ date, items }) => {
+        {dayCalories.map(({date, items}) => {
           return (
             <ItemList key={date} {...{items, selectedItem, onRowClick}} />
           );

src/layout/App.tsx

@@ -17,13 +17,21 @@ const storedCalories = JSON.parse(localStorage.getItem('calorieItems') || '[]');
 function App (): ReactElement {
   const [calorieItems, setCalorieItems] = useState<CalorieItems>(storedCalories);
   const [selectedDate, setSelectedDate] = useState<number>(Date.now());
+  const [selectedItem, setSelectedItem] = useState<CalorieValue>();
 
   useEffect(() => {
     localStorage.setItem('calorieItems', JSON.stringify(calorieItems));
   });
 
   return (
-    <AppContextProvider value={{calorieItems, setCalorieItems, selectedDate, setSelectedDate}}>
+    <AppContextProvider value={{
+      calorieItems,
+      selectedDate,
+      selectedItem,
+      setCalorieItems,
+      setSelectedDate,
+      setSelectedItem
+    }}>
       <PageHeader />
 
       <main id="pageContent">

src/layout/AppContext.ts

@@ -5,14 +5,18 @@ type AppContextType = {
   selectedDate: number,
   setSelectedDate: (selectedDate: number) => void,
   calorieItems: CalorieItems;
-  setCalorieItems: (calorieItems: CalorieValue[]) => void;
+  setCalorieItems: (calorieItems: CalorieValue[]) => void,
+  selectedItem: CalorieValue | undefined,
+  setSelectedItem: (item?: CalorieValue) => void
 };
 
 const AppContext = createContext<AppContextType>({
   calorieItems: [],
   selectedDate: Date.now(),
+  selectedItem: undefined,
   setCalorieItems: () => [],
-  setSelectedDate: () => getDateString(new Date())
+  setSelectedDate: () => getDateString(new Date()),
+  setSelectedItem: () => {}
 });
 
 export {