fix toast (and sign out bug)
This commit is contained in:
parent
ac87fc0ed5
commit
4a3d78816e
7 changed files with 38 additions and 21 deletions
|
@ -807,7 +807,6 @@
|
|||
/* toast */
|
||||
|
||||
.toast {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
|
|
|
@ -9,15 +9,6 @@
|
|||
<body class="<%= authenticated? ? "authenticated" : "unauthenticated" %> controller-<%= controller_name %> action-<%= action_name %>">
|
||||
<div class="main" id="react-app"></div>
|
||||
<%= yield %>
|
||||
<% if devise_error_messages? %>
|
||||
<%= devise_error_messages! %>
|
||||
<% end %>
|
||||
<% if notice %>
|
||||
<%= notice %>
|
||||
<% end %>
|
||||
<% if alert %>
|
||||
<%= alert %>
|
||||
<% end %>
|
||||
<% if authenticated? %>
|
||||
<% # for creating and pulling in topics and synapses %>
|
||||
<% if controller_name == 'maps' && action_name == "conversation" %>
|
||||
|
@ -35,7 +26,14 @@
|
|||
Metamaps.ServerData.unreadNotificationsCount = <%= current_user ? user_unread_notification_count : 0 %>
|
||||
Metamaps.ServerData.mapIsStarred = <%= current_user && @map && current_user.starred_map?(@map) ? true : false %>
|
||||
Metamaps.ServerData.mobileTitle = "<%= yield(:mobile_title) %>"
|
||||
Metamaps.ServerData.ActiveMapper = <%= current_user ? current_user.to_json({follows: true, email: true, follow_settings: true}).html_safe : nil %>
|
||||
Metamaps.ServerData.ActiveMapper = <%= authenticated? ? current_user.to_json({follows: true, email: true, follow_settings: true}).html_safe : nil %>
|
||||
<% if devise_error_messages? %>
|
||||
Metamaps.ServerData.toast = "<%= devise_error_messages! %>"
|
||||
<% elsif notice %>
|
||||
Metamaps.ServerData.toast = "<%= notice %>"
|
||||
<% elsif alert %>
|
||||
Metamaps.ServerData.toast = "<%= alert %>"
|
||||
<% end %>
|
||||
Metamaps.Loading.setup()
|
||||
</script>
|
||||
<%= render :partial => 'layouts/foot' %>
|
||||
|
|
|
@ -30,6 +30,7 @@ const ReactApp = {
|
|||
mapId: null,
|
||||
unreadNotificationsCount: 0,
|
||||
mapsWidth: 0,
|
||||
toast: '',
|
||||
mobile: false,
|
||||
mobileTitle: '',
|
||||
mobileTitleWidth: 0,
|
||||
|
@ -48,7 +49,7 @@ const ReactApp = {
|
|||
// TODO: also handle page title updates
|
||||
switch (pathname.split('/')[1]) {
|
||||
case '':
|
||||
if (Active.Mapper) {
|
||||
if (Active.Mapper && Active.Mapper.id) {
|
||||
$('#yield').hide()
|
||||
ExploreMaps.updateFromPath(pathname)
|
||||
self.mapId = null
|
||||
|
@ -91,6 +92,7 @@ const ReactApp = {
|
|||
return merge({
|
||||
unreadNotificationsCount: self.unreadNotificationsCount,
|
||||
currentUser: Active.Mapper,
|
||||
toast: self.toast,
|
||||
mobile: self.mobile,
|
||||
mobileTitle: self.mobileTitle,
|
||||
mobileTitleWidth: self.mobileTitleWidth,
|
||||
|
|
|
@ -24,8 +24,7 @@ const GlobalUI = {
|
|||
self.ImportDialog.init(serverData, self.openLightbox, self.closeLightbox)
|
||||
self.Search.init(serverData)
|
||||
|
||||
const toastHtml = $('#toast').html()
|
||||
if (toastHtml && toastHtml.trim()) self.notifyUser(toastHtml)
|
||||
if (serverData.toast) self.notifyUser(serverData.toast)
|
||||
|
||||
// bind lightbox clicks
|
||||
$('.openLightbox').click(function(event) {
|
||||
|
@ -113,10 +112,9 @@ const GlobalUI = {
|
|||
_notifyUser: function(message, opts = {}) {
|
||||
const self = GlobalUI
|
||||
|
||||
const { leaveOpen = false, timeOut = 8000 } = opts
|
||||
|
||||
$('#toast').html(message)
|
||||
self.showDiv('#toast')
|
||||
const { leaveOpen = false, timeOut = 5000 } = opts
|
||||
ReactApp.toast = message
|
||||
ReactApp.render()
|
||||
clearTimeout(self.notifyTimeOut)
|
||||
|
||||
if (!leaveOpen) {
|
||||
|
@ -135,7 +133,8 @@ const GlobalUI = {
|
|||
const { message, opts } = self.notifyQueue.shift()
|
||||
self._notifyUser(message, opts)
|
||||
} else {
|
||||
self.hideDiv('#toast')
|
||||
ReactApp.toast = null
|
||||
ReactApp.render()
|
||||
self.notifying = false
|
||||
}
|
||||
},
|
||||
|
|
15
frontend/src/components/App/Toast.js
Normal file
15
frontend/src/components/App/Toast.js
Normal file
|
@ -0,0 +1,15 @@
|
|||
import React, { Component, PropTypes } from 'react'
|
||||
|
||||
class Toast extends Component {
|
||||
static propTypes = {
|
||||
message: PropTypes.string
|
||||
}
|
||||
|
||||
render () {
|
||||
const { message } = this.props
|
||||
const html = {__html: message}
|
||||
return message ? <p id="toast" className="toast" dangerouslySetInnerHTML={html} /> : null
|
||||
}
|
||||
}
|
||||
|
||||
export default Toast
|
|
@ -3,6 +3,7 @@ import React, { Component, PropTypes } from 'react'
|
|||
import MobileHeader from './MobileHeader'
|
||||
import UpperLeftUI from './UpperLeftUI'
|
||||
import UpperRightUI from './UpperRightUI'
|
||||
import Toast from './Toast'
|
||||
|
||||
class App extends Component {
|
||||
static propTypes = {
|
||||
|
@ -34,11 +35,13 @@ class App extends Component {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { children, toast, currentUser, unreadNotificationsCount, openInviteLightbox,
|
||||
const { children, toast, unreadNotificationsCount, openInviteLightbox,
|
||||
mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location,
|
||||
toggleAccountBox, map, userRequested, requestAnswered, requestApproved,
|
||||
onRequestAccess } = this.props
|
||||
const { pathname } = location || {}
|
||||
// this fixes a bug that happens otherwise when you logout
|
||||
const currentUser = this.props.currentUser && this.props.currentUser.id ? this.props.currentUser : null
|
||||
const unauthedHome = pathname === '/' && !currentUser
|
||||
return <div className="wrapper" id="wrapper">
|
||||
{mobile && <MobileHeader currentUser={currentUser}
|
||||
|
@ -57,6 +60,7 @@ class App extends Component {
|
|||
openInviteLightbox={openInviteLightbox}
|
||||
signInPage={pathname === '/login'}
|
||||
onClickAccount={toggleAccountBox} />}
|
||||
<Toast message={toast} />
|
||||
{!mobile && currentUser && <a className='feedback-icon' target='_blank' href='https://hylo.com/c/metamaps'></a>}
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
@ -10,7 +10,7 @@ function nullComponent(props) {
|
|||
}
|
||||
|
||||
export default function makeRoutes (currentUser) {
|
||||
const homeComponent = currentUser ? Maps : nullComponent
|
||||
const homeComponent = currentUser && currentUser.id ? Maps : nullComponent
|
||||
return <Route path="/" component={App} >
|
||||
<IndexRoute component={homeComponent} />
|
||||
<Route path="explore">
|
||||
|
|
Loading…
Add table
Reference in a new issue