From 41b4d3b115558950f05d0d04f910c0f8403f4807 Mon Sep 17 00:00:00 2001
From: Morten Olsen <morten@olsen.pro>
Date: Fri, 5 Jul 2019 13:38:02 +0200
Subject: [PATCH] Rewritten to hooks

---
 demo/App.js                                  |   2 +-
 lib/src/components/DevTool/Console/Input.js  | 139 +++++++++----------
 lib/src/components/DevTool/Console/index.js  |  69 ++++-----
 lib/src/components/DevTool/Requests/index.js |  59 ++++----
 lib/src/components/DevTool/Storage/index.js  |  86 ++++++------
 lib/src/components/DevTool/Tab.js            |  89 ++++++------
 lib/src/components/base/Toolbar/Selector.js  |  20 ++-
 lib/src/components/data/Log.js               |  49 ++-----
 lib/src/components/data/Network.js           |  38 -----
 lib/src/components/data/State.js             |  20 ---
 lib/src/components/data/Storage.js           |  81 +++++------
 lib/src/components/data/requests.js          |  19 +++
 12 files changed, 278 insertions(+), 393 deletions(-)
 delete mode 100644 lib/src/components/data/Network.js
 delete mode 100644 lib/src/components/data/State.js
 create mode 100644 lib/src/components/data/requests.js

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,
-}) => (
-  <State>
-    {({
-      text = '',
-      history = [],
-      historyOffset,
-    }, setState) => (
-      <View style={styles.container}>
-        <Button
-          onPress={() => {
-            let currentOffset = typeof historyOffset === 'undefined' ? -1 : historyOffset;
-            currentOffset += 1;
-            const index = history.length - 1 - currentOffset;
-            if (history[index]) {
-              setState({
-                text: history[index],
-                historyOffset: currentOffset,
-              });
-            }
-          }}
-        >
-          <Icon name="left" />
-        </Button>
-        <Button
-          title=">"
-          onPress={() => {
-            let currentOffset = typeof historyOffset === 'undefined' ? -1 : historyOffset;
-            currentOffset -= 1;
-            const index = history.length - 1 - currentOffset;
-            if (history[index]) {
-              setState({
-                text: history[index],
-                historyOffset: currentOffset,
-              });
-            }
-          }}
-        >
-          <Icon name="right" />
-        </Button>
-        <TextInput
-          multiline
-          placeholder="{your code here}"
-          autoCapitalize="none"
-          autoCorrect={false}
-          style={styles.input}
-          value={text}
-          onChangeText={text => setState({ text })}
-        />
-        <Button
-          onPress={() => {
-            const newHistory = [...history, text];
-            const contextKeys = Object.keys(context);
-            const contextValues = Object.values(context);
-            const fn = new Function(...contextKeys, text);
-            try {
-              fn(...contextValues);
-              setState({
-                text: '',
-                history: newHistory,
-                historyOffset: undefined,
-              });
-            } catch (err) {
-              log.error([err]);
-            }
-          }}
-        >
-          <Icon name="play" />
-        </Button>
-      </View>
-    )}
-  </State>
-);
+}) => {
+  const [text, setText] = useState('');
+  const [history, setHistory] = useState([]);
+  const [historyOffset, setHistoryOffset] = useState(); 
+  return (
+    <View style={styles.container}>
+      <Button
+        onPress={() => {
+          let currentOffset = typeof historyOffset === 'undefined' ? -1 : historyOffset;
+          currentOffset += 1;
+          const index = history.length - 1 - currentOffset;
+          if (history[index]) {
+            setText(history[index]);
+            setHistoryOffset(currentOffset);
+          }
+        }}
+      >
+        <Icon name="left" />
+      </Button>
+      <Button
+        title=">"
+        onPress={() => {
+          let currentOffset = typeof historyOffset === 'undefined' ? -1 : historyOffset;
+          currentOffset -= 1;
+          const index = history.length - 1 - currentOffset;
+          if (history[index]) {
+            setText(history[index]);
+            setHistoryOffset(currentOffset);
+          }
+        }}
+      >
+        <Icon name="right" />
+      </Button>
+      <TextInput
+        multiline
+        placeholder="{your code here}"
+        autoCapitalize="none"
+        autoCorrect={false}
+        style={styles.input}
+        value={text}
+        onChangeText={text => setText(text)}
+      />
+      <Button
+        onPress={() => {
+          const newHistory = [...history, text];
+          const contextKeys = Object.keys(context);
+          const contextValues = Object.values(context);
+          const fn = new Function(...contextKeys, text);
+          try {
+            fn(...contextValues);
+            setText('');
+            setHistoryOffset(undefined);
+            setHistory(newHistory);
+          } catch (err) {
+            log.error([err]);
+          }
+        }}
+      >
+        <Icon name="play" />
+      </Button>
+    </View>
+  );
+};
 
 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,
