feat: Track navigation path when switching between cards

client/src/components/cards/CardModal/CardModal.jsx

@@ -6,6 +6,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
+import { Icon } from 'semantic-ui-react';
 import { push } from '../../../lib/redux-router';
 
 import selectors from '../../../selectors';
@@ -30,6 +31,7 @@ const CardModal = React.memo(() => {
   const selectListById = useMemo(() => selectors.makeSelectListById(), []);
 
   const card = useSelector(selectors.selectCurrentCard);
+  const prevCardId = useSelector(selectors.selectPrevCardId);
 
   const canEdit = useSelector((state) => {
     const list = selectListById(state, card.listId);
@@ -48,6 +50,10 @@ const CardModal = React.memo(() => {
     dispatch(push(Paths.BOARDS.replace(':id', card.boardId)));
   }, [card.boardId, dispatch]);
 
+  const handlePrevClick = useCallback(() => {
+    dispatch(push(Paths.CARDS.replace(':id', prevCardId)));
+  }, [prevCardId, dispatch]);
+
   const [ClosableModal, isClosableActiveRef] = useClosableModal();
 
   useEffect(() => {
@@ -95,6 +101,11 @@ const CardModal = React.memo(() => {
       className={classNames(styles.wrapper, card.type === CardTypes.STORY && styles.wrapperStory)}
       onClose={handleClose}
     >
+      {prevCardId && (
+        <button type="button" className={styles.prevButton} onClick={handlePrevClick}>
+          <Icon fitted name="arrow left" size="large" className={styles.prevButtonIcon} />
+        </button>
+      )}
       {canEdit ? (
         <AddAttachmentZone>
           <Content onClose={handleClose} />

client/src/components/cards/CardModal/CardModal.module.scss

@@ -9,6 +9,34 @@
     width: 95%;
   }
 
+  .prevButton {
+    background: rgba(255, 255, 255, 0.036);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: -120px;
+    padding: 18px 0;
+    position: absolute;
+    width: 100px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.072);
+
+      .prevkButtonIcon {
+        color: rgba(255, 255, 255, 0.72);
+      }
+    }
+  }
+
+  .prevButtonIcon {
+    color: rgba(255, 255, 255, 0.36);
+    position: sticky;
+    top: 5px;
+  }
+
   .wrapper {
     margin: 2rem auto;
     width: 880px;
@@ -24,5 +52,13 @@
     @media (width < 1026px) {
       @include smallScreen;
     }
+
+    .prevButton {
+      padding: 20px 0;
+    }
+
+    .prevButtonIcon {
+      top: 7px;
+    }
   }
 }

client/src/reducers/core.js

@@ -16,7 +16,9 @@ const initialState = {
   isEditModeEnabled: false,
   modal: null,
   boardId: null,
+  cardId: null,
   recentCardId: null,
+  prevCardIds: [],
   homeView: HomeViews.GROUPED_PROJECTS,
   projectsSearch: '',
   projectsOrder: ProjectOrders.BY_DEFAULT,
@@ -37,6 +39,7 @@ export default (state = initialState, { type, payload }) => {
         ...state,
         isContentFetching: false,
         boardId: payload.currentBoardId,
+        cardId: payload.currentCardId,
       };
 
       if (payload.currentCardId) {
@@ -45,6 +48,17 @@ export default (state = initialState, { type, payload }) => {
         nextState.recentCardId = null;
       }
 
+      if (payload.currentCardId) {
+        if (state.cardId) {
+          nextState.prevCardIds =
+            payload.currentCardId === nextState.prevCardIds.at(-1)
+              ? [...nextState.prevCardIds.slice(0, -1)]
+              : [...nextState.prevCardIds, state.cardId];
+        }
+      } else if (nextState.prevCardIds.length > 0) {
+        nextState.prevCardIds = [];
+      }
+
       if (payload.isEditModeEnabled !== undefined) {
         nextState.isEditModeEnabled = payload.isEditModeEnabled;
       }

client/src/selectors/core.js

@@ -13,6 +13,8 @@ export const selectIsEditModeEnabled = ({ core: { isEditModeEnabled } }) => isEd
 
 export const selectRecentCardId = ({ core: { recentCardId } }) => recentCardId;
 
+export const selectPrevCardId = ({ core: { prevCardIds } }) => prevCardIds.at(-1);
+
 export const selectHomeView = ({ core: { homeView } }) => homeView;
 
 export const selectProjectsSearch = ({ core: { projectsSearch } }) => projectsSearch;
@@ -28,6 +30,7 @@ export default {
   selectIsFavoritesEnabled,
   selectIsEditModeEnabled,
   selectRecentCardId,
+  selectPrevCardId,
   selectHomeView,
   selectProjectsSearch,
   selectProjectsOrder,