metamaps--metamaps/frontend/src/Metamaps/Views/ExploreMaps.js
2017-03-12 00:56:59 -05:00

138 lines
3.8 KiB
JavaScript

/* global $ */
import React from 'react'
import ReactDOM from 'react-dom' // TODO ensure this isn't a double import
import Active from '../Active'
import DataModel from '../DataModel'
import GlobalUI from '../GlobalUI'
import { ReactApp } from '../GlobalUI'
import Realtime from '../Realtime'
import Loading from '../Loading'
import Maps from '../../components/Maps'
const ExploreMaps = {
pending: false,
mapper: null,
updateFromPath: function(path) {
const self = ExploreMaps
const test = path.split('/')[1]
const section = path.split('/')[2]
const id = path.split('/')[3]
if (test === 'explore') {
const capitalize = section.charAt(0).toUpperCase() + section.slice(1)
self.setCollection(DataModel.Maps[capitalize])
} else if (test === '') {
self.setCollection(DataModel.Maps.Active)
}
if (id) {
if (self.collection.mapperId !== id) {
// empty the collection if we are trying to load the maps
// collection of a different mapper than we had previously
self.collection.reset()
self.collection.page = 1
self.render()
}
self.collection.mapperId = id
}
if (self.collection.length === 0) {
Loading.show()
self.pending = true
self.collection.getMaps()
} else {
id ? self.fetchUserThenRender() : self.render()
}
},
setCollection: function(collection) {
var self = ExploreMaps
if (self.collection) {
self.collection.off('add', self.render)
self.collection.off('successOnFetch', self.handleSuccess)
self.collection.off('errorOnFetch', self.handleError)
}
self.collection = collection
self.collection.on('add', self.render)
self.collection.on('successOnFetch', self.handleSuccess)
self.collection.on('errorOnFetch', self.handleError)
},
render: function() {
var self = ExploreMaps
ReactApp.resize()
ReactApp.render()
Loading.hide()
},
loadMore: function() {
var self = ExploreMaps
if (self.collection.page !== 'loadedAll') {
self.collection.getMaps()
self.pending = true
}
self.render()
},
handleSuccess: function() {
var self = ExploreMaps
self.pending = false
if (self.collection && self.collection.id === 'mapper') {
self.fetchUserThenRender()
} else {
self.render()
}
},
handleError: function() {
console.log('error loading maps!') // TODO
Loading.hide()
},
fetchUserThenRender: function(cb) {
var self = ExploreMaps
if (self.mapper && self.mapper.id === self.collection.mapperId) {
self.render()
return
}
// first load the mapper object and then call the render function
$.ajax({
url: '/users/' + self.collection.mapperId + '/details.json',
success: function(response) {
self.mapper = response
self.render()
},
error: function() {
self.render()
}
})
},
onStar: function(map) {
$.post('/maps/' + map.id + '/star')
map.set('star_count', map.get('star_count') + 1)
if (DataModel.Stars) DataModel.Stars.push({ user_id: Active.Mapper.id, map_id: map.id })
DataModel.Maps.Starred.add(map)
GlobalUI.notifyUser('Map is now starred')
ReactApp.render()
},
onRequest: function(map) {
$.post({
url: `/maps/${map.id}/access_request`
})
GlobalUI.notifyUser('You will be notified by email if request accepted')
},
onMapFollow: function(map) {
const isFollowing = map.isFollowedBy(Active.Mapper)
$.post({
url: `/maps/${map.id}/${isFollowing ? 'un' : ''}follow`
})
if (isFollowing) {
GlobalUI.notifyUser('You are no longer following this map')
Active.Mapper.unfollowMap(map.id)
} else {
GlobalUI.notifyUser('You are now following this map')
Active.Mapper.followMap(map.id)
}
ReactApp.render()
}
}
export default ExploreMaps