From 463852e6a6c11606a040dc85a4d2e6ae84300c3c Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Fri, 28 Oct 2022 18:59:54 +1300
Subject: [PATCH] Prevent double searching everywhere

Also change variable names. Search should represent the
act of searching, rather than the value being typed by the user.
---
 BestList.tsx     | 26 +++++++++++++++-----------
 Page.tsx         | 10 +++++-----
 PlanList.tsx     | 30 +++++++++++++++++-------------
 SetForm.tsx      |  2 +-
 SetList.tsx      | 27 +++++++++++++--------------
 SettingsPage.tsx | 14 +++++++-------
 WorkoutList.tsx  | 42 +++++++++++++++++++++++++-----------------
 set.service.ts   | 12 +++++-------
 8 files changed, 88 insertions(+), 75 deletions(-)

diff --git a/BestList.tsx b/BestList.tsx
index ae1de94..97cf8e1 100644
--- a/BestList.tsx
+++ b/BestList.tsx
@@ -3,7 +3,7 @@ import {
   useFocusEffect,
   useNavigation,
 } from '@react-navigation/native';
-import {useCallback, useEffect, useState} from 'react';
+import {useCallback, useState} from 'react';
 import {FlatList, Image} from 'react-native';
 import {List} from 'react-native-paper';
 import {getBestReps, getBestWeights} from './best.service';
@@ -15,12 +15,12 @@ import {useSettings} from './use-settings';
 
 export default function BestList() {
   const [bests, setBests] = useState<Set[]>();
-  const [search, setSearch] = useState('');
+  const [term, setTerm] = useState('');
   const navigation = useNavigation<NavigationProp<BestPageParams>>();
   const {settings} = useSettings();
 
-  const refresh = useCallback(async () => {
-    const weights = await getBestWeights(search);
+  const refresh = useCallback(async (value: string) => {
+    const weights = await getBestWeights(value);
     console.log(`${BestList.name}.refresh:`, {length: weights.length});
     let newBest: Set[] = [];
     for (const set of weights) {
@@ -28,17 +28,21 @@ export default function BestList() {
       newBest.push(...reps);
     }
     setBests(newBest);
-  }, [search]);
+  }, []);
 
   useFocusEffect(
     useCallback(() => {
-      refresh();
-    }, [refresh]),
+      refresh(term);
+    }, [refresh, term]),
   );
 
