From 1cea10688ccffb2302420536f274af0658287202 Mon Sep 17 00:00:00 2001
From: Karolis Ramanauskas <hello@karolisram.com>
Date: Tue, 10 Dec 2024 15:45:19 +0200
Subject: [PATCH] fix(explorer): editable checkbox display (#3392)

---
 .../explore/EditableTableCell.tsx             | 22 ++++++-------------
 .../[worldAddress]/explore/TablesViewer.tsx   |  3 +--
 .../(explorer)/queries/useTableDataQuery.ts   | 14 +++++++++++-
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/EditableTableCell.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/EditableTableCell.tsx
index 655ba04ffe..ce37783b89 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/EditableTableCell.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/EditableTableCell.tsx
@@ -22,7 +22,7 @@ import { useChain } from "../../../../hooks/useChain";
 
 type Props = {
   name: string;
-  value: string | undefined;
+  value: unknown;
   table: Table;
   keyTuple: readonly Hex[];
 };
@@ -89,26 +89,20 @@ export function EditableTableCell({ name, table, keyTuple, value: defaultValue }
     if (!account.isConnected) {
       return openConnectModal?.();
     }
-
-    if (newValue !== defaultValue) {
-      mutate(newValue);
-    }
+    mutate(newValue);
   };
 
   if (fieldType === "bool") {
     return (
-      <>
+      <div className="flex items-center gap-1">
         <Checkbox
           id={`checkbox-${name}`}
-          checked={value === "1"}
-          onCheckedChange={(checked) => {
-            const newValue = checked ? "1" : "0";
-            handleSubmit(newValue);
-          }}
+          checked={Boolean(value)}
+          onCheckedChange={handleSubmit}
           disabled={isPending}
         />
         {isPending && <Loader className="h-4 w-4 animate-spin" />}
-      </>
+      </div>
     );
   }
 
@@ -127,9 +121,7 @@ export function EditableTableCell({ name, table, keyTuple, value: defaultValue }
         >
           <input
             className="w-full bg-transparent"
-            onChange={(evt: ChangeEvent<HTMLInputElement>) => {
-              setValue(evt.target.value);
-            }}
+            onChange={(evt: ChangeEvent<HTMLInputElement>) => setValue(evt.target.value)}
             onBlur={(evt) => handleSubmit(evt.target.value)}
             value={String(value)}
             disabled={isPending}
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx
index 1b9340228b..5703311358 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx
@@ -57,8 +57,7 @@ export function TablesViewer({ table, query }: { table?: TableType; query?: stri
         cell: ({ row }) => {
           const namespace = table?.namespace;
           const keySchema = getKeySchema(table);
-          const value = row.getValue(name)?.toString();
-
+          const value = row.getValue(name);
           if (!table || Object.keys(keySchema).includes(name) || internalNamespaces.includes(namespace)) {
             return value;
           }
diff --git a/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts b/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts
index 2527343345..6756d0ef5f 100644
--- a/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts
+++ b/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts
@@ -49,6 +49,7 @@ export function useTableDataQuery({ table, query }: Props) {
     select: (data: DozerResponse): TData | undefined => {
       if (!table || !data?.result?.[0]) return undefined;
 
+      const indexer = indexerForChainId(chainId);
       const result = data.result[0];
       // if columns are undefined, the result is empty
       if (!result[0]) return undefined;
@@ -61,7 +62,18 @@ export function useTableDataQuery({ table, query }: Props) {
         })
         .filter((key) => schema.includes(key));
 
-      const rows = result.slice(1).map((row) => Object.fromEntries(columns.map((key, index) => [key, row[index]])));
+      const rows = result.slice(1).map((row) =>
+        Object.fromEntries(
+          columns.map((key, index) => {
+            const value = row[index];
+            const type = table?.schema[key];
+            if (type?.type === "bool") {
+              return [key, indexer.type === "sqlite" ? value === "1" : value];
+            }
+            return [key, value];
+          }),
+        ),
+      );
       return {
         columns,
         rows,