git ssb

1
import React, { Component } from 'react';
2
import {
3
  Button,
4
  StyleSheet,
5
  Text,
6
  TextInput,
7
  View,
8
  WebView
9
} from 'react-native';
10
import nodejs from 'nodejs-mobile-react-native';
11
import RNFS from 'react-native-fs';
12
13
import BeakerWebView from './BeakerWebView';
14
15
const DEFAULT_URI = 'about:blank';
16
17
export default class App extends Component {
18
  constructor (props) {
19
    super(props);
20
21
    this.receiveMessage = this.receiveMessage.bind(this);
22
    this.request = this.request.bind(this);
23
    this.onUriInputChange = this.onUriInputChange.bind(this);
24
    this.onUriInputFocus = this.onUriInputFocus.bind(this);
25
  }
26
27
  state = {
28
    port: null,
29
    inputValue: DEFAULT_URI
30
  }
31
32
  componentWillMount () {
33
34
    // Start node server
35
    nodejs.start('main.js');
36
37
    // When receive the message from the node, set App path
38
    nodejs.channel.addListener('message', this.receiveMessage, this);
39
  }
40
41
  /**
42
   * @function receiveMessage
43
   * @description Receives a message and executes the respective action
44
   * @param  {String} msg JSON stringed message
45
   */
46
  receiveMessage (msg) {
47
    const { type, data } = JSON.parse(msg);
48
49
    switch (type) {
50
      case 'ok': // Send path to the server
51
52
        const message = JSON.stringify({
53
          type: 'path',
54
          data: RNFS.DocumentDirectoryPath
55
        });
56
57
        nodejs.channel.send(message);
58
        break;
59
60
      case 'port': // Received server port to execute requests
61
        return this.setState({
62
          port: data
63
        });
64
65
      case 'error':
66
        alert(`ERROR: ${JSON.stringify(data)}`);
67
        break;
68
    }
69
  }
70
71
  /**
72
   * @function request
73
   * @description Executes request to the server to load the Dat
74
   */
75
  request () {
76
    const { inputValue } = this.state;
77
78
    // Update state to load the Dat
79
    return this.setState({ uri: inputValue });
80
  }
81
82
  /**
83
   * @function onUriInputChange
84
   * @description Called when the URI input changes its value to update the state
85
   * @param  {String} inputValue Input value
86
   */
87
  onUriInputChange (inputValue) {
88
    return this.setState({
89
      inputValue
90
    });
91
  }
92
93
  /**
94
   * @function onUriInputFocus
95
   * @description Called when a focus happens in the URI input
96
   */
97
  onUriInputFocus () {
98
    const { inputValue } = this.state;
99
100
    if (inputValue !== DEFAULT_URI) {
101
      return;
102
    }
103
104
    return this.setState({
105
      inputValue: ''
106
    });
107
  }
108
109
  render() {
110
    const { inputValue, port, uri } = this.state;
111
112
    return (
113
      <View style={ styles.container }>
114
        <View style={ styles.header }>
115
          <TextInput
116
            defaultValue={ inputValue }
117
            onChangeText={ this.onUriInputChange }
118
            onFocus={ this.onUriInputFocus }
119
            onSubmitEditing={ this.request }
120
            autoCorrect={ false }
121
            blurOnSubmit={ true }
122
            selectTextOnFocus={ true }
123
            returnKeyType="go"
124
            initialScale={ 100 }
125
            clearButtonMode="while-editing"
126
            underlineColorAndroid="transparent"
127
            style={ styles.uriInput } />
128
        </View>
129
130
        <BeakerWebView port={ port } uri={ uri } />
131
      </View>
132
    );
133
  }
134
}
135
136
const styles = StyleSheet.create({
137
  container: {
138
    flex: 1
139
  },
140
  header: {
141
    backgroundColor: '#e9e9e9',
142
    height: 64,
143
    padding: 15
144
  },
145
  uriInput: {
146
    backgroundColor: '#fff',
147
    height: 40
148
  }
149
});