starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-01-11 20:00:29 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Move saved tab state to jotai with LS

Browse Source
This commit is contained in:
Gregory Schier
2025-01-06 17:06:56 -08:00
parent bc50891edb
commit a164875104
2 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src-web/components/GrpcConnectionSetupPane.tsx
View File

@@ -1,9 +1,10 @@
import useSize from '@react-hook/size';
import type { GrpcMetadataEntry, GrpcRequest } from '@yaakapp-internal/models';
import classNames from 'classnames';
import { useAtom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';
import type { CSSProperties } from 'react';
import React, { useCallback, useMemo, useRef } from 'react';
import { useLocalStorage } from 'react-use';
import type { ReflectResponseService } from '../hooks/useGrpc';
import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
import { useUpdateAnyGrpcRequest } from '../hooks/useUpdateAnyGrpcRequest';
@@ -51,6 +52,8 @@ const TAB_METADATA = 'metadata';
const TAB_AUTH = 'auth';
const TAB_DESCRIPTION = 'description';
const tabsAtom = atomWithStorage<Record<string, string>>('grpcRequestPaneActiveTabs', {});
export function GrpcConnectionSetupPane({
style,
services,
@@ -66,10 +69,7 @@ export function GrpcConnectionSetupPane({
onSend,
}: Props) {
const updateRequest = useUpdateAnyGrpcRequest();
const [activeTabs, setActiveTabs] = useLocalStorage<Record<string, string>>(
'grpcRequestPaneActiveTabs',
{},
);
const [activeTabs, setActiveTabs] = useAtom(tabsAtom);
const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);
const urlContainerEl = useRef<HTMLDivElement>(null);

14
src-web/components/RequestPane.tsx
View File

@@ -1,9 +1,9 @@
import type { HttpRequest } from '@yaakapp-internal/models';
import classNames from 'classnames';
import { atom, useAtomValue } from 'jotai';
import { atom, useAtom, useAtomValue } from 'jotai';
import { atomWithStorage } from 'jotai/utils';
import type { CSSProperties } from 'react';
import React, { memo, useCallback, useMemo, useState } from 'react';
import { useLocalStorage } from 'react-use';
import { activeRequestIdAtom } from '../hooks/useActiveRequestId';
import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
@@ -71,6 +71,8 @@ const TAB_HEADERS = 'headers';
const TAB_AUTH = 'auth';
const TAB_DESCRIPTION = 'description';
const tabsAtom = atomWithStorage<Record<string, string>>('requestPaneActiveTabs', {});
const nonActiveRequestUrlsAtom = atom((get) => {
const activeRequestId = get(activeRequestIdAtom);
const requests = [...get(httpRequestsAtom), ...get(grpcRequestsAtom)];
@@ -89,10 +91,7 @@ export const RequestPane = memo(function RequestPane({
}: Props) {
const activeRequestId = activeRequest.id;
const { mutateAsync: updateRequestAsync, mutate: updateRequest } = useUpdateAnyHttpRequest();
const [activeTabs, setActiveTabs] = useLocalStorage<Record<string, string>>(
'requestPaneActiveTabs',
{},
);
const [activeTabs, setActiveTabs] = useAtom(tabsAtom);
const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState<number>(0);
const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null);
const [{ urlKey }] = useRequestEditor();
@@ -299,6 +298,7 @@ export const RequestPane = memo(function RequestPane({
);
const activeTab = activeTabs?.[activeRequestId];
console.log('ACTIVE TAB', activeTab);
const setActiveTab = useCallback(
(tab: string) => {
setActiveTabs((r) => ({ ...r, [activeRequest.id]: tab }));
@@ -489,7 +489,7 @@ export const RequestPane = memo(function RequestPane({
defaultValue={activeRequest.name}
className="font-sans !text-xl !px-0"
containerClassName="border-0"
placeholder={activeRequest.id}
placeholder="Request Name"
onChange={(name) => updateRequest({ id: activeRequestId, update: { name } })}
/>
<MarkdownEditor