chore(app): Minor fixes and simplification

signalco-io · Oct 8, 2023 · ec9cdfa · ec9cdfa
1 parent 0bf79e3
commit ec9cdfa
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git 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
@@ -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,14 +238,21 @@ function UsagePage() {
     )
 }
 
+type SettingsCategory = {
+    id: string;
+    label: string;
+    form?: FormItems;
+    component?: () => React.JSX.Element;
+}
+
 function SettingsPane() {
     const generalForm = useGeneralForm();
     const profileForm = useProfileForm();
     const lookAndFeelForm = useLookAndFeelForm();
     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
@@ -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;