diff --git a/components/DebugStream.tsx b/components/DebugStream.tsx index 671dd7a..97c4b02 100644 --- a/components/DebugStream.tsx +++ b/components/DebugStream.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect } from "react"; import { proxy, ref, useSnapshot } from "valtio"; import { Select } from "."; -import state, { ILog } from "../state"; +import state, { ILog, transactionsState } from "../state"; import { extractJSON } from "../utils/json"; import LogBox from "./LogBox"; @@ -18,9 +18,10 @@ export const streamState = proxy({ const DebugStream = () => { const { selectedAccount, logs, socket } = useSnapshot(streamState); + const { activeHeader: activeTxTab } = useSnapshot(transactionsState); const { accounts } = useSnapshot(state); - const accountOptions = accounts.map((acc) => ({ + const accountOptions = accounts.map(acc => ({ label: acc.name, value: acc.address, })); @@ -33,7 +34,7 @@ const DebugStream = () => { options={accountOptions} hideSelectedOptions value={selectedAccount} - onChange={(acc) => (streamState.selectedAccount = acc as any)} + onChange={acc => (streamState.selectedAccount = acc as any)} css={{ width: "100%" }} /> @@ -133,6 +134,16 @@ const DebugStream = () => { socket.removeEventListener("error", onError); }; }, [prepareLog, selectedAccount?.value, socket]); + + useEffect(() => { + const account = transactionsState.transactions.find( + tx => tx.header === activeTxTab + )?.state.selectedAccount; + + if (account && account.value !== selectedAccount?.value) + streamState.selectedAccount = account; + }, [activeTxTab, selectedAccount?.value]); + return ( any; onCloseTab?: (index: number, header?: string) => any; + onChangeActive?: (index: number, header?: string) => any; } export const Tab = (props: TabProps) => null; @@ -52,11 +53,12 @@ export const Tabs = ({ keepAllAlive = false, onCreateNewTab, onCloseTab, + onChangeActive, defaultExtension = "", forceDefaultExtension, }: Props) => { const [active, setActive] = useState(activeIndex || 0); - const tabs: TabProps[] = children.map((elem) => elem.props); + const tabs: TabProps[] = children.map(elem => elem.props); const [isNewtabDialogOpen, setIsNewtabDialogOpen] = useState(false); const [tabname, setTabname] = useState(""); @@ -68,8 +70,9 @@ export const Tabs = ({ useEffect(() => { if (activeHeader) { - const idx = tabs.findIndex((tab) => tab.header === activeHeader); - setActive(idx); + const idx = tabs.findIndex(tab => tab.header === activeHeader); + if (idx !== -1) setActive(idx); + else setActive(0); } }, [activeHeader, tabs]); @@ -80,7 +83,7 @@ export const Tabs = ({ const validateTabname = useCallback( (tabname: string): { error: string | null } => { - if (tabs.find((tab) => tab.header === tabname)) { + if (tabs.find(tab => tab.header === tabname)) { return { error: "Name already exists." }; } return { error: null }; @@ -88,6 +91,14 @@ export const Tabs = ({ [tabs] ); + const handleActiveChange = useCallback( + (idx: number, header?: string) => { + setActive(idx); + onChangeActive?.(idx, header); + }, + [onChangeActive] + ); + const handleCreateTab = useCallback(() => { // add default extension in case omitted let _tabname = tabname.includes(".") ? tabname : tabname + defaultExtension; @@ -103,11 +114,20 @@ export const Tabs = ({ setIsNewtabDialogOpen(false); setTabname(""); - // switch to new tab? - setActive(tabs.length); onCreateNewTab?.(_tabname); - }, [tabname, defaultExtension, forceDefaultExtension, validateTabname, tabs.length, onCreateNewTab]); + + // switch to new tab? + handleActiveChange(tabs.length, _tabname); + }, [ + tabname, + defaultExtension, + forceDefaultExtension, + validateTabname, + onCreateNewTab, + handleActiveChange, + tabs.length, + ]); const handleCloseTab = useCallback( (idx: number) => { @@ -138,8 +158,8 @@ export const Tabs = ({ key={tab.header} role="tab" tabIndex={idx} - onClick={() => setActive(idx)} - onKeyPress={() => setActive(idx)} + onClick={() => handleActiveChange(idx, tab.header)} + onKeyPress={() => handleActiveChange(idx, tab.header)} outline={active !== idx} size="sm" css={{ @@ -195,8 +215,8 @@ export const Tabs = ({ setTabname(e.target.value)} - onKeyPress={(e) => { + onChange={e => setTabname(e.target.value)} + onKeyPress={e => { if (e.key === "Enter") { handleCreateTab(); } diff --git a/pages/test/[[...slug]].tsx b/pages/test/[[...slug]].tsx index 3780833..93e3652 100644 --- a/pages/test/[[...slug]].tsx +++ b/pages/test/[[...slug]].tsx @@ -5,7 +5,7 @@ import { Box, Container, Flex, Tab, Tabs } from "../../components"; import Transaction from "../../components/Transaction"; import state from "../../state"; import { getSplit, saveSplit } from "../../state/actions/persistSplits"; -import { transactionsState, modifyTransaction } from '../../state'; +import { transactionsState, modifyTransaction } from "../../state"; const DebugStream = dynamic(() => import("../../components/DebugStream"), { ssr: false, @@ -20,7 +20,7 @@ const Accounts = dynamic(() => import("../../components/Accounts"), { const Test = () => { const { transactionLogs } = useSnapshot(state); - const { transactions } = useSnapshot(transactionsState); + const { transactions, activeHeader } = useSnapshot(transactionsState); return ( { > { + if (header) transactionsState.activeHeader = header; + }} keepAllAlive forceDefaultExtension defaultExtension=".json" onCreateNewTab={header => modifyTransaction(header, {})} - onCloseTab={ - (idx, header) => - header && modifyTransaction(header, undefined) // TODO header should be a required field + onCloseTab={(idx, header) => + header && modifyTransaction(header, undefined) } > {transactions.map(({ header, state }) => ( diff --git a/state/transactions.ts b/state/transactions.ts index d53eb3e..2dbc861 100644 --- a/state/transactions.ts +++ b/state/transactions.ts @@ -18,6 +18,7 @@ export const transactionsState = proxy({ state: defaultTransaction, }, ], + activeHeader: "test1.json" }); /**