refactor App with Hooks for demo

demo/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import { ScrollView, StyleSheet, Text, TouchableOpacity, Platform, Linking } from 'react-native';
 
@@ -16,147 +16,127 @@ import {
   inlineBodyStyle
 } from './config';
 
-export default class Explorer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      heightHtml: autoHeightHtml0,
-      heightScript: autoDetectLinkScript,
-      heightStyle: null,
-      heightSize: {
-        height: 0,
-        width: 0
-      },
-      widthHtml: autoWidthHtml0,
-      widthScript: null,
-      widthStyle: inlineBodyStyle,
-      widthSize: {
-        height: 0,
-        width: 0
-      }
-    };
-  }
-
-  changeSource = () => {
-    this.setState(prevState => ({
-      widthHtml: prevState.widthHtml === autoWidthHtml0 ? autoWidthHtml1 : autoWidthHtml0,
-      heightHtml: prevState.heightHtml === autoHeightHtml0 ? autoHeightHtml1 : autoHeightHtml0
-    }));
-  };
+const Explorer = () => {
+  const [{ widthHtml, heightHtml }, setHtml] = useState(() => ({
+    widthHtml: autoWidthHtml0,
+    heightHtml: autoHeightHtml0
+  }));
+  const changeSource = () =>
+    setHtml({
+      widthHtml: widthHtml === autoWidthHtml0 ? autoWidthHtml1 : autoWidthHtml0,
+      heightHtml: heightHtml === autoHeightHtml0 ? autoHeightHtml1 : autoHeightHtml0
+    });
 
-  changeStyle = () => {
-    this.setState(prevState => ({
-      widthStyle: prevState.widthStyle == inlineBodyStyle ? style0 + inlineBodyStyle : inlineBodyStyle,
-      heightStyle: prevState.heightStyle == null ? style0 : null
-    }));
-  };
+  const [{ widthStyle, heightStyle }, setStyle] = useState(() => ({
+    heightStyle: null,
+    widthStyle: inlineBodyStyle
+  }));
+  const changeStyle = () =>
+    setStyle({
+      widthStyle: widthStyle == inlineBodyStyle ? style0 + inlineBodyStyle : inlineBodyStyle,
+      heightStyle: heightStyle == null ? style0 : null
+    });
 
-  changeScript = () => {
-    this.setState(prevState => ({
-      widthScript: prevState.widthScript !== autoWidthScript ? autoWidthScript : null,
+  const [{ widthScript, heightScript }, setScript] = useState(() => ({
+    heightScript: autoDetectLinkScript,
+    widthScript: null
+  }));
+  const changeScript = () =>
+    setScript({
+      widthScript: widthScript !== autoWidthScript ? autoWidthScript : null,
       heightScript:
-        prevState.heightScript !== autoDetectLinkScript ? autoDetectLinkScript : autoHeightScript + autoDetectLinkScript
-    }));
-  };
+        heightScript !== autoDetectLinkScript ? autoDetectLinkScript : autoHeightScript + autoDetectLinkScript
+    });
+
+  const [heightSize, setHeightSize] = useState(() => ({ height: 0, width: 0 }));
+  const [widthSize, setWidthSize] = useState(() => ({ height: 0, width: 0 }));
 
-  render() {
-    const {
-      heightHtml,
-      heightSize,
-      heightStyle,
-      heightScript,
-      widthHtml,
-      widthSize,
-      widthStyle,
-      widthScript
-    } = this.state;
-    return (
-      <ScrollView
+  return (
+    <ScrollView
+      style={{
+        paddingTop: 45,
+        backgroundColor: 'lightyellow'
+      }}
+      contentContainerStyle={{
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
+    >
+      <AutoHeightWebView
+        customStyle={heightStyle}
+        onError={() => console.log('height on error')}
+        onLoad={() => console.log('height on load')}
+        onLoadStart={() => console.log('height on load start')}
+        onLoadEnd={() => console.log('height on load end')}
+        onShouldStartLoadWithRequest={result => {
+          console.log(result);
+          return true;
+        }}
+        onSizeUpdated={heightSize => setHeightSize(heightSize)}
+        source={{ html: heightHtml }}
+        customScript={heightScript}
+        onMessage={event => {
+          const { data } = event.nativeEvent;
+          let messageData;
+          // maybe parse stringified JSON
+          try {
+            messageData = JSON.parse(data);
+          } catch (e) {
+            console.log(e.message);
+          }
+          if (typeof messageData === 'object') {
+            const { url } = messageData;
+            // check if this message concerns us
+            if (url && url.startsWith('http')) {
+              Linking.openURL(url).catch(error => console.error('An error occurred', error));
+            }
+          }
+        }}
+      />
+      <Text style={{ padding: 5 }}>
+        height: {heightSize.height}, width: {heightSize.width}
+      </Text>
+      <AutoHeightWebView
+        baseUrl={Platform.OS === 'android' ? 'file:///android_asset/webAssets/' : 'webAssets/'}
         style={{
-          paddingTop: 45,
-          backgroundColor: 'lightyellow'
+          marginTop: 15
         }}
-        contentContainerStyle={{
-          justifyContent: 'center',
-          alignItems: 'center'
+        enableBaseUrl
+        files={[
+          {
+            href: 'demo.css',
+            type: 'text/css',
+            rel: 'stylesheet'
+          }
+        ]}
+        customStyle={widthStyle}
+        onError={() => console.log('width on error')}
+        onLoad={() => console.log('width on load')}
+        onLoadStart={() => console.log('width on load start')}
+        onLoadEnd={() => console.log('width on load end')}
+        onShouldStartLoadWithRequest={result => {
+          console.log(result);
+          return true;
         }}
-      >
-        <AutoHeightWebView
-          customStyle={heightStyle}
-          onError={() => console.log('height on error')}
-          onLoad={() => console.log('height on load')}
-          onLoadStart={() => console.log('height on load start')}
-          onLoadEnd={() => console.log('height on load end')}
-          onShouldStartLoadWithRequest={result => {
-            console.log(result);
-            return true;
-          }}
-          onSizeUpdated={heightSize => this.setState({ heightSize })}
-          source={{ html: heightHtml }}
-          customScript={heightScript}
-          onMessage={event => {
-            const { data } = event.nativeEvent;
-            let messageData;
-            // maybe parse stringified JSON
-            try {
-              messageData = JSON.parse(data);
-            } catch (e) {
-              console.log(e.message);
-            }
-            if (typeof messageData === 'object') {
-              const { url } = messageData;
-              // check if this message concerns us
-              if (url && url.startsWith('http')) {
-                Linking.openURL(url).catch(error => console.error('An error occurred', error));
-              }
-            }
-          }}
-        />
-        <Text style={{ padding: 5 }}>
-          height: {heightSize.height}, width: {heightSize.width}
-        </Text>
-        <AutoHeightWebView
-          baseUrl={Platform.OS === 'android' ? 'file:///android_asset/webAssets/' : 'webAssets/'}
-          style={{
-            marginTop: 15
-          }}
-          enableBaseUrl
-          files={[
-            {
-              href: 'demo.css',
-              type: 'text/css',
-              rel: 'stylesheet'
-            }
-          ]}
-          customStyle={widthStyle}
-          onError={() => console.log('width on error')}
-          onLoad={() => console.log('width on load')}
-          onLoadStart={() => console.log('width on load start')}
-          onLoadEnd={() => console.log('width on load end')}
-          onShouldStartLoadWithRequest={result => {
-            console.log(result);
-            return true;
-          }}
-          onSizeUpdated={widthSize => this.setState({ widthSize })}
-          source={{ html: widthHtml }}
-          customScript={widthScript}
-        />
-        <Text style={{ padding: 5 }}>
-          height: {widthSize.height}, width: {widthSize.width}
-        </Text>
-        <TouchableOpacity onPress={this.changeSource} style={styles.button}>
-          <Text>change source</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={this.changeStyle} style={styles.button}>
-          <Text>change style</Text>
-        </TouchableOpacity>
-        <TouchableOpacity onPress={this.changeScript} style={[styles.button, { marginBottom: 100 }]}>
-          <Text>change script</Text>
-        </TouchableOpacity>
-      </ScrollView>
-    );
-  }
-}
+        onSizeUpdated={widthSize => setWidthSize(widthSize)}
+        source={{ html: widthHtml }}
+        customScript={widthScript}
+      />
+      <Text style={{ padding: 5 }}>
+        height: {widthSize.height}, width: {widthSize.width}
+      </Text>
+      <TouchableOpacity onPress={changeSource} style={styles.button}>
+        <Text>change source</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={changeStyle} style={styles.button}>
+        <Text>change style</Text>
+      </TouchableOpacity>
+      <TouchableOpacity onPress={changeScript} style={[styles.button, { marginBottom: 100 }]}>
+        <Text>change script</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+};
 
 const styles = StyleSheet.create({
   button: {
@@ -166,3 +146,5 @@ const styles = StyleSheet.create({
     padding: 5
   }
 });
+
+export default Explorer;