refactor: yet another refactor man, my code sucks fr

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

Hide file tree

Showing 13 changed files with 111 additions and 104 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,39 +1,32 @@
 import { memo } from "react";
 import useSQLiteStore from "@/store/useSQLiteStore";
 
-import type { Database } from "sql.js";
-
 import DBTable from "@/components/database/upper-section";
 import UploadFile from "@/components/landing/dropzone";
 import Hero from "@/components/landing/hero";
 import Features from "@/components/landing/features";
 import UrlFetch from "@/components/landing/url-fetch";
 import Footer from "@/components/landing/footer";
 
-interface DBTableProps {
-  isDatabaseLoaded: Database;
-}
-
-const MemoizedDBTable = memo<DBTableProps>(DBTable);
+const MemoizedDBTable = memo(DBTable);
 const MemoizedUploadFile = memo(UploadFile);
 const MemoizedUrlFetch = memo(UrlFetch);
 
 export default function App() {
-  const { db: isDatabaseLoaded, expandPage } = useSQLiteStore();
+  const { db, expandPage } = useSQLiteStore();
 
   return (
     <main
-      className={`mx-auto flex h-screen flex-col ${isDatabaseLoaded ? "gap-3" : "gap-4"} p-4 ${expandPage ? "w-full" : "container"}`}
+      className={`mx-auto flex h-screen flex-col ${db ? "gap-3" : "gap-4"} p-4 ${expandPage ? "w-full" : "container"}`}
     >
-      {!isDatabaseLoaded && (
+      {!db ? (
         <>
           <Hero /> <MemoizedUploadFile /> <MemoizedUrlFetch />
           <Features />
           <Footer />
         </>
-      )}
-      {isDatabaseLoaded && (
-        <MemoizedDBTable isDatabaseLoaded={isDatabaseLoaded} />
+      ) : (
+        <MemoizedDBTable />
       )}
     </main>
   );

diff --git a/src/components/database/page-select.tsx b/src/components/database/page-select.tsx
@@ -35,15 +35,11 @@ export default function PageSelect({
   const canGoPrev = currentPage > 1;
 
   const nextPage = useCallback(() => {
-    if (canGoNext) {
-      setPage((prevPage) => prevPage + rowsPerPage);
-    }
+    if (canGoNext) setPage((prevPage) => prevPage + rowsPerPage);
   }, [canGoNext, rowsPerPage, setPage]);
 
   const prevPage = useCallback(() => {
-    if (canGoPrev) {
-      setPage((prevPage) => prevPage - rowsPerPage);
-    }
+    if (canGoPrev) setPage((prevPage) => prevPage - rowsPerPage);
   }, [canGoPrev, rowsPerPage, setPage]);
 
   return (

diff --git a/src/components/database/query-textarea.tsx b/src/components/database/query-textarea.tsx
@@ -3,7 +3,6 @@ import useSQLiteStore from "@/store/useSQLiteStore";
 import useTheme from "@/hooks/useTheme";
 
 import { sql, SQLite } from "@codemirror/lang-sql";
-
 import CodeMirror from "@uiw/react-codemirror";
 import {
   autocompletion,

diff --git a/src/components/landing/dropzone.tsx b/src/components/landing/dropzone.tsx
@@ -27,7 +27,6 @@ const ACCEPTED_TYPES = {
 
 function UploadFile() {
   const { loadDatabaseBytes, setDatabaseData } = useSQLiteStore();
-
   const [errors, setErrors] = useState<FileError[]>([]);
 
   const onDrop = useCallback(
@@ -36,19 +35,22 @@ function UploadFile() {
         const rejectionErrors = fileRejections.flatMap(
           (rejection) => rejection.errors
         );
+
         setErrors(rejectionErrors);
         return;
       }
+
       if (acceptedFiles.length > 0) {
         try {
           const file = acceptedFiles[0];
           const bytes = new Uint8Array(await file.arrayBuffer());
+
           setDatabaseData({ name: file.name, size: file.size });
           await loadDatabaseBytes(bytes);
         } catch (error) {
-          if (error instanceof Error) {
+          if (error instanceof Error)
             return toast(error.message, { position: "bottom-right" });
-          }
+
           return toast("Failed to load database", {
             position: "bottom-right"
           });
@@ -111,6 +113,7 @@ const FileStats: React.FC<{ errors?: FileError[] }> = memo(({ errors }) => {
       }
     }
   }, [errors]);
+
   return null;
 });
 

diff --git a/src/components/landing/features.tsx b/src/components/landing/features.tsx
@@ -7,12 +7,6 @@ import {
   AppWindowIcon
 } from "lucide-react";
 
-interface FeatureProps {
-  title: string;
-  description: string;
-  icon: React.ElementType;
-}
-
 export default function Features() {
   return (
     <>
@@ -59,6 +53,12 @@ export default function Features() {
   );
 }
 
+interface FeatureProps {
+  title: string;
+  description: string;
+  icon: React.ElementType;
+}
+
 function Feature({ icon: Icon, title, description }: FeatureProps) {
   return (
     <div className="flex items-start space-x-3">

diff --git a/src/components/landing/footer.tsx b/src/components/landing/footer.tsx
@@ -1,5 +1,7 @@
 import { memo } from "react";
+
 import ThemeModeToggle from "@/components/settings/theme-mode-toggle";
+
 import { GithubIcon } from "lucide-react";
 
 function Footer() {

diff --git a/src/components/landing/url-fetch.tsx b/src/components/landing/url-fetch.tsx
@@ -29,16 +29,15 @@ export default function UrlFetch() {
         setFetchError("Invalid URL");
         return;
       }
+
       try {
         setIsFetching(true);
         const fetchUrl = useProxy
           ? `${CORS_SERVER}/${encodeURIComponent(url)}`
           : url;
         const response = await fetch(fetchUrl);
 
-        if (!response.ok) {
-          throw new Error("URL not found or invalid");
-        }
+        if (!response.ok) throw new Error("URL not found or invalid");
 
         const blob = await response.blob();
         const file = new File([blob], "database.sqlite");

diff --git a/src/components/settings/export-buttons.tsx b/src/components/settings/export-buttons.tsx
@@ -37,6 +37,7 @@ export default function ExportButtons() {
             label="Export as SQLite"
             title="Download database as SQLite"
           />
+
           <ExportButton
             onClick={() => {
               try {
@@ -47,6 +48,7 @@ export default function ExportButtons() {
             }}
             label="Export selected table as CSV"
           />
+
           <ExportButton
             onClick={() => {
               try {
@@ -57,6 +59,7 @@ export default function ExportButtons() {
             }}
             label="Export all tables as CSV"
           />
+
           <ExportButton
             onClick={() => {
               try {
@@ -87,17 +90,14 @@ export default function ExportButtons() {
   );
 }
 
-function ExportButton({
-  onClick,
-  label,
-  className,
-  title
-}: {
+interface ExportButtonProps {
   onClick: () => void;
   label: string;
   className?: string;
   title?: string;
-}) {
+}
+
+function ExportButton({ onClick, label, className, title }: ExportButtonProps) {
   return (
     <Button className={className} onClick={onClick} title={title ?? label}>
       <span className="ml-2">{label}</span>

diff --git a/src/components/settings/settings-drawer.tsx b/src/components/settings/settings-drawer.tsx
@@ -30,7 +30,7 @@ const DATE_FORMAT_KEY = "dateFormat";
 const THEME_COLOR_KEY = "theme-color";
 const THEME_COLORS = ["nord", "zinc"];
 
-const Settings = memo(function Settings() {
+function Settings() {
   const {
     setRowPerPageOrAuto,
     setIsCustomQuery,
@@ -49,31 +49,33 @@ const Settings = memo(function Settings() {
 
   const isAutoRowsPerPage = rowsPerPage === "auto";
 
+  // Set the rows per page to auto if the value is "auto"
   useEffect(() => {
     setRowPerPageOrAuto(isAutoRowsPerPage ? "auto" : Number(rowsPerPage));
   }, [rowsPerPage, setRowPerPageOrAuto, isAutoRowsPerPage]);
 
+  // Set the date format to the stored value
   useEffect(() => {
     setDateFormatValue(getLocalStorageItem(DATE_FORMAT_KEY, "default"));
   }, [setDateFormatValue]);
 
+  // Toggle the theme color class on the body element
   useEffect(() => {
-    for (const t of THEME_COLORS) {
+    for (const t of THEME_COLORS)
       document.body?.classList.toggle(t, t === themeColor);
-    }
   }, [themeColor]);
 
   const handleRowsPerPageChange = useCallback(
     (value: string) => {
       setIsCustomQuery(false);
-      if (value === "auto" || Number(value) > 0) {
-        setRowsPerPage(value);
-      } else {
+
+      if (value === "auto" || Number(value) > 0) setRowsPerPage(value);
+      else
         toast.error(
           "Please provide a positive number of rows per page or set it to auto."
         );
-      }
     },
+
     [setIsCustomQuery, setRowsPerPage]
   );
 
@@ -82,13 +84,15 @@ const Settings = memo(function Settings() {
       setDateFormatValue(value);
       setLocalStorageItem(DATE_FORMAT_KEY, value);
     },
+
     [setDateFormatValue]
   );
 
   const handleThemeColorChange = useCallback(
     (value: string) => {
       setThemeColor(value);
     },
+
     [setThemeColor]
   );
 
@@ -127,6 +131,6 @@ const Settings = memo(function Settings() {
       </DrawerContent>
     </Drawer>
   );
-});
+}
 
-export default Settings;
+export default memo(Settings);