From 36d3de401bdab14598bfc3a82ae5bd4a42e38542 Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Mon, 17 Jul 2023 18:38:28 +1200
Subject: [PATCH] Fix a few instances of react/no-unstable-nested-components

---
 Select.tsx        |  5 ++--
 SetItem.tsx       | 48 +++++++++++++++++----------------
 StartPlanItem.tsx | 66 +++++++++++++++++++++++++---------------------
 WorkoutItem.tsx   | 67 ++++++++++++++++++++++++++---------------------
 4 files changed, 101 insertions(+), 85 deletions(-)

diff --git a/Select.tsx b/Select.tsx
index b5dd4eb..5a6dc66 100644
--- a/Select.tsx
+++ b/Select.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { View } from 'react-native'
-import { Button, Menu, Subheading, useTheme } from 'react-native-paper'
+import { Button, Menu, Subheading } from 'react-native-paper'
 import { ITEM_PADDING } from './constants'
 
 export interface Item {
@@ -21,7 +21,6 @@ function Select({
   label?: string
 }) {
   const [show, setShow] = useState(false)
-  const { colors } = useTheme()
 
   const selected = useMemo(
     () => items.find((item) => item.value === value) || items[0],
@@ -61,7 +60,7 @@ function Select({
       >
         {items.map((item) => (
           <Menu.Item
-            titleStyle={{color: item.color}}
+            titleStyle={{ color: item.color }}
             key={item.value}
             title={item.label}
             onPress={() => handlePress(item.value)}
diff --git a/SetItem.tsx b/SetItem.tsx
index 1c896ec..32faa04 100644
--- a/SetItem.tsx
+++ b/SetItem.tsx
@@ -42,6 +42,30 @@ export default function SetItem({
     return LIGHT_RIPPLE
   }, [dark, ids, item.id])
 
+  const left = useCallback(() => {
+    if (!settings.images || !item.image) return null
+    return (
+      <Image
+        source={{ uri: item.image }}
+        style={{ height: 75, width: 75 }}
+      />
+    )
+  }, [item.image, settings.images])
+
+  const right = useCallback(() => {
+    if (!settings.showDate) return null
+    return (
+      <Text
+        style={{
+          alignSelf: 'center',
+          color: dark ? '#909090ff' : '#717171ff',
+        }}
+      >
+        {format(new Date(item.created), settings.date || 'P')}
+      </Text>
+    )
+  }, [settings.showDate, item.created, settings.date, dark])
+
   return (
     <List.Item
       onPress={press}
@@ -49,28 +73,8 @@ export default function SetItem({
       description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`}
       onLongPress={longPress}
       style={{ backgroundColor }}
-      left={() =>
-        settings.images &&
-        item.image && (
-          <Image
-            source={{ uri: item.image }}
-            style={{ height: 75, width: 75 }}
-          />
-        )}
-      right={() => (
-        <>
-          {settings.showDate && (
-            <Text
-              style={{
-                alignSelf: 'center',
-                color: dark ? '#909090ff' : '#717171ff',
-              }}
-            >
-              {format(new Date(item.created), settings.date || 'P')}
-            </Text>
-          )}
-        </>
-      )}
+      left={left}
+      right={right}
     />
   )
 }
diff --git a/StartPlanItem.tsx b/StartPlanItem.tsx
index 4f03210..3bf1533 100644
--- a/StartPlanItem.tsx
+++ b/StartPlanItem.tsx
@@ -46,7 +46,7 @@ export default function StartPlanItem(props: Props) {
     [setShowMenu, setAnchor],
   )
 
-  const edit = async () => {
+  const edit = useCallback(async () => {
     const now = await getNow()
     const created = now.split('T')[0]
     const first = await setRepo.findOne({
@@ -60,7 +60,39 @@ export default function StartPlanItem(props: Props) {
     setShowMenu(false)
     if (!first) return toast('Nothing to edit.')
     navigate('EditSet', { set: first })
-  }
+  }, [item.name, navigate])
+
+  const left = useCallback(
+    () => (
+      <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+        <RadioButton
+          onPress={() => onSelect(index)}
+          value={index.toString()}
+          status={selected === index ? 'checked' : 'unchecked'}
+          color={colors.primary}
+        />
+      </View>
+    ),
+    [index, selected, colors.primary, onSelect],
+  )
+
+  const right = useCallback(() => (
+    <View
+      style={{
+        width: '25%',
+        justifyContent: 'center',
+      }}
+    >
+      <Menu
+        anchor={anchor}
+        visible={showMenu}
+        onDismiss={() => setShowMenu(false)}
+      >
+        <Menu.Item leadingIcon='edit' onPress={edit} title='Edit' />
+        <Menu.Item leadingIcon='undo' onPress={undo} title='Undo' />
+      </Menu>
+    </View>
+  ), [anchor, showMenu, edit, undo])
 
   return (
     <List.Item
@@ -70,34 +102,8 @@ export default function StartPlanItem(props: Props) {
         ? `${item.total} / ${item.sets}`
         : item.total.toString()}
       onPress={() => onSelect(index)}
-      left={() => (
-        <View style={{ alignItems: 'center', justifyContent: 'center' }}>
-          <RadioButton
-            onPress={() =>
-              onSelect(index)}
-            value={index.toString()}
-            status={selected === index ? 'checked' : 'unchecked'}
-            color={colors.primary}
-          />
-        </View>
-      )}
-      right={() => (
-        <View
-          style={{
-            width: '25%',
-            justifyContent: 'center',
-          }}
-        >
-          <Menu
-            anchor={anchor}
-            visible={showMenu}
-            onDismiss={() => setShowMenu(false)}
-          >
-            <Menu.Item leadingIcon='edit' onPress={edit} title='Edit' />
-            <Menu.Item leadingIcon='undo' onPress={undo} title='Undo' />
-          </Menu>
-        </View>
-      )}
+      left={left}
+      right={right}
     />
   )
 }
diff --git a/WorkoutItem.tsx b/WorkoutItem.tsx
index 3a1392c..30c6491 100644
--- a/WorkoutItem.tsx
+++ b/WorkoutItem.tsx
@@ -40,6 +40,41 @@ export default function WorkoutItem({
     return `${item.sets} x ${item.minutes || 0}:${seconds}`
   }, [item])
 
+  const left = useCallback(() => {
+    if (!images || !item.image) return null
+    return (
+      <Image
+        source={{ uri: item.image }}
+        style={{ height: 75, width: 75 }}
+      />
+    )
+  }, [item.image, images])
+
+  const right = useCallback(() => {
+    return (
+      <Text
+        style={{
+          alignSelf: 'center',
+        }}
+      >
+        <Menu
+          anchor={anchor}
+          visible={showMenu}
+          onDismiss={() => setShowMenu(false)}
+        >
+          <Menu.Item
+            leadingIcon='delete'
+            onPress={() => {
+              setShowRemove(item.name)
+              setShowMenu(false)
+            }}
+            title='Delete'
+          />
+        </Menu>
+      </Text>
+    )
+  }, [anchor, showMenu, item.name])
+
   return (
     <>
       <List.Item
@@ -47,36 +82,8 @@ export default function WorkoutItem({
         title={item.name}
         description={description}
         onLongPress={longPress}
-        left={() =>
-          images &&
-          item.image && (
-            <Image
-              source={{ uri: item.image }}
-              style={{ height: 75, width: 75 }}
-            />
-          )}
-        right={() => (
-          <Text
-            style={{
-              alignSelf: 'center',
-            }}
-          >
-            <Menu
-              anchor={anchor}
-              visible={showMenu}
-              onDismiss={() => setShowMenu(false)}
-            >
-              <Menu.Item
-                leadingIcon='delete'
-                onPress={() => {
-                  setShowRemove(item.name)
-                  setShowMenu(false)
-                }}
-                title='Delete'
-              />
-            </Menu>
-          </Text>
-        )}
+        left={left}
+        right={right}
       />
       <ConfirmDialog
         title={`Delete ${showRemove}`}