Copy scaffolding from Sets to Food

Still need to add migrations for the food
table.

EditFood.tsx

@@ -0,0 +1,231 @@
+import { DateTimePickerAndroid } from '@react-native-community/datetimepicker'
+import {
+  RouteProp,
+  useFocusEffect,
+  useNavigation,
+  useRoute,
+} from '@react-navigation/native'
+import { format } from 'date-fns'
+import { useCallback, useRef, useState } from 'react'
+import { NativeModules, TextInput, View } from 'react-native'
+import DocumentPicker from 'react-native-document-picker'
+import { Button, Card, TouchableRipple } from 'react-native-paper'
+import AppInput from './AppInput'
+import ConfirmDialog from './ConfirmDialog'
+import { MARGIN, PADDING } from './constants'
+import { getNow, setRepo, settingsRepo } from './db'
+import GymSet from './gym-set'
+import { HomePageParams } from './home-page-params'
+import Settings from './settings'
+import StackHeader from './StackHeader'
+import { toast } from './toast'
+
+export default function EditFood() {
+  const { params } = useRoute<RouteProp<HomePageParams, 'EditSet'>>()
+  const { set } = params
+  const navigation = useNavigation()
+  const [settings, setSettings] = useState<Settings>({} as Settings)
+  const [name, setName] = useState(set.name)
+  const [reps, setReps] = useState(set.reps?.toString())
+  const [weight, setWeight] = useState(set.weight?.toString())
+  const [newImage, setNewImage] = useState(set.image)
+  const [unit, setUnit] = useState(set.unit)
+  const [created, setCreated] = useState(
+    set.created ? new Date(set.created) : new Date(),
+  )
+  const [showRemove, setShowRemove] = useState(false)
+  const [removeImage, setRemoveImage] = useState(false)
+  const weightRef = useRef<TextInput>(null)
+  const repsRef = useRef<TextInput>(null)
+  const unitRef = useRef<TextInput>(null)
+
+  const [selection, setSelection] = useState({
+    start: 0,
+    end: set.reps?.toString().length,
+  })
+
+  useFocusEffect(
+    useCallback(() => {
+      settingsRepo.findOne({ where: {} }).then(setSettings)
+    }, []),
+  )
+
+  const startTimer = useCallback(
+    async (value: string) => {
+      if (!settings.alarm) return
+      const first = await setRepo.findOne({ where: { name: value } })
+      const milliseconds = (first?.minutes ?? 3) * 60 * 1000 +
+        (first?.seconds ?? 0) * 1000
+      if (milliseconds) NativeModules.AlarmModule.timer(milliseconds)
+    },
+    [settings],
+  )
+
+  const added = useCallback(
+    async (value: GymSet) => {
+      startTimer(value.name)
+      console.log(`${EditFood.name}.add`, { set: value })
+      if (!settings.notify) return
+      if (
+        value.weight > set.weight ||
+        (value.reps > set.reps && value.weight === set.weight)
+      ) {
+        toast('Great work King! That\'s a new record.')
+      }
+    },
+    [startTimer, set, settings],
+  )
+
+  const handleSubmit = async () => {
+    console.log(`${EditFood.name}.handleSubmit:`, { set, uri: newImage, name })
+    if (!name) return
+    let image = newImage
+    if (!newImage && !removeImage) {
+      image = await setRepo.findOne({ where: { name } }).then((s) => s?.image)
+    }
+
+    console.log(`${EditFood.name}.handleSubmit:`, { image })
+    const now = await getNow()
+    const saved = await setRepo.save({
+      id: set.id,
+      name,
+      created: created?.toISOString() || now,
+      reps: Number(reps),
+      weight: Number(weight),
+      unit,
+      image,
+      minutes: Number(set.minutes ?? 3),
+      seconds: Number(set.seconds ?? 30),
+      sets: set.sets ?? 3,
+      hidden: false,
+    })
+    if (typeof set.id !== 'number') added(saved)
+    navigation.goBack()
+  }
+
+  const changeImage = useCallback(async () => {
+    const { fileCopyUri } = await DocumentPicker.pickSingle({
+      type: DocumentPicker.types.images,
+      copyTo: 'documentDirectory',
+    })
+    if (fileCopyUri) setNewImage(fileCopyUri)
+  }, [])
+
+  const handleRemove = useCallback(async () => {
+    setNewImage('')
+    setRemoveImage(true)
+    setShowRemove(false)
+  }, [])
+
+  const pickDate = useCallback(() => {
+    DateTimePickerAndroid.open({
+      value: created,
+      onChange: (_, date) => {
+        if (date === created) return
+        setCreated(date)
+        DateTimePickerAndroid.open({
+          value: date,
+          onChange: (__, time) => setCreated(time),
+          mode: 'time',
+        })
+      },
+      mode: 'date',
+    })
+  }, [created])
+
+  return (
+    <>
+      <StackHeader
+        title={typeof set.id === 'number' ? 'Edit set' : 'Add set'}
+      />
+
+      <View style={{ padding: PADDING, flex: 1 }}>
+        <AppInput
+          label='Name'
+          value={name}
+          onChangeText={setName}
+          autoCorrect={false}
+          autoFocus={!name}
+          onSubmitEditing={() => repsRef.current?.focus()}
+        />
+
+        <AppInput
+          label='Reps'
+          keyboardType='numeric'
+          value={reps}
+          onChangeText={setReps}
+          onSubmitEditing={() => weightRef.current?.focus()}
+          selection={selection}
+          onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
+          innerRef={repsRef}
+        />
+
+        <AppInput
+          label='Weight'
+          keyboardType='numeric'
+          value={weight}
+          onChangeText={setWeight}
+          onSubmitEditing={handleSubmit}
+          innerRef={weightRef}
+        />
+
+        {settings.showUnit && (
+          <AppInput
+            autoCapitalize='none'
+            label='Unit'
+            value={unit}
+            onChangeText={setUnit}
+            innerRef={unitRef}
+          />
+        )}
+
+        {typeof set.id === 'number' && settings.showDate && (
+          <AppInput
+            label='Created'
+            value={format(created, settings.date || 'P')}
+            onPressOut={pickDate}
+          />
+        )}
+
+        {settings.images && newImage && (
+          <TouchableRipple
+            style={{ marginBottom: MARGIN }}
+            onPress={changeImage}
+            onLongPress={() => setShowRemove(true)}
+          >
+            <Card.Cover source={{ uri: newImage }} />
+          </TouchableRipple>
+        )}
+
+        {settings.images && !newImage && (
+          <Button
+            style={{ marginBottom: MARGIN }}
+            onPress={changeImage}
+            icon='add-photo-alternate'
+          >
+            Image
+          </Button>
+        )}
+      </View>
+
+      <Button
+        disabled={!name}
+        mode='contained'
+        icon='save'
+        style={{ margin: MARGIN }}
+        onPress={handleSubmit}
+      >
+        Save
+      </Button>
+
+      <ConfirmDialog
+        title='Remove image'
+        onOk={handleRemove}
+        show={showRemove}
+        setShow={setShowRemove}
+      >
+        Are you sure you want to remove the image?
+      </ConfirmDialog>
+    </>
+  )
+}

