@upstash/react-redis-browser 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -3045,14 +3045,7 @@ var PaginationCache = (_class = class {
3045
3045
  var KeysContext = _react.createContext.call(void 0, void 0);
3046
3046
  var FETCH_KEYS_QUERY_KEY = "use-fetch-keys";
3047
3047
  var KeysProvider = ({ children }) => {
3048
- const { search: searchState } = useDatabrowserStore();
3049
- const search = _react.useMemo.call(void 0,
3050
- () => ({
3051
- key: searchState.key.includes("*") ? searchState.key : `*${searchState.key}*`,
3052
- type: searchState.type
3053
- }),
3054
- [searchState]
3055
- );
3048
+ const { search } = useDatabrowserStore();
3056
3049
  const { fetchKeys, resetCache } = useFetchKeys(search);
3057
3050
  const pageRef = _react.useRef.call(void 0, 0);
3058
3051
  const query = _reactquery.useInfiniteQuery.call(void 0, {
@@ -3286,11 +3279,21 @@ var useFetchSimpleKey = (dataKey, type) => {
3286
3279
  if (type === "string") result = await redis.get(dataKey);
3287
3280
  else if (type === "json") result = await redis.json.get(dataKey);
3288
3281
  else throw new Error(`Invalid type when fetching simple key: ${type}`);
3282
+ if (type === "json" && result !== null)
3283
+ result = JSON.stringify(sortObject(JSON.parse(result)));
3289
3284
  if (result === null) deleteKeyCache(dataKey);
3290
3285
  return result;
3291
3286
  }
3292
3287
  });
3293
3288
  };
3289
+ var sortObject = (obj) => {
3290
+ if (typeof obj !== "object" || obj === null) return obj;
3291
+ return Object.fromEntries(
3292
+ Object.entries(obj).sort((a, b) => a[0].localeCompare(b[0])).map(
3293
+ ([key, value]) => typeof value === "object" && !Array.isArray(value) && value !== null ? [key, sortObject(value)] : [key, value]
3294
+ )
3295
+ );
3296
+ };
3294
3297
 
3295
3298
  // src/components/databrowser/hooks/use-delete-key-cache.ts
3296
3299
  var useDeleteKeyCache = () => {
@@ -4598,7 +4601,7 @@ var DisplayHeader = ({
4598
4601
  }) => {
4599
4602
  const { setSelectedListItem } = useDatabrowserStore();
4600
4603
  const handleAddItem = () => {
4601
- setSelectedListItem({ key: type === "stream" ? "*" : "", value: "", isNew: true });
4604
+ setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
4602
4605
  };
4603
4606
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
4604
4607
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
@@ -4620,6 +4623,7 @@ var DisplayHeader = ({
4620
4623
  // src/components/databrowser/components/display/display-list-edit.tsx
4621
4624
 
4622
4625
 
4626
+
4623
4627
  // src/components/ui/tooltip.tsx
4624
4628
 
4625
4629
 
@@ -4797,7 +4801,8 @@ var useField = ({
4797
4801
  form,
4798
4802
  height,
4799
4803
  showCopyButton,
4800
- readOnly
4804
+ readOnly,
4805
+ data
4801
4806
  }) => {
4802
4807
  const { field, fieldState } = _reacthookform.useController.call(void 0, {
4803
4808
  name,
@@ -4807,13 +4812,13 @@ var useField = ({
4807
4812
  () => checkIsValidJSON(field.value) ? "JSON" : "Text"
4808
4813
  );
4809
4814
  _react.useEffect.call(void 0, () => {
4810
- if (!checkIsValidJSON(field.value)) {
4815
+ if (!checkIsValidJSON(data)) {
4811
4816
  return;
4812
4817
  }
4813
- form.setValue(name, formatJSON(field.value), {
4818
+ form.setValue(name, formatJSON(data), {
4814
4819
  shouldDirty: false
4815
4820
  });
4816
- }, []);
4821
+ }, [data]);
4817
4822
  const handleTypeChange = (type) => {
4818
4823
  setContentType(type);
4819
4824
  if (type === "JSON") {
@@ -4863,14 +4868,32 @@ var ListEditDisplay = ({
4863
4868
  var ListEditForm = ({
4864
4869
  type,
4865
4870
  dataKey,
4866
- item: { key: itemKey, value: itemValue, isNew }
4871
+ item: { key: itemKey, isNew }
4867
4872
  }) => {
4873
+ const query = useFetchListItems({
4874
+ type,
4875
+ dataKey
4876
+ });
4877
+ const findValue = () => {
4878
+ for (const page of _nullishCoalesce(_optionalChain([query, 'access', _28 => _28.data, 'optionalAccess', _29 => _29.pages]), () => ( []))) {
4879
+ const item = page.keys.find((item2) => item2.key === itemKey);
4880
+ if (item && "value" in item) return item.value;
4881
+ }
4882
+ return;
4883
+ };
4884
+ const itemValue = findValue();
4868
4885
  const form = _reacthookform.useForm.call(void 0, {
4869
4886
  defaultValues: {
4870
4887
  key: itemKey,
4871
4888
  value: itemValue
4872
4889
  }
4873
4890
  });
4891
+ _react.useEffect.call(void 0, () => {
4892
+ form.reset({
4893
+ key: itemKey,
4894
+ value: itemValue
4895
+ });
4896
+ }, [itemKey, itemValue]);
4874
4897
  const { mutateAsync: editItem, isPending } = useEditListItem();
4875
4898
  const { setSelectedListItem } = useDatabrowserStore();
4876
4899
  const [keyLabel, valueLabel] = headerLabels[type];
@@ -4893,7 +4916,8 @@ var ListEditForm = ({
4893
4916
  readOnly: type === "stream",
4894
4917
  name: "key",
4895
4918
  height: type === "set" ? 250 : 100,
4896
- label: keyLabel
4919
+ label: keyLabel,
4920
+ data: itemKey
4897
4921
  }
4898
4922
  ),
4899
4923
  type === "zset" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
@@ -4902,7 +4926,8 @@ var ListEditForm = ({
4902
4926
  readOnly: type === "stream",
4903
4927
  name: "value",
4904
4928
  height: type === "list" ? 250 : 100,
4905
- label: valueLabel
4929
+ label: valueLabel,
4930
+ data: _nullishCoalesce(itemValue, () => ( ""))
4906
4931
  }
4907
4932
  )
4908
4933
  ] }),
@@ -4958,7 +4983,8 @@ var FormItem = ({
4958
4983
  name,
4959
4984
  label,
4960
4985
  height,
4961
- readOnly
4986
+ readOnly,
4987
+ data
4962
4988
  }) => {
4963
4989
  const form = _reacthookform.useFormContext.call(void 0, );
4964
4990
  const { editor, selector } = useField({
@@ -4966,7 +4992,8 @@ var FormItem = ({
4966
4992
  form,
4967
4993
  height,
4968
4994
  showCopyButton: true,
4969
- readOnly
4995
+ readOnly,
4996
+ data
4970
4997
  });
4971
4998
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-1", children: [
4972
4999
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 text-xs", children: [
@@ -5003,7 +5030,7 @@ var ListItems = ({
5003
5030
  dataKey
5004
5031
  }) => {
5005
5032
  const { setSelectedListItem } = useDatabrowserStore();
5006
- const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _28 => _28.data, 'optionalAccess', _29 => _29.pages, 'access', _30 => _30.flatMap, 'call', _31 => _31((page) => page.keys)]), () => ( [])), [query.data]);
5033
+ const keys = _react.useMemo.call(void 0, () => _nullishCoalesce(_optionalChain([query, 'access', _30 => _30.data, 'optionalAccess', _31 => _31.pages, 'access', _32 => _32.flatMap, 'call', _33 => _33((page) => page.keys)]), () => ( [])), [query.data]);
5007
5034
  const { mutate: editItem } = useEditListItem();
5008
5035
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map(({ key, value }, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
5009
5036
  "tr",
@@ -5011,7 +5038,7 @@ var ListItems = ({
5011
5038
  "data-item-key": key,
5012
5039
  "data-item-value": value,
5013
5040
  onClick: () => {
5014
- setSelectedListItem({ key, value });
5041
+ setSelectedListItem({ key });
5015
5042
  },
5016
5043
  className: "h-10 border-b border-b-zinc-100 hover:bg-zinc-50",
5017
5044
  children: [
@@ -5090,16 +5117,16 @@ var EditorDisplayForm = ({
5090
5117
  const form = _reacthookform.useForm.call(void 0, {
5091
5118
  defaultValues: { value: data }
5092
5119
  });
5093
- const { editor, selector } = useField({ name: "value", form });
5094
- const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type);
5095
5120
  _react.useEffect.call(void 0, () => {
5096
5121
  form.reset(
5097
5122
  { value: data },
5098
5123
  {
5099
- keepValues: true
5124
+ keepValues: false
5100
5125
  }
5101
5126
  );
5102
5127
  }, [data]);
5128
+ const { editor, selector } = useField({ name: "value", form, data });
5129
+ const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type);
5103
5130
  const handleCancel = () => {
5104
5131
  form.reset();
5105
5132
  };
@@ -5261,7 +5288,7 @@ function AddKeyModal() {
5261
5288
  setSelectedKey(key);
5262
5289
  setOpen(false);
5263
5290
  setTimeout(() => {
5264
- _optionalChain([window, 'access', _32 => _32.document, 'access', _33 => _33.querySelector, 'call', _34 => _34(`[data-key="${key}"]`), 'optionalAccess', _35 => _35.scrollIntoView, 'call', _36 => _36({
5291
+ _optionalChain([window, 'access', _34 => _34.document, 'access', _35 => _35.querySelector, 'call', _36 => _36(`[data-key="${key}"]`), 'optionalAccess', _37 => _37.scrollIntoView, 'call', _38 => _38({
5265
5292
  behavior: "smooth",
5266
5293
  block: "start",
5267
5294
  inline: "nearest"
@@ -5306,7 +5333,7 @@ function AddKeyModal() {
5306
5333
  }
5307
5334
  )
5308
5335
  ] }),
5309
- formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _37 => _37.errors, 'access', _38 => _38.key, 'optionalAccess', _39 => _39.message]) }),
5336
+ formState.errors.key && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-3 mt-2 text-xs text-red-500", children: _optionalChain([formState, 'access', _39 => _39.errors, 'access', _40 => _40.key, 'optionalAccess', _41 => _41.message]) }),
5310
5337
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-2 text-xs text-zinc-500", children: "After creating the key, you can edit the value" }),
5311
5338
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-6 flex justify-end gap-2", children: [
5312
5339
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
@@ -5400,7 +5427,7 @@ var SidebarContextMenu = ({ children }) => {
5400
5427
 
5401
5428
  var KeysList = () => {
5402
5429
  const { keys } = useKeys();
5403
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _40 => _40.at, 'call', _41 => _41(i + 1), 'optionalAccess', _42 => _42[0]]), () => ( "")), data }, data[0])) }) }) });
5430
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pr-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarContextMenu, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: keys.map((data, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeyItem, { nextKey: _nullishCoalesce(_optionalChain([keys, 'access', _42 => _42.at, 'call', _43 => _43(i + 1), 'optionalAccess', _44 => _44[0]]), () => ( "")), data }, data[0])) }) }) });
5404
5431
  };
5405
5432
  var keyStyles = {
5406
5433
  string: "border-sky-400 !bg-sky-50 text-sky-900",
@@ -5440,16 +5467,29 @@ var KeyItem = ({ data, nextKey }) => {
5440
5467
  // src/components/databrowser/components/sidebar/search-input.tsx
5441
5468
 
5442
5469
 
5470
+
5443
5471
  var SearchInput = () => {
5444
5472
  const { setSearchKey, search } = useDatabrowserStore();
5473
+ const [state, setState] = _react.useState.call(void 0, search.key);
5474
+ const submit = (value) => {
5475
+ if (value.trim() !== "" && !value.includes("*")) value = `${value}*`;
5476
+ setSearchKey(value);
5477
+ setState(value);
5478
+ };
5445
5479
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative grow", children: [
5446
5480
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
5447
5481
  Input,
5448
5482
  {
5449
5483
  placeholder: "Search",
5450
5484
  className: "rounded-l-none border-zinc-300 font-normal",
5451
- onChange: (e) => setSearchKey(e.target.value),
5452
- value: search.key
5485
+ onKeyDown: (e) => {
5486
+ if (e.key === "Enter") submit(e.currentTarget.value);
5487
+ },
5488
+ onChange: (e) => {
5489
+ setState(e.currentTarget.value);
5490
+ if (e.currentTarget.value.trim() === "") submit("");
5491
+ },
5492
+ value: state
5453
5493
  }
5454
5494
  ),
5455
5495
  search.key && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
@@ -5523,6 +5563,9 @@ function Sidebar() {
5523
5563
  queryClient.invalidateQueries({
5524
5564
  queryKey: [FETCH_LIST_ITEMS_QUERY_KEY]
5525
5565
  });
5566
+ queryClient.invalidateQueries({
5567
+ queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY]
5568
+ });
5526
5569
  queryClient.invalidateQueries({
5527
5570
  queryKey: [FETCH_DB_SIZE_QUERY_KEY]
5528
5571
  });
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/components/databrowser/index.tsx
2
- import { useEffect as useEffect9, useMemo as useMemo6 } from "react";
2
+ import { useEffect as useEffect10, useMemo as useMemo6 } from "react";
3
3
 
4
4
  // src/store.tsx
5
5
  import { createContext, useContext, useMemo, useState as useState2 } from "react";
@@ -3045,14 +3045,7 @@ import { jsx as jsx4 } from "react/jsx-runtime";
3045
3045
  var KeysContext = createContext2(void 0);
3046
3046
  var FETCH_KEYS_QUERY_KEY = "use-fetch-keys";
3047
3047
  var KeysProvider = ({ children }) => {
3048
- const { search: searchState } = useDatabrowserStore();
3049
- const search = useMemo2(
3050
- () => ({
3051
- key: searchState.key.includes("*") ? searchState.key : `*${searchState.key}*`,
3052
- type: searchState.type
3053
- }),
3054
- [searchState]
3055
- );
3048
+ const { search } = useDatabrowserStore();
3056
3049
  const { fetchKeys, resetCache } = useFetchKeys(search);
3057
3050
  const pageRef = useRef2(0);
3058
3051
  const query = useInfiniteQuery({
@@ -3286,11 +3279,21 @@ var useFetchSimpleKey = (dataKey, type) => {
3286
3279
  if (type === "string") result = await redis.get(dataKey);
3287
3280
  else if (type === "json") result = await redis.json.get(dataKey);
3288
3281
  else throw new Error(`Invalid type when fetching simple key: ${type}`);
3282
+ if (type === "json" && result !== null)
3283
+ result = JSON.stringify(sortObject(JSON.parse(result)));
3289
3284
  if (result === null) deleteKeyCache(dataKey);
3290
3285
  return result;
3291
3286
  }
3292
3287
  });
3293
3288
  };
3289
+ var sortObject = (obj) => {
3290
+ if (typeof obj !== "object" || obj === null) return obj;
3291
+ return Object.fromEntries(
3292
+ Object.entries(obj).sort((a, b) => a[0].localeCompare(b[0])).map(
3293
+ ([key, value]) => typeof value === "object" && !Array.isArray(value) && value !== null ? [key, sortObject(value)] : [key, value]
3294
+ )
3295
+ );
3296
+ };
3294
3297
 
3295
3298
  // src/components/databrowser/hooks/use-delete-key-cache.ts
3296
3299
  var useDeleteKeyCache = () => {
@@ -4598,7 +4601,7 @@ var DisplayHeader = ({
4598
4601
  }) => {
4599
4602
  const { setSelectedListItem } = useDatabrowserStore();
4600
4603
  const handleAddItem = () => {
4601
- setSelectedListItem({ key: type === "stream" ? "*" : "", value: "", isNew: true });
4604
+ setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true });
4602
4605
  };
4603
4606
  return /* @__PURE__ */ jsxs15("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
4604
4607
  /* @__PURE__ */ jsxs15("div", { className: "flex min-h-10 items-center justify-between gap-4", children: [
@@ -4618,6 +4621,7 @@ var DisplayHeader = ({
4618
4621
  };
4619
4622
 
4620
4623
  // src/components/databrowser/components/display/display-list-edit.tsx
4624
+ import { useEffect as useEffect8 } from "react";
4621
4625
  import { Controller as Controller2, FormProvider, useForm as useForm2, useFormContext } from "react-hook-form";
4622
4626
 
4623
4627
  // src/components/ui/tooltip.tsx
@@ -4797,7 +4801,8 @@ var useField = ({
4797
4801
  form,
4798
4802
  height,
4799
4803
  showCopyButton,
4800
- readOnly
4804
+ readOnly,
4805
+ data
4801
4806
  }) => {
4802
4807
  const { field, fieldState } = useController({
4803
4808
  name,
@@ -4807,13 +4812,13 @@ var useField = ({
4807
4812
  () => checkIsValidJSON(field.value) ? "JSON" : "Text"
4808
4813
  );
4809
4814
  useEffect7(() => {
4810
- if (!checkIsValidJSON(field.value)) {
4815
+ if (!checkIsValidJSON(data)) {
4811
4816
  return;
4812
4817
  }
4813
- form.setValue(name, formatJSON(field.value), {
4818
+ form.setValue(name, formatJSON(data), {
4814
4819
  shouldDirty: false
4815
4820
  });
4816
- }, []);
4821
+ }, [data]);
4817
4822
  const handleTypeChange = (type) => {
4818
4823
  setContentType(type);
4819
4824
  if (type === "JSON") {
@@ -4863,14 +4868,32 @@ var ListEditDisplay = ({
4863
4868
  var ListEditForm = ({
4864
4869
  type,
4865
4870
  dataKey,
4866
- item: { key: itemKey, value: itemValue, isNew }
4871
+ item: { key: itemKey, isNew }
4867
4872
  }) => {
4873
+ const query = useFetchListItems({
4874
+ type,
4875
+ dataKey
4876
+ });
4877
+ const findValue = () => {
4878
+ for (const page of query.data?.pages ?? []) {
4879
+ const item = page.keys.find((item2) => item2.key === itemKey);
4880
+ if (item && "value" in item) return item.value;
4881
+ }
4882
+ return;
4883
+ };
4884
+ const itemValue = findValue();
4868
4885
  const form = useForm2({
4869
4886
  defaultValues: {
4870
4887
  key: itemKey,
4871
4888
  value: itemValue
4872
4889
  }
4873
4890
  });
4891
+ useEffect8(() => {
4892
+ form.reset({
4893
+ key: itemKey,
4894
+ value: itemValue
4895
+ });
4896
+ }, [itemKey, itemValue]);
4874
4897
  const { mutateAsync: editItem, isPending } = useEditListItem();
4875
4898
  const { setSelectedListItem } = useDatabrowserStore();
4876
4899
  const [keyLabel, valueLabel] = headerLabels[type];
@@ -4893,7 +4916,8 @@ var ListEditForm = ({
4893
4916
  readOnly: type === "stream",
4894
4917
  name: "key",
4895
4918
  height: type === "set" ? 250 : 100,
4896
- label: keyLabel
4919
+ label: keyLabel,
4920
+ data: itemKey
4897
4921
  }
4898
4922
  ),
4899
4923
  type === "zset" ? /* @__PURE__ */ jsx29(NumberFormItem, { name: "value", label: valueLabel }) : type !== "set" && /* @__PURE__ */ jsx29(
@@ -4902,7 +4926,8 @@ var ListEditForm = ({
4902
4926
  readOnly: type === "stream",
4903
4927
  name: "value",
4904
4928
  height: type === "list" ? 250 : 100,
4905
- label: valueLabel
4929
+ label: valueLabel,
4930
+ data: itemValue ?? ""
4906
4931
  }
4907
4932
  )
4908
4933
  ] }),
@@ -4958,7 +4983,8 @@ var FormItem = ({
4958
4983
  name,
4959
4984
  label,
4960
4985
  height,
4961
- readOnly
4986
+ readOnly,
4987
+ data
4962
4988
  }) => {
4963
4989
  const form = useFormContext();
4964
4990
  const { editor, selector } = useField({
@@ -4966,7 +4992,8 @@ var FormItem = ({
4966
4992
  form,
4967
4993
  height,
4968
4994
  showCopyButton: true,
4969
- readOnly
4995
+ readOnly,
4996
+ data
4970
4997
  });
4971
4998
  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
4972
4999
  /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 text-xs", children: [
@@ -5011,7 +5038,7 @@ var ListItems = ({
5011
5038
  "data-item-key": key,
5012
5039
  "data-item-value": value,
5013
5040
  onClick: () => {
5014
- setSelectedListItem({ key, value });
5041
+ setSelectedListItem({ key });
5015
5042
  },
5016
5043
  className: "h-10 border-b border-b-zinc-100 hover:bg-zinc-50",
5017
5044
  children: [
@@ -5066,7 +5093,7 @@ var ListItems = ({
5066
5093
  };
5067
5094
 
5068
5095
  // src/components/databrowser/components/display/display-simple.tsx
5069
- import { useEffect as useEffect8 } from "react";
5096
+ import { useEffect as useEffect9 } from "react";
5070
5097
  import { useForm as useForm3 } from "react-hook-form";
5071
5098
  import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
5072
5099
  var EditorDisplay = ({ dataKey, type }) => {
@@ -5090,16 +5117,16 @@ var EditorDisplayForm = ({
5090
5117
  const form = useForm3({
5091
5118
  defaultValues: { value: data }
5092
5119
  });
5093
- const { editor, selector } = useField({ name: "value", form });
5094
- const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type);
5095
- useEffect8(() => {
5120
+ useEffect9(() => {
5096
5121
  form.reset(
5097
5122
  { value: data },
5098
5123
  {
5099
- keepValues: true
5124
+ keepValues: false
5100
5125
  }
5101
5126
  );
5102
5127
  }, [data]);
5128
+ const { editor, selector } = useField({ name: "value", form, data });
5129
+ const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type);
5103
5130
  const handleCancel = () => {
5104
5131
  form.reset();
5105
5132
  };
@@ -5438,18 +5465,31 @@ var KeyItem = ({ data, nextKey }) => {
5438
5465
  };
5439
5466
 
5440
5467
  // src/components/databrowser/components/sidebar/search-input.tsx
5468
+ import { useState as useState10 } from "react";
5441
5469
  import { IconX } from "@tabler/icons-react";
5442
5470
  import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
5443
5471
  var SearchInput = () => {
5444
5472
  const { setSearchKey, search } = useDatabrowserStore();
5473
+ const [state, setState] = useState10(search.key);
5474
+ const submit = (value) => {
5475
+ if (value.trim() !== "" && !value.includes("*")) value = `${value}*`;
5476
+ setSearchKey(value);
5477
+ setState(value);
5478
+ };
5445
5479
  return /* @__PURE__ */ jsxs27("div", { className: "relative grow", children: [
5446
5480
  /* @__PURE__ */ jsx38(
5447
5481
  Input,
5448
5482
  {
5449
5483
  placeholder: "Search",
5450
5484
  className: "rounded-l-none border-zinc-300 font-normal",
5451
- onChange: (e) => setSearchKey(e.target.value),
5452
- value: search.key
5485
+ onKeyDown: (e) => {
5486
+ if (e.key === "Enter") submit(e.currentTarget.value);
5487
+ },
5488
+ onChange: (e) => {
5489
+ setState(e.currentTarget.value);
5490
+ if (e.currentTarget.value.trim() === "") submit("");
5491
+ },
5492
+ value: state
5453
5493
  }
5454
5494
  ),
5455
5495
  search.key && /* @__PURE__ */ jsxs27(
@@ -5523,6 +5563,9 @@ function Sidebar() {
5523
5563
  queryClient.invalidateQueries({
5524
5564
  queryKey: [FETCH_LIST_ITEMS_QUERY_KEY]
5525
5565
  });
5566
+ queryClient.invalidateQueries({
5567
+ queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY]
5568
+ });
5526
5569
  queryClient.invalidateQueries({
5527
5570
  queryKey: [FETCH_DB_SIZE_QUERY_KEY]
5528
5571
  });
@@ -5546,7 +5589,7 @@ function Sidebar() {
5546
5589
  import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
5547
5590
  var RedisBrowser = ({ token, url }) => {
5548
5591
  const credentials = useMemo6(() => ({ token, url }), [token, url]);
5549
- useEffect9(() => {
5592
+ useEffect10(() => {
5550
5593
  queryClient.resetQueries();
5551
5594
  }, [credentials.url]);
5552
5595
  return /* @__PURE__ */ jsx42(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx42(TooltipProvider, { children: /* @__PURE__ */ jsx42(DatabrowserProvider, { redisCredentials: credentials, children: /* @__PURE__ */ jsx42(KeysProvider, { children: /* @__PURE__ */ jsxs31("div", { className: "ups-db", style: { height: "100%" }, children: [
package/package.json CHANGED
@@ -1 +1 @@
1
- { "name": "@upstash/react-redis-browser", "version": "v0.1.3", "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-portal": "^1.1.2", "@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" } }
1
+ { "name": "@upstash/react-redis-browser", "version": "v0.1.5", "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-portal": "^1.1.2", "@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" } }