-  useEffect(() => {
-    refresh();
-  }, [search, refresh]);
+  const search = useCallback(
+    (value: string) => {
+      setTerm(value);
+      refresh(value);
+    },
+    [refresh],
+  );
 
   const renderItem = ({item}: {item: Set}) => (
     <List.Item
@@ -58,7 +62,7 @@ export default function BestList() {
   return (
     <>
       <DrawerHeader name="Best" />
-      <Page search={search} setSearch={setSearch}>
+      <Page term={term} search={search}>
         {bests?.length === 0 ? (
           <List.Item
             title="No exercises yet"
diff --git a/Page.tsx b/Page.tsx
index 13cb08b..aae1404 100644
--- a/Page.tsx
+++ b/Page.tsx
@@ -6,20 +6,20 @@ import MassiveFab from './MassiveFab';
 export default function Page({
   onAdd,
   children,
+  term,
   search,
-  setSearch,
 }: {
   children: JSX.Element | JSX.Element[];
   onAdd?: () => void;
-  search: string;
-  setSearch: (value: string) => void;
+  term: string;
+  search: (value: string) => void;
 }) {
   return (
     <View style={styles.container}>
       <Searchbar
         placeholder="Search"
-        value={search}
-        onChangeText={setSearch}
+        value={term}
+        onChangeText={search}
         icon="search"
         clearIcon="clear"
       />
diff --git a/PlanList.tsx b/PlanList.tsx
index 8522cef..81d3cc6 100644
--- a/PlanList.tsx
+++ b/PlanList.tsx
@@ -3,7 +3,7 @@ import {
   useFocusEffect,
   useNavigation,
 } from '@react-navigation/native';
-import {useCallback, useEffect, useState} from 'react';
+import {useCallback, useState} from 'react';
 import {FlatList} from 'react-native';
 import {List} from 'react-native-paper';
 import DrawerHeader from './DrawerHeader';
@@ -14,29 +14,33 @@ import {getPlans} from './plan.service';
 import PlanItem from './PlanItem';
 
 export default function PlanList() {
-  const [search, setSearch] = useState('');
+  const [term, setTerm] = useState('');
   const [plans, setPlans] = useState<Plan[]>();
   const navigation = useNavigation<NavigationProp<PlanPageParams>>();
 
-  const refresh = useCallback(async () => {
-    getPlans(search).then(setPlans);
-  }, [search]);
+  const refresh = useCallback(async (value: string) => {
+    getPlans(value).then(setPlans);
+  }, []);
 
   useFocusEffect(
     useCallback(() => {
-      refresh();
-    }, [refresh]),
+      refresh(term);
+    }, [refresh, term]),
   );
 
-  useEffect(() => {
-    refresh();
-  }, [search, refresh]);
+  const search = useCallback(
+    (value: string) => {
+      setTerm(value);
+      refresh(value);
+    },
+    [refresh],
+  );
 
   const renderItem = useCallback(
     ({item}: {item: Plan}) => (
-      <PlanItem item={item} key={item.id} onRemove={refresh} />
+      <PlanItem item={item} key={item.id} onRemove={() => refresh(term)} />
     ),
-    [refresh],
+    [refresh, term],
   );
 
   const onAdd = () =>
@@ -45,7 +49,7 @@ export default function PlanList() {
   return (
     <>
       <DrawerHeader name="Plans" />
-      <Page onAdd={onAdd} search={search} setSearch={setSearch}>
+      <Page onAdd={onAdd} term={term} search={search}>
         {plans?.length === 0 ? (
           <List.Item
             title="No plans yet"
diff --git a/SetForm.tsx b/SetForm.tsx
index 285e610..3d72a4b 100644
--- a/SetForm.tsx
+++ b/SetForm.tsx
@@ -39,7 +39,7 @@ export default function SetForm({
     if (!name) return;
     let image = newImage;
     if (!newImage && !removeImage)
-      image = await getSets({search: name, limit: 1, offset: 0}).then(
+      image = await getSets({term: name, limit: 1, offset: 0}).then(
         ([gotSet]) => gotSet?.image,
       );
     console.log(`${SetForm.name}.handleSubmit:`, {image});
diff --git a/SetList.tsx b/SetList.tsx
index f55e0b4..66a597c 100644
--- a/SetList.tsx
+++ b/SetList.tsx
@@ -20,17 +20,17 @@ export default function SetList() {
   const [sets, setSets] = useState<Set[]>();
   const [set, setSet] = useState<Set>();
   const [offset, setOffset] = useState(0);
-  const [search, setSearch] = useState('');
+  const [term, setTerm] = useState('');
   const [end, setEnd] = useState(false);
   const {settings} = useSettings();
   const navigation = useNavigation<NavigationProp<HomePageParams>>();
 
   const refresh = useCallback(
-    async (term: string) => {
+    async (value: string) => {
       const todaysSet = await getToday();
       if (todaysSet) setSet({...todaysSet});
       const newSets = await getSets({
-        search: `%${term}%`,
+        term: `%${value}%`,
         limit,
         offset: 0,
         format: settings.date || '%Y-%m-%d %H:%M',
@@ -46,33 +46,32 @@ export default function SetList() {
 
   useFocusEffect(
     useCallback(() => {
-      refresh(search);
-    }, [refresh, search]),
+      refresh(term);
+    }, [refresh, term]),
   );
 
   const renderItem = useCallback(
     ({item}: {item: Set}) => (
-      <SetItem item={item} key={item.id} onRemove={() => refresh(search)} />
+      <SetItem item={item} key={item.id} onRemove={() => refresh(term)} />
     ),
-    [refresh, search],
+    [refresh, term],
   );
 
   const next = useCallback(async () => {
     if (end) return;
     const newOffset = offset + limit;
-    console.log(`${SetList.name}.next:`, {offset, newOffset, search});
+    console.log(`${SetList.name}.next:`, {offset, newOffset, term});
     const newSets = await getSets({
-      search: `%${search}%`,
+      term: `%${term}%`,
       limit,
       offset: newOffset,
-      format: settings.date || '%Y-%m-%d %H:%M',
     });
     if (newSets.length === 0) return setEnd(true);
     if (!sets) return;
     setSets([...sets, ...newSets]);
     if (newSets.length < limit) return setEnd(true);
     setOffset(newOffset);
-  }, [search, end, offset, sets, settings.date]);
+  }, [term, end, offset, sets]);
 
   const onAdd = useCallback(async () => {
     console.log(`${SetList.name}.onAdd`, {set});
@@ -81,9 +80,9 @@ export default function SetList() {
     });
   }, [navigation, set]);
 
-  const handleSearch = useCallback(
+  const search = useCallback(
     (value: string) => {
-      setSearch(value);
+      setTerm(value);
       refresh(value);
     },
     [refresh],
@@ -92,7 +91,7 @@ export default function SetList() {
   return (
     <>
       <DrawerHeader name="Home" />
-      <Page onAdd={onAdd} search={search} setSearch={handleSearch}>
+      <Page onAdd={onAdd} term={term} search={search}>
         {sets?.length === 0 ? (
           <List.Item
             title="No sets yet"
diff --git a/SettingsPage.tsx b/SettingsPage.tsx
index 8aa9e74..4cb4872 100644
--- a/SettingsPage.tsx
+++ b/SettingsPage.tsx
@@ -20,7 +20,7 @@ import {useSettings} from './use-settings';
 export default function SettingsPage() {
   const [battery, setBattery] = useState(false);
   const [ignoring, setIgnoring] = useState(false);
-  const [search, setSearch] = useState('');
+  const [term, setTerm] = useState('');
   const {settings, setSettings} = useSettings();
   const {
     vibrate,
@@ -180,11 +180,11 @@ export default function SettingsPage() {
   return (
     <>
       <DrawerHeader name="Settings" />
-      <Page search={search} setSearch={setSearch}>
+      <Page term={term} search={setTerm}>
         <ScrollView style={{marginTop: MARGIN}}>
           {switches
             .filter(input =>
-              input.name.toLowerCase().includes(search.toLowerCase()),
+              input.name.toLowerCase().includes(term.toLowerCase()),
             )
             .map(input => (
               <Switch
@@ -195,7 +195,7 @@ export default function SettingsPage() {
                 {input.name}
               </Switch>
             ))}
-          {'theme'.includes(search.toLowerCase()) && (
+          {'theme'.includes(term.toLowerCase()) && (
             <Picker
               style={{color}}
               dropdownIconColor={color}
@@ -206,7 +206,7 @@ export default function SettingsPage() {
               <Picker.Item value="light" label="Light theme" />
             </Picker>
           )}
-          {'color'.includes(search.toLowerCase()) && (
+          {'color'.includes(term.toLowerCase()) && (
             <Picker
               style={{color, marginTop: -10}}
               dropdownIconColor={color}
@@ -222,7 +222,7 @@ export default function SettingsPage() {
               ))}
             </Picker>
           )}
-          {'date format'.includes(search.toLowerCase()) && (
+          {'date format'.includes(term.toLowerCase()) && (
             <Picker
               style={{color, marginTop: -10}}
               dropdownIconColor={color}
@@ -242,7 +242,7 @@ export default function SettingsPage() {
               <Picker.Item value="%d/%m %h:%M %p" label="24/12 3:05 PM" />
             </Picker>
           )}
-          {'alarm sound'.includes(search.toLowerCase()) && (
+          {'alarm sound'.includes(term.toLowerCase()) && (
             <Button style={{alignSelf: 'flex-start'}} onPress={changeSound}>
               Alarm sound
               {sound
diff --git a/WorkoutList.tsx b/WorkoutList.tsx
index 4f12fe3..619726c 100644
--- a/WorkoutList.tsx
+++ b/WorkoutList.tsx
@@ -3,7 +3,7 @@ import {
   useFocusEffect,
   useNavigation,
 } from '@react-navigation/native';
-import {useCallback, useEffect, useState} from 'react';
+import {useCallback, useState} from 'react';
 import {FlatList} from 'react-native';
 import {List} from 'react-native-paper';
 import DrawerHeader from './DrawerHeader';
@@ -19,13 +19,13 @@ const limit = 15;
 export default function WorkoutList() {
   const [workouts, setWorkouts] = useState<Set[]>();
   const [offset, setOffset] = useState(0);
-  const [search, setSearch] = useState('');
+  const [term, setTerm] = useState('');
   const [end, setEnd] = useState(false);
   const navigation = useNavigation<NavigationProp<WorkoutsPageParams>>();
 
-  const refresh = useCallback(async () => {
+  const refresh = useCallback(async (value: string) => {
     const newWorkouts = await getDistinctSets({
-      search: `%${search}%`,
+      term: `%${value}%`,
       limit,
       offset: 0,
     });
@@ -33,23 +33,23 @@ export default function WorkoutList() {
     setWorkouts(newWorkouts);
     setOffset(0);
     setEnd(false);
-  }, [search]);
-
-  useEffect(() => {
-    refresh();
-  }, [search, refresh]);
+  }, []);
 
   useFocusEffect(
     useCallback(() => {
-      refresh();
-    }, [refresh]),
+      refresh(term);
+    }, [refresh, term]),
   );
 
   const renderItem = useCallback(
     ({item}: {item: Set}) => (
-      <WorkoutItem item={item} key={item.name} onRemoved={refresh} />
+      <WorkoutItem
+        item={item}
+        key={item.name}
+        onRemoved={() => refresh(term)}
+      />
     ),
-    [refresh],
+    [refresh, term],
   );
 
   const next = useCallback(async () => {
@@ -59,10 +59,10 @@ export default function WorkoutList() {
       offset,
       limit,
       newOffset,
-      search,
+      term,
     });
     const newWorkouts = await getDistinctSets({
-      search: `%${search}%`,
+      term: `%${term}%`,
       limit,
       offset: newOffset,
     });
@@ -71,7 +71,7 @@ export default function WorkoutList() {
     setWorkouts([...workouts, ...newWorkouts]);
     if (newWorkouts.length < limit) return setEnd(true);
     setOffset(newOffset);
-  }, [search, end, offset, workouts]);
+  }, [term, end, offset, workouts]);
 
   const onAdd = useCallback(async () => {
     navigation.navigate('EditWorkout', {
@@ -79,10 +79,18 @@ export default function WorkoutList() {
     });
   }, [navigation]);
 
+  const search = useCallback(
+    (value: string) => {
+      setTerm(value);
+      refresh(value);
+    },
+    [refresh],
+  );
+
   return (
     <>
       <DrawerHeader name="Workouts" />
-      <Page onAdd={onAdd} search={search} setSearch={setSearch}>
+      <Page onAdd={onAdd} term={term} search={search}>
         {workouts?.length === 0 ? (
           <List.Item
             title="No workouts yet."
diff --git a/set.service.ts b/set.service.ts
index 44f32d6..2db8377 100644
--- a/set.service.ts
+++ b/set.service.ts
@@ -57,10 +57,9 @@ export const getAllSets = async (): Promise<Set[]> => {
 };
 
 interface PageParams {
-  search: string;
+  term: string;
   limit: number;
   offset: number;
-  format?: string;
 }
 
 export const getSet = async (name: string): Promise<Set> => {
@@ -75,10 +74,9 @@ export const getSet = async (name: string): Promise<Set> => {
 };
 
 export const getSets = async ({
-  search,
+  term,
   limit,
   offset,
-  format,
 }: PageParams): Promise<Set[]> => {
   const select = `
     SELECT id, name, reps, weight, sets, minutes, seconds, 
@@ -88,7 +86,7 @@ export const getSets = async ({
     ORDER BY STRFTIME('%Y-%m-%d %H:%M', created) DESC 
     LIMIT ? OFFSET ?
   `;
-  const [result] = await db.executeSql(select, [`%${search}%`, limit, offset]);
+  const [result] = await db.executeSql(select, [`%${term}%`, limit, offset]);
   return result.rows.raw();
 };
 
@@ -180,7 +178,7 @@ export const countMany = async (names: string[]): Promise<CountMany[]> => {
 };
 
 export const getDistinctSets = async ({
-  search,
+  term,
   limit,
   offset,
 }: PageParams): Promise<Set[]> => {
@@ -192,6 +190,6 @@ export const getDistinctSets = async ({
     ORDER BY sets.name
     LIMIT ? OFFSET ?
   `;
-  const [result] = await db.executeSql(select, [search, limit, offset]);
+  const [result] = await db.executeSql(select, [term, limit, offset]);
   return result.rows.raw();
 };