-}) => (
-  <Log>
-    {({ logs }) => (
-      <State
-        initState={{
-          filters: initFilters,
-        }}
-      >
-        {({ filters }, setState) => (
-          <View style={styles.container}>
-            <Toolbar>
-              <Selector
-                name="Filter"
-                icon="filter"
-                options={filters}
-                multiSelect
-                onSelect={(selected) => {
-                  setState({
-                    filters: selected,
-                  });
-                }}
-              />
-              <Seperator />
-              <Button
-                name="Clear"
-                icon="trash"
-                onPress={() => log.clear()}
-              />
-            </Toolbar>
-            <Output filter={filters.filter(f => f.selected).map(f => f.name)} logs={logs} includeStackTrace={includeStackTrace} />
-            <Input />
-          </View>
-        )}
-      </State>
-    )}
-  </Log>
-);
+}) => {
+  const logs = useLog();
+  const [filters, setFilters] = useState(initFilters);
+  return (
+    <View style={styles.container}>
+      <Toolbar>
+        <Selector
+          name="Filter"
+          icon="filter"
+          options={filters}
+          multiSelect
+          onSelect={(selected) => {
+            setFilters([...selected]);
+          }}
+        />
+        <Seperator />
+        <Button
+          name="Clear"
+          icon="trash"
+          onPress={() => log.clear()}
+        />
+      </Toolbar>
+      <Output filter={filters.filter(f => f.selected).map(f => f.name)} logs={logs} includeStackTrace={includeStackTrace} />
+      <Input />
+    </View>
+  );
+};
 
 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 = () => (
-  <State>
-    {({
-      active,
-    }, setState) => (
-      <Network>
-        {({ requests }) => {
-          const selected = active >= 0 ? requests[active] : undefined;
-          return (
-            <View style={styles.container}>
-              <Toolbar>
-                <Seperator />
-                <Button
-                  name="Clear"
-                  icon="trash"
-                  onPress={() => network.clear()}
-                />
-              </Toolbar>
-              <List
-                selected={selected ? selected.id : undefined}
-                requests={requests}
-                onSelect={(i) => setState({ active: i })}
-              />
-              {selected && <Details {...selected} />}
-            </View>
-          );
-        }}
-      </Network>
-    )}
-  </State>
-);
+const Console = () => {
+  const requests = useRequests();
+  const [active, setActive] = useState();
+  const selected = active >= 0 ? requests[active] : undefined;
+  return (
+    <View style={styles.container}>
+      <Toolbar>
+        <Seperator />
+        <Button
+          name="Clear"
+          icon="trash"
+          onPress={() => network.clear()}
+        />
+      </Toolbar>
+      <List
+        selected={selected ? selected.id : undefined}
+        requests={requests}
+        onSelect={(i) => setActive(i)}
+      />
+      {selected && <Details {...selected} />}
+    </View>
+  );
+}
 
 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,
