@upstash/react-redis-browser 0.1.2-canary-6 → 0.1.2-canary-7

package/dist/index.css

@@ -971,6 +971,10 @@
 .ups-db .p-6 {
   padding: 1.5rem;
 }
+.ups-db .px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
 .ups-db .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;

package/dist/index.js

@@ -3037,7 +3037,7 @@ var KeysProvider = ({ children }) => {
     queryKey: [FETCH_KEYS_QUERY_KEY, search],
     initialPageParam: 0,
     queryFn: async ({ pageParam: page }) => {
-      if (pageRef.current > page) resetCache();
+      if (pageRef.current >= page) resetCache();
       pageRef.current = page;
       return await fetchKeys();
     },
@@ -3176,39 +3176,39 @@ var useAddKey = () => {
     mutationFn: async ({ key, type }) => {
       switch (type) {
         case "set": {
-          redis.sadd(key, "value");
+          await redis.sadd(key, "value");
           break;
         }
         case "zset": {
-          redis.zadd(key, {
+          await redis.zadd(key, {
             member: "value",
             score: 0
           });
           break;
         }
         case "hash": {
-          redis.hset(key, {
+          await redis.hset(key, {
             field: "field",
             value: "value"
           });
           break;
         }
         case "list": {
-          redis.lpush(key, "value");
+          await redis.lpush(key, "value");
           break;
         }
         case "stream": {
-          redis.xadd(key, "*", {
+          await redis.xadd(key, "*", {
             foo: "bar"
           });
           break;
         }
         case "string": {
-          redis.set(key, "value");
+          await redis.set(key, "value");
           break;
         }
         case "json": {
-          redis.json.set(key, "$", {
+          await redis.json.set(key, "$", {
             foo: "bar"
           });
           break;
@@ -4270,7 +4270,7 @@ var Spinner = ({
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round",
-        className: "ml-2 h-4 w-4 animate-spin",
+        className: cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : ""),
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
       }
     )
@@ -4567,7 +4567,14 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DeleteAlertDialog, { deletionType: "key", onDeleteConfirm: async () => await deleteKey(dataKey), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" }) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        DeleteAlertDialog,
+        {
+          deletionType: "key",
+          onDeleteConfirm: async () => await deleteKey(dataKey),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" })
+        }
+      )
     ] })
   ] });
 }
@@ -4615,7 +4622,7 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 dark:bg-zinc-50 dark:text-zinc-900",
+      "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-zinc-50 dark:text-zinc-900",
       className
     ),
     ...props
@@ -5090,10 +5097,14 @@ var EditorDisplayForm = ({
 
 var DataDisplay = () => {
   const { selectedKey } = useDatabrowserStore();
+  const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl border p-1 bg-white", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl border bg-white p-1", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: type === "string" || type === "json" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
+// src/components/databrowser/components/sidebar/index.tsx
+
+
 // src/components/databrowser/components/add-key-modal.tsx
 
 var _reactdialog = require('@radix-ui/react-dialog'); var DialogPrimitive = _interopRequireWildcard(_reactdialog);
@@ -5472,12 +5483,15 @@ function DataTypeSelector() {
 // src/components/databrowser/components/sidebar/index.tsx
 
 function Sidebar() {
-  const { keys, query } = useKeys();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1 bg-white", children: [
+  const { keys, query, refetch } = useKeys();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 rounded-xl border bg-white p-1", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center justify-between pl-1", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayDbSize, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {}) })
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { className: "h-7 w-7 px-0", onClick: refetch, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconRefresh, { size: 16 }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AddKeyModal, {})
+        ] })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTypeSelector, {}),

package/dist/index.mjs

@@ -3037,7 +3037,7 @@ var KeysProvider = ({ children }) => {
     queryKey: [FETCH_KEYS_QUERY_KEY, search],
     initialPageParam: 0,
     queryFn: async ({ pageParam: page }) => {
-      if (pageRef.current > page) resetCache();
+      if (pageRef.current >= page) resetCache();
       pageRef.current = page;
       return await fetchKeys();
     },
@@ -3176,39 +3176,39 @@ var useAddKey = () => {
     mutationFn: async ({ key, type }) => {
       switch (type) {
         case "set": {
-          redis.sadd(key, "value");
+          await redis.sadd(key, "value");
           break;
         }
         case "zset": {
-          redis.zadd(key, {
+          await redis.zadd(key, {
             member: "value",
             score: 0
           });
           break;
         }
         case "hash": {
-          redis.hset(key, {
+          await redis.hset(key, {
             field: "field",
             value: "value"
           });
           break;
         }
         case "list": {
-          redis.lpush(key, "value");
+          await redis.lpush(key, "value");
           break;
         }
         case "stream": {
-          redis.xadd(key, "*", {
+          await redis.xadd(key, "*", {
             foo: "bar"
           });
           break;
         }
         case "string": {
-          redis.set(key, "value");
+          await redis.set(key, "value");
           break;
         }
         case "json": {
-          redis.json.set(key, "$", {
+          await redis.json.set(key, "$", {
             foo: "bar"
           });
           break;
@@ -4270,7 +4270,7 @@ var Spinner = ({
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round",
-        className: "ml-2 h-4 w-4 animate-spin",
+        className: cn("h-4 w-4 animate-spin", isLoadingText ? "ml-2" : ""),
         children: /* @__PURE__ */ jsx18("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
       }
     )
@@ -4567,7 +4567,14 @@ function KeyActions({ dataKey, content }) {
           children: "Copy content"
         }
       ),
-      /* @__PURE__ */ jsx22(DeleteAlertDialog, { deletionType: "key", onDeleteConfirm: async () => await deleteKey(dataKey), children: /* @__PURE__ */ jsx22(DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" }) })
+      /* @__PURE__ */ jsx22(
+        DeleteAlertDialog,
+        {
+          deletionType: "key",
+          onDeleteConfirm: async () => await deleteKey(dataKey),
+          children: /* @__PURE__ */ jsx22(DropdownMenuItem, { onSelect: (e) => e.preventDefault(), children: "Delete key" })
+        }
+      )
     ] })
   ] });
 }
@@ -4615,7 +4622,7 @@ var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }
     ref,
     sideOffset,
     className: cn(
-      "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 dark:bg-zinc-50 dark:text-zinc-900",
+      "z-50 overflow-hidden rounded-md bg-zinc-900 px-3 py-1.5 text-xs text-zinc-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-zinc-50 dark:text-zinc-900",
       className
     ),
     ...props
@@ -5090,10 +5097,14 @@ var EditorDisplayForm = ({
 import { Fragment as Fragment7, jsx as jsx32 } from "react/jsx-runtime";
 var DataDisplay = () => {
   const { selectedKey } = useDatabrowserStore();
+  const { query } = useKeys();
   const type = useKeyType(selectedKey);
-  return /* @__PURE__ */ jsx32("div", { className: "h-full rounded-xl border p-1 bg-white", children: !selectedKey ? /* @__PURE__ */ jsx32("div", {}) : !type ? /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx32(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx32(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx32(ListDisplay, { dataKey: selectedKey, type }) }) });
+  return /* @__PURE__ */ jsx32("div", { className: "h-full rounded-xl border bg-white p-1", children: !selectedKey ? /* @__PURE__ */ jsx32("div", {}) : !type ? query.isLoading ? /* @__PURE__ */ jsx32("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx32("span", { className: "text-gray-500", children: "Loading..." }) }) : /* @__PURE__ */ jsx32("div", {}) : /* @__PURE__ */ jsx32(Fragment7, { children: type === "string" || type === "json" ? /* @__PURE__ */ jsx32(EditorDisplay, { dataKey: selectedKey, type }) : /* @__PURE__ */ jsx32(ListDisplay, { dataKey: selectedKey, type }) }) });
 };
 
+// src/components/databrowser/components/sidebar/index.tsx
+import { IconRefresh } from "@tabler/icons-react";
+
 // src/components/databrowser/components/add-key-modal.tsx
 import { useState as useState8 } from "react";
 import { DialogDescription as DialogDescription2 } from "@radix-ui/react-dialog";
@@ -5472,12 +5483,15 @@ function DataTypeSelector() {
 // src/components/databrowser/components/sidebar/index.tsx
 import { jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
 function Sidebar() {
-  const { keys, query } = useKeys();
-  return /* @__PURE__ */ jsxs30("div", { className: "flex h-full flex-col gap-2 rounded-xl border p-1 bg-white", children: [
+  const { keys, query, refetch } = useKeys();
+  return /* @__PURE__ */ jsxs30("div", { className: "flex h-full flex-col gap-2 rounded-xl border bg-white p-1", children: [
     /* @__PURE__ */ jsxs30("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
       /* @__PURE__ */ jsxs30("div", { className: "flex h-10 items-center justify-between pl-1", children: [
         /* @__PURE__ */ jsx41(DisplayDbSize, {}),
-        /* @__PURE__ */ jsx41("div", { className: "flex gap-1", children: /* @__PURE__ */ jsx41(AddKeyModal, {}) })
+        /* @__PURE__ */ jsxs30("div", { className: "flex gap-1", children: [
+          /* @__PURE__ */ jsx41(Button, { className: "h-7 w-7 px-0", onClick: refetch, children: /* @__PURE__ */ jsx41(Spinner, { isLoading: query.isFetching, children: /* @__PURE__ */ jsx41(IconRefresh, { size: 16 }) }) }),
+          /* @__PURE__ */ jsx41(AddKeyModal, {})
+        ] })
       ] }),
       /* @__PURE__ */ jsxs30("div", { className: "flex h-10 items-center", children: [
         /* @__PURE__ */ jsx41(DataTypeSelector, {}),

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "v0.1.2-canary-6", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ." }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.31.6", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }
+{ "name": "@upstash/react-redis-browser", "version": "v0.1.2-canary-7", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ./src" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.34.3", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }