feat(cozy-devtools): Remove logs and use hook to get client

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",

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()

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 }) => {
           </TableBody>
         </Table>
       </TableContainer>
-      <QueryData
-        client={client}
-        data={data}
-        doctype={queryState.definition.doctype}
-      />
+      <QueryData data={data} doctype={queryState.definition.doctype} />
     </>
   )
 }
 
-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 (
             <QueryListItem
-              client={client}
               name={queryName}
               key={queryName}
               onClick={() => setSelectedQuery(queryName)}
@@ -346,9 +346,7 @@ const QueryPanels = ({ client }) => {
       <Box clone p={1} minWidth={400}>
         <Grid item style={styles.panelRight}>
           <Typography variant="subtitle1">{selectedQuery}</Typography>
-          {selectedQuery ? (
-            <QueryStateView client={client} name={selectedQuery} />
-          ) : null}
+          {selectedQuery ? <QueryStateView name={selectedQuery} /> : null}
         </Grid>
       </Box>
     </>

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 => {
           </ListGridItem>
           {panels.map(panelOptions =>
             currentPanel === panelOptions.id ? (
-              <panelOptions.Component key={panelOptions.id} client={client} />
+              <panelOptions.Component key={panelOptions.id} />
             ) : null
           )}
         </Grid>
@@ -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 }) => {
       </Fab>
 
       <DevToolsPanel
-        client={client}
         open={open}
         className={classes.panel}
         onClose={handleToggle}