feat: added all columns on autocompletion, memoize some things

vwh · Nov 6, 2024 · 8850e2f · 8850e2f
1 parent e44d5b7
commit 8850e2f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 15 deletions.
diff --git a/src/components/database/query-textarea.tsx b/src/components/database/query-textarea.tsx
@@ -140,12 +140,9 @@ const SQLITE_KEYWORDS = [
   "WITHOUT"
 ];
 
-interface QueryTextareaProps {
-  columnNames: string[];
-}
-
-export default function SQLRepl({ columnNames }: QueryTextareaProps) {
-  const { customQuery, setCustomQuery, tables } = useSQLiteStore();
+export default function QueryTextarea() {
+  const { customQuery, setCustomQuery, tables, tableSchemas } =
+    useSQLiteStore();
 
   const isDark = useTheme();
 
@@ -154,6 +151,11 @@ export default function SQLRepl({ columnNames }: QueryTextareaProps) {
       const word = context.matchBefore(/\w*/);
       if (!word || (word.from === word.to && !context.explicit)) return null;
 
+      const columnNames: string[] = [];
+      for (const i of Object.values(tableSchemas)) {
+        columnNames.push(...Object.keys(i));
+      }
+
       const options = [
         ...SQLITE_KEYWORDS.map((keyword) => ({
           label: keyword,
@@ -169,7 +171,7 @@ export default function SQLRepl({ columnNames }: QueryTextareaProps) {
         options: options
       };
     },
-    [tables, columnNames]
+    [tables, tableSchemas]
   );
 
   const handleChange = useCallback(

diff --git a/src/components/database/upper-section.tsx b/src/components/database/upper-section.tsx
@@ -121,7 +121,7 @@ export function DBTable() {
           <AccordionTrigger className="text-xs">Execute Query</AccordionTrigger>
           <AccordionContent className="flex flex-col gap-[6px]">
             <div className="flex-grow">
-              <QueryTextarea columnNames={savedColumns} />
+              <QueryTextarea />
             </div>
             <div className="flex flex-row gap-1 md:gap-2">
               <Button
@@ -194,6 +194,14 @@ export function DBTable() {
     []
   );
 
+  const MemoizedExpandIcon = useMemo(() => {
+    return expandPage ? (
+      <Minimize2Icon className="h-5 w-5" />
+    ) : (
+      <Maximize2Icon className="h-5 w-5" />
+    );
+  }, [expandPage]);
+
   return (
     <>
       <div className="flex flex-col gap-3 pb-8">
@@ -210,11 +218,7 @@ export function DBTable() {
                 onClick={() => setExpandPage(!expandPage)}
                 title="Toggle page size"
               >
-                {expandPage ? (
-                  <Minimize2Icon className="h-5 w-5" />
-                ) : (
-                  <Maximize2Icon className="h-5 w-5" />
-                )}
+                {MemoizedExpandIcon}
               </Button>
               <ThemeModeToggle />
               <Settings />

diff --git a/src/components/landing/dropzone.tsx b/src/components/landing/dropzone.tsx
@@ -25,7 +25,7 @@ const ACCEPTED_TYPES = {
   "text/sqlite-dump": [".sql"]
 };
 
-export default function UploadFile() {
+function UploadFile() {
   const { loadDatabaseBytes, setDatabaseData } = useSQLiteStore();
 
   const [errors, setErrors] = useState<FileError[]>([]);
@@ -113,3 +113,5 @@ const FileStats: React.FC<{ errors?: FileError[] }> = memo(({ errors }) => {
   }, [errors]);
   return null;
 });
+
+export default memo(UploadFile);
diff --git a/src/components/landing/footer.tsx b/src/components/landing/footer.tsx
@@ -1,7 +1,8 @@
+import { memo } from "react";
 import ThemeModeToggle from "@/components/settings/theme-mode-toggle";
 import { GithubIcon } from "lucide-react";
 
-export default function Footer() {
+function Footer() {
   return (
     <footer className="fixed bottom-0 left-0 right-0 border-t bg-background shadow-md">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -34,3 +35,5 @@ export default function Footer() {
     </footer>
   );
 }
+
+export default memo(Footer);