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;
+    }
   }
 }