glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix toast (and sign out bug)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/stylesheets/clean.css.erb
View file

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

18
app/views/layouts/application.html.erb
View file

@ -9,15 +9,6 @@
<body class="<%= authenticated? ? "authenticated" : "unauthenticated" %> controller-<%= controller_name %> action-<%= action_name %>"> <body class="<%= authenticated? ? "authenticated" : "unauthenticated" %> controller-<%= controller_name %> action-<%= action_name %>">
<div class="main" id="react-app"></div> <div class="main" id="react-app"></div>
<%= yield %> <%= yield %>
<% if devise_error_messages? %>
<%= devise_error_messages! %>
<% end %>
<% if notice %>
<%= notice %>
<% end %>
<% if alert %>
<%= alert %>
<% end %>
<% if authenticated? %> <% if authenticated? %>
<% # for creating and pulling in topics and synapses %> <% # for creating and pulling in topics and synapses %>
<% if controller_name == 'maps' && action_name == "conversation" %> <% if controller_name == 'maps' && action_name == "conversation" %>
@ -35,7 +26,14 @@
Metamaps.ServerData.unreadNotificationsCount = <%= current_user ? user_unread_notification_count : 0 %> 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.mapIsStarred = <%= current_user && @map && current_user.starred_map?(@map) ? true : false %>
Metamaps.ServerData.mobileTitle = "<%= yield(:mobile_title) %>" 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() Metamaps.Loading.setup()
</script> </script>
<%= render :partial => 'layouts/foot' %> <%= render :partial => 'layouts/foot' %>

4
frontend/src/Metamaps/GlobalUI/ReactApp.js
View file

@ -30,6 +30,7 @@ const ReactApp = {
mapId: null, mapId: null,
unreadNotificationsCount: 0, unreadNotificationsCount: 0,
mapsWidth: 0, mapsWidth: 0,
toast: '',
mobile: false, mobile: false,
mobileTitle: '', mobileTitle: '',
mobileTitleWidth: 0, mobileTitleWidth: 0,
@ -48,7 +49,7 @@ const ReactApp = {
// TODO: also handle page title updates // TODO: also handle page title updates
switch (pathname.split('/')[1]) { switch (pathname.split('/')[1]) {
case '': case '':
if (Active.Mapper) { if (Active.Mapper && Active.Mapper.id) {
$('#yield').hide() $('#yield').hide()
ExploreMaps.updateFromPath(pathname) ExploreMaps.updateFromPath(pathname)
self.mapId = null self.mapId = null
@ -91,6 +92,7 @@ const ReactApp = {
return merge({ return merge({
unreadNotificationsCount: self.unreadNotificationsCount, unreadNotificationsCount: self.unreadNotificationsCount,
currentUser: Active.Mapper, currentUser: Active.Mapper,
toast: self.toast,
mobile: self.mobile, mobile: self.mobile,
mobileTitle: self.mobileTitle, mobileTitle: self.mobileTitle,
mobileTitleWidth: self.mobileTitleWidth, mobileTitleWidth: self.mobileTitleWidth,

13
frontend/src/Metamaps/GlobalUI/index.js
View file

@ -24,8 +24,7 @@ const GlobalUI = {
self.ImportDialog.init(serverData, self.openLightbox, self.closeLightbox) self.ImportDialog.init(serverData, self.openLightbox, self.closeLightbox)
self.Search.init(serverData) self.Search.init(serverData)
const toastHtml = $('#toast').html() if (serverData.toast) self.notifyUser(serverData.toast)
if (toastHtml && toastHtml.trim()) self.notifyUser(toastHtml)
// bind lightbox clicks // bind lightbox clicks
$('.openLightbox').click(function(event) { $('.openLightbox').click(function(event) {
@ -113,10 +112,9 @@ const GlobalUI = {
_notifyUser: function(message, opts = {}) { _notifyUser: function(message, opts = {}) {
const self = GlobalUI const self = GlobalUI
const { leaveOpen = false, timeOut = 8000 } = opts const { leaveOpen = false, timeOut = 5000 } = opts
ReactApp.toast = message
$('#toast').html(message) ReactApp.render()
self.showDiv('#toast')
clearTimeout(self.notifyTimeOut) clearTimeout(self.notifyTimeOut)
if (!leaveOpen) { if (!leaveOpen) {
@ -135,7 +133,8 @@ const GlobalUI = {
const { message, opts } = self.notifyQueue.shift() const { message, opts } = self.notifyQueue.shift()
self._notifyUser(message, opts) self._notifyUser(message, opts)
} else { } else {
self.hideDiv('#toast') ReactApp.toast = null
ReactApp.render()
self.notifying = false self.notifying = false
} }
}, },

15
frontend/src/components/App/Toast.js Normal file
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

6
frontend/src/components/App/index.js
View file

@ -3,6 +3,7 @@ import React, { Component, PropTypes } from 'react'
import MobileHeader from './MobileHeader' import MobileHeader from './MobileHeader'
import UpperLeftUI from './UpperLeftUI' import UpperLeftUI from './UpperLeftUI'
import UpperRightUI from './UpperRightUI' import UpperRightUI from './UpperRightUI'
import Toast from './Toast'
class App extends Component { class App extends Component {
static propTypes = { static propTypes = {
@ -34,11 +35,13 @@ class App extends Component {
} }
render () { render () {
const { children, toast, currentUser, unreadNotificationsCount, openInviteLightbox, const { children, toast, unreadNotificationsCount, openInviteLightbox,
mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location, mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location,
toggleAccountBox, map, userRequested, requestAnswered, requestApproved, toggleAccountBox, map, userRequested, requestAnswered, requestApproved,
onRequestAccess } = this.props onRequestAccess } = this.props
const { pathname } = location || {} 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 const unauthedHome = pathname === '/' && !currentUser
return <div className="wrapper" id="wrapper"> return <div className="wrapper" id="wrapper">
{mobile && <MobileHeader currentUser={currentUser} {mobile && <MobileHeader currentUser={currentUser}
@ -57,6 +60,7 @@ class App extends Component {
openInviteLightbox={openInviteLightbox} openInviteLightbox={openInviteLightbox}
signInPage={pathname === '/login'} signInPage={pathname === '/login'}
onClickAccount={toggleAccountBox} />} onClickAccount={toggleAccountBox} />}
<Toast message={toast} />
{!mobile && currentUser && <a className='feedback-icon' target='_blank' href='https://hylo.com/c/metamaps'></a>} {!mobile && currentUser && <a className='feedback-icon' target='_blank' href='https://hylo.com/c/metamaps'></a>}
{children} {children}
</div> </div>

2
frontend/src/components/makeRoutes.js
View file

@ -10,7 +10,7 @@ function nullComponent(props) {
} }
export default function makeRoutes (currentUser) { export default function makeRoutes (currentUser) {
const homeComponent = currentUser ? Maps : nullComponent const homeComponent = currentUser && currentUser.id ? Maps : nullComponent
return <Route path="/" component={App} > return <Route path="/" component={App} >
<IndexRoute component={homeComponent} /> <IndexRoute component={homeComponent} />
<Route path="explore"> <Route path="explore">