react-native-flashcards/NewQuestionView.js at master · CarlosAmaral/react-native-flashcards · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, { Component } from 'react';
import { View, DeviceEventEmitter, StyleSheet } from 'react-native';
import {
  Container,
  Input,
  Card,
  Title,
  Body,
  CardItem,
  Content,
  Toast,
  Form,
  Item,
  Button,
  Grid,
  H1,
  H2,
  H3,
  Text,
} from 'native-base';
import { addCardToDeck } from './helpers';

export default class NewQuestionView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      question: '',
      answer: '',
    };
  }

  handleSubmit = async () => {
    const { question, answer } = this.state;
    const { navigation } = this.props;

    const payload = {
      question: question,
      answer: answer,
    };
    const isCardSaved = await addCardToDeck(navigation.getParam('id'), payload);
    if (isCardSaved) {
      DeviceEventEmitter.emit('deckUpdated', true);
      DeviceEventEmitter.emit('cardAdded', true);
      navigation.goBack();
    }
  };

  render() {
    const { question, answer } = this.state;

    return (
      <Container>
        <Content contentContainerStyle={styles.container}>
          <H1 style={styles.titleStyle}>Add a new Card</H1>
          <Form style={styles.formStyle}>
            <Item>
              <Input
                placeholder="Question"
                onChangeText={el => this.setState({ question: el })}
              />
            </Item>
            <Item last>
              <Input
                placeholder="Answer"
                onChangeText={el => this.setState({ answer: el })}
              />
            </Item>
            <Button
              block
              style={styles.buttonStyle}
              primary
              disabled={question == '' || answer == '' ? true : false}
              onPress={this.handleSubmit}>
              <Text>Submit</Text>
            </Button>
          </Form>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  titleStyle: {
    paddingLeft: 40,
    paddingRight: 40,
    textAlign: 'center',
  },
  formStyle: {
    width: 400,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonStyle: {
    alignSelf: 'center',
    marginTop: 20,
  },
  container: {
    flex: 1,
    //backgroundColor: 'rgb(50, 49, 78)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  cardStyles: {
    backgroundColor: 'rgb(50, 49, 78) !important',
    color: 'white',
  },
  textColor: {
    color: 'rgb(50, 49, 78)',
  },
});