From e38a046eb7e2f0cf61cfea063d04cc80aa84165b Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Sun, 25 Aug 2019 13:35:02 +0700
Subject: [PATCH] proper cell links

---
 src/components/flow/Cell/index.tsx   | 11 ++++++++---
 src/components/flow/Cell/styles.scss |  6 +++---
 src/constants/urls.ts                |  1 +
 src/redux/types.ts                   |  2 +-
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx
index c432401f..32cf673d 100644
--- a/src/components/flow/Cell/index.tsx
+++ b/src/components/flow/Cell/index.tsx
@@ -1,8 +1,10 @@
 import React, { FC, useState, useCallback } from 'react';
+import { NavLink } from 'react-router-dom';
 import { INode } from '~/redux/types';
 import * as styles from './styles.scss';
 import { getImageSize } from '~/utils/dom';
 import classNames = require('classnames');
+import { URLS } from '~/constants/urls';
 
 interface IProps {
   node: INode;
@@ -14,7 +16,7 @@ interface IProps {
   is_text?: boolean;
 }
 
-const Cell: FC<IProps> = ({ node: { title, brief }, is_text = false }) => {
+const Cell: FC<IProps> = ({ node: { id, title, brief }, is_text = false }) => {
   const [is_loaded, setIsLoaded] = useState(false);
 
   const onImageLoad = useCallback(() => {
@@ -22,7 +24,10 @@ const Cell: FC<IProps> = ({ node: { title, brief }, is_text = false }) => {
   }, [setIsLoaded]);
 
   return (
-    <div className={classNames(styles.cell, 'vert-1', 'hor-1', { is_text: false })}>
+    <NavLink
+      to={URLS.NODE_URL(id)}
+      className={classNames(styles.cell, 'vert-1', 'hor-1', { is_text: false })}
+    >
       <div className={styles.face}>{title && <div className={styles.title}>{title}</div>}</div>
 
       {brief && brief.thumbnail && (
@@ -36,7 +41,7 @@ const Cell: FC<IProps> = ({ node: { title, brief }, is_text = false }) => {
           <img src={getImageSize(brief.thumbnail, 'medium')} onLoad={onImageLoad} alt="" />
         </div>
       )}
-    </div>
+    </NavLink>
   );
 };
 
diff --git a/src/components/flow/Cell/styles.scss b/src/components/flow/Cell/styles.scss
index e3e93e85..4b020662 100644
--- a/src/components/flow/Cell/styles.scss
+++ b/src/components/flow/Cell/styles.scss
@@ -7,6 +7,8 @@
   border-radius: $cell_radius;
   position: relative;
   overflow: hidden;
+  cursor: pointer;
+  color: white;
 
   &:global(.is_hero) {
     .title {
@@ -56,14 +58,12 @@
 
   text-transform: uppercase;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 
   box-sizing: border-box;
 }
 
 .title {
-  max-height: 2em;
+  max-height: 2.6em;
 }
 
 .text_title {
diff --git a/src/constants/urls.ts b/src/constants/urls.ts
index 0dcf5ce5..ffaeefd4 100644
--- a/src/constants/urls.ts
+++ b/src/constants/urls.ts
@@ -7,4 +7,5 @@ export const URLS = {
     EDITOR: '/examples/edit',
     IMAGE: '/examples/image',
   },
+  NODE_URL: (id: number) => `/cell/${id}`,
 };
diff --git a/src/redux/types.ts b/src/redux/types.ts
index f9a5aa0a..0be1d2de 100644
--- a/src/redux/types.ts
+++ b/src/redux/types.ts
@@ -84,7 +84,7 @@ export interface IBlock {
 }
 
 export interface INode {
-  id?: UUID;
+  id?: number;
   user_id: UUID;
 
   title: string;