Integrate favorites with snackbar

Feature #13886

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/store/favorites/favorites-actions.ts b/src/store/favorites/favorites-actions.ts
index 33fc7e31853f68fec2803ac00652e03dd3a362d3..eb4f649025d3b03d27b3c342b410519c2f074734 100644 (file)
--- a/src/store/favorites/favorites-actions.ts
+++ b/src/store/favorites/favorites-actions.ts
@@ -7,6 +7,7 @@ import { Dispatch } from "redux";
 import { favoriteService } from "../../services/services";
 import { RootState } from "../store";
 import { checkFavorite } from "./favorites-reducer";
+import { snackbarActions } from "../snackbar/snackbar-actions";
 
 export const favoritesActions = unionize({
     TOGGLE_FAVORITE: ofType<{ resourceUuid: string }>(),
@@ -20,6 +21,7 @@ export const toggleFavorite = (resource: { uuid: string; name: string }) =>
     (dispatch: Dispatch, getState: () => RootState): Promise<any> => {
         const userUuid = getState().auth.user!.uuid;
         dispatch(favoritesActions.TOGGLE_FAVORITE({ resourceUuid: resource.uuid }));
+        dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Working..." }));
         const isFavorite = checkFavorite(resource.uuid, getState().favorites);
         const promise: any = isFavorite
             ? favoriteService.delete({ userUuid, resourceUuid: resource.uuid })
@@ -28,6 +30,13 @@ export const toggleFavorite = (resource: { uuid: string; name: string }) =>
         return promise
             .then(() => {
                 dispatch(favoritesActions.UPDATE_FAVORITES({ [resource.uuid]: !isFavorite }));
+                dispatch(snackbarActions.CLOSE_SNACKBAR());
+                dispatch(snackbarActions.OPEN_SNACKBAR({
+                    message: isFavorite
+                        ? "Removed from favorites"
+                        : "Added to favorites",
+                    hideDuration: 2000
+                }));
             });
     };
 

diff --git a/src/views-components/snackbar/snackbar.tsx b/src/views-components/snackbar/snackbar.tsx
index d83d70145dacba29b73640eac52050971d128c03..c65d3640473cd035cf9bb4edf4b90a88d3375307 100644 (file)
--- a/src/views-components/snackbar/snackbar.tsx
+++ b/src/views-components/snackbar/snackbar.tsx
@@ -10,15 +10,17 @@ import { Dispatch } from "redux";
 import { snackbarActions } from "../../store/snackbar/snackbar-actions";
 
 const mapStateToProps = (state: RootState): SnackbarProps => ({
-    anchorOrigin: { vertical: "bottom", horizontal: "left" },
+    anchorOrigin: { vertical: "bottom", horizontal: "center" },
     open: state.snackbar.open,
     message: <span>{state.snackbar.message}</span>,
     autoHideDuration: state.snackbar.hideDuration
 });
 
 const mapDispatchToProps = (dispatch: Dispatch): Pick<SnackbarProps, "onClose"> => ({
-    onClose: () => {
-        dispatch(snackbarActions.CLOSE_SNACKBAR());
+    onClose: (event: any, reason: string) => {
+        if (reason !== "clickaway") {
+            dispatch(snackbarActions.CLOSE_SNACKBAR());
+        }
     }
 });