diff --git a/src/Metamaps/DataFetcher.js b/src/Metamaps/DataFetcher.js index 7a9f2fae..4b60c0f8 100644 --- a/src/Metamaps/DataFetcher.js +++ b/src/Metamaps/DataFetcher.js @@ -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 } \ No newline at end of file diff --git a/src/Metamaps/GlobalUI/ReactApp.js b/src/Metamaps/GlobalUI/ReactApp.js index 321c0383..aa115425 100644 --- a/src/Metamaps/GlobalUI/ReactApp.js +++ b/src/Metamaps/GlobalUI/ReactApp.js @@ -149,7 +149,8 @@ const ReactApp = { downloadScreenshot: ImportDialog.downloadScreenshot, onExport: format => () => { window.open(`${window.location.pathname}/export.${format}`, '_blank') - } + }, + requestAccess: DataFetcher.requestAccess } }, getCommonProps: function() { diff --git a/src/Metamaps/Map/index.js b/src/Metamaps/Map/index.js index 0bd657f6..7c176c7a 100644 --- a/src/Metamaps/Map/index.js +++ b/src/Metamaps/Map/index.js @@ -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') + } } }) } diff --git a/src/routes/RequestAccess.js b/src/routes/RequestAccess.js index b3288099..0122d945 100644 --- a/src/routes/RequestAccess.js +++ b/src/routes/RequestAccess.js @@ -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 (
@@ -9,32 +37,16 @@ class RequestAccess extends Component {
Hmmm. This map is private, but you can request to edit it from the map creator.
-
REQUEST ACCESS
+
+ {!requestPending && !requestSent && !error && 'REQUEST ACCESS'} + {requestSent && 'Request Sent'} + {requestPending && 'requesting...'} + {error && 'There was an error'} +
) } } -export default RequestAccess - -/* - -*/ \ No newline at end of file +export default RequestAccess \ No newline at end of file