EditFoods.tsx

@@ -0,0 +1,158 @@
+import {
+  RouteProp,
+  useFocusEffect,
+  useNavigation,
+  useRoute,
+} from '@react-navigation/native'
+import { useCallback, useState } from 'react'
+import { View } from 'react-native'
+import DocumentPicker from 'react-native-document-picker'
+import { Button, Card, TouchableRipple } from 'react-native-paper'
+import { In } from 'typeorm'
+import AppInput from './AppInput'
+import ConfirmDialog from './ConfirmDialog'
+import { FoodPageParams } from './FoodPage'
+import StackHeader from './StackHeader'
+import { MARGIN, PADDING } from './constants'
+import { setRepo, settingsRepo } from './db'
+import GymSet from './gym-set'
+import Settings from './settings'
+
+export default function EditFoods() {
+  const { params } = useRoute<RouteProp<FoodPageParams, 'EditFoods'>>()
+  const { ids } = params
+  const navigation = useNavigation()
+  const [settings, setSettings] = useState<Settings>({} as Settings)
+  const [name, setName] = useState('')
+  const [reps, setReps] = useState('')
+  const [weight, setWeight] = useState('')
+  const [newImage, setNewImage] = useState('')
+  const [unit, setUnit] = useState('')
+  const [showRemove, setShowRemove] = useState(false)
+  const [names, setNames] = useState('')
+  const [oldReps, setOldReps] = useState('')
+  const [weights, setWeights] = useState('')
+  const [units, setUnits] = useState('')
+
+  const [selection, setSelection] = useState({
+    start: 0,
+    end: 1,
+  })
+
+  useFocusEffect(
+    useCallback(() => {
+      settingsRepo.findOne({ where: {} }).then(setSettings)
+      setRepo.find({ where: { id: In(ids) } }).then((sets) => {
+        setNames(sets.map((set) => set.name).join(', '))
+        setOldReps(sets.map((set) => set.reps).join(', '))
+        setWeights(sets.map((set) => set.weight).join(', '))
+        setUnits(sets.map((set) => set.unit).join(', '))
+      })
+    }, [ids]),
+  )
+
+  const handleSubmit = async () => {
+    console.log(`${EditFoods.name}.handleSubmit:`, { uri: newImage, name })
+    const update: Partial<GymSet> = {}
+    if (name) update.name = name
+    if (reps) update.reps = Number(reps)
+    if (weight) update.weight = Number(weight)
+    if (unit) update.unit = unit
+    if (newImage) update.image = newImage
+    if (Object.keys(update).length > 0) await setRepo.update(ids, update)
+    navigation.goBack()
+  }
+
+  const changeImage = useCallback(async () => {
+    const { fileCopyUri } = await DocumentPicker.pickSingle({
+      type: DocumentPicker.types.images,
+      copyTo: 'documentDirectory',
+    })
+    if (fileCopyUri) setNewImage(fileCopyUri)
+  }, [])
+
+  const handleRemove = useCallback(async () => {
+    setNewImage('')
+    setShowRemove(false)
+  }, [])
+
+  return (
+    <>
+      <StackHeader title={`Edit ${ids.length} foods`} />
+
+      <View style={{ padding: PADDING, flex: 1 }}>
+        <AppInput
+          label={`Names: ${names}`}
+          value={name}
+          onChangeText={setName}
+          autoCorrect={false}
+          autoFocus={!name}
+        />
+
+        <AppInput
+          label={`Reps: ${oldReps}`}
+          keyboardType='numeric'
+          value={reps}
+          onChangeText={setReps}
+          selection={selection}
+          onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
+          autoFocus={!!name}
+        />
+
+        <AppInput
+          label={`Weights: ${weights}`}
+          keyboardType='numeric'
+          value={weight}
+          onChangeText={setWeight}
+          onSubmitEditing={handleSubmit}
+        />
+
+        {settings.showUnit && (
+          <AppInput
+            autoCapitalize='none'
+            label={`Units: ${units}`}
+            value={unit}
+            onChangeText={setUnit}
+          />
+        )}
+
+        {settings.images && newImage && (
+          <TouchableRipple
+            style={{ marginBottom: MARGIN }}
+            onPress={changeImage}
+            onLongPress={() => setShowRemove(true)}
+          >
+            <Card.Cover source={{ uri: newImage }} />
+          </TouchableRipple>
+        )}
+        <ConfirmDialog
+          title='Remove image'
+          onOk={handleRemove}
+          show={showRemove}
+          setShow={setShowRemove}
+        >
+          Are you sure you want to remove the image?
+        </ConfirmDialog>
+
+        {settings.images && !newImage && (
+          <Button
+            style={{ marginBottom: MARGIN }}
+            onPress={changeImage}
+            icon='add-photo-alternate'
+          >
+            Image
+          </Button>
+        )}
+      </View>
+
+      <Button
+        mode='contained'
+        icon='save'
+        style={{ margin: MARGIN }}
+        onPress={handleSubmit}
+      >
+        Save
+      </Button>
+    </>
+  )
+}

