Copy scaffolding from Sets to Food

Still need to add migrations for the food
table.

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

@@ -1,20 +1,19 @@
 import {
-    NavigationProp,
-    useFocusEffect,
-    useNavigation,
+  NavigationProp,
+  useFocusEffect,
+  useNavigation,
 } 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 DrawerHeader from './DrawerHeader'
+import FoodItem from './FoodItem'
 import { FoodPageParams } from './FoodPage'
 import ListMenu from './ListMenu'
 import Page from './Page'
-import SetItem from './SetItem'
 import { foodRepo, getNow, settingsRepo } from './db'
 import Food, { defaultFood } from './food'
-import GymSet from './gym-set'
 import Settings from './settings'
 
 const limit = 15
@@ -29,14 +28,14 @@ export default function FoodList() {
   const navigation = useNavigation<NavigationProp<FoodPageParams>>()
 
   const refresh = useCallback(async (value: string) => {
-    const newSets = await foodRepo.find({
+    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(newSets)
+    setFoods(newFoods)
     setOffset(0)
     setEnd(false)
   }, [])
@@ -49,10 +48,10 @@ export default function FoodList() {
   )
 
   const renderItem = useCallback(
-    ({ item }: { item: GymSet }) => (
-      <SetItem
+    ({ item }: { item: Food }) => (
+      <FoodItem
         settings={settings}
-        item={item}
+        food={item}
         key={item.id}
         onRemove={() => refresh(term)}
         ids={ids}
@@ -66,16 +65,16 @@ export default function FoodList() {
     if (end) return
     const newOffset = offset + limit
     console.log(`${FoodList.name}.next:`, { offset, newOffset, term })
-    const newSets = await foodRepo.find({
+    const newFoods = await foodRepo.find({
       where: { name: Like(`%${term}%`) },
       take: limit,
       skip: newOffset,
       order: { created: 'DESC' },
     })
-    if (newSets.length === 0) return setEnd(true)
+    if (newFoods.length === 0) return setEnd(true)
     if (!foods) return
-    setFoods([...foods, ...newSets])
-    if (newSets.length < limit) return setEnd(true)
+    setFoods([...foods, ...newFoods])
+    if (newFoods.length < limit) return setEnd(true)
     setOffset(newOffset)
   }, [term, end, offset, foods])
 
@@ -96,8 +95,8 @@ export default function FoodList() {
     [refresh],
   )
 
-  const edit = useCallback(() => {
-    navigation.navigate('EditFood', { ids })
+  const editFoods = useCallback(() => {
+    navigation.navigate('EditFoods', { ids })
     setIds([])
   }, [ids, navigation])
 
@@ -125,14 +124,16 @@ export default function FoodList() {
     setIds(foods.map((set) => set.id))
   }, [foods])
 
+  if (!settings) return <ActivityIndicator />
+
   return (
     <>
-      <DrawerHeader name={ids.length > 0 ? `${ids.length} selected` : 'Home'}>
+      <DrawerHeader name={ids.length > 0 ? `${ids.length} selected` : 'Food'}>
         <ListMenu
           onClear={clear}
           onCopy={copy}
           onDelete={remove}
-          onEdit={edit}
+          onEdit={editFoods}
           ids={ids}
           onSelect={select}
         />
@@ -142,19 +143,17 @@ export default function FoodList() {
         {foods?.length === 0
           ? (
             <List.Item
-              title='No sets yet'
-              description='A set is a group of repetitions. E.g. 8 reps of Squats.'
+              title='No food yet'
+              description='Start by adding what you ate today.'
             />
           )
           : (
-            settings && (
-              <FlatList
-                data={foods}
-                style={{ flex: 1 }}
-                renderItem={renderItem}
-                onEndReached={next}
-              />
-            )
+            <FlatList
+              data={foods}
+              style={{ flex: 1 }}
+              renderItem={renderItem}
+              onEndReached={next}
+            />
           )}
       </Page>
     </>

FoodPage.tsx

@@ -4,10 +4,13 @@ import EditFood from './EditFood'
 import Food from './food'
 
 export type FoodPageParams = {
-  Food: {}
+  FoodList: {}
   EditFood: {
     food: Food
   }
+  EditFoods: {
+    ids: number[]
+  }
 }
 
 const Stack = createStackNavigator<FoodPageParams>()
@@ -17,7 +20,7 @@ export default function FoodPage() {
     <Stack.Navigator
       screenOptions={{ headerShown: false, animationEnabled: false }}
     >
-      <Stack.Screen name='Food' component={FoodList} />
+      <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>()
 
@@ -49,7 +50,7 @@ export default function Routes() {
       />
       <Drawer.Screen
         name='Food'
-        component={TimerPage}
+        component={FoodPage}
         options={{ drawerIcon: () => <IconButton icon='restaurant' /> }}
       />
       <Drawer.Screen

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'

drawer-param-list.ts

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

food.ts

@@ -22,6 +22,9 @@ export default class Food {
 
   @Column('number')
   calories: number
+
+  @Column('text')
+  image?: string
 }
 
 export const defaultFood: Food = {