2019-11-22 22:13:00 +01:00
import React , { Fragment } from 'react' ;
2018-03-26 23:32:43 +02:00
import Button from 'component/button' ;
2019-02-13 17:27:20 +01:00
import { FormField } from 'component/common/form' ;
2019-03-18 06:06:41 +01:00
import { doToast } from 'lbry-redux' ;
import { Lbryio } from 'lbryinc' ;
2018-04-25 22:18:02 +02:00
import Page from 'component/page' ;
2019-11-22 22:13:00 +01:00
import Card from 'component/common/card' ;
2016-11-22 21:19:08 +01:00
2017-06-15 02:37:42 +02:00
class ReportPage extends React . Component {
2017-05-17 10:10:25 +02:00
constructor ( props ) {
super ( props ) ;
this . state = {
submitting : false ,
2017-12-21 22:08:54 +01:00
message : '' ,
2017-05-17 10:10:25 +02:00
} ;
}
2018-04-06 07:15:29 +02:00
onMessageChange ( event ) {
this . setState ( {
message : event . target . value ,
} ) ;
}
2017-05-17 10:10:25 +02:00
submitMessage ( ) {
2018-04-06 07:15:29 +02:00
const { message } = this . state ;
2017-06-15 02:37:42 +02:00
if ( message ) {
2016-04-23 14:20:54 +02:00
this . setState ( {
2017-06-06 23:19:12 +02:00
submitting : true ,
2016-04-23 14:20:54 +02:00
} ) ;
2019-03-18 22:51:19 +01:00
Lbryio . call ( 'event' , 'desktop_error' , { error _message : message } ) . then ( ( ) => {
2016-04-23 14:20:54 +02:00
this . setState ( {
2016-10-21 09:56:37 +02:00
submitting : false ,
2016-04-23 14:20:54 +02:00
} ) ;
2017-06-15 02:37:42 +02:00
// Display global notice
2018-10-29 18:23:53 +01:00
const action = doToast ( {
2017-12-21 22:08:54 +01:00
message : _ _ ( 'Message received! Thanks for helping.' ) ,
2017-06-15 02:37:42 +02:00
} ) ;
window . app . store . dispatch ( action ) ;
2016-04-23 14:20:54 +02:00
} ) ;
2017-06-15 02:37:42 +02:00
2017-12-21 22:08:54 +01:00
this . setState ( { message : '' } ) ;
2016-04-23 14:20:54 +02:00
}
2017-05-17 10:10:25 +02:00
}
render ( ) {
2016-04-23 14:20:54 +02:00
return (
2018-04-06 07:15:29 +02:00
< Page >
2019-11-22 22:13:00 +01:00
< Card
title = { _ _ ( 'Report an Issue/Request a Feature' ) }
subtitle = { _ _ (
'Please describe the problem you experienced or the feature you want to see and any information you think might be useful to us. Links to screenshots are great!'
) }
actions = {
< Fragment >
< FormField
type = "textarea"
rows = "10"
name = "message"
stretch
value = { this . state . message }
onChange = { event => {
this . onMessageChange ( event ) ;
} }
placeholder = { _ _ ( 'Description of your issue or feature request' ) }
/ >
2018-12-19 06:44:53 +01:00
2019-11-22 22:13:00 +01:00
< Button
button = "primary"
onClick = { event => {
this . submitMessage ( event ) ;
} }
className = { ` button-block button-primary ${ this . state . submitting ? 'disabled' : '' } ` }
>
{ this . state . submitting ? _ _ ( 'Submitting...' ) : _ _ ( 'Submit Report' ) }
< / Button >
< / Fragment >
}
/ >
2019-02-13 17:27:20 +01:00
2019-11-22 22:13:00 +01:00
< Card
title = { _ _ ( 'Developer?' ) }
actions = {
< Fragment >
< div className = "markdown-preview" >
< p > { _ _ ( 'You can also:' ) } < / p >
< ul >
< li >
< Button
button = "link"
href = " https : //github.com/lbryio/lbry-desktop/issues"
label = { _ _ ( 'Submit an issue on GitHub' ) }
/ >
.
< / li >
< li >
{ _ _ ( 'Explore our' ) } { ' ' }
< Button button = "link" href = "https://lbry.tech" label = { _ _ ( 'technical resources' ) } / > .
< / li >
< li >
{ _ _ ( 'Join our' ) } < Button button = "link" href = "https://forum.lbry.tech" label = { _ _ ( 'tech forum' ) } / > .
< / li >
< / ul >
< / div >
< / Fragment >
}
/ >
2018-04-06 07:15:29 +02:00
< / Page >
2016-04-23 14:20:54 +02:00
) ;
}
2017-05-17 10:10:25 +02:00
}
2016-11-22 21:19:08 +01:00
export default ReportPage ;