@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 +71 -28
- package/dist/index.mjs +71 -28
- package/package.json +1 -1
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
|
|
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" ? "*" : "",
|
|
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(
|
|
4815
|
+
if (!checkIsValidJSON(data)) {
|
|
4811
4816
|
return;
|
|
4812
4817
|
}
|
|
4813
|
-
form.setValue(name, formatJSON(
|
|
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,
|
|
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',
|
|
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
|
|
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:
|
|
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',
|
|
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',
|
|
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',
|
|
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
|
-
|
|
5452
|
-
|
|
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
|
|
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
|
|
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" ? "*" : "",
|
|
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(
|
|
4815
|
+
if (!checkIsValidJSON(data)) {
|
|
4811
4816
|
return;
|
|
4812
4817
|
}
|
|
4813
|
-
form.setValue(name, formatJSON(
|
|
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,
|
|
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
|
|
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
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
5452
|
-
|
|
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
|
-
|
|
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.
|
|
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" } }
|