FoodItem.tsx

@@ -0,0 +1,74 @@
+import { NavigationProp, useNavigation } from '@react-navigation/native'
+import { format } from 'date-fns'
+import { useCallback, useMemo } from 'react'
+import { Image } from 'react-native'
+import { List, Text } from 'react-native-paper'
+import { FoodPageParams } from './FoodPage'
+import { DARK_RIPPLE, DARK_TEXT, LIGHT_RIPPLE, LIGHT_TEXT } from './constants'
+import Food from './food'
+import Settings from './settings'
+import useDark from './use-dark'
+
+export default function FoodItem({
+  food,
+  settings,
+  ids,
+  setIds,
+}: {
+  food: Food
+  onRemove: () => void
+  settings: Settings
+  ids: number[]
+  setIds: (value: number[]) => void
+}) {
+  const dark = useDark()
+  const navigation = useNavigation<NavigationProp<FoodPageParams>>()
+
+  const longPress = useCallback(() => {
+    if (ids.length > 0) return
+    setIds([food.id])
+  }, [ids.length, food.id, setIds])
+
+  const press = useCallback(() => {
+    if (ids.length === 0) return navigation.navigate('EditFood', { food })
+    const removing = ids.find((id) => id === food.id)
+    if (removing) setIds(ids.filter((id) => id !== food.id))
+    else setIds([...ids, food.id])
+  }, [ids, food, navigation, setIds])
+
+  const backgroundColor = useMemo(() => {
+    if (!ids.includes(food.id)) return
+    if (dark) return DARK_RIPPLE
+    return LIGHT_RIPPLE
+  }, [dark, ids, food.id])
+
+  return (
+    <List.Item
+      onPress={press}
+      title={food.name}
+      description={food.name}
+      onLongPress={longPress}
+      style={{ backgroundColor }}
+      left={() =>
+        settings.images &&
+        food.image && (
+          <Image
+            source={{ uri: food.image }}
+            style={{ height: 75, width: 75 }}
+          />
+        )}
+      right={() => (
+        settings.showDate && (
+          <Text
+            style={{
+              alignSelf: 'center',
+              color: dark ? DARK_TEXT : LIGHT_TEXT,
+            }}
+          >
+            {format(new Date(food.created), settings.date || 'P')}
+          </Text>
+        )
+      )}
+    />
+  )
+}

