diff --git a/packages/cozy-devtools/package.json b/packages/cozy-devtools/package.json index 273d6b3181..7d74760be4 100644 --- a/packages/cozy-devtools/package.json +++ b/packages/cozy-devtools/package.json @@ -1,6 +1,6 @@ { "name": "cozy-devtools", - "version": "0.1.0", + "version": "1.0.0", "description": "Cozy-Devtools exposes a devtool that can be injected in an app for debug and better developer experience.", "main": "dist/index.js", "license": "MIT", diff --git a/packages/cozy-devtools/src/Pouch.jsx b/packages/cozy-devtools/src/Pouch.jsx index f5c470fd4f..9c9abb404f 100644 --- a/packages/cozy-devtools/src/Pouch.jsx +++ b/packages/cozy-devtools/src/Pouch.jsx @@ -33,8 +33,7 @@ const DoctypeSyncInfo = ({ link, doctype }) => { } /** - * Allows to view state and manage the PouchLink of the current cozy - * client. + * Allows to view state and manage the PouchLink of the current cozy client */ const PouchDevTool = () => { const client = useClient() diff --git a/packages/cozy-devtools/src/Queries.jsx b/packages/cozy-devtools/src/Queries.jsx index 174f0ee9c8..92bfef7713 100644 --- a/packages/cozy-devtools/src/Queries.jsx +++ b/packages/cozy-devtools/src/Queries.jsx @@ -5,6 +5,7 @@ import sortBy from 'lodash/sortBy' import React, { useState, useMemo, useCallback } from 'react' import { TableInspector, ObjectInspector } from 'react-inspector' +import { useClient } from 'cozy-client' import Box from 'cozy-ui/transpiled/react/Box' import Grid from 'cozy-ui/transpiled/react/Grid' import ListItem from 'cozy-ui/transpiled/react/ListItem' @@ -104,7 +105,8 @@ const makeMatcher = search => { return overEvery(conditions) } -const QueryData = ({ client, data, doctype }) => { +const QueryData = ({ data, doctype }) => { + const client = useClient() const [showTable, setShowTable] = useState(false) const documents = client.store.getState().cozy.documents[doctype] @@ -178,7 +180,8 @@ const ObjectInspectorAndStringificator = ({ object }) => { ) } -const QueryStateView = ({ client, name }) => { +const QueryStateView = ({ name }) => { + const client = useClient() /** * @type {import("../types").QueryState} */ @@ -253,16 +256,13 @@ const QueryStateView = ({ client, name }) => { - + ) } -const QueryListItem = ({ name, selected, client, onClick }) => { +const QueryListItem = ({ name, selected, onClick }) => { + const client = useClient() const queryState = client.store.getState().cozy.queries[name] const lastUpdate = useMemo( () => format(new Date(queryState.lastUpdate), 'HH:mm:ss'), @@ -307,7 +307,8 @@ const ExecutionTime = ({ queryState }) => { ) } -const QueryPanels = ({ client }) => { +const QueryPanels = () => { + const client = useClient() const queries = client.store.getState().cozy.queries const sortedQueries = useMemo(() => { @@ -329,7 +330,6 @@ const QueryPanels = ({ client }) => { {sortedQueries.map(queryName => { return ( setSelectedQuery(queryName)} @@ -346,9 +346,7 @@ const QueryPanels = ({ client }) => { {selectedQuery} - {selectedQuery ? ( - - ) : null} + {selectedQuery ? : null} diff --git a/packages/cozy-devtools/src/index.jsx b/packages/cozy-devtools/src/index.jsx index af3befbf41..53eb8c9b1e 100644 --- a/packages/cozy-devtools/src/index.jsx +++ b/packages/cozy-devtools/src/index.jsx @@ -1,6 +1,5 @@ import React, { useCallback, useMemo, useRef } from 'react' -import { useClient } from 'cozy-client' import Box from 'cozy-ui/transpiled/react/Box' import Fab from 'cozy-ui/transpiled/react/Fab' import Grid from 'cozy-ui/transpiled/react/Grid' @@ -119,19 +118,19 @@ const ResizeBar = ({ ...props }) => { } const DevToolsPanel = props => { - const { panels: userPanels, open, client } = props + const { panels: userPanels, open } = props const panels = useMemo(() => { if (userPanels) { return [...defaultPanels, ...userPanels] } return defaultPanels }, [userPanels]) + const [currentPanel, setCurrentPanel] = useLocalState( 'cozydevtools__panel', 'queries' ) const ref = useRef() - const [panelHeight, setPanelHeight] = useLocalState( 'cozydevtools__height', DEFAULT_PANEL_HEIGHT @@ -197,7 +196,7 @@ const DevToolsPanel = props => { {panels.map(panelOptions => currentPanel === panelOptions.id ? ( - + ) : null )} @@ -208,15 +207,6 @@ const DevToolsPanel = props => { const DevTools = ({ panels }) => { const classes = useStyles() - const client = useClient() - - // eslint-disable-next-line no-console - console.info(' ') - // eslint-disable-next-line no-console - console.info('🟢 client :', client) - // eslint-disable-next-line no-console - console.info(' ') - const [open, setOpen] = useLocalState('cozydevtools__open', false) const handleToggle = useCallback(() => setOpen(state => !state), [setOpen]) @@ -227,7 +217,6 @@ const DevTools = ({ panels }) => {