LP-5723: back button logic fix

webapp/src/actions/actions.ts

@@ -3,6 +3,7 @@ import {AnyAction, Dispatch} from 'redux';
 import ActionTypes from 'action_types/';
 import {BadgeDetails, BadgeID, BadgeTypeDefinition} from 'types/badges';
 import {GrantModalData, RHSState, SubscriptionModalData} from 'types/general';
+import {id as pluginId} from '../manifest';
 
 /**
  * Stores`showRHSPlugin` action returned by
@@ -30,9 +31,16 @@ export function setRHSBadge(badgeID: BadgeID | null) {
 }
 
 export function setRHSView(view: RHSState) {
-    return {
-        type: ActionTypes.RECEIVED_RHS_VIEW,
-        data: view,
+    return (dispatch: Dispatch<AnyAction>, getState: () => any) => {
+        const state = getState();
+        const pluginState = state['plugins-' + pluginId];
+        const currentView = pluginState?.rhsView;
+        dispatch({
+            type: ActionTypes.RECEIVED_RHS_VIEW,
+            data: view,
+            prevView: currentView,
+        });
+        return {data: true};
     };
 }
 

webapp/src/components/rhs/badge_details.tsx

@@ -8,7 +8,7 @@ import {BadgeDetails, BadgeID} from '../../types/badges';
 import Client from '../../client/api';
 
 import {RHSState} from '../../types/general';
-import {IMAGE_TYPE_EMOJI, RHS_STATE_ALL, RHS_STATE_MY, RHS_STATE_OTHER} from '../../constants';
+import {IMAGE_TYPE_EMOJI, RHS_STATE_MY, RHS_STATE_OTHER} from '../../constants';
 import BadgeImage from '../badge_image/badge_image';
 
 import {markdown} from 'utils/markdown';
@@ -23,6 +23,7 @@ import './badge_details.scss';
 type Props = {
     badgeID: BadgeID | null;
     currentUserID: string;
+    prevView: RHSState;
     actions: {
         setRHSView: (view: RHSState) => void;
         setRHSUser: (user: string | null) => void;
@@ -128,7 +129,7 @@ class BadgeDetailsComponent extends React.PureComponent<Props, State> {
             <div className='BadgeDetails'>
                 <div className='BadgeDetails__backHeader'>
                     <BackButton
-                        targetView={RHS_STATE_ALL}
+                        targetView={this.props.prevView}
                         onNavigate={this.props.actions.setRHSView}
                     >
                         <FormattedMessage

webapp/src/components/rhs/index.tsx

@@ -15,7 +15,7 @@ import {getCustomEmojiByName, getCustomEmojisByName} from 'mattermost-redux/acti
 
 import {FormattedMessage} from 'react-intl';
 
-import {getRHSBadge, getRHSUser, getRHSView, getRHSTypeId, getRHSTypeName} from 'selectors';
+import {getRHSBadge, getRHSUser, getRHSView, getPrevRHSView, getRHSTypeId, getRHSTypeName} from 'selectors';
 import {RHS_STATE_ALL, RHS_STATE_DETAIL, RHS_STATE_OTHER, RHS_STATE_MY, RHS_STATE_TYPES, RHS_STATE_TYPE_BADGES} from '../../constants';
 import {RHSState} from 'types/general';
 import {openCreateBadgeModal, openCreateTypeModal, openEditBadgeModal, setRHSBadge, setRHSUser, setRHSView} from 'actions/actions';
@@ -32,6 +32,7 @@ import './all_badges.scss';
 const RHS: React.FC = () => {
     const dispatch = useDispatch();
     const currentView = useSelector(getRHSView);
+    const prevView = useSelector(getPrevRHSView);
     const currentBadge = useSelector(getRHSBadge);
     const currentUserID = useSelector(getRHSUser);
     const filterTypeId = useSelector(getRHSTypeId);
@@ -159,6 +160,7 @@ const RHS: React.FC = () => {
                 <BadgeDetailsComponent
                     badgeID={currentBadge}
                     currentUserID={myUser.id}
+                    prevView={prevView}
                     actions={{
                         setRHSView: (view: RHSState) => dispatch(setRHSView(view)),
                         setRHSUser: (user: string | null) => dispatch(setRHSUser(user)),

webapp/src/constants.ts

@@ -14,6 +14,7 @@ export const RHS_STATE_TYPE_BADGES: RHSState = 'type_badges';
 export const initialState: PluginState = {
     showRHS: null,
     rhsView: RHS_STATE_MY,
+    prevRhsView: RHS_STATE_MY,
     rhsBadge: null,
     rhsUser: null,
     rhsTypeId: null,

webapp/src/reducers/index.ts

@@ -23,6 +23,15 @@ function rhsView(state = RHS_STATE_MY, action: GenericAction) {
     }
 }
 
+function prevRhsView(state = RHS_STATE_MY, action: GenericAction) {
+    switch (action.type) {
+    case ActionTypes.RECEIVED_RHS_VIEW:
+        return action.prevView || state;
+    default:
+        return state;
+    }
+}
+
 function rhsUser(state = null, action: GenericAction) {
     switch (action.type) {
     case ActionTypes.RECEIVED_RHS_USER:
@@ -128,6 +137,7 @@ function subscriptionModalData(state = null, action: GenericAction) {
 export default combineReducers({
     showRHS,
     rhsView,
+    prevRhsView,
     rhsUser,
     rhsBadge,
     rhsTypeId,

webapp/src/selectors/index.ts

@@ -30,6 +30,13 @@ export const getRHSView = createSelector(
     },
 );
 
+export const getPrevRHSView = createSelector(
+    getPluginState,
+    (state) => {
+        return state.prevRhsView;
+    },
+);
+
 export const getRHSUser = createSelector(
     getPluginState,
     (state) => {

webapp/src/types/general.ts

@@ -14,6 +14,7 @@ export type SubscriptionModalData = {
 export type PluginState = {
     showRHS: (() => void)| null;
     rhsView: RHSState;
+    prevRhsView: RHSState;
     rhsUser: string | null;
     rhsBadge: BadgeID | null;
     rhsTypeId: number | null;