small code refactor

src/components/landing/features.tsx

@@ -13,17 +13,19 @@ interface FeatureProps {
   icon: React.ElementType;
 }
 
-const Feature = ({ icon: Icon, title, description }: FeatureProps) => (
-  <div className="flex items-start space-x-3">
-    <div className="flex-shrink-0">
-      <Icon className="h-6 w-6 text-blue-500" />
-    </div>
-    <div>
-      <h3 className="text-lg font-medium">{title}</h3>
-      <p className="mt-1 text-sm">{description}</p>
+function Feature({ icon: Icon, title, description }: FeatureProps) {
+  return (
+    <div className="flex items-start space-x-3">
+      <div className="flex-shrink-0">
+        <Icon className="h-6 w-6 text-blue-500" />
+      </div>
+      <div>
+        <h3 className="text-lg font-medium">{title}</h3>
+        <p className="mt-1 text-sm">{description}</p>
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
 export default function Features() {
   return (

src/components/landing/proxy-message.tsx

@@ -1,3 +1,5 @@
+import { useCallback } from "react";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -20,6 +22,10 @@ export default function ProxyMessage({
   setShowDialog,
   fn
 }: ProxyMessageProps) {
+  const handleClose = useCallback(() => {
+    setShowDialog(false);
+  }, [setShowDialog]);
+
   return (
     <AlertDialog open={showDialog} onOpenChange={setShowDialog}>
       <AlertDialogContent>
@@ -34,9 +40,7 @@ export default function ProxyMessage({
           Using the proxy may expose your database to corsproxy.io services.
         </div>
         <AlertDialogFooter>
-          <AlertDialogCancel onClick={() => setShowDialog(false)}>
-            Cancel
-          </AlertDialogCancel>
+          <AlertDialogCancel onClick={handleClose}>Cancel</AlertDialogCancel>
           <AlertDialogAction onClick={fn}>Confirm</AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

src/components/table/page-select.tsx

@@ -1,3 +1,4 @@
+import { useMemo, useCallback } from "react";
 import useSQLiteStore from "@/store/useSQLiteStore";
 
 import { Button } from "@/components/ui/button";
@@ -16,39 +17,41 @@ export default function PageSelect({
   rowsPerPage
 }: PageSelectProps) {
   const { totalRows } = useSQLiteStore();
-  const totalPages = Math.ceil(totalRows / rowsPerPage);
-  const currentPage = Math.floor(page / rowsPerPage) + 1;
 
-  const nextPage = () => {
-    if (currentPage < totalPages) {
-      setPage(page + rowsPerPage);
+  const totalPages = useMemo(
+    () => Math.ceil(totalRows / rowsPerPage),
+    [totalRows, rowsPerPage]
+  );
+  const currentPage = useMemo(
+    () => Math.ceil(page / rowsPerPage) + 1,
+    [page, rowsPerPage]
+  );
+
+  const canGoNext = currentPage < totalPages;
+  const canGoPrev = currentPage > 1;
+
+  const nextPage = useCallback(() => {
+    if (canGoNext) {
+      setPage((prevPage) => prevPage + rowsPerPage);
     }
-  };
+  }, [canGoNext, rowsPerPage, setPage]);
 
-  const prevPage = () => {
-    if (currentPage > 1) {
-      setPage(page - rowsPerPage);
+  const prevPage = useCallback(() => {
+    if (canGoPrev) {
+      setPage((prevPage) => prevPage - rowsPerPage);
     }
-  };
+  }, [canGoPrev, rowsPerPage, setPage]);
 
   return (
     <section className="fixed bottom-2 left-1/2 z-10 w-[270px] -translate-x-1/2 transform">
       <div className="flex justify-between gap-2 rounded border bg-secondary p-[6px]">
-        <Button
-          onClick={prevPage}
-          title="Previous page"
-          disabled={currentPage === 1}
-        >
+        <Button onClick={prevPage} title="Previous page" disabled={!canGoPrev}>
           <ChevronLeftIcon className="h-4 w-4" />
         </Button>
         <span className="flex items-center justify-center text-sm">
           Page {currentPage} of {totalPages}
         </span>
-        <Button
-          onClick={nextPage}
-          title="Next page"
-          disabled={currentPage >= totalPages}
-        >
+        <Button onClick={nextPage} title="Next page" disabled={!canGoNext}>
           <ChevronRightIcon className="h-4 w-4" />
         </Button>
       </div>

src/components/table/repl.tsx

@@ -1,12 +1,13 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import useSQLiteStore from "@/store/useSQLiteStore";
 import useTheme from "@/hooks/useTheme";
 
 import { format } from "sql-formatter";
+import { sql, SQLite } from "@codemirror/lang-sql";
 
 import CodeMirror from "@uiw/react-codemirror";
-import { sql, SQLite } from "@codemirror/lang-sql";
 import { autocompletion, CompletionContext } from "@codemirror/autocomplete";
+
 import { nord } from "@uiw/codemirror-theme-nord";
 
 // SQL Keywords used for autocompletion
@@ -43,41 +44,46 @@ export default function SqlRepl() {
   const { customQuery, setCustomQuery, queryHistory } = useSQLiteStore();
   const isDark = useTheme();
 
-  // Format query on change
+  // update customQuery formatted on queryHistory change
   useEffect(() => {
     setCustomQuery(sqlFormat(customQuery));
   }, [queryHistory]);
 
+  useEffect(() => {
+    console.log(customQuery);
+  }, [customQuery]);
+
   const myCompletions = useCallback((context: CompletionContext) => {
     const word = context.matchBefore(/\w*/);
     if (!word || (word.from === word.to && !context.explicit)) return null;
-
     return {
       from: word.from,
       to: word.to,
-      options: [
-        ...KEYWORDS.map((keyword) => ({ label: keyword, type: "keyword" }))
-      ]
+      options: KEYWORDS.map((keyword) => ({ label: keyword, type: "keyword" }))
     };
   }, []);
 
   const handleBlur = useCallback(() => {
     setCustomQuery(sqlFormat(customQuery));
-  }, [customQuery, sqlFormat]);
+  }, [customQuery, setCustomQuery]);
 
-  const handleChange = useCallback((newValue: string) => {
-    setCustomQuery(newValue);
-  }, []);
+  const handleChange = useCallback(
+    (newValue: string) => {
+      setCustomQuery(newValue);
+    },
+    [setCustomQuery]
+  );
+
+  const extensions = useMemo(
+    () => [SQLite, sql(), autocompletion({ override: [myCompletions] })],
+    [myCompletions]
+  );
 
   return (
     <CodeMirror
       value={customQuery}
       height="126px"
-      extensions={[
-        SQLite,
-        sql(),
-        autocompletion({ override: [myCompletions] })
-      ]}
+      extensions={extensions}
       onChange={handleChange}
       onBlur={handleBlur}
       className="rounded-md border"
@@ -89,6 +95,10 @@ export default function SqlRepl() {
 function sqlFormat(code: string) {
   return format(code, {
     language: "sqlite",
-    useTabs: false
+    useTabs: false,
+    keywordCase: "upper",
+    tabWidth: 2,
+    expressionWidth: 100,
+    linesBetweenQueries: 1
   });
 }

src/components/table/table-data.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useCallback } from "react";
 import useSQLiteStore from "@/store/useSQLiteStore";
 
 import type { TableInfo, TableRow, ColumnSchema } from "@/types";
@@ -135,6 +135,11 @@ export default function DBTableComponent({
     [data, columns, tableSchemas, tableName]
   );
 
+  const handleFiltersClear = useCallback(() => {
+    setFiltersNeedClear(true);
+    setFilters({});
+  }, [setFiltersNeedClear, setFilters]);
+
   return (
     <div className="overflow-x-auto">
       <Table>
@@ -150,10 +155,7 @@ export default function DBTableComponent({
             <Button
               className="w-full rounded-none"
               variant={"outline"}
-              onClick={() => {
-                setFiltersNeedClear(true);
-                setFilters({});
-              }}
+              onClick={handleFiltersClear}
             >
               Clear filters
             </Button>

src/components/table/table-operations.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import useSQLiteStore from "@/store/useSQLiteStore";
 
 import { Input } from "@/components/ui/input";
@@ -18,27 +18,32 @@ export function TableFilter({ columnName }: { columnName: string }) {
   } = useSQLiteStore();
   const [inputValue, setInputValue] = useState("");
 
-  // reset the input value when the table changes
+  // Reset the input value when the table changes
   useEffect(() => {
     setInputValue("");
   }, [selectedTable]);
 
+  // Clear filters when required
   useEffect(() => {
     if (filtersNeedClear) {
       setInputValue("");
       setFiltersNeedClear(false);
     }
   }, [filtersNeedClear]);
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-    appendToFilters(columnName, e.target.value);
-  };
+  const handleFilterChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      setInputValue(value);
+      appendToFilters(columnName, value);
+    },
+    [appendToFilters, columnName]
+  );
 
   return (
     <Input
       value={inputValue}
-      onChange={handleInputChange}
+      onChange={handleFilterChange}
       className="mt-[2px] max-h-7 w-full text-xs"
       placeholder="Filter"
     />
@@ -49,21 +54,25 @@ export function TableOrderBy({ columnName }: { columnName: string }) {
   const { orderBy, setOrderBy, orderByDirection, setOrderByDirection } =
     useSQLiteStore();
 
-  const handleButtonClick = () => {
+  const handleOrderByClick = useCallback(() => {
     if (orderBy === columnName) {
       if (orderByDirection === "ASC") {
         setOrderByDirection("DESC");
+      } else if (orderByDirection === "DESC") {
+        setOrderBy(null);
+        setOrderByDirection("ASC");
       } else {
+        setOrderBy(columnName);
         setOrderByDirection("ASC");
       }
     } else {
-      setOrderBy(columnName);
+      setOrderBy(columnName); // Start sorting with ASC for the new column
       setOrderByDirection("ASC");
     }
-  };
+  }, [orderBy, orderByDirection, columnName, setOrderBy, setOrderByDirection]);
 
   return (
-    <div onClick={handleButtonClick} className="flex items-center">
+    <div onClick={handleOrderByClick} className="flex items-center">
       {orderBy === columnName ? (
         orderByDirection === "ASC" ? (
           <button title="Descending">

src/components/table/table-section.tsx

@@ -90,15 +90,6 @@ export default function DBTable() {
     () => (
       <div className="flex flex-col gap-2 md:flex-row">
         <div className="flex-grow">
-          {/* <Input
-            type="text"
-            value={customQuery}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setCustomQuery(e.target.value)
-            }
-            placeholder="Enter your custom query"
-            className="w-full rounded-lg pr-10 shadow-sm"
-          /> */}
           <SqlRepl />
         </div>
         <div className="flex flex-row gap-1 md:flex-col">
@@ -161,7 +152,7 @@ export default function DBTable() {
   return (
     <div className="flex flex-col gap-3 pb-8">
       <section className="rounded-lg bg-gray-100 p-4 shadow-sm dark:bg-gray-700">
-        <div className="mb-[7px] flex items-center justify-between gap-2">
+        <div className="mb-[5px] flex items-center justify-between gap-2">
           <TableSelect />
           <div className="flex items-center justify-center gap-1">
             <ExportButtons />