FoodList.tsx

@@ -0,0 +1,161 @@
+import {
+  NavigationProp,
+  useFocusEffect,
+  useNavigation,
+} from '@react-navigation/native'
+import { useCallback, useState } from 'react'
+import { FlatList } from 'react-native'
+import { ActivityIndicator, List } from 'react-native-paper'
+import { Like } from 'typeorm'
+import DrawerHeader from './DrawerHeader'
+import FoodItem from './FoodItem'
+import { FoodPageParams } from './FoodPage'
+import ListMenu from './ListMenu'
+import Page from './Page'
+import { foodRepo, getNow, settingsRepo } from './db'
+import Food, { defaultFood } from './food'
+import Settings from './settings'
+
+const limit = 15
+
+export default function FoodList() {
+  const [foods, setFoods] = useState<Food[]>([])
+  const [offset, setOffset] = useState(0)
+  const [term, setTerm] = useState('')
+  const [end, setEnd] = useState(false)
+  const [settings, setSettings] = useState<Settings>()
+  const [ids, setIds] = useState<number[]>([])
+  const navigation = useNavigation<NavigationProp<FoodPageParams>>()
+
+  const refresh = useCallback(async (value: string) => {
+    const newFoods = await foodRepo.find({
+      where: { name: Like(`%${value.trim()}%`) },
+      take: limit,
+      skip: 0,
+      order: { created: 'DESC' },
+    })
+    console.log(`${FoodList.name}.refresh:`, { value, limit })
+    setFoods(newFoods)
+    setOffset(0)
+    setEnd(false)
+  }, [])
+
+  useFocusEffect(
+    useCallback(() => {
+      refresh(term)
+      settingsRepo.findOne({ where: {} }).then(setSettings)
+    }, [refresh, term]),
+  )
+
+  const renderItem = useCallback(
+    ({ item }: { item: Food }) => (
+      <FoodItem
+        settings={settings}
+        food={item}
+        key={item.id}
+        onRemove={() => refresh(term)}
+        ids={ids}
+        setIds={setIds}
+      />
+    ),
+    [refresh, term, settings, ids],
+  )
+
+  const next = useCallback(async () => {
+    if (end) return
+    const newOffset = offset + limit
+    console.log(`${FoodList.name}.next:`, { offset, newOffset, term })
+    const newFoods = await foodRepo.find({
+      where: { name: Like(`%${term}%`) },
+      take: limit,
+      skip: newOffset,
+      order: { created: 'DESC' },
+    })
+    if (newFoods.length === 0) return setEnd(true)
+    if (!foods) return
+    setFoods([...foods, ...newFoods])
+    if (newFoods.length < limit) return setEnd(true)
+    setOffset(newOffset)
+  }, [term, end, offset, foods])
+
+  const onAdd = useCallback(async () => {
+    const now = await getNow()
+    let food = foods[0]
+    if (!food) food = { ...defaultFood }
+    food.created = now
+    delete food.id
+    navigation.navigate('EditFood', { food })
+  }, [navigation, foods])
+
+  const search = useCallback(
+    (value: string) => {
+      setTerm(value)
+      refresh(value)
+    },
+    [refresh],
+  )
+
+  const editFoods = useCallback(() => {
+    navigation.navigate('EditFoods', { ids })
+    setIds([])
+  }, [ids, navigation])
+
+  const copy = useCallback(async () => {
+    const food = await foodRepo.findOne({
+      where: { id: ids.pop() },
+    })
+    delete food.id
+    delete food.created
+    navigation.navigate('EditFood', { food })
+    setIds([])
+  }, [ids, navigation])
+
+  const clear = useCallback(() => {
+    setIds([])
+  }, [])
+
+  const remove = useCallback(async () => {
+    setIds([])
+    await foodRepo.delete(ids.length > 0 ? ids : {})
+    await refresh(term)
+  }, [ids, refresh, term])
+
+  const select = useCallback(() => {
+    setIds(foods.map((set) => set.id))
+  }, [foods])
+
+  if (!settings) return <ActivityIndicator />
+
+  return (
+    <>
+      <DrawerHeader name={ids.length > 0 ? `${ids.length} selected` : 'Food'}>
+        <ListMenu
+          onClear={clear}
+          onCopy={copy}
+          onDelete={remove}
+          onEdit={editFoods}
+          ids={ids}
+          onSelect={select}
+        />
+      </DrawerHeader>
+
+      <Page onAdd={onAdd} term={term} search={search}>
+        {foods?.length === 0
+          ? (
+            <List.Item
+              title='No food yet'
+              description='Start by adding what you ate today.'
+            />
+          )
+          : (
+            <FlatList
+              data={foods}
+              style={{ flex: 1 }}
+              renderItem={renderItem}
+              onEndReached={next}
+            />
+          )}
+      </Page>
+    </>
+  )
+}

