From e9ef8cbbe913a080f839f62adf3f53f3bef0b687 Mon Sep 17 00:00:00 2001 From: Simon Chan <1330321+yume-chan@users.noreply.github.com> Date: Thu, 9 Dec 2021 16:01:08 +0800 Subject: [PATCH] feat: add back log view --- apps/demo/components/connect.tsx | 12 ++--- apps/demo/components/index.ts | 2 +- .../components/{logger.tsx => log-view.tsx} | 48 ++++--------------- apps/demo/pages/_app.tsx | 8 ++-- apps/demo/state/global.ts | 11 ++++- 5 files changed, 29 insertions(+), 52 deletions(-) rename apps/demo/components/{logger.tsx => log-view.tsx} (75%) diff --git a/apps/demo/components/connect.tsx b/apps/demo/components/connect.tsx index 5cee002e..4cead7f0 100644 --- a/apps/demo/components/connect.tsx +++ b/apps/demo/components/connect.tsx @@ -3,7 +3,7 @@ import { Adb, AdbBackend } from '@yume-chan/adb'; import AdbWebUsbBackend, { AdbWebCredentialStore, AdbWebUsbBackendWatcher } from '@yume-chan/adb-backend-webusb'; import AdbWsBackend from '@yume-chan/adb-backend-ws'; import { observer } from 'mobx-react-lite'; -import { useCallback, useContext, useEffect, useMemo, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { global, logger } from '../state'; import { CommonStackTokens } from '../utils'; @@ -92,13 +92,13 @@ function _Connect(): JSX.Element | null { const connect = useCallback(async () => { try { if (selectedBackend) { - const adb = new Adb(selectedBackend, logger.logger); + const device = new Adb(selectedBackend, logger.logger); try { setConnecting(true); - await adb.connect(CredentialStore); - global.setCurrent(adb); + await device.connect(CredentialStore); + global.setDevice(device); } catch (e) { - adb.dispose(); + device.dispose(); throw e; } } @@ -111,7 +111,7 @@ function _Connect(): JSX.Element | null { const disconnect = useCallback(async () => { try { await global.device!.dispose(); - global.setCurrent(undefined); + global.setDevice(undefined); } catch (e: any) { global.showErrorDialog(e.message); } diff --git a/apps/demo/components/index.ts b/apps/demo/components/index.ts index 51f7c6e3..d55bd949 100644 --- a/apps/demo/components/index.ts +++ b/apps/demo/components/index.ts @@ -4,4 +4,4 @@ export * from './demo-mode'; export * from './device-view'; export * from './error-dialog'; export * from './external-link'; -export * from './logger'; +export * from './log-view'; diff --git a/apps/demo/components/logger.tsx b/apps/demo/components/log-view.tsx similarity index 75% rename from apps/demo/components/logger.tsx rename to apps/demo/components/log-view.tsx index 8e919127..03e7c44b 100644 --- a/apps/demo/components/logger.tsx +++ b/apps/demo/components/log-view.tsx @@ -2,8 +2,9 @@ import { IconButton, IListProps, List, mergeStyles, mergeStyleSets, Stack } from import { AdbPacketInit } from '@yume-chan/adb'; import { decodeUtf8 } from '@yume-chan/adb-backend-webusb'; import { DisposableList } from '@yume-chan/event'; +import { observer } from "mobx-react-lite"; import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; -import { logger } from "../state"; +import { global, logger } from "../state"; import { withDisplayName } from '../utils'; import { CommandBar } from './command-bar'; @@ -44,7 +45,7 @@ function serializePacket(packet: AdbPacketInit) { return parts.join(' '); } -const LoggerLine = withDisplayName('LoggerLine')(({ packet }: { packet: [string, AdbPacketInit]; }) => { +const LogLine = withDisplayName('LoggerLine')(({ packet }: { packet: [string, AdbPacketInit]; }) => { const string = useMemo(() => serializePacket(packet[1]), [packet]); return ( @@ -54,43 +55,13 @@ const LoggerLine = withDisplayName('LoggerLine')(({ packet }: { packet: [string, ); }); -export interface LoggerContextValue { - visible: boolean; - onVisibleChange: React.Dispatch>; -} - -export const LoggerContext = createContext(undefined); - -export const LoggerContextProvider = withDisplayName('LoggerContextProvider')(({ children }) => { - const [visible, setVisible] = useState(false); - const contextValue = useMemo(() => ({ - visible, - onVisibleChange: setVisible, - }), [visible, setVisible]); - - return ( - - {children} - - ); -}); - -export const ToggleLogger = withDisplayName('ToggleLogger')(() => { - const contextValue = useContext(LoggerContext); - const handleClick = useCallback(() => { - contextValue?.onVisibleChange(value => !value); - }, [contextValue]); - - if (!contextValue) { - return null; - } - +export const ToggleLogView = observer(() => { return ( ); }); @@ -109,14 +80,13 @@ function renderCell(item?: [string, AdbPacketInit]) { } return ( - + ); } -export const Logger = withDisplayName('Logger')(({ +export const LogView = observer(({ className, }: LoggerProps) => { - const contextValue = useContext(LoggerContext); const [packets, setPackets] = useState<[string, AdbPacketInit][]>([]); const scrollerRef = useRef(null); @@ -177,7 +147,7 @@ export const Logger = withDisplayName('Logger')(({ classNames['logger-container'], ), [className]); - if (!contextValue?.visible) { + if (!global.logVisible) { return null; } diff --git a/apps/demo/pages/_app.tsx b/apps/demo/pages/_app.tsx index e8ce7383..7e3731e5 100644 --- a/apps/demo/pages/_app.tsx +++ b/apps/demo/pages/_app.tsx @@ -3,7 +3,7 @@ import type { AppProps } from 'next/app'; import Link from 'next/link'; import { useRouter } from 'next/router'; import React, { useCallback, useEffect, useState } from "react"; -import { Connect, ErrorDialogProvider, Logger, ToggleLogger } from "../components"; +import { Connect, ErrorDialogProvider, LogView, ToggleLogView } from "../components"; import '../styles/globals.css'; initializeIcons(); @@ -97,7 +97,7 @@ function MyApp({ Component, pageProps }: AppProps) {
WebADB Demo
- + @@ -119,9 +119,9 @@ function MyApp({ Component, pageProps }: AppProps) { - - + + ); diff --git a/apps/demo/state/global.ts b/apps/demo/state/global.ts index bceae98b..66061b23 100644 --- a/apps/demo/state/global.ts +++ b/apps/demo/state/global.ts @@ -6,16 +6,19 @@ export class GlobalState { errorDialogVisible = false; errorDialogMessage = ''; + logVisible = false; + constructor() { makeAutoObservable(this, { hideErrorDialog: action.bound, + toggleLog: action.bound, }); } - setCurrent(device: Adb | undefined) { + setDevice(device: Adb | undefined) { this.device = device; device?.onDisconnected(() => { - this.setCurrent(undefined); + this.setDevice(undefined); }); } @@ -27,6 +30,10 @@ export class GlobalState { hideErrorDialog() { this.errorDialogVisible = false; } + + toggleLog() { + this.logVisible = !this.logVisible; + } } export const global = new GlobalState();