Cleaning, Fixing Layout

TeaByte · Oct 9, 2023 · e08eaac · e08eaac
1 parent feb084c
commit e08eaac
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 149 deletions.
diff --git a/README.md b/README.md
@@ -2,9 +2,8 @@
 
 [ TODO LIST ]
 
-- [ ] Make a web version ( if possible )
 - [ ] Add Linux and MacOS Builds
-- [ ] Handle Sqlite with password
+- [ ] Handle SQLite with password
 - [x] Render performance for big sqlite files
 - [x] Execute SQL command tab
 - [x] Schema Generator

diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -9,8 +9,6 @@ default-run = "app"
 edition = "2021"
 rust-version = "1.60"
 
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
-
 [build-dependencies]
 tauri-build = { version = "1.4.0", features = [] }
 

diff --git a/src/app/browse.tsx b/src/app/browse.tsx
@@ -22,9 +22,9 @@ import {
 } from "@/components/ui/table";
 
 interface BrowseProps {
- setSelectedTable: (value: SetStateAction<string | null>) => void;
+ setSelectedTable: (value: SetStateAction<string>) => void;
  tables: string[];
- selectedTable: string | null;
+ selectedTable: string;
  records: Columns;
 }
 
@@ -38,7 +38,6 @@ export default function Browse(props: BrowseProps) {
  const endIndex = startIndex + ROWS_PER_PAGE;
 
  const totalPages = Math.ceil(
- // @ts-ignore
  records[selectedTable]?.[Object.keys(records[selectedTable])[0]]?.length /
  ROWS_PER_PAGE
  );
@@ -53,7 +52,10 @@ export default function Browse(props: BrowseProps) {
  {selectedTable && (
  <Select
  value={selectedTable}
- onValueChange={(table: string) => setSelectedTable(table)}
+ onValueChange={(table: string) => {
+ setCurrentPage(1);
+ setSelectedTable(table);
+ }}
  >
  <SelectTrigger className="w-[180px]">
  <SelectValue placeholder="Select Table" />
@@ -77,51 +79,63 @@ export default function Browse(props: BrowseProps) {
  0}{" "}
  Rows
  </span>
+ <span className="text-sm">
+ ( Page {currentPage} of {totalPages} )
+ </span>
  </div>
- <div className="mt-2 h-[420px] overflow-auto">
- {selectedTable && records[selectedTable] && (
- <>
- <Table>
- <TableHeader>
- <TableRow>
- {Object.keys(records[selectedTable]).map((column, index) => (
- <TableHead key={index}>{column}</TableHead>
- ))}
- </TableRow>
- </TableHeader>
- <TableBody>
- {records[selectedTable][Object.keys(records[selectedTable])[0]]
- .slice(startIndex, endIndex)
- .map((_, rowIndex) => (
- <TableRow key={rowIndex}>
- {Object.keys(records[selectedTable]).map(
- (column, columnIndex) => (
- <TableCell
- key={columnIndex}
- className="max-w-[150px] truncate"
- >
- <span>
- {
- records[selectedTable][column][
- rowIndex + startIndex
- ]
- }
- </span>
- </TableCell>
- )
- )}
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </>
+ <section className="flex flex-col">
+ <div className="mt-2 overflow-auto mb-[55px]">
+ {selectedTable && records[selectedTable] && (
+ <>
+ <Table>
+ <TableHeader>
+ <TableRow>
+ {Object.keys(records[selectedTable]).map(
+ (column, index) => (
+ <TableHead key={index}>{column}</TableHead>
+ )
+ )}
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {records[selectedTable][
+ Object.keys(records[selectedTable])[0]
+ ]
+ .slice(startIndex, endIndex)
+ .map((_, rowIndex) => (
+ <TableRow key={rowIndex}>
+ {Object.keys(records[selectedTable]).map(
+ (column, columnIndex) => (
+ <TableCell
+ key={columnIndex}
+ className="max-w-[150px] truncate"
+ >
+ <span>
+ {
+ records[selectedTable][column][
+ rowIndex + startIndex
+ ]
+ }
+ </span>
+ </TableCell>
+ )
+ )}
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </>
+ )}
+ </div>
+
+ {totalPages > 1 && (
+ <Pagination
+ currentPage={currentPage}
+ totalPages={totalPages}
+ onPageChange={handleChangePage}
+ />
  )}
- </div>
- <Pagination
- currentPage={currentPage}
- totalPages={totalPages}
- onPageChange={handleChangePage}
- />
+ </section>
  </div>
  );
 }
@@ -137,11 +151,12 @@ const Pagination: React.FC<PaginationProps> = ({
  totalPages,
  onPageChange,
 }) => {
- // @ts-ignore
- const pageNumbers = [...Array(totalPages).keys()].map((num) => num + 1);
-
+ const pageNumbers = Array.from(
+ { length: totalPages },
+ (_, index) => index + 1
+ );
  return (
- <ul className="flex overflow-x-scroll">
+ <ul className="flex overflow-x-scroll fixed bottom-0 w-full">
  {pageNumbers.map((page) => (
  <li
  key={page}

diff --git a/src/app/execute.tsx b/src/app/execute.tsx
@@ -55,28 +55,30 @@ export default function ExecuteSQL({ table }: { table: string }) {
  </button>
  {typeof result === "string" ? (
  <p>{result}</p>
- ) : result instanceof Array ? (
- <Table>
- <TableHeader>
- <TableRow>
- {Object.keys(result[0]).map((key) => (
- <TableHead key={key}>{key}</TableHead>
- ))}
- </TableRow>
- </TableHeader>
- <TableBody>
- {result.map((row, index) => (
- <TableRow key={index}>
- {Object.values(row).map((value, index) => (
- <TableCell key={index} className="max-w-[150px] truncate">
- {value}
- </TableCell>
+ ) : (
+ result instanceof Array && (
+ <Table>
+ <TableHeader>
+ <TableRow>
+ {Object.keys(result[0]).map((key) => (
+ <TableHead key={key}>{key}</TableHead>
  ))}
  </TableRow>
- ))}
- </TableBody>
- </Table>
- ) : null}
+ </TableHeader>
+ <TableBody>
+ {result.map((row, index) => (
+ <TableRow key={index}>
+ {Object.values(row).map((value, index) => (
+ <TableCell key={index} className="max-w-[150px] truncate">
+ {value}
+ </TableCell>
+ ))}
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ )
+ )}
  </form>
  </div>
  );

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,6 @@ import type { Metadata } from "next";
 import { Merriweather_Sans } from "next/font/google";
 
 import ThemeProvider from "@/components/theme/provider";
-import Toggle from "@/components/theme/toggle";
 
 const font = Merriweather_Sans({ subsets: ["latin"] });
 export const metadata: Metadata = {
@@ -26,14 +25,6 @@ export default function RootLayout({
  disableTransitionOnChange
  >
  {children}
- <footer className="p-4 fixed bottom-0 w-full bg-background border-t border-secondary">
- <div className="flex justify-between items-center">
- <Toggle />
- <span className="hover:animate-bounce animate-pulse">
- SQLite Viewer V0.4
- </span>
- </div>
- </footer>
  </ThemeProvider>
  </body>
  </html>

diff --git a/src/app/load.tsx b/src/app/load.tsx
@@ -1,7 +1,9 @@
 "use client";
 
+import { ReloadIcon } from "@radix-ui/react-icons";
 import { Columns, TableInfos, TableInfo } from "@/types";
 import { useState, useEffect } from "react";
+import Toggle from "@/components/theme/toggle";
 
 import { invoke } from "@tauri-apps/api/tauri";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -14,7 +16,7 @@ export default function Load({ path }: { path: string }) {
  const [records, setRecords] = useState<Columns>({});
  const [tables, setTables] = useState<string[]>([]);
  const [tablesInfo, setTablesInfo] = useState<TableInfos>({});
- const [selectedTable, setSelectedTable] = useState<string | null>(null);
+ const [selectedTable, setSelectedTable] = useState<string>("");
 
  useEffect(() => {
  onSelectedDatabase();
@@ -71,6 +73,7 @@ export default function Load({ path }: { path: string }) {
  <TabsTrigger value="execute" className="grow">
  Execute SQL
  </TabsTrigger>
+ <Toggle />
  </TabsList>
  <TabsContent value="structure">
  <Structure tablesInfo={tablesInfo} />
@@ -88,7 +91,10 @@ export default function Load({ path }: { path: string }) {
  </TabsContent>
  </Tabs>
  ) : (
- <h1 className="text-2xl w-full mt-20 text-center">Loading Data..</h1>
+ <div className="flex gap-2 items-center justify-center mt-20">
+ <h1 className="text-2xl">Reading Content</h1>
+ <ReloadIcon className="animate-spin w-8 h-8" />
+ </div>
  )}
  </div>
  );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -41,8 +41,7 @@ export default function Home() {
  >
  Select Database
  </button>
- <p>SQLite Viewer GUI Program written in Rust using Tauri + NextJS</p>
- <p>I dont know what to put in this place!</p>
+ <p>Leave a Start on GitHub ⭐</p>
  </div>
  )}
  </main>

diff --git a/src/components/theme/toggle.tsx b/src/components/theme/toggle.tsx
@@ -3,7 +3,6 @@
 import { useTheme } from "next-themes";
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 
-import { Button } from "@/components/ui/button";
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -16,13 +15,13 @@ export default function Toggle() {
  return (
  <DropdownMenu>
  <DropdownMenuTrigger asChild>
- <Button variant="outline" size="icon">
+ <button className="flex items-center px-2 hover:opacity-70">
  <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
  <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
  <span className="sr-only">Toggle theme</span>
- </Button>
+ </button>
  </DropdownMenuTrigger>
- <DropdownMenuContent align="start">
+ <DropdownMenuContent align="end">
  <DropdownMenuItem onClick={() => setTheme("light")}>
  Light
  </DropdownMenuItem>

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx