chore: linting the code

src/App.tsx

@@ -24,7 +24,7 @@ function App() {
   const hasFetched = useRef(false);
 
   const fetchDatabase = useCallback(
-    async (url: string, useProxy: boolean = false) => {
+    async (url: string, useProxy = false) => {
       const isGoodURL =
         /^(https?:\/\/(?:www\.)?[a-zA-Z0-9-]{1,256}\.[a-zA-Z]{2,6}(?:\/[^\s]*)?)$/i.test(
           url

src/components/database/query-textarea.tsx

@@ -6,7 +6,10 @@ import { format } from "sql-formatter";
 import { sql, SQLite } from "@codemirror/lang-sql";
 
 import CodeMirror from "@uiw/react-codemirror";
-import { autocompletion, CompletionContext } from "@codemirror/autocomplete";
+import {
+  autocompletion,
+  type CompletionContext
+} from "@codemirror/autocomplete";
 
 import { nord } from "@uiw/codemirror-theme-nord";
 

src/components/database/table-operations.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback } from "react";
 import useSQLiteStore from "@/store/useSQLiteStore";
 
 import { Input } from "@/components/ui/input";
@@ -72,19 +72,25 @@ export function TableOrderBy({ columnName }: { columnName: string }) {
   }, [orderBy, orderByDirection, columnName, setOrderBy, setOrderByDirection]);
 
   return (
-    <div onClick={handleOrderByClick} className="flex items-center">
+    <div
+      onClick={handleOrderByClick}
+      onKeyUp={handleOrderByClick}
+      role="button"
+      tabIndex={0}
+      className="flex items-center"
+    >
       {orderBy === columnName ? (
         orderByDirection === "ASC" ? (
-          <button title="Descending">
+          <button title="Descending" type="button" aria-label="Sort Descending">
             <ArrowDownNarrowWideIcon className="h-4 w-4" />
           </button>
         ) : (
-          <button title="Ascending">
+          <button title="Ascending" type="button" aria-label="Sort Ascending">
             <ArrowUpNarrowWideIcon className="h-4 w-4" />
           </button>
         )
       ) : (
-        <button title="Sort column">
+        <button title="Sort column" type="button" aria-label="Sort Column">
           <ArrowUpDownIcon className="h-4 w-4" />
         </button>
       )}

src/components/database/table-select.tsx

@@ -17,8 +17,8 @@ export default function TableSelect() {
     useSQLiteStore();
 
   const selectedTableRowsCount = useMemo(() => {
-    const index = parseInt(selectedTable);
-    return isNaN(index) ? 0 : tables[index]?.count || 0;
+    const index = Number.parseInt(selectedTable);
+    return Number.isNaN(index) ? 0 : tables[index]?.count || 0;
   }, [tables, selectedTable]);
 
   const selectOptions = useMemo(

src/components/database/upper-section.tsx

@@ -115,7 +115,14 @@ export default function DBTable() {
         </div>
       </div>
     ),
-    [customQuery, handleCustomQuery, handleQueryRemove, handleResetPage, page]
+    [
+      customQuery,
+      handleCustomQuery,
+      handleQueryRemove,
+      handleResetPage,
+      page,
+      savedColumns
+    ]
   );
 
   const renderTableContent = useMemo(() => {

src/components/dropzone.tsx

@@ -43,15 +43,14 @@ export default function UploadFile() {
         } catch (error) {
           if (error instanceof Error) {
             return toast(error.message, { position: "bottom-right" });
-          } else {
-            return toast("Failed to load database", {
-              position: "bottom-right"
-            });
           }
+          return toast("Failed to load database", {
+            position: "bottom-right"
+          });
         }
       }
     },
-    [loadDatabase, setTables, setSelectedTable]
+    [loadDatabase, setTables, setSelectedTable, setCustomQuery]
   );
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
@@ -117,9 +116,11 @@ export default function UploadFile() {
 const FileStats: React.FC<{ errors?: FileError[] }> = React.memo(
   ({ errors }) => {
     React.useEffect(() => {
-      errors?.forEach((error) =>
-        toast(error.message, { position: "bottom-right" })
-      );
+      if (errors) {
+        for (const error of errors) {
+          toast(error.message, { position: "bottom-right" });
+        }
+      }
     }, [errors]);
 
     return null;

src/components/landing/features.tsx

@@ -68,7 +68,7 @@ export default function Features() {
           </div>
         </div>
       </section>
-      <div className="pb-[72px] md:pb-0"></div>
+      <div className="pb-[72px] md:pb-0" />
     </>
   );
 }

src/components/settings/export-buttons.tsx

@@ -40,8 +40,8 @@ export default function ExportButtons() {
             "Download database as SQLite"
           )}
           {renderExportButton(
-            () => exportTableAsCSV(db, parseInt(selectedTable)),
-            `Export ${tables[parseInt(selectedTable)]?.name || "selected"} table as CSV`,
+            () => exportTableAsCSV(db, Number.parseInt(selectedTable)),
+            `Export ${tables[Number.parseInt(selectedTable)]?.name || "selected"} table as CSV`,
             "Export selected table as CSV"
           )}
           {renderExportButton(

src/components/settings/settings-drawer.tsx

@@ -54,16 +54,16 @@ export default function Settings() {
 
   useEffect(() => {
     setRowPerPageOrAuto(isAutoRowsPerPage ? "auto" : Number(rowsPerPage));
-  }, [rowsPerPage, setRowPerPageOrAuto]);
+  }, [rowsPerPage, setRowPerPageOrAuto, isAutoRowsPerPage]);
 
   useEffect(() => {
     setDateFormatValue(getLocalStorageItem(DATE_FORMAT_KEY, "default"));
   }, [setDateFormatValue]);
 
   useEffect(() => {
-    THEME_COLORS.forEach((t) =>
-      document.body?.classList.toggle(t, t === themeColor)
-    );
+    for (const t of THEME_COLORS) {
+      document.body?.classList.toggle(t, t === themeColor);
+    }
   }, [themeColor]);
 
   const handleRowsPerPageChange = useCallback(

src/components/stats-message.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type { ReactNode } from "react";
 import {
   AlertTriangleIcon,
   Loader2Icon,
@@ -10,7 +10,7 @@ type MessageType = "error" | "loading" | "success" | "info";
 
 interface StatusMessageProps {
   type: MessageType;
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string;
 }
 

src/components/ui/badge.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";

src/components/ui/button.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 import { buttonVariants } from "@/components/ui/buttonVariants";
 import { cn } from "@/lib/utils";
 

src/components/ui/table.tsx

@@ -85,7 +85,7 @@ TableHead.displayName = "TableHead";
 // Function to convert hex blob string to data URL
 const hexToDataUrl = (hex: string): string => {
   const bytes = new Uint8Array(
-    hex.match(/.{1,2}/g)!.map((byte) => parseInt(byte, 16))
+    hex.match(/.{1,2}/g)!.map((byte) => Number.parseInt(byte, 16))
   );
   const blob = new Blob([bytes], { type: "image/jpeg" });
   return URL.createObjectURL(blob);

src/hooks/useQueryData.ts

@@ -121,7 +121,7 @@ export function useQueryData(
 
     setIsQueryLoading(true);
     try {
-      const tableName = tables[parseInt(selectedTable)].name;
+      const tableName = tables[Number.parseInt(selectedTable)].name;
       const customResult: QueryExecResult[] = query(
         customQuery.replace("@", `"${tableName}"`)
       );

src/lib/date-format.ts

@@ -1,7 +1,7 @@
 import { formatDistanceToNow, format } from "date-fns";
 
 const isValidDate = (date: any) => {
-  return date instanceof Date && !isNaN(date.getTime());
+  return date instanceof Date && !Number.isNaN(date.getTime());
 };
 
 const formatDateRelative = (dateValue: string) => {

src/lib/sqlite.ts

@@ -161,10 +161,11 @@ export const exportTableAsCSV = (
 };
 
 export const exportAllTablesAsCSV = (database: Database): void => {
-  getTableNames(database).forEach((tableName) => {
+  const tableNames = getTableNames(database);
+  for (const tableName of tableNames) {
     const query = `SELECT * FROM "${tableName}"`;
     exportFromQuery(query, database, tableName);
-  });
+  }
 };
 
 export const exportCustomQueryAsCSV = (

src/store/useSQLiteStore.ts

@@ -66,7 +66,10 @@ const initializeStore = create<SQLiteState>((set, get) => ({
       const tableCountsAndSchemas = await Promise.all(
         tableNames.map(async (name) => {
           const countResult = database.exec(`SELECT COUNT(*) FROM "${name}"`);
-          const count = parseInt(countResult[0].values[0][0] as string, 10);
+          const count = Number.parseInt(
+            countResult[0].values[0][0] as string,
+            10
+          );
           const schema = await getTableSchema(database, name);
           return { name, count, schema };
         })