make days swipable

package.json

@@ -36,6 +36,7 @@
     "@types/react-dom": "^16.9.4",
     "@types/react-router": "^5.1.3",
     "@types/react-router-dom": "^5.1.2",
+    "@types/react-swipe": "^6.0.0",
     "@types/webpack-env": "^1.14.1",
     "classnames": "^2.2.6",
     "parcel-bundler": "^1.12.4",
@@ -45,6 +46,7 @@
     "react-dom": "^16.11.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
+    "react-swipe": "^6.0.4",
     "tslint": "^5.20.1"
   }
 }

src/components/caloriesList/CaloriesList.tsx

@@ -1,14 +1,15 @@
 import React, { useContext, useEffect, useState } from 'react';
+import ReactSwipe from 'react-swipe';
 import { AppContext } from '../../layout/AppContext';
 import { haveSameDay } from '../../utils/date';
 import { CaloriesInput } from '../caloriesInput/CaloriesInput';
-import { CalorieRow } from './CalorieRow';
-import styles from './caloriesList.css';
 import { ItemActions } from './ItemActions';
+import { ItemList } from './ItemList';
 import { ListEditBox } from './ListEditBox';
+import styles from './caloriesList.css';
 
 function CaloriesList () {
-  const {calorieItems = [], setCalorieItems, selectedDate} = useContext(AppContext);
+  const {calorieItems = [], setCalorieItems, selectedDate, setSelectedDate} = useContext(AppContext);
   const [selectedItem, setSelectedItem] = useState<CalorieValue>();
 
   useEffect(() => {
@@ -42,7 +43,7 @@ function CaloriesList () {
       ...changedCalories
     };
 
-    const updatedItems =  [
+    const updatedItems = [
       ...calorieItems.slice(0, itemIndex),
       updatedItem,
       ...calorieItems.slice(itemIndex + 1)
@@ -60,19 +61,49 @@ function CaloriesList () {
     return setSelectedItem(item);
   }
 
-  const calories = calorieItems.filter(({timestamp}) => haveSameDay(timestamp, selectedDate));
+  const swipeItem = (date: number, items: CalorieValue[]) => ({ date, items });
+
+  const dayCalories = [
+    selectedDate - 3600 * 24 * 1000,
+    selectedDate,
+    selectedDate + 3600 * 24 * 1000
+  ].map((date) => {
+    return swipeItem(date, calorieItems.filter(({timestamp}) => haveSameDay(timestamp, date)));
+  });
 
   return (
     <section className={styles.caloriesList}>
-      <section className={styles.caloriesItems}>
-        {calories.map((item: CalorieValue, index: number) => {
-          // todo: use better key
-          const isSelected = item === selectedItem;
+      <ReactSwipe swipeOptions={{
+        continuous: false,
+        speed: 250,
+        startSlide: 1,
+        transitionEnd (slide) {
+          const newDate = slide === 0
+            ? selectedDate - 3600 * 24 * 1000
+            : slide === 2
+              ? selectedDate + 3600 * 24 * 1000
+              : selectedDate;
+
+          setSelectedDate(newDate);
+        }
+      }} style={{
+        child: {
+          float: 'left',
+          position: 'relative'
+        },
+        container: {
+          flex: 1
+        },
+        wrapper: {
+          height: '100%'
+        }
+      }}>
+        {dayCalories.map(({ date, items }) => {
           return (
-            <CalorieRow key={index} {...{item, onRowClick, isSelected}} />
+            <ItemList key={date} {...{items, selectedItem, onRowClick}} />
           );
         })}
-      </section>
+      </ReactSwipe>
 
       <div className={styles.editBoxes}>
         {selectedItem &&

src/components/caloriesList/ItemList.tsx

@@ -0,0 +1,31 @@
+import cx from 'classnames';
+import React from 'react';
+import { CalorieRow } from './CalorieRow';
+import styles from './itemList.css';
+
+type ItemListProps = {
+  className?: string,
+  items: CalorieValue[],
+  selectedItem?: CalorieValue,
+  onRowClick: (item: CalorieValue) => void
+};
+
+function ItemList (props: ItemListProps) {
+  const {className, items, selectedItem, onRowClick, ...restProps} = props;
+
+  return (
+    <section {...restProps} className={cx(styles.itemList, className)}>
+      {items.map((item: CalorieValue, index: number) => {
+        // todo: use better key
+        const isSelected = item === selectedItem;
+        return (
+          <CalorieRow key={index} {...{item, onRowClick, isSelected}} />
+        );
+      })}
+    </section>
+  );
+}
+
+export {
+  ItemList
+};

src/components/caloriesList/caloriesList.css

@@ -4,10 +4,6 @@
     height: 100%;
 }
 
-.caloriesItems {
-    overflow: auto;
-}
-
 .editBoxes {
     margin-top: auto;
 }

src/components/caloriesList/itemList.css

@@ -0,0 +1,4 @@
+.itemList {
+    height: 100%;
+    overflow: auto;
+}