DX-1307: New databrowser design #100
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
packages/react-databrowser/src/components/databrowser/hooks/use-keys.tsx
Show resolved
Hide resolved
| query.refetch() | ||
| }, [query, resetCache]) | ||
|
|
||
| const keys = useMemo(() => { |
There was a problem hiding this comment.
We assume key will be created, and use this to optimistically add the key, right?
There was a problem hiding this comment.
No, there is no optimistic updates. The logic inside use-add-key is just to make the newly added key appear on top
| const keys = useMemo(() => { | ||
| const keys = query.data?.pages.flatMap((page) => page.keys) ?? [] | ||
|
|
||
| const keysSet = new Set(keys.map(([key, _]) => key)) |
There was a problem hiding this comment.
can a key exist twice, why do we take the set here?
There was a problem hiding this comment.
It's because I modify the cache when adding a new key, to make it appear at the top. But if the user scrolls down and sees that key himself, there might be duplicates.
And I am not sure if redis can give duplicates if keys get deleted etc. while scanning but it's a general safeguard
packages/react-databrowser/src/components/databrowser/hooks/use-keys.tsx
Outdated
Show resolved
Hide resolved
packages/react-databrowser/src/components/databrowser/components/sidebar/db-size.tsx
Outdated
Show resolved
Hide resolved
packages/react-databrowser/src/components/databrowser/components/sidebar/keys-list.tsx
Outdated
Show resolved
Hide resolved
| return useQuery({ | ||
| queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, dataKey], | ||
| queryFn: async () => { | ||
| let result | ||
| if (type === "string") result = (await redis.get(dataKey)) as string | null | ||
| else if (type === "json") result = (await redis.json.get(dataKey)) as string | null | ||
| else throw new Error(`Invalid type when fetching simple key: ${type}`) | ||
|
|
||
| if (result === null) deleteKeyCache(dataKey) | ||
|
|
||
| return result | ||
| }, | ||
| }) |
There was a problem hiding this comment.
We should maybe invalidate this query with an interval
There was a problem hiding this comment.
It was like that in the old version, i think it's a bit unexpected from some users so I removed all queries with intervals
https://linear.app/upstash/issue/DX-1303/data-browser-keeps-sending-requests-while-monitoring
packages/react-databrowser/src/components/databrowser/components/display/display-list-edit.tsx
Outdated
Show resolved
Hide resolved
|
|
|
|
|
when the key is longer then the row width, we just cut the display sharply. we can maybe add gradient shadow etc. at the end of row, indicating the value is actually longer
|
|
|
|
|
|
I can't seem to add/edit items in streams and there's no warning or info about it |
|
|
|
|
|
When a structure is empty, we should show some information about this maybe
|
|
|
|
Also, my keys keep disappearing. I create a hash, remove all entries. switch tabs or something and boom it's gone from sidebar list |
|
|
|
When no selected keys, the right side remains at loading state
|
This is a bit more nuanced, to show the newly created key on the top, I modify the react query cache. But when you refresh the keys it does the usual ordering and the newly added key is pushed down to its normal place. One fix would be to store newly created keys in the global store and always show them on top but I am not sure I we would want that |
I added it to show the loading spinner, if I remove it the scroll would look glitched when showing and hiding spinner |
|
Closed since we are moving databrowser to it's own repo |
No description provided.