starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-23 09:08:32 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Remove some more key value usage

Browse Source
This commit is contained in:
Gregory Schier
2023-04-06 16:26:56 -07:00
parent b2524c1de0
commit 72bcc17799
4 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src-web/components/RequestResponse.tsx
View File

@@ -2,7 +2,8 @@ import useResizeObserver from '@react-hook/resize-observer';
import classnames from 'classnames'; import classnames from 'classnames';
import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
import React, { memo, useCallback, useMemo, useRef, useState } from 'react'; import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
import { useKeyValue } from '../hooks/useKeyValue'; import { useLocalStorage } from 'react-use';
import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
import { clamp } from '../lib/clamp'; import { clamp } from '../lib/clamp';
import { RequestPane } from './RequestPane'; import { RequestPane } from './RequestPane';
import { ResizeHandle } from './ResizeHandle'; import { ResizeHandle } from './ResizeHandle';
@@ -24,10 +25,10 @@ const STACK_VERTICAL_WIDTH = 650;
export const RequestResponse = memo(function RequestResponse({ style }: Props) { export const RequestResponse = memo(function RequestResponse({ style }: Props) {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [vertical, setVertical] = useState<boolean>(false); const [vertical, setVertical] = useState<boolean>(false);
const widthKv = useKeyValue<number>({ key: 'body_width', defaultValue: DEFAULT }); const [widthRaw, setWidth] = useLocalStorage<number>(`body_width::${useActiveWorkspaceId()}`);
const heightKv = useKeyValue<number>({ key: 'body_height', defaultValue: DEFAULT }); const [heightRaw, setHeight] = useLocalStorage<number>(`body_height::${useActiveWorkspaceId()}`);
const width = widthKv.value ?? DEFAULT; const width = widthRaw ?? DEFAULT;
const height = heightKv.value ?? DEFAULT; const height = heightRaw ?? DEFAULT;
const [isResizing, setIsResizing] = useState<boolean>(false); const [isResizing, setIsResizing] = useState<boolean>(false);
const moveState = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>( const moveState = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>(
null, null,
@@ -63,8 +64,8 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
}; };
const handleReset = useCallback( const handleReset = useCallback(
() => (vertical ? heightKv.set(DEFAULT) : widthKv.set(DEFAULT)), () => (vertical ? setHeight(DEFAULT) : setWidth(DEFAULT)),
[heightKv, vertical, widthKv], [setHeight, vertical, setWidth],
); );
const handleResizeStart = useCallback( const handleResizeStart = useCallback(
@@ -89,7 +90,7 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
MIN_HEIGHT_PX, MIN_HEIGHT_PX,
maxHeightPx, maxHeightPx,
); );
heightKv.set(newHeightPx / containerRect.height); setHeight(newHeightPx / containerRect.height);
} else { } else {
const maxWidthPx = containerRect.width - MIN_WIDTH_PX; const maxWidthPx = containerRect.width - MIN_WIDTH_PX;
const newWidthPx = clamp( const newWidthPx = clamp(
@@ -97,7 +98,7 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
MIN_WIDTH_PX, MIN_WIDTH_PX,
maxWidthPx, maxWidthPx,
); );
widthKv.set(newWidthPx / containerRect.width); setWidth(newWidthPx / containerRect.width);
} }
}, },
up: (e: MouseEvent) => { up: (e: MouseEvent) => {
@@ -110,7 +111,7 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
document.documentElement.addEventListener('mouseup', moveState.current.up); document.documentElement.addEventListener('mouseup', moveState.current.up);
setIsResizing(true); setIsResizing(true);
}, },
[width, height, vertical, heightKv, widthKv], [width, height, vertical, setHeight, setWidth],
); );
return ( return (

2
src-web/components/Workspace.tsx
View File

@@ -27,7 +27,7 @@ const body = { gridArea: 'body' };
const drag = { gridArea: 'drag' }; const drag = { gridArea: 'drag' };
export default function Workspace() { export default function Workspace() {
const { set: setWidth, value: width, reset: resetWidth } = useSidebarWidth(); const { setWidth, width, resetWidth } = useSidebarWidth();
const { show, hide, hidden, toggle } = useSidebarHidden(); const { show, hide, hidden, toggle } = useSidebarHidden();
const windowSize = useWindowSize(); const windowSize = useWindowSize();

4
src-web/hooks/useSidebarHidden.ts
View File

@@ -1,11 +1,13 @@
import { useMemo } from 'react'; import { useMemo } from 'react';
import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore'; import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
import { useActiveWorkspaceId } from './useActiveWorkspaceId';
import { useKeyValue } from './useKeyValue'; import { useKeyValue } from './useKeyValue';
export function useSidebarHidden() { export function useSidebarHidden() {
const activeWorkspaceId = useActiveWorkspaceId();
const { set, value } = useKeyValue<boolean>({ const { set, value } = useKeyValue<boolean>({
namespace: NAMESPACE_NO_SYNC, namespace: NAMESPACE_NO_SYNC,
key: 'sidebar_hidden', key: ['sidebar_hidden', activeWorkspaceId ?? 'n/a'],
defaultValue: false, defaultValue: false,
}); });

14
src-web/hooks/useSidebarWidth.ts
View File

@@ -1,10 +1,10 @@
import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore'; import { useCallback, useMemo } from 'react';
import { useKeyValue } from './useKeyValue'; import { useLocalStorage } from 'react-use';
import { useActiveWorkspaceId } from './useActiveWorkspaceId';
export function useSidebarWidth() { export function useSidebarWidth() {
return useKeyValue<number>({ const activeWorkspaceId = useActiveWorkspaceId();
namespace: NAMESPACE_NO_SYNC, const [width, setWidth] = useLocalStorage<number>(`sidebar_width::${activeWorkspaceId}`, 220);
key: 'sidebar_width', const resetWidth = useCallback(() => setWidth(220), [setWidth]);
defaultValue: 220, return useMemo(() => ({ width, setWidth, resetWidth }), [width, setWidth, resetWidth]);
});
} }