refactor: refactor row details display, improve pagination logic, and add makefile build targets

frontend/.prettierignore

@@ -7,3 +7,4 @@ coverage
 .env*
 *.log
 pnpm-lock.yaml
+openapi.json

frontend/pnpm-workspace.yaml

@@ -1,3 +1,3 @@
 allowBuilds:
-  '@swc/core': true
+  "@swc/core": true
   esbuild: true

frontend/src/components/tables/RowDetailsSheet.tsx

@@ -30,9 +30,7 @@ export const RowDetailsSheet = () => {
     deleteRow,
   } = useRowContext();
   if (!rowDetailssheetData) return null;
-  // todo : row itself can have a hash so we have to do something better
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { hash, ...row } = rowDetailssheetData.row;
+  const row = rowDetailssheetData.row.columns;
   return (
     <Sheet open={rowDetailsSheetOpen} onOpenChange={setRowDetailsSheetOpen}>
       <SheetContent className="flex min-w-[90%] flex-col md:min-w-xl">
@@ -43,23 +41,21 @@ export const RowDetailsSheet = () => {
 
         <ScrollArea type="always" className="min-h-0 flex-1">
           <div className="flex flex-col divide-y p-4">
-            {Object.entries(row || {}).map(([key, value]) => (
-              <div key={key} className="flex flex-col gap-1 py-3">
+            {(row || []).map((col) => (
+              <div key={col.columnName} className="flex flex-col gap-1 py-3">
                 <label className="text-xs font-medium text-muted-foreground capitalize">
-                  {key}
+                  {col.columnName}
                 </label>
-                <p className="font-mono text-sm break-all whitespace-pre-wrap">
+                <div className="font-mono text-sm break-all whitespace-pre-wrap">
                   {(() => {
-                    switch (typeof value) {
-                      case "undefined":
-                        return <p className="text-muted-foreground">-</p>;
-                      case null:
-                        return <p className="text-muted-foreground">null</p>;
-                      default:
-                        return formatValue(value);
-                    }
+                    const value = col.value;
+                    if (value === undefined)
+                      return <p className="text-muted-foreground">-</p>;
+                    if (value === null)
+                      return <p className="text-muted-foreground">null</p>;
+                    return formatValue(value);
                   })()}
-                </p>
+                </div>
               </div>
             ))}
           </div>

frontend/src/components/tables/TableView.tsx

@@ -21,8 +21,9 @@ import {
 import { RowDetailsSheet } from "./RowDetailsSheet";
 import { Input } from "@/components/ui/input";
 import { ChevronRight } from "lucide-react";
-import { useIsMobile } from "@/hooks/use-mobile";
 import { useRowContext } from "@/hooks/useRows";
+import { toast } from "sonner";
+import type { RowSet } from "@/client";
 
 interface TableViewProps {
   tableName: string;
@@ -31,7 +32,6 @@ interface TableViewProps {
 export type RowData = { hash: string } & Record<string, unknown>;
 
 export const TableView = ({ tableName }: TableViewProps) => {
-  const isMobile = useIsMobile();
   const { setRowDetailsSheetOpen, setRowDetailsSheetData, isLoading, data } =
     useRowContext();
   const [globalFilter, setGlobalFilter] = useState("");
@@ -60,6 +60,7 @@ export const TableView = ({ tableName }: TableViewProps) => {
     () =>
       data?.rows?.map((row) => ({
         hash: row.hash,
+        __rowSet: row,
         ...Object.fromEntries(
           (row.columns || []).map((col) => [col.columnName, col.value]),
         ),
@@ -68,9 +69,15 @@ export const TableView = ({ tableName }: TableViewProps) => {
   );
 
   const handleRowClick = (row: RowData) => {
-    setRowDetailsSheetData({ row: row, tableName });
+    const rowSet = row.__rowSet as RowSet;
+    if (!row) {
+      toast.error("Row not found");
+      return;
+    }
+    setRowDetailsSheetData({ row: rowSet, tableName });
     setRowDetailsSheetOpen(true);
   };
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     data: flattenedRows,
     columns: columns,
@@ -142,7 +149,7 @@ export const TableView = ({ tableName }: TableViewProps) => {
                         position: isPinned ? "sticky" : undefined,
                         right: isPinned === "right" ? 0 : undefined,
                         zIndex: isPinned ? 1 : 0,
-                        background: isMobile ? "var(--background)" : undefined,
+                        background: "var(--background)",
 
                         maxWidth: `${cell.column.getSize()}px`,
                         overflow: "hidden",

frontend/src/hooks/useRows.tsx

@@ -6,7 +6,7 @@ import {
   type Dispatch,
   type SetStateAction,
 } from "react";
-import type { ErrorModel, ListRowsResponse } from "@/client";
+import type { ErrorModel, ListRowsResponse, RowSet } from "@/client";
 import {
   deleteRowMutation,
   listRowsOptions,
@@ -18,7 +18,7 @@ import { useSearchParams } from "react-router-dom";
 
 export type RowData = { hash: string } & Record<string, unknown>;
 
-type SheetData = { row: RowData; tableName: string };
+type SheetData = { row: RowSet; tableName: string };
 
 export interface RowContextType {
   rowDetailsSheetData: SheetData | null;

internal/database/repo/quires.sql.go

@@ -229,7 +229,12 @@ func (q *Queries) GetRow(ctx context.Context, tableName, hash string, offest, li
 		return nil, err
 	}
 	logger.Info("not found in cache! Fetching from db limit=%d offset=%d", limit, offest)
-	for offest <= limit {
+	totalCount, err := q.GetRowCount(ctx, tableName)
+	if err != nil {
+		return nil, err
+	}
+
+	for (offest <= limit) && (offest < totalCount) {
 		colValue := make([]models.ColValue, len(colValues))
 		copy(colValue, colValues)
 		query, args, err := q.queryBuilder.GetRows(tableName, offest+1, offest)
@@ -238,7 +243,7 @@ func (q *Queries) GetRow(ctx context.Context, tableName, hash string, offest, li
 		}
 		data, err := q.db.QueryRowxContext(ctx, query, args...).SliceScan()
 		if err != nil {
-			logger.Error("failed to query: %v", err)
+			logger.Error("offset=%d, limit=%d, totalCount=%d failed to query: %v", offest, limit, totalCount, err)
 			if !errors.Is(err, sql.ErrNoRows) {
 				return nil, err
 			}

makefile

@@ -5,20 +5,25 @@ GREETING := Hello from RowSQL!
 default:
 	@echo "$(GREETING)"
 
+generate-schema:
+	go run ./cmd/schema/main.go
+
 backend-build:
 	go run ./cmd/schema/main.go
 	go build -o bin/rowsql ./cmd/server
 
 frontend-build:
+
 	cd ./frontend && pnpm run build
 
 backend-dev:
 	air -c air.toml
 
-frontend-dev:
+frontend-dev: generate-schema
 	cd ./frontend/ && pnpm run dev
 
-dev: backend-dev frontend-dev
+dev: 
+	$(MAKE) -j2 frontend-dev backend-dev
 
 build: doc frontend-build backend-build
 	echo "build was successful"
@@ -39,6 +44,9 @@ lint:
 	golangci-lint run
 	cd ./frontend && pnpm lint
 
+lint-staged:
+	cd frontend && pnpx lint-staged
+
 clean:
 	rm -rf dist/
 	rm -rf bin/
@@ -52,4 +60,8 @@ install:
 
 format:
 	gofmt -w .
-	cd ./frontend && pnpm run format
+	cd ./frontend && pnpm run format
+
+format-check:
+	gofmt -l .
+	cd ./frontend && pnpm run format:check