1  import React, { Component } from 'react'
 2  import isUrl from 'is-url'
 3  import { styled, Box, Text, Button, Divider, Input, Modal, DialogModal } from 'fannypack'
 4  
 5  export default class AddDialog extends Component {
 6    constructor (props) {
 7      super(props)
 8      this.state = {
 9        footer: null,
10        east: { value: null, color: null },
11        west: { value: null, color: null },
12      }
13      this.onSubmit = this.onSubmit.bind(this)
14      this.onChange = this.onChange.bind(this)
15      this.handleKeyUp = this.handleKeyUp.bind(this)
16    }
17  
18    handleKeyUp(event) {
19      switch (event.keyCode) {
20        case 13: /* enter */
21          this.onSubmit(); break;
22      }
23    }
24  
25    notUrlWarning () {
26      this.setState({footer: <Text color="danger">Values must be valid URLs!</Text>})
27    }
28  
29    onChange (event) {
30      let val = {
31        value: event.target.value,
32        color: 'success',
33      }
34      if (!isUrl(event.target.value)) {
35        val['color'] = 'danger'
36        this.notUrlWarning()
37      }
38      this.setState({[event.target.name]: val})
39    }
40  
41    onSubmit () {
42      fetch('/api/diffs/manual', {
43        method: 'POST',
44        headers: { 'Content-Type': 'application/json' },
45        body: JSON.stringify({
46          east: this.state.east.value,
47          west: this.state.west.value,
48        }),
49      })
50    }
51  
52    render () {
53      return (
54        <Modal.Container>
55          {modal => (
56            <Box>
57              <Button
58                use={Modal.Show} {...modal}
59              >
60                Create Diff
61              </Button>
62              <DialogModal
63                type="info"
64                slide={true}
65                showActionButtons
66                showCloseButton
67                actionButtonsProps={{
68                  disabled: (this.state.footer !== null),
69                  onClickSubmit: this.onSubmit,
70                }}
71                title="Create a new Diff"
72                footer={this.state.footer}
73                {...modal}
74              >
75                <p>Provide two file URLs to compare</p>
76                <Input
77                  style={{width: "100%"}}
78                  type="url" name="east"
79                  placeholder="First file URL"
80                  state={this.state.east.color}
81                  onKeyUp={this.handleKeyUp}
82                  onChange={this.onChange}
83                />
84                <Divider content="vs"/>
85                <Input
86                  type="url" name="west"
87                  placeholder="Second file URL"
88                  state={this.state.west.color}
89                  onKeyUp={this.handleKeyUp}
90                  onChange={this.onChange}
91                />
92              </DialogModal>
93            </Box>
94          )}
95        </Modal.Container>
96      )
97    }
98  }