feat: remove upload file from database view page

vwh · Nov 6, 2024 · 0044ad3 · 0044ad3
1 parent f0eff77
commit 0044ad3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 28 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -68,18 +68,16 @@ export default function App() {
     <main
       className={`mx-auto flex h-screen flex-col ${isDatabaseLoaded ? "gap-3" : "gap-4"} p-4 ${expandPage ? "w-full" : "container"}`}
     >
-      {!isDatabaseLoaded && <Hero />}
-      <MemoizedUploadFile />
-      <MemoizedUrlFetch />
-      {isDatabaseLoaded && (
-        <MemoizedDBTable isDatabaseLoaded={isDatabaseLoaded} />
-      )}
       {!isDatabaseLoaded && (
         <>
+          <Hero /> <MemoizedUploadFile /> <MemoizedUrlFetch />
           <Features />
           <Footer />
         </>
       )}
+      {isDatabaseLoaded && (
+        <MemoizedDBTable isDatabaseLoaded={isDatabaseLoaded} />
+      )}
     </main>
   );
 }
diff --git a/src/components/database/upper-section.tsx b/src/components/database/upper-section.tsx
@@ -14,6 +14,8 @@ import {
 import { Button } from "@/components/ui/button";
 import StatusMessage from "@/components/stats-message";
 import ExportButtons from "@/components/settings/export-buttons";
+import Settings from "@/components/settings/settings-drawer";
+import ThemeModeToggle from "@/components/settings/theme-mode-toggle";
 import PageSelect from "./page-select";
 import TableSelect from "./table-select";
 import DBTableComponent from "./table-data";
@@ -207,6 +209,8 @@ export default function DBTable() {
                   <Maximize2Icon className="h-5 w-5" />
                 )}
               </Button>
+              <ThemeModeToggle />
+              <Settings />
             </div>
           </div>
           {MemoizedQueryInput}

diff --git a/src/components/dropzone.tsx b/src/components/dropzone.tsx
@@ -7,8 +7,6 @@ import {
 } from "react-dropzone";
 
 import { toast } from "sonner";
-import Settings from "@/components/settings/settings-drawer";
-import ThemeModeToggle from "@/components/settings/theme-mode-toggle";
 
 const ACCEPTED_TYPES = {
   "application/vnd.sqlite3": [".sqlite", ".sqlite3", ".db", ".sqlitedb"],
@@ -28,7 +26,7 @@ const ACCEPTED_TYPES = {
 };
 
 export default function UploadFile() {
-  const { loadDatabaseBytes, db } = useSQLiteStore();
+  const { loadDatabaseBytes } = useSQLiteStore();
 
   const [errors, setErrors] = useState<FileError[]>([]);
 
@@ -65,15 +63,15 @@ export default function UploadFile() {
   });
 
   const MemoizedDrop = useMemo(
-    (hasDatabase = Boolean(db)) => (
+    () => (
       <div className="flex w-full items-center justify-between gap-2">
         <div
           {...getRootProps()}
           className={`flex w-full grow transform cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed bg-gray-100/50 p-6 transition-colors duration-300 ease-in-out hover:bg-secondary dark:bg-gray-700/50 ${
             isDragActive
               ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20"
-              : "border-primary dark:border-gray-700"
-          } ${hasDatabase ? "py-7" : "py-12"}`}
+              : "border-primary py-12 dark:border-gray-700"
+          }`}
         >
           <input id="file-upload" {...getInputProps()} />
           <label htmlFor="file-upload" className="sr-only">
@@ -84,27 +82,15 @@ export default function UploadFile() {
               Drag and drop file here, or click to select one
             </span>
             <div className="block sm:hidden">
-              {hasDatabase ? (
-                <span className="text-lg font-medium">
-                  Click to select a file
-                </span>
-              ) : (
-                <span className="text-lg font-medium">
-                  Click to select a SQLite file
-                </span>
-              )}
+              <span className="text-lg font-medium">
+                Click to select a SQLite file
+              </span>
             </div>
           </div>
         </div>
-        {hasDatabase && (
-          <div className="flex flex-col gap-1">
-            <ThemeModeToggle />
-            <Settings />
-          </div>
-        )}
       </div>
     ),
-    [db, getRootProps, getInputProps, isDragActive]
+    [getRootProps, getInputProps, isDragActive]
   );
 
   return (