refactor: refactoring the code

vwh · Sep 22, 2024 · 36b44a5 · 36b44a5
1 parent 6ec6e66
commit 36b44a5
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 45 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,6 +9,9 @@ import ProxyMessage from "./components/landing/proxy-message";
 import Footer from "./components/landing/footer";
 import Features from "./components/landing/features";
 
+const REGEX_URL =
+  /^(https?:\/\/(?:www\.)?[a-zA-Z0-9-]{1,256}\.[a-zA-Z]{2,6}(?:\/[^\s]*)?)$/i;
+
 function App() {
   const {
     db: isDatabaseLoaded,
@@ -25,11 +28,7 @@ function App() {
 
   const fetchDatabase = useCallback(
     async (url: string, useProxy = false) => {
-      const isGoodURL =
-        /^(https?:\/\/(?:www\.)?[a-zA-Z0-9-]{1,256}\.[a-zA-Z]{2,6}(?:\/[^\s]*)?)$/i.test(
-          url
-        );
-      if (!isGoodURL) {
+      if (!REGEX_URL.test(url)) {
         setFetchError("Invalid URL");
         return;
       }
@@ -113,7 +112,7 @@ function App() {
     }
   }, [urlToFetch, fetchDatabase]);
 
-  const renderContent = () => {
+  const Content = () => {
     if (isLoading || isFetching) {
       return (
         <StatusMessage type="loading">
@@ -143,7 +142,7 @@ function App() {
     >
       {!isDatabaseLoaded && <Hero />}
       <UploadFile />
-      {renderContent()}
+      {Content()}
       {!isDatabaseLoaded && (
         <>
           <Features /> <Footer />

diff --git a/src/components/database/table-data.tsx b/src/components/database/table-data.tsx
@@ -73,7 +73,7 @@ const TableBodyCell: React.FC<{ value: any; dataType?: string }> = React.memo(
   ({ value, dataType }) => {
     const { dateFormatValue } = useSQLiteStore();
 
-    const renderCellContent = () => {
+    const CellContent = () => {
       if (!value) {
         return <span className="italic text-gray-400">NULL</span>;
       }
@@ -87,7 +87,7 @@ const TableBodyCell: React.FC<{ value: any; dataType?: string }> = React.memo(
 
     return (
       <TableCell dataType={dataType} className="px-5 py-[11px] text-sm">
-        {renderCellContent()}
+        {CellContent()}
       </TableCell>
     );
   }

diff --git a/src/components/database/upper-section.tsx b/src/components/database/upper-section.tsx
@@ -41,7 +41,7 @@ export default function DBTable() {
   const { page, setPage, rowsPerPage } = usePagination(rowPerPageOrAuto);
 
   const selectedTableName = useMemo(
-    () => tables[parseInt(selectedTable)]?.name,
+    () => tables[Number.parseInt(selectedTable)]?.name,
     [tables, selectedTable]
   );
 
@@ -83,7 +83,7 @@ export default function DBTable() {
     setPage(0);
   }, [filters]);
 
-  const renderQueryInput = useMemo(
+  const MemoizedQueryInput = useMemo(
     () => (
       <div className="flex flex-col gap-1 md:flex-row">
         <div className="flex-grow">
@@ -125,7 +125,7 @@ export default function DBTable() {
     ]
   );
 
-  const renderTableContent = useMemo(() => {
+  const MemoizedTableContent = useMemo(() => {
     if (isQueryLoading)
       return (
         <StatusMessage type="loading">
@@ -173,14 +173,14 @@ export default function DBTable() {
             </Button>
           </div>
         </div>
-        {renderQueryInput}
+        {MemoizedQueryInput}
         {queryError && (
           <p className="mt-2 text-center text-sm text-red-500 dark:text-red-400">
             {queryError}
           </p>
         )}
       </section>
-      {renderTableContent}
+      {MemoizedTableContent}
       {!isCustomQuery && (
         <PageSelect page={page} setPage={setPage} rowsPerPage={rowsPerPage} />
       )}

diff --git a/src/components/dropzone.tsx b/src/components/dropzone.tsx
@@ -11,10 +11,20 @@ import Settings from "@/components/settings/settings-drawer";
 import ThemeModeToggle from "@/components/settings/theme-mode-toggle";
 
 const ACCEPTED_TYPES = {
-  "application/vnd.sqlite3": [".sqlite", ".sqlite3"],
-  "application/x-sqlite3": [".sqlite", ".sqlite3"],
-  "application/octet-stream": [".db"],
-  "application/sql": [".sql"]
+  "application/vnd.sqlite3": [".sqlite", ".sqlite3", ".db", ".sqlitedb"],
+  "application/x-sqlite3": [".sqlite", ".sqlite3", ".db", ".sqlitedb"],
+  "application/sqlite3": [".sqlite", ".sqlite3", ".db", ".sqlitedb"],
+  "application/octet-stream": [".sqlite", ".sqlite3", ".db", ".sqlitedb"],
+  "application/sql": [".sql"],
+  "application/x-sql": [".sql"],
+  "text/x-sql": [".sql"],
+  "text/sql": [".sql"],
+  "text/x-sqlite3": [".sql", ".sqlite", ".sqlite3", ".db", ".sqlitedb"],
+  "text/x-sqlite": [".sql", ".sqlite", ".sqlite3", ".db", ".sqlitedb"],
+  "text/sqlite": [".sql", ".sqlite", ".sqlite3", ".db", ".sqlitedb"],
+  "text/x-sqlite3-dump": [".sql"],
+  "text/x-sqlite-dump": [".sql"],
+  "text/sqlite-dump": [".sql"]
 };
 
 export default function UploadFile() {
@@ -31,12 +41,10 @@ export default function UploadFile() {
         setErrors(rejectionErrors);
         return;
       }
-
       setErrors([]);
       setTables([]);
       setCustomQuery("");
       setSelectedTable("0");
-
       if (acceptedFiles.length > 0) {
         try {
           const bytes = new Uint8Array(await acceptedFiles[0].arrayBuffer());
@@ -60,8 +68,8 @@ export default function UploadFile() {
     accept: ACCEPTED_TYPES
   });
 
-  const renderDropzoneContent = useCallback(
-    (hasDatabase: boolean) => (
+  const MemoizedDrop = useMemo(
+    (hasDatabase = Boolean(db)) => (
       <div className="flex w-full items-center justify-between gap-2">
         <div
           {...getRootProps()}
@@ -98,17 +106,12 @@ export default function UploadFile() {
         )}
       </div>
     ),
-    [getRootProps, getInputProps, isDragActive, db]
-  );
-
-  const memoizedContent = useMemo(
-    () => renderDropzoneContent(Boolean(db)),
-    [renderDropzoneContent, db]
+    [db, getRootProps, getInputProps, isDragActive]
   );
 
   return (
     <section className="mx-auto w-full">
-      {memoizedContent}
+      {MemoizedDrop}
       <FileStats errors={errors} />
     </section>
   );
@@ -123,7 +126,6 @@ const FileStats: React.FC<{ errors?: FileError[] }> = React.memo(
         }
       }
     }, [errors]);
-
     return null;
   }
 );
diff --git a/src/components/stats-message.tsx b/src/components/stats-message.tsx
@@ -19,9 +19,8 @@ export default function StatusMessage({
   children,
   className = ""
 }: StatusMessageProps) {
-  const baseClasses = "flex items-center p-4 rounded-lg shadow-md";
-  let icon;
-  let typeClasses;
+  let icon: ReactNode;
+  let typeClasses: string;
 
   switch (type) {
     case "error":
@@ -49,7 +48,9 @@ export default function StatusMessage({
   }
 
   return (
-    <div className={`${baseClasses} ${typeClasses} ${className}`}>
+    <div
+      className={`flex items-center rounded-lg p-4 shadow-md ${typeClasses} ${className}`}
+    >
       {icon}
       <span className="font-medium">{children}</span>
     </div>

diff --git a/src/lib/sqlite-type-check.ts b/src/lib/sqlite-type-check.ts
@@ -1,12 +1,12 @@
-export const isDate = (value: string): boolean => {
+export const isDate = (value: string) => {
   return value.includes("DATE") || value === "TIMESTAMP";
 };
 
-export const isBlob = (value: string): boolean => {
+export const isBlob = (value: string) => {
   return value === "BLOB";
 };
 
-export const isText = (value: string): boolean => {
+export const isText = (value: string) => {
   return (
     value.includes("CHAR") ||
     value.includes("TEXT") ||
@@ -15,11 +15,11 @@ export const isText = (value: string): boolean => {
   );
 };
 
-export const isInteger = (value: string): boolean => {
+export const isInteger = (value: string) => {
   return value.includes("INT");
 };
 
-export const isReal = (value: string): boolean => {
+export const isReal = (value: string) => {
   return (
     value.includes("REAL") ||
     value.includes("FLOAT") ||
@@ -28,14 +28,14 @@ export const isReal = (value: string): boolean => {
   );
 };
 
-export const isNumeric = (value: string): boolean => {
+export const isNumeric = (value: string) => {
   return value.includes("NUMERIC");
 };
 
-export const IsNumber = (value: string): boolean => {
+export const IsNumber = (value: string) => {
   return isInteger(value) || isReal(value) || isNumeric(value);
 };
 
-export const isBoolean = (value: string): boolean => {
+export const isBoolean = (value: string) => {
   return value.includes("BOOL");
 };
diff --git a/src/lib/sqlite.ts b/src/lib/sqlite.ts
@@ -164,8 +164,13 @@ export const exportTableAsCSV = (
 export const exportAllTablesAsCSV = (database: Database): void => {
   const tableNames = getTableNames(database);
   for (const tableName of tableNames) {
-    const query = `SELECT * FROM "${tableName}"`;
-    exportFromQuery(query, database, tableName);
+    try {
+      const query = `SELECT * FROM "${tableName}"`;
+      exportFromQuery(query, database, tableName);
+    } catch (error) {
+      console.error(`Failed to get CSV for table "${tableName}":`, error);
+      throw error;
+    }
   }
 };
 

diff --git a/src/main.tsx b/src/main.tsx
@@ -6,7 +6,7 @@ import { Toaster } from "@/components/ui/sonner";
 
 import "./styles/index.css";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
     <Toaster />