Merge branch 'snackbar-action-link' into 'develop'

Add 'View' action link to some notifications

Closes #791

See merge request soapbox-pub/soapbox-fe!1008

app/soapbox/actions/compose.js

@@ -81,6 +81,7 @@ const messages = defineMessages({
   uploadErrorPoll:  { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
   scheduleError: { id: 'compose.invalid_schedule', defaultMessage: 'You must schedule a post at least 5 minutes out.'  },
   success: { id: 'compose.submit_success', defaultMessage: 'Your post was sent' },
+  view: { id: 'snackbar.view', defaultMessage: 'View' },
 });
 
 const COMPOSE_PANEL_BREAKPOINT = 600 + (285 * 1) + (10 * 1);
@@ -190,7 +191,7 @@ export function handleComposeSubmit(dispatch, getState, data, status) {
 
   dispatch(insertIntoTagHistory(data.tags || [], status));
   dispatch(submitComposeSuccess({ ...data }));
-  dispatch(snackbar.success(messages.success));
+  dispatch(snackbar.success(messages.success, messages.view, `/@${data.account.acct}/posts/${data.id}`));
 }
 
 const needsDescriptions = state => {

app/soapbox/actions/interactions.js

@@ -58,6 +58,7 @@ export const REMOTE_INTERACTION_FAIL    = 'REMOTE_INTERACTION_FAIL';
 const messages = defineMessages({
   bookmarkAdded: { id: 'status.bookmarked', defaultMessage: 'Bookmark added.' },
   bookmarkRemoved: { id: 'status.unbookmarked', defaultMessage: 'Bookmark removed.' },
+  view: { id: 'snackbar.view', defaultMessage: 'View' },
 });
 
 export function reblog(status) {
@@ -220,28 +221,28 @@ export function unfavouriteFail(status, error) {
   };
 }
 
-export function bookmark(intl, status) {
+export function bookmark(status) {
   return function(dispatch, getState) {
     dispatch(bookmarkRequest(status));
 
     api(getState).post(`/api/v1/statuses/${status.get('id')}/bookmark`).then(function(response) {
       dispatch(importFetchedStatus(response.data));
       dispatch(bookmarkSuccess(status, response.data));
-      dispatch(snackbar.success(intl.formatMessage(messages.bookmarkAdded)));
+      dispatch(snackbar.success(messages.bookmarkAdded, messages.view, '/bookmarks'));
     }).catch(function(error) {
       dispatch(bookmarkFail(status, error));
     });
   };
 }
 
-export function unbookmark(intl, status) {
+export function unbookmark(status) {
   return (dispatch, getState) => {
     dispatch(unbookmarkRequest(status));
 
     api(getState).post(`/api/v1/statuses/${status.get('id')}/unbookmark`).then(response => {
       dispatch(importFetchedStatus(response.data));
       dispatch(unbookmarkSuccess(status, response.data));
-      dispatch(snackbar.success(intl.formatMessage(messages.bookmarkRemoved)));
+      dispatch(snackbar.success(messages.bookmarkRemoved));
     }).catch(error => {
       dispatch(unbookmarkFail(status, error));
     });

app/soapbox/actions/snackbar.js

@@ -1,21 +1,23 @@
 import { ALERT_SHOW } from './alerts';
 
-export const show = (severity, message) => ({
+export const show = (severity, message, actionLabel, actionLink) => ({
   type: ALERT_SHOW,
   message,
+  actionLabel,
+  actionLink,
   severity,
 });
 
-export function info(message) {
-  return show('info', message);
+export function info(message, actionLabel, actionLink) {
+  return show('info', message, actionLabel, actionLink);
 }
 
-export function success(message) {
-  return show('success', message);
+export function success(message, actionLabel, actionLink) {
+  return show('success', message, actionLabel, actionLink);
 }
 
-export function error(message) {
-  return show('error', message);
+export function error(message, actionLabel, actionLink) {
+  return show('error', message, actionLabel, actionLink);
 }
 
 export default {

app/soapbox/containers/status_container.js

@@ -134,9 +134,9 @@ const mapDispatchToProps = (dispatch, { intl }) => {
 
     onBookmark(status) {
       if (status.get('bookmarked')) {
-        dispatch(unbookmark(intl, status));
+        dispatch(unbookmark(status));
       } else {
-        dispatch(bookmark(intl, status));
+        dispatch(bookmark(status));
       }
     },
 

app/soapbox/features/edit_profile/index.js

@@ -50,6 +50,7 @@ const messages = defineMessages({
   error: { id: 'edit_profile.error', defaultMessage: 'Profile update failed' },
   bioPlaceholder: { id: 'edit_profile.fields.bio_placeholder', defaultMessage: 'Tell us about yourself.' },
   displayNamePlaceholder: { id: 'edit_profile.fields.display_name_placeholder', defaultMessage: 'Name' },
+  view: { id: 'snackbar.view', defaultMessage: 'View' },
   birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' },
 });
 
@@ -188,7 +189,7 @@ class EditProfile extends ImmutablePureComponent {
   }
 
   handleSubmit = (event) => {
-    const { dispatch, intl } = this.props;
+    const { dispatch, intl, account } = this.props;
 
     const credentials = dispatch(patchMe(this.getFormdata()));
     const notifications = dispatch(updateNotificationSettings({
@@ -199,7 +200,7 @@ class EditProfile extends ImmutablePureComponent {
 
     Promise.all([credentials, notifications]).then(() => {
       this.setState({ isLoading: false });
-      dispatch(snackbar.success(intl.formatMessage(messages.success)));
+      dispatch(snackbar.success(intl.formatMessage(messages.success), intl.formatMessage(messages.view), `/@${account.get('acct')}`));
     }).catch((error) => {
       this.setState({ isLoading: false });
       dispatch(snackbar.error(intl.formatMessage(messages.error)));

app/soapbox/features/status/containers/detailed_status_container.js

@@ -98,9 +98,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onBookmark(status) {
     if (status.get('bookmarked')) {
-      dispatch(unbookmark(intl, status));
+      dispatch(unbookmark(status));
     } else {
-      dispatch(bookmark(intl, status));
+      dispatch(bookmark(status));
     }
   },
 

app/soapbox/features/status/index.js

@@ -221,9 +221,9 @@ class Status extends ImmutablePureComponent {
 
   handleBookmark = (status) => {
     if (status.get('bookmarked')) {
-      this.props.dispatch(unbookmark(this.props.intl, status));
+      this.props.dispatch(unbookmark(status));
     } else {
-      this.props.dispatch(bookmark(this.props.intl, status));
+      this.props.dispatch(bookmark(status));
     }
   }
 

app/soapbox/features/ui/containers/notifications_container.js

@@ -1,6 +1,8 @@
+import React from 'react';
 import { injectIntl } from 'react-intl';
 import { NotificationStack } from 'react-notification';
 import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 
 import { dismissAlert } from '../../../actions/alerts';
 import { getAlerts } from '../../../selectors';
@@ -16,22 +18,35 @@ const defaultBarStyleFactory = (index, style, notification) => {
 const mapStateToProps = (state, { intl }) => {
   const notifications = getAlerts(state);
 
-  notifications.forEach(notification => ['title', 'message'].forEach(key => {
+  notifications.forEach(notification => {
+    ['title', 'message', 'actionLabel'].forEach(key => {
       const value = notification[key];
 
       if (typeof value === 'object') {
         notification[key] = intl.formatMessage(value);
       }
-  }));
+    });
 
-  return { notifications };
+    if (notification.actionLabel) {
+      notification.action = (
+        <Link to={notification.actionLink}>
+          {notification.actionLabel}
+        </Link>
+      );
+    }
+  });
+
+  return { notifications, linkComponent: Link };
 };
 
 const mapDispatchToProps = (dispatch) => {
-  return {
-    onDismiss: alert => {
+  const onDismiss = alert => {
     dispatch(dismissAlert(alert));
-    },
+  };
+
+  return {
+    onDismiss,
+    onClick: onDismiss,
     barStyleFactory: defaultBarStyleFactory,
     activeBarStyleFactory: defaultBarStyleFactory,
   };

app/soapbox/reducers/alerts.js

@@ -16,6 +16,8 @@ export default function alerts(state = initialState, action) {
       title: action.title,
       message: action.message,
       severity: action.severity || 'info',
+      actionLabel: action.actionLabel,
+      actionLink: action.actionLink,
     }));
   case ALERT_DISMISS:
     return state.filterNot(item => item.get('key') === action.alert.key);

app/soapbox/selectors/index.js

@@ -171,6 +171,8 @@ export const getAlerts = createSelector([getAlertsBase], (base) => {
     arr.push({
       message: item.get('message'),
       title: item.get('title'),
+      actionLabel: item.get('actionLabel'),
+      actionLink: item.get('actionLink'),
       key: item.get('key'),
       className: `snackbar snackbar--${item.get('severity', 'info')}`,
       activeClassName: 'snackbar--active',

app/styles/components/snackbar.scss

@@ -55,4 +55,19 @@
   .notification-bar-wrapper {
     transform: translateY(1px);
   }
+
+  .notification-bar-action a {
+    @include font-roboto;
+    font-size: 16px;
+    color: white;
+    font-weight: 700;
+    text-decoration: none;
+    text-transform: none;
+
+    &:hover,
+    &:active,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
 }