9 changed files with 129 additions and 63 deletions
@ -0,0 +1,41 @@ |
|||
import React, { Component } from 'react' |
|||
import { Card, Icon, Button, Modal } from 'semantic-ui-react' |
|||
import { QRCode } from 'react-qr-svg'; |
|||
import Clipboard from 'react-clipboard.js'; |
|||
|
|||
export default class CardComponent extends Component { |
|||
render() { |
|||
return (<Card key={this.key}> |
|||
<Card.Content> |
|||
<Card.Header> |
|||
{this.props.header} |
|||
</Card.Header> |
|||
<Card.Meta> |
|||
{this.props.metaHeader} |
|||
</Card.Meta> |
|||
<Card.Description> |
|||
{this.props.description} |
|||
</Card.Description> |
|||
</Card.Content> |
|||
<Card.Content extra> |
|||
{!this.props.showInfoURL ? <div className='ui two buttons'> |
|||
<Modal closeIcon trigger={<Button icon='qrcode' content='Show QR-Code' />}> |
|||
<Modal.Header className="ui center aligned">{this.props.description}</Modal.Header> |
|||
<Modal.Content style={{ textAlign: "center" }}> |
|||
<QRCode style={{ width: "75%" }} value={this.props.description} /> |
|||
</Modal.Content> |
|||
</Modal> |
|||
<Clipboard component="button" className="ui button" data-clipboard-text={this.props.description} button-title="Copy the Shortened URL to the Clipboard"> |
|||
<div> |
|||
<Icon name="clipboard" /> |
|||
Copy to Clipboard |
|||
</div> |
|||
</Clipboard> |
|||
</div> : <div className='ui two buttons'> |
|||
<Button icon='line chart' content='Show live tracking' /> |
|||
<Button icon='clock' content='Show recent visitors' /> |
|||
</div>} |
|||
</Card.Content> |
|||
</Card>) |
|||
} |
|||
}; |
|||
@ -1,17 +1,51 @@ |
|||
import React, { Component } from 'react' |
|||
import { Segment, Header, Form, Input } from 'semantic-ui-react' |
|||
import { Segment, Header, Form, Input, Card } from 'semantic-ui-react' |
|||
|
|||
import CustomCard from '../Card/Card' |
|||
|
|||
export default class LookupComponent extends Component { |
|||
state = { |
|||
links: [] |
|||
} |
|||
handleURLChange = (e, { value }) => this.url = value |
|||
handleURLSubmit = () => { |
|||
let id = this.url.replace(window.location.origin + "/", "") |
|||
fetch("/api/v1/protected/lookup", { |
|||
method: "POST", |
|||
body: JSON.stringify({ |
|||
ID: id |
|||
}), |
|||
headers: { |
|||
'Authorization': window.localStorage.getItem('token'), |
|||
'Content-Type': 'application/json' |
|||
} |
|||
}).then(res => res.ok ? res.json() : Promise.reject(res.json())) |
|||
.then(res => this.setState({ |
|||
links: [...this.state.links, [ |
|||
res.URL, |
|||
this.url, |
|||
this.VisitCount, |
|||
res.CratedOn, |
|||
res.LastVisit |
|||
]] |
|||
})) |
|||
} |
|||
render() { |
|||
const { links } = this.state |
|||
return ( |
|||
<div> |
|||
<Segment raised> |
|||
<Header size='huge'>URL Lookup</Header> |
|||
<Form onSubmit={this.handleURLSubmit} autoComplete="off"> |
|||
<Form.Field> |
|||
<Input required size='big' ref={input => this.urlInput = input} action={{ icon: 'arrow right', labelPosition: 'right', content: 'Lookup' }} type='url' onChange={this.handleURLChange} name='url' placeholder={window.location.origin+"/..."} /> |
|||
<Input required size='big' ref={input => this.urlInput = input} action={{ icon: 'arrow right', labelPosition: 'right', content: 'Lookup' }} type='url' onChange={this.handleURLChange} name='url' placeholder={window.location.origin + "/..."} /> |
|||
</Form.Field> |
|||
</Form> |
|||
</Segment> |
|||
<Card.Group itemsPerRow="2"> |
|||
{links.map((link, i) => <CustomCard key={i} header={new URL(link[0]).hostname} metaHeader={link[1]} description={link[0]} showInfoURL/>)} |
|||
</Card.Group> |
|||
</div> |
|||
) |
|||
} |
|||
}; |
|||
|
|||
Loading…
Reference in new issue