finish request access page js

This commit is contained in:
Connor Turland 2018-03-08 11:55:16 -05:00
parent c7f2996397
commit ed486c5ae6
4 changed files with 52 additions and 25 deletions

View file

@ -32,9 +32,15 @@ async function denyAccessRequest(mapId, requestId) {
return res.status === 200
}
async function requestAccess(mapId) {
const res = await postWithCookies(`/maps/${mapId}/access_request`)
return res.status === 200
}
module.exports = {
getMetacodes,
getCurrentUser,
approveAccessRequest,
denyAccessRequest
denyAccessRequest,
requestAccess
}

View file

@ -149,7 +149,8 @@ const ReactApp = {
downloadScreenshot: ImportDialog.downloadScreenshot,
onExport: format => () => {
window.open(`${window.location.pathname}/export.${format}`, '_blank')
}
},
requestAccess: DataFetcher.requestAccess
}
},
getCommonProps: function() {

View file

@ -128,6 +128,14 @@ const Map = {
DataModel.attachCollectionEvents()
self.requests = data.requests
isLoaded()
},
error: function(res) {
// forbidden
if (res.status === 403) {
browserHistory.push(`/maps/${id}/request_access`)
} else {
GlobalUI.notifyUser('There was an error fetching the map')
}
}
})
}

View file

@ -1,7 +1,35 @@
import React, { Component } from 'react'
class RequestAccess extends Component {
constructor(props) {
super(props)
this.state = {
requestPending: false,
requestSent: false,
error: false
}
}
requestAccess = async () => {
if (this.state.requestSent || this.state.requestPending || this.state.error) {
return
}
this.setState({ requestPending: true })
const success = this.props.requestAccess(this.props.params.id)
if (success) {
this.setState({
requestPending: false,
requestSent: true
})
} else {
this.setState({
requestPending: false,
error: true
})
}
}
render = () => {
const { requestPending, requestSent, error } = this.state
return (
<div id="yield">
<div className='request_access'>
@ -9,32 +37,16 @@ class RequestAccess extends Component {
<div className='explainer_text'>
Hmmm. This map is private, but you can request to edit it from the map creator.
</div>
<div className='make_request'>REQUEST ACCESS</div>
<div className='make_request' onClick={this.requestAccess}>
{!requestPending && !requestSent && !error && 'REQUEST ACCESS'}
{requestSent && 'Request Sent'}
{requestPending && 'requesting...'}
{error && 'There was an error'}
</div>
</div>
</div>
)
}
}
export default RequestAccess
/*
<script>
$(document).ready(function() {
$('.make_request').click(function() {
var that = $(this)
that.off('click')
that.text('requesting...')
$.ajax({
url: '/maps/<%= params[:id] %>/access_request',
type: 'POST',
contentType: 'application/json',
statusCode: {
200: function () { that.text('Request Sent'); setTimeout(function () {window.location.href = '/'}, 2000) },
400: function () { that.text('An error occurred') }
}
})
})
})
</script>
*/
export default RequestAccess