@ -1,21 +1,48 @@
import React , { Component } from 'react'
import React , { Component } from 'react'
import { Input , Segment , Form , Header , Card } from 'semantic-ui-react'
import { Input , Segment , Form , Header , Card , Button , Select , Icon } from 'semantic-ui-react'
import CustomCard from '../Card/Card'
import CustomCard from '../Card/Card'
export default class HomeComponent extends Component {
export default class HomeComponent extends Component {
handleURLChange = ( e , { value } ) => this . url = value
handleURLChange = ( e , { value } ) => this . url = value
handleCustomIDChange = ( e , { value } ) => {
this . customID = value
fetch ( "/api/v1/protected/lookup" , {
method : "POST" ,
body : JSON . stringify ( {
ID : value
} ) ,
headers : {
'Authorization' : window . localStorage . getItem ( 'token' ) ,
'Content-Type' : 'application/json'
}
} ) . then ( res => res . ok ? res . json ( ) : Promise . reject ( res . json ( ) ) )
. then ( ( ) => {
this . setState ( { showCustomIDError : true } )
} )
. catch ( ( ) => this . setState ( { showCustomIDError : false } ) )
}
onSettingsChange = ( e , { value } ) => this . setState ( { setOptions : value } )
state = {
state = {
links : [ ]
links : [ ] ,
options : [
{ text : 'Custom URL' , value : 'custom' } ,
{ text : 'Expiration' , value : 'expire' }
] ,
setOptions : [ ] ,
showCustomIDError : false
}
}
componentDidMount ( ) {
componentDidMount ( ) {
this . urlInput . focus ( )
this . urlInput . focus ( )
}
}
handleURLSubmit = ( ) => {
handleURLSubmit = ( ) => {
if ( ! this . state . showCustomIDError ) {
fetch ( '/api/v1/protected/create' , {
fetch ( '/api/v1/protected/create' , {
method : 'POST' ,
method : 'POST' ,
body : JSON . stringify ( {
body : JSON . stringify ( {
URL : this . url
URL : this . url ,
ID : this . customID
} ) ,
} ) ,
headers : {
headers : {
'Authorization' : window . localStorage . getItem ( 'token' ) ,
'Authorization' : window . localStorage . getItem ( 'token' ) ,
@ -29,17 +56,28 @@ export default class HomeComponent extends Component {
] ]
] ]
} ) )
} ) )
}
}
}
render ( ) {
render ( ) {
const { links } = this . state
const { links , options , setOptions , showCustomIDError } = this . state
return (
return (
< div >
< div >
< Segment raised >
< Segment raised >
< Header size = 'huge' > Simplify your links < / H e a d e r >
< Header size = 'huge' > Simplify your links < / H e a d e r >
< Form onSubmit = { this . handleURLSubmit } autoComplete = "off" >
< Form onSubmit = { this . handleURLSubmit } autoComplete = "off" >
< Form . Field >
< Form . Field >
< Input required size = 'big' ref = { input => this . urlInput = input } action = { { icon : 'arrow right' , labelPosition : 'right' , content : 'Shorten' } } type = 'url' onChange = { this . handleURLChange } name = 'url' placeholder = 'Paste a link to shorten it' / >
< Input required size = 'large' type = 'url' ref = { input => this . urlInput = input } onChange = { this . handleURLChange } placeholder = 'Paste a link to shorten it' action >
< input / >
< Select options = { options } placeholder = 'Settings' onChange = { this . onSettingsChange } multiple / >
< Button type = 'submit' > Shorten < Icon name = "arrow right" / > < / B u t t o n >
< / I n p u t >
< / F o r m . F i e l d >
< / F o r m . F i e l d >
< Form . Group widths = 'equal' >
{ setOptions . indexOf ( "custom" ) > - 1 && < Form . Field error = { showCustomIDError } > < Input label = { window . location . origin + "/" } onChange = { this . handleCustomIDChange } placeholder = 'my-shortened-url' / >
< / F o r m . F i e l d >
}
< / F o r m . G r o u p >
< / F o r m >
< / F o r m >
< / S e g m e n t >
< / S e g m e n t >
< Card . Group itemsPerRow = "2" >
< Card . Group itemsPerRow = "2" >