FoodPage.tsx

@@ -0,0 +1,27 @@
+import { createStackNavigator } from '@react-navigation/stack'
+import FoodList from './FoodList'
+import EditFood from './EditFood'
+import Food from './food'
+
+export type FoodPageParams = {
+  FoodList: {}
+  EditFood: {
+    food: Food
+  }
+  EditFoods: {
+    ids: number[]
+  }
+}
+
+const Stack = createStackNavigator<FoodPageParams>()
+
+export default function FoodPage() {
+  return (
+    <Stack.Navigator
+      screenOptions={{ headerShown: false, animationEnabled: false }}
+    >
+      <Stack.Screen name='FoodList' component={FoodList} />
+      <Stack.Screen name='EditFood' component={EditFood} />
+    </Stack.Navigator>
+  )
+}

Routes.tsx

@@ -8,6 +8,7 @@ import SettingsPage from './SettingsPage'
 import TimerPage from './TimerPage'
 import useDark from './use-dark'
 import WorkoutsPage from './WorkoutsPage'
+import FoodPage from './FoodPage'
 
 const Drawer = createDrawerNavigator<DrawerParamList>()
 
@@ -47,6 +48,11 @@ export default function Routes() {
         component={TimerPage}
         options={{ drawerIcon: () => <IconButton icon='access-time' /> }}
       />
+      <Drawer.Screen
+        name='Food'
+        component={FoodPage}
+        options={{ drawerIcon: () => <IconButton icon='restaurant' /> }}
+      />
       <Drawer.Screen
         name='Settings'
         component={SettingsPage}

SetItem.tsx

@@ -3,7 +3,7 @@ import { format } from 'date-fns'
 import { useCallback, useMemo } from 'react'
 import { Image } from 'react-native'
 import { List, Text } from 'react-native-paper'
-import { DARK_RIPPLE, LIGHT_RIPPLE } from './constants'
+import { DARK_RIPPLE, DARK_TEXT, LIGHT_RIPPLE, LIGHT_TEXT } from './constants'
 import GymSet from './gym-set'
 import { HomePageParams } from './home-page-params'
 import Settings from './settings'
@@ -63,7 +63,7 @@ export default function SetItem({
             <Text
               style={{
                 alignSelf: 'center',
-                color: dark ? '#909090ff' : '#717171ff',
+                color: dark ? DARK_TEXT : LIGHT_TEXT,
               }}
             >
               {format(new Date(item.created), settings.date || 'P')}

SetList.tsx

@@ -5,7 +5,7 @@ import {
 } from '@react-navigation/native'
 import { useCallback, useState } from 'react'
 import { FlatList } from 'react-native'
-import { List } from 'react-native-paper'
+import { ActivityIndicator, List } from 'react-native-paper'
 import { Like } from 'typeorm'
 import { getNow, setRepo, settingsRepo } from './db'
 import DrawerHeader from './DrawerHeader'
@@ -95,7 +95,7 @@ export default function SetList() {
     [refresh],
   )
 
-  const edit = useCallback(() => {
+  const editSets = useCallback(() => {
     navigation.navigate('EditSets', { ids })
     setIds([])
   }, [ids, navigation])
@@ -124,6 +124,8 @@ export default function SetList() {
     setIds(sets.map((set) => set.id))
   }, [sets])
 
+  if (!settings) return <ActivityIndicator />
+
   return (
     <>
       <DrawerHeader name={ids.length > 0 ? `${ids.length} selected` : 'Home'}>
@@ -131,7 +133,7 @@ export default function SetList() {
           onClear={clear}
           onCopy={copy}
           onDelete={remove}
-          onEdit={edit}
+          onEdit={editSets}
           ids={ids}
           onSelect={select}
         />
@@ -146,14 +148,12 @@ export default function SetList() {
             />
           )
           : (
-            settings && (
-              <FlatList
-                data={sets}
-                style={{ flex: 1 }}
-                renderItem={renderItem}
-                onEndReached={next}
-              />
-            )
+            <FlatList
+              data={sets}
+              style={{ flex: 1 }}
+              renderItem={renderItem}
+              onEndReached={next}
+            />
           )}
       </Page>
     </>

constants.ts

@@ -3,3 +3,5 @@ export const PADDING = 10
 export const ITEM_PADDING = 8
 export const DARK_RIPPLE = '#444444'
 export const LIGHT_RIPPLE = '#c2c2c2'
+export const DARK_TEXT = '#909090ff'
+export const LIGHT_TEXT = '#717171ff'

db.ts

@@ -1,9 +1,11 @@
 import { AppDataSource } from './data-source'
+import Food from './food'
 import GymSet from './gym-set'
 import { Plan } from './plan'
 import Settings from './settings'
 
 export const setRepo = AppDataSource.manager.getRepository(GymSet)
+export const foodRepo = AppDataSource.manager.getRepository(Food)
 export const planRepo = AppDataSource.manager.getRepository(Plan)
 export const settingsRepo = AppDataSource.manager.getRepository(Settings)
 

drawer-param-list.ts

@@ -5,4 +5,5 @@ export type DrawerParamList = {
   Plans: {}
   Workouts: {}
   Timer: {}
+  Food: {}
 }

food.ts

@@ -0,0 +1,37 @@
+import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm'
+
+@Entity('food')
+export default class Food {
+  @PrimaryGeneratedColumn()
+  id?: number
+
+  @Column('text')
+  name: string
+
+  @Column('number')
+  amount: number
+
+  @Column('number')
+  unit: string
+
+  @Column('text')
+  created: string
+
+  @Column('number')
+  protein: number
+
+  @Column('number')
+  calories: number
+
+  @Column('text')
+  image?: string
+}
+
+export const defaultFood: Food = {
+  created: '',
+  name: '',
+  unit: 'g',
+  amount: 0,
+  protein: 0,
+  calories: 0,
+}