From 4d5d76cf6381b9f690523c17662ab4b05c2350ae Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 26 Jun 2020 11:42:24 +0700
Subject: [PATCH] fixed flow navigation

---
 src/components/flow/Cell/index.tsx   |  6 ++-
 src/components/flow/Cell/styles.scss | 81 ++--------------------------
 src/redux/node/sagas.ts              |  2 -
 3 files changed, 7 insertions(+), 82 deletions(-)

diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx
index c687156f..b52d0b16 100644
--- a/src/components/flow/Cell/index.tsx
+++ b/src/components/flow/Cell/index.tsx
@@ -10,6 +10,7 @@ import { PRESETS } from '~/constants/urls';
 import { debounce } from 'throttle-debounce';
 import { NODE_TYPES } from '~/redux/node/constants';
 import { Group } from '~/components/containers/Group';
+import { Link } from 'react-router-dom';
 
 const THUMBNAIL_SIZES = {
   horizontal: PRESETS.small_hero,
@@ -67,6 +68,7 @@ const Cell: FC<IProps> = ({
     setIsLoaded(true);
   }, [setIsLoaded]);
 
+  // Replaced it with <Link>, maybe, you can remove it completely with NodeSelect action
   const onClick = useCallback(() => onSelect(id, type), [onSelect, id, type]);
   const has_description = description && description.length > 32;
 
@@ -130,7 +132,7 @@ const Cell: FC<IProps> = ({
             </div>
           )}
 
-          <div className={classNames(styles.face)} onClick={onClick}>
+          <Link className={classNames(styles.face)} to={`/post${id}`}>
             <div className={styles.face_content}>
               {title && !text && <div className={styles.title}>{title}</div>}
 
@@ -150,7 +152,7 @@ const Cell: FC<IProps> = ({
                 </div>
               )}
             </div>
-          </div>
+          </Link>
 
           {thumbnail && (
             <div
diff --git a/src/components/flow/Cell/styles.scss b/src/components/flow/Cell/styles.scss
index 284204fd..f6086d4b 100644
--- a/src/components/flow/Cell/styles.scss
+++ b/src/components/flow/Cell/styles.scss
@@ -29,8 +29,6 @@
 .text {
   font: $font_18_regular;
   line-height: 22px;
-  // margin-top: $gap;
-  // letter-spacing: 0.5px;
   background: transparentize($color: $content_bg, $amount: 0.3) url('~/sprites/stripes.svg');
   padding: $gap;
   box-sizing: border-box;
@@ -68,7 +66,7 @@
 .title,
 .text_title {
   font: $font_cell_title;
-  line-height: 1.1em;
+  line-height: 1.25em;
 
   text-transform: uppercase;
   overflow: hidden;
@@ -180,82 +178,9 @@
   z-index: 2;
   border-radius: $cell_radius;
   padding: $gap / 2;
-  // pointer-events: none;
-  // touch-action: none;
   animation: appear 1s forwards;
-
-  // @media (min-width: $cell * 2 + $grid_line) {
-  //   .vertical > &.has_text,
-  //   .horizontal > &.has_text,
-  //   .quadro > &.has_text {
-  //     box-sizing: border-box;
-  //     background: none;
-  //     box-shadow: none;
-  //     padding: $grid_line;
-
-  //     &::after {
-  //       display: none;
-  //     }
-
-  //     .face_content {
-  //       padding: $gap;
-  //       background: rgba(25, 25, 25, 0.9);
-  //       border-radius: $radius;
-  //       overflow: hidden;
-  //       position: relative;
-
-  //       &:after {
-  //         content: "";
-  //         background: linear-gradient(
-  //           transparentize($content_bg, 1),
-  //           $content_bg
-  //         );
-  //         position: absolute;
-  //         bottom: 0;
-  //         left: 0;
-  //         height: 50px;
-  //         width: 100%;
-  //         border-radius: 0 0 $cell_radius $cell_radius;
-  //       }
-  //     }
-
-  //     .text::after {
-  //       display: none;
-  //     }
-  //   }
-
-  //   .vertical > &.has_text {
-  //     top: auto;
-  //     bottom: 0;
-  //     max-height: 50%;
-  //     max-width: 100%;
-  //     height: auto;
-  //     width: auto;
-  //     padding: ($grid_line / 2) $grid_line $grid_line $grid_line;
-  //   }
-
-  //   .horizontal > &.has_text {
-  //     top: auto;
-  //     left: 0;
-  //     height: 100%;
-  //     max-width: 50%;
-  //     // height: auto;
-  //     width: auto;
-  //     bottom: 0;
-  //     padding: $grid_line ($grid_line / 2) $grid_line $grid_line;
-  //   }
-
-  //   .quadro > &.has_text {
-  //     padding: ($grid_line / 2) ($grid_line / 2) $grid_line $grid_line;
-  //     top: auto;
-  //     max-height: 50%;
-  //     max-width: 50%;
-  //     height: auto;
-  //     width: auto;
-  //     bottom: 0;
-  //     left: 0;
-  //   }
-  // }
+  color: white;
+  text-decoration: none;
 }
 
 .menu {
diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts
index 4a1a0b32..d1bc6412 100644
--- a/src/redux/node/sagas.ts
+++ b/src/redux/node/sagas.ts
@@ -115,8 +115,6 @@ function* onNodeGoto({ id, node_type }: ReturnType<typeof nodeGotoNode>) {
   yield put(nodeLoadNode(id));
   yield put(nodeSetCommentData(0, { ...EMPTY_COMMENT }));
   yield put(nodeSetRelated(null));
-
-  yield put(push(URLS.NODE_URL(id)));
 }
 
 function* onNodeLoadMoreComments() {