From ec9cdfa9cbda71b5bfb51c9857e93b2ae8f78425 Mon Sep 17 00:00:00 2001
From: Aleksandar Toplek <aleksandar.toplek@gmail.com>
Date: Sun, 8 Oct 2023 21:55:12 +0200
Subject: [PATCH] chore(app): Minor fixes and simplification

---
 web/apps/app/app/entities/page.tsx  |  2 +-
 web/apps/app/app/settings/page.tsx  | 19 +++++++++++++------
 web/apps/app/src/hooks/useSearch.ts | 14 ++++++--------
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/web/apps/app/app/entities/page.tsx b/web/apps/app/app/entities/page.tsx
index 15eb263d82..87ed75da6a 100644
--- a/web/apps/app/app/entities/page.tsx
+++ b/web/apps/app/app/entities/page.tsx
@@ -98,7 +98,7 @@ export default function Entities() {
     }), [filteredItems, selectedType]);
 
     const results = useMemo(() => (
-        <div style={{ paddingLeft: 8, paddingRight: 8 }}>
+        <div className="px-2">
             <div className={cx(
                 'grid auto-cols-max gap-1',
                 entityListViewType === 'table'
diff --git a/web/apps/app/app/settings/page.tsx b/web/apps/app/app/settings/page.tsx
index 0c280372ce..321b35d9a2 100644
--- a/web/apps/app/app/settings/page.tsx
+++ b/web/apps/app/app/settings/page.tsx
@@ -193,7 +193,7 @@ function UsageCurrent() {
                 <LabeledValue label="Calculated Daily" value={dailyCalculated} />
                 <LabeledValue label="Calculated Monthly" value={monthlyCalculated} />
             </Row>
-            <div style={{ height: 400 }}>
+            <div className='h-96'>
                 <ResponsiveContainer width="100%" height="100%">
                     <DynamicGraph
                         data={predictedUsage}
@@ -238,6 +238,13 @@ function UsagePage() {
     )
 }
 
+type SettingsCategory = {
+    id: string;
+    label: string;
+    form?: FormItems;
+    component?: () => React.JSX.Element;
+}
+
 function SettingsPane() {
     const generalForm = useGeneralForm();
     const profileForm = useProfileForm();
@@ -245,7 +252,7 @@ function SettingsPane() {
     const timeLocationForm = useTimeLocationForm();
     const developerForm = useDeveloperForm();
 
-    const categories = [
+    const categories: SettingsCategory[] = [
         { id: 'general', label: 'General', form: generalForm },
         { id: 'lookAndFeel', label: 'Look and feel', form: lookAndFeelForm },
         { id: 'profile', label: 'Profile', form: profileForm },
@@ -254,7 +261,7 @@ function SettingsPane() {
         { id: 'developer', label: 'Developer', form: developerForm },
     ];
 
-    const [filteredItems, setFilteredItems] = useState(categories);
+    const [filteredItems, setFilteredItems] = useState<SettingsCategory[]>(categories);
     const [selectedCategory, setSelectedCategory] = useState(categories[0]);
 
     const handleFilteredItems = (updated: typeof categories) => {
@@ -263,11 +270,11 @@ function SettingsPane() {
     };
 
     return (
-        <Row alignItems="start" spacing={2} style={{ paddingTop: 16, paddingLeft: 16, paddingRight: 16 }}>
-            <Stack spacing={2} style={{ padding: 0 }}>
+        <Row alignItems="start" spacing={2} className="p-2">
+            <Stack spacing={2}>
                 <Typography level="h5">&nbsp;</Typography>
                 <SearchInput items={categories} onFilteredItems={handleFilteredItems} />
-                <Stack>
+                <Stack spacing={1}>
                     {filteredItems.map(category => (
                         <Checkbox
                             key={category.id}
diff --git a/web/apps/app/src/hooks/useSearch.ts b/web/apps/app/src/hooks/useSearch.ts
index 344b452b19..f076f6dc88 100644
--- a/web/apps/app/src/hooks/useSearch.ts
+++ b/web/apps/app/src/hooks/useSearch.ts
@@ -16,16 +16,14 @@ type UseSearchReturn<TItem> = [TItem[], string, (text: string) => void];
 
 function useSearch<TItem>(items?: TItem[], filterFunc?: (item: TItem, keyword: string) => boolean): UseSearchReturn<TItem> {
     const [searchText, setSearchText] = useState<string>('');
-
-    const handleSearchTextChange = (text: string) => {
-        setSearchText(text);
-    };
-
     const filteredItems = useMemo(() => searchText
-        ? (items || []).filter(i => filterFunc ? filterFunc(i, searchText.toLowerCase()) : defaultSearchFunc(i, searchText.toLocaleLowerCase()))
-        : items || [], [filterFunc, items, searchText]);
+        ? (items || []).filter(i => filterFunc
+            ? filterFunc(i, searchText.toLowerCase())
+            : defaultSearchFunc(i, searchText.toLocaleLowerCase()))
+        : items || [],
+    [filterFunc, items, searchText]);
 
-    return [filteredItems, searchText, handleSearchTextChange];
+    return [filteredItems, searchText, setSearchText];
 }
 
 export default useSearch;