diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb index 14a8b178..92a8e765 100644 --- a/app/assets/stylesheets/clean.css.erb +++ b/app/assets/stylesheets/clean.css.erb @@ -807,7 +807,6 @@ /* toast */ .toast { - display: none; position: fixed; bottom: 20px; left: 20px; diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 97d93986..13fde7ba 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -9,15 +9,6 @@ controller-<%= controller_name %> action-<%= action_name %>">
<%= 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() <%= render :partial => 'layouts/foot' %> diff --git a/frontend/src/Metamaps/GlobalUI/ReactApp.js b/frontend/src/Metamaps/GlobalUI/ReactApp.js index 66035c6c..0cd9e4ba 100644 --- a/frontend/src/Metamaps/GlobalUI/ReactApp.js +++ b/frontend/src/Metamaps/GlobalUI/ReactApp.js @@ -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, diff --git a/frontend/src/Metamaps/GlobalUI/index.js b/frontend/src/Metamaps/GlobalUI/index.js index 32a57eee..7e77ff7d 100644 --- a/frontend/src/Metamaps/GlobalUI/index.js +++ b/frontend/src/Metamaps/GlobalUI/index.js @@ -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 } }, diff --git a/frontend/src/components/App/Toast.js b/frontend/src/components/App/Toast.js new file mode 100644 index 00000000..4d27f007 --- /dev/null +++ b/frontend/src/components/App/Toast.js @@ -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 ?

: null + } +} + +export default Toast diff --git a/frontend/src/components/App/index.js b/frontend/src/components/App/index.js index 32112f0e..d50e8b48 100644 --- a/frontend/src/components/App/index.js +++ b/frontend/src/components/App/index.js @@ -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

{mobile && } + {!mobile && currentUser && } {children}
diff --git a/frontend/src/components/makeRoutes.js b/frontend/src/components/makeRoutes.js index 67f839e9..5447e79e 100644 --- a/frontend/src/components/makeRoutes.js +++ b/frontend/src/components/makeRoutes.js @@ -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