merge

1 files changed, 307 insertions, 0 deletions

diff --git a/client/src/lib/views/contact.js b/client/src/lib/views/contact.js
new file mode 100644
index 0000000..74f79b5
--- /dev/null
+++ b/client/src/lib/views/contact.js
@@ -0,0 +1,307 @@
+import React, { Component } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  TouchableHighlight,
+  TouchableWithoutFeedback,
+  StyleSheet,
+  TextInput,
+  Keyboard,
+  Text,
+  View
+} from 'react-native';
+
+import hosts from '../db/hosts'
+
+const validator = require("email-validator")
+
+import ScrollableContainer from '../components/scrollableContainer'
+import ClearText from '../components/text'
+import Heading from '../components/heading'
+import Button from '../components/button'
+import CheckBox from '../components/checkbox'
+import Modal from '../components/modal'
+
+export default class Contact extends Component {
+  constructor() {
+    super()
+    this.state = {
+      name: '',
+      email: '',
+      message: '',
+      track: false,
+      publish: false,
+      sending: false,
+      done: false,
+    }
+    this.setName = this.setName.bind(this)
+    this.setEmail = this.setEmail.bind(this)
+    this.setTrack = this.setTrack.bind(this)
+    this.setPublish = this.setPublish.bind(this)
+    this.setMessage = this.setMessage.bind(this)
+    this.send = this.send.bind(this)
+    this.reset = this.reset.bind(this)
+  }
+  setName(name) {
+    this.setState({ name, error: false })
+  }
+  setEmail(email) {
+    this.setState({ email, error: false })
+  }
+  setTrack(track) {
+    this.setState({ track: ! track })
+  }
+  setPublish(publish) {
+    this.setState({ publish: ! publish })
+  }
+  setMessage(message) {
+    this.setState({ message: message })
+  }
+  send() {
+    var isValidEmail = validator.validate(this.state.email)
+    if (! isValidEmail) {
+      // return this.setState({ error: true })
+      this.setState({ sending: true, track: false })
+    }
+    else {
+      this.setState({ sending: true })
+    }
+//     fetch('POST', hosts.feedback, {
+//       'Content-Type' : 'multipart/form-data',
+//     }, [
+//       { name: 'name', data: this.state.name },
+//       { name: 'email', data: this.state.email },
+//       { name: 'message', data: this.state.message },
+//       { name: 'track', data: this.state.track },
+//       { name: 'publish', data: this.state.publish },
+//       { name: 'secret', data: 'iNr51NbvUDqbBzyray7gdZZjigDtlJj9' },
+//     ]).then(() => {
+//       this.setState({ done: true })
+//     }).catch((e) => {
+//       console.warn(e)
+//       this.setState({ done: true })
+//     })
+  }
+  reset() {
+    this.setState({
+      name: '',
+      email: '',
+      message: '',
+      track: false,
+      publish: false,
+      sending: false,
+      done: false,
+    })
+  }
+  render() {
+    return (
+      <ScrollableContainer heading='Contact' style={styles.container} bodyStyle={styles.body}>
+        <View style={styles.innerContainer}>
+          <ClearText style={styles.bodyText}>
+            {this.props.content.body}
+          </ClearText>
+      
+          {this.renderForm()}
+          {this.renderComments()}
+        </View>
+              
+        <Modal visible={this.state.sending}>
+          {this.renderActivity()}
+        </Modal>
+      </ScrollableContainer>
+    )
+  }
+  renderForm() {
+    let error = this.state.error ? (
+      <ClearText>Please enter a valid email address</ClearText>
+    ) : (
+      <View></View>
+    )
+    return (
+      <View style={styles.keyboardAvoidingViewInner}>
+        <TextInput
+          value={this.state.name}
+          placeholder="Name"
+          autoCorrect={false}
+          onChangeText={this.setName}
+          style={styles.textInput} />
+        <TextInput
+          value={this.state.email}
+          placeholder="Email"
+          autoCapitalize='none'
+          autoCorrect={false}
+          keyboardType='email-address'
+          onChangeText={this.setEmail}
+          style={styles.textInput} />
+        {error}
+        <TextInput
+          multiline={true}
+          placeholder="Enter your message"
+          value={this.state.message}
+          onChangeText={this.setMessage}
+          style={[styles.textInput, styles.textArea]} />
+        <View style={styles.checkboxes}>
+          <CheckBox
+            label='Sign me up for emails from the Armory'
+            containerStyle={styles.checkboxContainerStyle}
+            labelStyle={styles.checkboxLabelStyle}
+            checked={this.state.track}
+            onChange={this.setTrack} />
+          <CheckBox
+            label='Publish my comment for others to read'
+            containerStyle={styles.checkboxContainerStyle}
+            labelStyle={styles.checkboxLabelStyle}
+            checked={this.state.publish}
+            onChange={this.setPublish} />
+        </View>
+        <Button label='SEND' onPress={this.send} />
+      </View>
+    )
+  }
+  renderActivity() {
+    let activity;
+    if (! this.state.done) {
+      activity = (
+        <View style={styles.message}>
+          <ActivityIndicator animating={true} color='#fff' />
+          <Heading>Sending your message...</Heading>
+        </View>
+      )
+    }
+    else {
+      activity = (
+        <View style={styles.message}>
+          <Heading>Thanks!</Heading>
+          <ClearText>Your message has been delivered.</ClearText>
+          <ClearText style={styles.lastMessage}>Thank you for your feedback.</ClearText>
+          <Button onPress={this.reset} label='OK' />
+        </View>
+      )
+    }
+    return (
+      <View style={styles.modal}>
+        {activity}
+      </View>
+    )
+  }
+  renderComments() {
+    const comments = this.props.comments.map( (comment, i) => {
+      const date = comment[0].replace(/:\d\d$/,'')
+      return (
+        <View style={styles.comment} key={'comment_' + i}>
+          <View style={styles.commentRow}>
+            <ClearText style={styles.commentName}>{comment[1]}</ClearText>
+            <ClearText style={styles.commentDate}>{date}</ClearText>
+          </View>
+          <ClearText style={styles.commentBody}>{comment[2]}</ClearText>
+        </View>
+      )
+    })
+    return (
+      <TouchableWithoutFeedback>
+        <View style={styles.comments}>
+          {comments}
+        </View>
+      </TouchableWithoutFeedback>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flex: 1,
+  },
+  body: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  innerContainer: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  bodyText: {
+    width: 400,
+    marginBottom: 20,
+  },
+  message: {
+    backgroundColor: 'rgb(0,0,0)',
+    borderRadius: 20,
+    padding: 20,
+  },
+  modal: {
+    backgroundColor: 'rgba(0,0,0,0.9)',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textInput: {
+    width: 350,
+    height: 40,
+    padding: 5,
+    fontSize: 15,
+    fontFamily: 'Futura-Medium',
+    backgroundColor: 'white',
+    borderColor: 'gray',
+    borderWidth: 1,
+    marginTop: 10,
+    marginLeft: 5,
+    marginBottom: 5,
+    marginRight: 5,
+  },
+  textArea: {
+    width: 350,
+    height: 200,
+  },
+  checkboxes: {
+    alignItems: 'flex-start',
+    marginLeft: 5,
+  },
+  checkboxContainerStyle: {
+    marginTop: 10,
+  },
+  checkboxLabelStyle: {
+    color: '#ddd',
+    fontFamily: 'Futura-Medium',
+  },
+  keyboardAvoidingViewInner: {
+    alignItems: 'center',
+  },
+  lastMessage: {
+    marginBottom: 10,
+  },
+  
+  comments: {
+    marginTop: 20,
+    paddingBottom: 100,
+    width: 400,
+  },
+  comment: {
+    borderWidth: 1,
+    borderColor: 'rgb(128,128,128)',
+    padding: 10,
+    margin: 10,
+  },
+  commentRow: {
+    flexDirection: 'row',
+  },
+  commentName: {
+    flex: 1,
+    fontSize: 13,
+    textAlign: 'left',
+  },
+  commentDate: {
+    flex: 1,
+    fontSize: 13,
+    textAlign: 'right',
+  },
+  commentBody: {
+    marginTop: 10,
+    fontSize: 13,
+    borderTopWidth: 1,
+    borderTopColor: 'rgb(64,64,64)',
+    textAlign: 'left',
+  },
+})
+