fix toast (and sign out bug)

This commit is contained in:
Connor Turland 2017-03-13 12:22:52 -04:00
parent ac87fc0ed5
commit 4a3d78816e
7 changed files with 38 additions and 21 deletions

View file

@ -807,7 +807,6 @@
/* toast */
.toast {
display: none;
position: fixed;
bottom: 20px;
left: 20px;

View file

@ -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' %>

View file

@ -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,

View file

@ -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
}
},

View 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

View file

@ -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>

View file

@ -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">