proper cell links

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

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 {

src/constants/urls.ts

@@ -7,4 +7,5 @@ export const URLS = {
     EDITOR: '/examples/edit',
     IMAGE: '/examples/image',
   },
+  NODE_URL: (id: number) => `/cell/${id}`,
 };

src/redux/types.ts

@@ -84,7 +84,7 @@ export interface IBlock {
 }
 
 export interface INode {
-  id?: UUID;
+  id?: number;
   user_id: UUID;
 
   title: string;