Rewritten to hooks

demo/App.js

@@ -18,7 +18,7 @@ import {
 } from 'react-native-debug-console';
 
 network.attach();
-log.attach(true);
+log.attach();
 context.hello = () => 'earth';
 
 console.log('fooo');

lib/src/components/DevTool/Console/Input.js

@@ -1,12 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   StyleSheet,
   View,
-  Text,
   TextInput,
 } from 'react-native';
 import styled from 'styled-components/native';
-import State from '../../data/State';
 import { context } from '../../../console';
 import log from '../../../log';
 import Icon from '../../base/Icon';
@@ -36,13 +34,11 @@ const styles = StyleSheet.create({
 
 const Input = ({
   logs,
-}) => (
+}) => {
-  <State>
+  const [text, setText] = useState('');
-    {({
+  const [history, setHistory] = useState([]);
-      text = '',
+  const [historyOffset, setHistoryOffset] = useState(); 
-      history = [],
+  return (
-      historyOffset,
-    }, setState) => (
     <View style={styles.container}>
       <Button
         onPress={() => {
@@ -50,10 +46,8 @@ const Input = ({
           currentOffset += 1;
           const index = history.length - 1 - currentOffset;
           if (history[index]) {
-              setState({
+            setText(history[index]);
-                text: history[index],
+            setHistoryOffset(currentOffset);
-                historyOffset: currentOffset,
-              });
           }
         }}
       >
@@ -66,10 +60,8 @@ const Input = ({
           currentOffset -= 1;
           const index = history.length - 1 - currentOffset;
           if (history[index]) {
-              setState({
+            setText(history[index]);
-                text: history[index],
+            setHistoryOffset(currentOffset);
-                historyOffset: currentOffset,
-              });
           }
         }}
       >
@@ -82,7 +74,7 @@ const Input = ({
         autoCorrect={false}
         style={styles.input}
         value={text}
-          onChangeText={text => setState({ text })}
+        onChangeText={text => setText(text)}
       />
       <Button
         onPress={() => {
@@ -92,11 +84,9 @@ const Input = ({
           const fn = new Function(...contextKeys, text);
           try {
             fn(...contextValues);
-              setState({
+            setText('');
-                text: '',
+            setHistoryOffset(undefined);
-                history: newHistory,
+            setHistory(newHistory);
-                historyOffset: undefined,
-              });
           } catch (err) {
             log.error([err]);
           }
@@ -105,8 +95,7 @@ const Input = ({
         <Icon name="play" />
       </Button>
     </View>
-    )}
+  );
-  </State>
+};
-);
 
 export default Input;

lib/src/components/DevTool/Console/index.js

@@ -1,11 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   StyleSheet,
   View,
 } from 'react-native';
 import log from '../../../log';
-import Log from '../../data/Log';
+import useLog from '../../data/log';
-import State from '../../data/State';
 import Toolbar, {
   Button,
   Selector,
@@ -33,15 +32,10 @@ const initFilters = [
 
 const Console = ({
   includeStackTrace,
-}) => (
+}) => {
-  <Log>
+  const logs = useLog();
-    {({ logs }) => (
+  const [filters, setFilters] = useState(initFilters);
-      <State
+  return (
-        initState={{
-          filters: initFilters,
-        }}
-      >
-        {({ filters }, setState) => (
     <View style={styles.container}>
       <Toolbar>
         <Selector
@@ -50,9 +44,7 @@ const Console = ({
           options={filters}
           multiSelect
           onSelect={(selected) => {
-                  setState({
+            setFilters([...selected]);
-                    filters: selected,
-                  });
           }}
         />
         <Seperator />
@@ -65,10 +57,7 @@ const Console = ({
       <Output filter={filters.filter(f => f.selected).map(f => f.name)} logs={logs} includeStackTrace={includeStackTrace} />
       <Input />
     </View>
-        )}
+  );
-      </State>
+};
-    )}
-  </Log>
-);
 
 export default Console;

lib/src/components/DevTool/Requests/index.js

@@ -1,11 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   StyleSheet,
   View,
 } from 'react-native';
 import network from '../../../network';
-import State from '../../data/State';
+import useRequests from '../../data/requests';
-import Network from '../../data/Network';
 import Toolbar, {
   Button,
   Seperator,
@@ -27,13 +26,9 @@ const styles = StyleSheet.create({
   },
 });
 let i = 0;
-const Console = () => (
+const Console = () => {
-  <State>
+  const requests = useRequests();
-    {({
+  const [active, setActive] = useState();
-      active,
-    }, setState) => (
-      <Network>
-        {({ requests }) => {
   const selected = active >= 0 ? requests[active] : undefined;
   return (
     <View style={styles.container}>
@@ -48,15 +43,11 @@ const Console = () => (
       <List
         selected={selected ? selected.id : undefined}
         requests={requests}
-                onSelect={(i) => setState({ active: i })}
+        onSelect={(i) => setActive(i)}
       />
       {selected && <Details {...selected} />}
     </View>
   );
-        }}
+}
-      </Network>
-    )}
-  </State>
-);
 
 export default Console;

lib/src/components/DevTool/Storage/index.js

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components/native';
-import Storage from '../../data/Storage';
+import useStorage from '../../data/storage';
-import State from '../../data/State';
 import Toolbar, {
   Button,
   Seperator,
@@ -15,11 +14,15 @@ const Wrapper = styled.View`
 
 const StorageView = ({
   provider,
-}) => (
+}) => {
-  <State>
+  const [selected, setSelected] = useState();
-    {({ selected }, setState) => (
+  const {
-      <Storage provider={provider}>
+    data,
-        {(data, update, removeItem, clear) => (
+    update,
+    removeItem,
+    clear,
+  } = useStorage(provider);
+  return (
     <Wrapper>
       <Toolbar>
         <Seperator />
@@ -42,17 +45,16 @@ const StorageView = ({
       </Toolbar>
       <Keys
         selected={selected}
-              onSelect={(key) => setState({ selected: key })}
+        onSelect={(key) => {
+          setSelected(key);
+        }}
         keys={Object.keys(data)}
       />
       {selected && data[selected] && (
         <Value value={data[selected]} />
       )}
     </Wrapper>
-        )}
+  );
-      </Storage>
+};
-    )}
-  </State>
-);
 
 export default StorageView;

lib/src/components/DevTool/Tab.js

@@ -1,13 +1,11 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import styled from 'styled-components/native';
 import PropTypes from 'prop-types';
 import {
   Text,
   StyleSheet,
-  TouchableOpacity,
   View,
 } from 'react-native';
-import State from '../data/State';
 import Icon from '../base/Icon';
 
 const styles = StyleSheet.create({
@@ -67,15 +65,10 @@ const Console = ({
   tabs,
   onClose,
   onDownload,
-}) => (
+}) => {
+  const [active, setActive] = useState(0);
+  return (
     <View style={styles.container}>
-    <State
-      initState={{
-        active: 0,
-      }}
-    >
-    {({ active }, setState) => (
-      <Fragment>
       <Header>
         <TabScroll horizontal>
           <TabWrapper>
@@ -84,7 +77,7 @@ const Console = ({
                 key={name}
                 style={active === i ? styles.tabActive : styles.tabInactive}
                 onPress={() => {
-                    setState({ active: i });
+                  setActive(i);
                 }}
               >
                 <Text>{name}</Text>
@@ -108,11 +101,9 @@ const Console = ({
         )}
       </Header>
       {tabs[active] && tabs[active].view}
-      </Fragment>
-    )}
-    </State>
     </View>
-);
+  );
+};
 
 Console.propTypes = {
   tabs: PropTypes.arrayOf(PropTypes.shape({

lib/src/components/base/Toolbar/Selector.js

@@ -1,9 +1,8 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import {
   SafeAreaView,
   TouchableOpacity,
 } from 'react-native';
-import State from '../../data/State';
 import Button from './Button';
 import Row from '../Row';
 import Icon from '../Icon';
@@ -17,14 +16,14 @@ const Selector = ({
   onSelect,
   options = [],
   ...others
-}) => (
+}) => {
-  <State>
+  const [open, setOpen] = useState(false);
-    {({ open }, setState) => (
+  return (
       <Fragment>
         <Button
           {...others}
           onPress={() => {
-            setState({ open: true })
+            setOpen(true);
           }}
         />
         <Modal
@@ -32,7 +31,7 @@ const Selector = ({
           transparent={false}
           visible={!!open}
           onRequestClose={() => {
-            setState({ open: false })
+            setOpen(false);
           }}
         >
           <SafeAreaView
@@ -43,7 +42,7 @@ const Selector = ({
               name="Close"
               icon="close"
               onPress={() => {
-                setState({ open: false })
+                setOpen(false);
               }}
             />
             {options.map((option) => (
@@ -69,8 +68,7 @@ const Selector = ({
           </SafeAreaView>
         </Modal>
       </Fragment>
-    )}
+  );
-  </State>
+};
-);
 
 export default Selector;

lib/src/components/data/Log.js

@@ -1,38 +1,19 @@
-import { Component } from 'react';
+import { useEffect, useState } from 'react';
 import log from '../../log';
 
-class Log extends Component {
+const useLog = () => {
-  constructor() {
+  const [logs, setLogs] = useState([]);
-    super();
+  useEffect(() => {
-    this.state = {
+    const update = (newLogs) => {
-      logs: [],
+      setLogs([...newLogs]);
-    };
-    this.setLogs = this.setLogs.bind(this);
     }
+    log.listen(update);
 
-  componentDidMount() {
+    return () => {
-    log.listen(this.setLogs);
+      log.unlisten(update);
     }
+  }, []);
+  return logs;
+};
 
-  componentWillUnmount() {
+export default useLog;
-    log.unlisten(this.setLogs);
-  }
-
-  setLogs(logs) {
-    this.setState({
-      logs,
-    });
-  }
-
-  render() {
-    const {
-      children,
-    } = this.props;
-    const component = children(
-      this.state,
-    );
-    return component;
-  }
-}
-
-export default Log;

lib/src/components/data/Network.js

@@ -1,38 +0,0 @@
-import { Component } from 'react';
-import network from '../../network';
-
-class Network extends Component {
-  constructor() {
-    super();
-    this.state = {
-      requests: [],
-    };
-    this.setRequests = this.setRequests.bind(this);
-  }
-
-  componentDidMount() {
-    network.listen(this.setRequests);
-  }
-
-  componentWillUnmount() {
-    network.unlisten(this.setRequests);
-  }
-
-  setRequests(requests) {
-    this.setState({
-      requests,
-    });
-  }
-
-  render() {
-    const {
-      children,
-    } = this.props;
-    const component = children(
-      this.state,
-    );
-    return component;
-  }
-}
-
-export default Network;

lib/src/components/data/State.js

@@ -1,20 +0,0 @@
-import React, { Component } from 'react';
-
-class State extends Component {
-  constructor(props, ...others) {
-    super(props, ...others);
-    this.state = props.initState || {};
-    this.setState = this.setState.bind(this);
-  }
-
-  render() {
-    const { children } = this.props;
-    const component = children(
-      this.state,
-      this.setState,
-    );
-    return component;
-  }
-}
-
-export default State;

lib/src/components/data/Storage.js

@@ -1,57 +1,40 @@
-import { Component } from 'react';
+import { useState, useEffect } from 'react';
 
-class Storage extends Component {
+const useStorage = (provider) => {
-  constructor() {
+  const [data, setData] = useState({});
-    super();
-    this.state = {
-      data: {},
-    };
-    this.update = this.update.bind(this);
-    this.removeItem = this.removeItem.bind(this);
-    this.clear = this.clear.bind(this);
-  }
 
-  componentDidMount() {
+  const update = async () => {
-    this.update();
+    const keys = await provider.getAllKeys();
-  }
+    const values = await Promise.all(keys.map(key => provider.getItem(key)));
-
-  async removeItem(name) {
-    await this.props.provider.removeItem(name);
-    await this.update();
-  }
-
-  async clear() {
-    await this.props.provider.clear();
-    await this.update();
-  }
-
-  async update() {
-    try {
-      const keys = await this.props.provider.getAllKeys();
-      const values = await Promise.all(keys.map(key => this.props.provider.getItem(key)));
     const data = {};
     for (let i = 0; i < keys.length; i++) {
       const key = keys[i];
       const value = values[i];
       data[key] = value;
     }
-      this.setState({
+    setData(data);
-        data,
+  };
-      });
+
-    } catch (err) {
+  const removeItem = async (name) => {
-      console.error(err);
+    await provider.removeItem(name);
-    }
+    await update();
   }
 
-  render() {
+  const clear = async () => {
-    const {
+    await provider.clear();
-      children,
+    await update();
-    } = this.props;
+  }
-    const {
+
+  useEffect(() => {
+    update().catch(err => console.error(err));
+  }, []);
+
+  return {
     data,
-    } = this.state;
+    update,
-    return children(data, this.update, this.removeItem, this.clear);
+    removeItem,
+    clear,
   }
 }
 
-export default Storage;
+export default useStorage;

lib/src/components/data/requests.js

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+import network from '../../network';
+
+const useRequests = () => {
+  const [requests, setRequests] = useState([]);
+  useEffect(() => {
+    const update = (newRequests) => {
+      setRequests(newRequests);
+    };
+
+    network.listen(update);
+    return () => {
+      network.unlisten(update);
+    };
+  }, []);
+  return requests;
+};
+
+export default useRequests;