-}) => (
-  <State>
-    {({ selected }, setState) => (
-      <Storage provider={provider}>
-        {(data, update, removeItem, clear) => (
-          <Wrapper>
-            <Toolbar>
-              <Seperator />
-              <Button
-                name="Refresh"
-                icon="reload"
-                onPress={update}
-              />
-              <Button
-                name="Clear"
-                icon="trash"
-                onPress={clear}
-              />
-              <Button
-                name="Delete"
-                icon="remove"
-                disabled={!selected}
-                onPress={() => removeItem(selected)}
-              />
-            </Toolbar>
-            <Keys
-              selected={selected}
-              onSelect={(key) => setState({ selected: key })}
-              keys={Object.keys(data)}
-            />
-            {selected && data[selected] && (
-              <Value value={data[selected]} />
-            )}
-          </Wrapper>
-        )}
-      </Storage>
-    )}
-  </State>
-);
+}) => {
+  const [selected, setSelected] = useState();
+  const {
+    data,
+    update,
+    removeItem,
+    clear,
+  } = useStorage(provider);
+  return (
+    <Wrapper>
+      <Toolbar>
+        <Seperator />
+        <Button
+          name="Refresh"
+          icon="reload"
+          onPress={update}
+        />
+        <Button
+          name="Clear"
+          icon="trash"
+          onPress={clear}
+        />
+        <Button
+          name="Delete"
+          icon="remove"
+          disabled={!selected}
+          onPress={() => removeItem(selected)}
+        />
+      </Toolbar>
+      <Keys
+        selected={selected}
+        onSelect={(key) => {
+          setSelected(key);
+        }}
+        keys={Object.keys(data)}
+      />
+      {selected && data[selected] && (
+        <Value value={data[selected]} />
+      )}
+    </Wrapper>
+  );
+};
 
 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,
-}) => (
-  <View style={styles.container}>
-    <State
-      initState={{
-        active: 0,
-      }}
-    >
-    {({ active }, setState) => (
-      <Fragment>
-        <Header>
-          <TabScroll horizontal>
-            <TabWrapper>
-              {tabs.map(({ name }, i) => (
-                <Tab
-                  key={name}
-                  style={active === i ? styles.tabActive : styles.tabInactive}
-                  onPress={() => {
-                    setState({ active: i });
-                  }}
-                >
-                  <Text>{name}</Text>
-                </Tab>
-              ))}
-            </TabWrapper>
-          </TabScroll>
-          {onDownload && (
-            <Button
-              onPress={onDownload}
-            >
-              <Icon name="download" />
-            </Button>
-          )}
-          {onClose && (
-            <Button
-              onPress={onClose}
-            >
-              <Icon name="close" />
-            </Button>
-          )}
-        </Header>
-        {tabs[active] && tabs[active].view}
-      </Fragment>
-    )}
-    </State>
-  </View>
-);
+}) => {
+  const [active, setActive] = useState(0);
+  return (
+    <View style={styles.container}>
+      <Header>
+        <TabScroll horizontal>
+          <TabWrapper>
+            {tabs.map(({ name }, i) => (
+              <Tab
+                key={name}
+                style={active === i ? styles.tabActive : styles.tabInactive}
+                onPress={() => {
+                  setActive(i);
+                }}
+              >
+                <Text>{name}</Text>
+              </Tab>
+            ))}
+          </TabWrapper>
+        </TabScroll>
+        {onDownload && (
+          <Button
+            onPress={onDownload}
+          >
+            <Icon name="download" />
+          </Button>
+        )}
+        {onClose && (
+          <Button
+            onPress={onClose}
+          >
+            <Icon name="close" />
+          </Button>
+        )}
+      </Header>
+      {tabs[active] && tabs[active].view}
+    </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
-}) => (
-  <State>
-    {({ open }, setState) => (
+}) => {
+  const [open, setOpen] = useState(false);
+  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;
\ 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;