diff --git a/demo/App.js b/demo/App.js
index c9d4af3..50ce944 100644
--- a/demo/App.js
+++ b/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');
diff --git a/lib/src/components/DevTool/Console/Input.js b/lib/src/components/DevTool/Console/Input.js
index 3da143a..5ecd9a2 100644
--- a/lib/src/components/DevTool/Console/Input.js
+++ b/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,77 +34,68 @@ const styles = StyleSheet.create({
const Input = ({
logs,
-}) => (
-
- {({
- text = '',
- history = [],
- historyOffset,
- }, setState) => (
-
-
-
- setState({ text })}
- />
-
-
- )}
-
-);
+}) => {
+ const [text, setText] = useState('');
+ const [history, setHistory] = useState([]);
+ const [historyOffset, setHistoryOffset] = useState();
+ return (
+
+
+
+ setText(text)}
+ />
+
+
+ );
+};
export default Input;
diff --git a/lib/src/components/DevTool/Console/index.js b/lib/src/components/DevTool/Console/index.js
index 8008c53..ea1c5bb 100644
--- a/lib/src/components/DevTool/Console/index.js
+++ b/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 State from '../../data/State';
+import useLog from '../../data/log';
import Toolbar, {
Button,
Selector,
@@ -33,42 +32,32 @@ const initFilters = [
const Console = ({
includeStackTrace,
-}) => (
-
- {({ logs }) => (
-
- {({ filters }, setState) => (
-
-
- {
- setState({
- filters: selected,
- });
- }}
- />
-
-
-
- )}
-
- )}
-
-);
+}) => {
+ const logs = useLog();
+ const [filters, setFilters] = useState(initFilters);
+ return (
+
+
+ {
+ setFilters([...selected]);
+ }}
+ />
+
+
+
+ );
+};
export default Console;
diff --git a/lib/src/components/DevTool/Requests/index.js b/lib/src/components/DevTool/Requests/index.js
index 0363f9d..00505fb 100644
--- a/lib/src/components/DevTool/Requests/index.js
+++ b/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 Network from '../../data/Network';
+import useRequests from '../../data/requests';
import Toolbar, {
Button,
Seperator,
@@ -27,36 +26,28 @@ const styles = StyleSheet.create({
},
});
let i = 0;
-const Console = () => (
-
- {({
- active,
- }, setState) => (
-
- {({ requests }) => {
- const selected = active >= 0 ? requests[active] : undefined;
- return (
-
-
-
-
- setState({ active: i })}
- />
- {selected &&
- );
- }}
-
- )}
-
-);
+const Console = () => {
+ const requests = useRequests();
+ const [active, setActive] = useState();
+ const selected = active >= 0 ? requests[active] : undefined;
+ return (
+
+
+
+
+ setActive(i)}
+ />
+ {selected &&
+ );
+}
export default Console;
diff --git a/lib/src/components/DevTool/Storage/index.js b/lib/src/components/DevTool/Storage/index.js
index 6c0a131..1538718 100644
--- a/lib/src/components/DevTool/Storage/index.js
+++ b/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 State from '../../data/State';
+import useStorage from '../../data/storage';
import Toolbar, {
Button,
Seperator,
@@ -15,44 +14,47 @@ const Wrapper = styled.View`
const StorageView = ({
provider,
-}) => (
-
- {({ selected }, setState) => (
-
- {(data, update, removeItem, clear) => (
-
-
-
-
-
-
- setState({ selected: key })}
- keys={Object.keys(data)}
- />
- {selected && data[selected] && (
-
- )}
-
- )}
-
- )}
-
-);
+}) => {
+ const [selected, setSelected] = useState();
+ const {
+ data,
+ update,
+ removeItem,
+ clear,
+ } = useStorage(provider);
+ return (
+
+
+
+
+
+
+ {
+ setSelected(key);
+ }}
+ keys={Object.keys(data)}
+ />
+ {selected && data[selected] && (
+
+ )}
+
+ );
+};
export default StorageView;
diff --git a/lib/src/components/DevTool/Tab.js b/lib/src/components/DevTool/Tab.js
index ff31869..46ef4c8 100644
--- a/lib/src/components/DevTool/Tab.js
+++ b/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,52 +65,45 @@ const Console = ({
tabs,
onClose,
onDownload,
-}) => (
-
-
- {({ active }, setState) => (
-
-
-
-
- {tabs.map(({ name }, i) => (
- {
- setState({ active: i });
- }}
- >
- {name}
-
- ))}
-
-
- {onDownload && (
-
- )}
- {onClose && (
-
- )}
-
- {tabs[active] && tabs[active].view}
-
- )}
-
-
-);
+}) => {
+ const [active, setActive] = useState(0);
+ return (
+
+
+
+
+ {tabs.map(({ name }, i) => (
+ {
+ setActive(i);
+ }}
+ >
+ {name}
+
+ ))}
+
+
+ {onDownload && (
+
+ )}
+ {onClose && (
+
+ )}
+
+ {tabs[active] && tabs[active].view}
+
+ );
+};
Console.propTypes = {
tabs: PropTypes.arrayOf(PropTypes.shape({
diff --git a/lib/src/components/base/Toolbar/Selector.js b/lib/src/components/base/Toolbar/Selector.js
index 712554d..e80cebd 100644
--- a/lib/src/components/base/Toolbar/Selector.js
+++ b/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
-}) => (
-
- {({ open }, setState) => (
+}) => {
+ const [open, setOpen] = useState(false);
+ return (
- )}
-
-);
+ );
+};
export default Selector;
\ No newline at end of file
diff --git a/lib/src/components/data/Log.js b/lib/src/components/data/Log.js
index 468244b..7777ab1 100644
--- a/lib/src/components/data/Log.js
+++ b/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 {
- constructor() {
- super();
- this.state = {
- logs: [],
- };
- this.setLogs = this.setLogs.bind(this);
- }
+const useLog = () => {
+ const [logs, setLogs] = useState([]);
+ useEffect(() => {
+ const update = (newLogs) => {
+ setLogs([...newLogs]);
+ }
+ log.listen(update);
- componentDidMount() {
- log.listen(this.setLogs);
- }
+ return () => {
+ log.unlisten(update);
+ }
+ }, []);
+ return logs;
+};
- componentWillUnmount() {
- log.unlisten(this.setLogs);
- }
-
- setLogs(logs) {
- this.setState({
- logs,
- });
- }
-
- render() {
- const {
- children,
- } = this.props;
- const component = children(
- this.state,
- );
- return component;
- }
-}
-
-export default Log;
+export default useLog;
diff --git a/lib/src/components/data/Network.js b/lib/src/components/data/Network.js
deleted file mode 100644
index e3b6c8d..0000000
--- a/lib/src/components/data/Network.js
+++ /dev/null
@@ -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;
diff --git a/lib/src/components/data/State.js b/lib/src/components/data/State.js
deleted file mode 100644
index b40480a..0000000
--- a/lib/src/components/data/State.js
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/lib/src/components/data/Storage.js b/lib/src/components/data/Storage.js
index 81fd007..80fabe2 100644
--- a/lib/src/components/data/Storage.js
+++ b/lib/src/components/data/Storage.js
@@ -1,57 +1,40 @@
-import { Component } from 'react';
+import { useState, useEffect } from 'react';
-class Storage extends Component {
- constructor() {
- super();
- this.state = {
- data: {},
- };
- this.update = this.update.bind(this);
- this.removeItem = this.removeItem.bind(this);
- this.clear = this.clear.bind(this);
- }
+const useStorage = (provider) => {
+ const [data, setData] = useState({});
- componentDidMount() {
- this.update();
- }
-
- 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({
- data,
- });
- } catch (err) {
- console.error(err);
+ const update = async () => {
+ const keys = await provider.getAllKeys();
+ const values = await Promise.all(keys.map(key => provider.getItem(key)));
+ const data = {};
+ for (let i = 0; i < keys.length; i++) {
+ const key = keys[i];
+ const value = values[i];
+ data[key] = value;
}
+ setData(data);
+ };
+
+ const removeItem = async (name) => {
+ await provider.removeItem(name);
+ await update();
}
- render() {
- const {
- children,
- } = this.props;
- const {
- data,
- } = this.state;
- return children(data, this.update, this.removeItem, this.clear);
+ const clear = async () => {
+ await provider.clear();
+ await update();
+ }
+
+ useEffect(() => {
+ update().catch(err => console.error(err));
+ }, []);
+
+ return {
+ data,
+ update,
+ removeItem,
+ clear,
}
}
-export default Storage;
+export default useStorage;
diff --git a/lib/src/components/data/requests.js b/lib/src/components/data/requests.js
new file mode 100644
index 0000000..7fd7eab
--- /dev/null
+++ b/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;