From ed3f6369fb0a24f093986999ca2012e5dd56dfe7 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 23 Oct 2019 14:51:34 +0700
Subject: [PATCH] flow grid now has 5 columns

---
 src/components/flow/Cell/styles.scss     | 10 ++++++++++
 src/components/flow/FlowGrid/styles.scss |  8 +++++++-
 src/redux/flow/sagas.ts                  | 13 ++++++++++---
 src/redux/node/sagas.ts                  | 10 +++++-----
 src/styles/variables.scss                |  4 ++--
 5 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/components/flow/Cell/styles.scss b/src/components/flow/Cell/styles.scss
index 4361e35a..0071fcbc 100644
--- a/src/components/flow/Cell/styles.scss
+++ b/src/components/flow/Cell/styles.scss
@@ -91,6 +91,16 @@
     grid-column-end: span 2;
   }
 
+  :global(.horizontal),
+  :global(.quadro) {
+    grid-column-end: span 2;
+  }
+
+  :global(.vertical),
+  :global(.quadro) {
+    grid-row-end: span 2;
+  }
+
   .is_text {
     background: none;
     padding: 10px;
diff --git a/src/components/flow/FlowGrid/styles.scss b/src/components/flow/FlowGrid/styles.scss
index b816a3de..8f761995 100644
--- a/src/components/flow/FlowGrid/styles.scss
+++ b/src/components/flow/FlowGrid/styles.scss
@@ -14,9 +14,15 @@ $cols: $content_width / $cell;
   grid-column-gap: $grid_line;
   grid-row-gap: $grid_line;
 
+  @media (max-width: $cell * 6) {
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: 40vh 20vw;
+    grid-auto-rows: 20vw;
+  }
+
   @media (max-width: $cell * 5) {
     grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: 25vw $cell;
+    grid-template-rows: 40vh 25vw;
     grid-auto-rows: 25vw;
   }
 
diff --git a/src/redux/flow/sagas.ts b/src/redux/flow/sagas.ts
index a52cb975..377b7fa5 100644
--- a/src/redux/flow/sagas.ts
+++ b/src/redux/flow/sagas.ts
@@ -1,10 +1,11 @@
-import { takeLatest, call, put } from 'redux-saga/effects';
+import { takeLatest, call, put, select } from 'redux-saga/effects';
 import { REHYDRATE } from 'redux-persist';
 import { FLOW_ACTIONS } from './constants';
 import { getNodes } from '../node/api';
-import { flowSetNodes } from './actions';
-import { objFromArray } from '~/utils/fn';
+import { flowSetNodes, flowSetCellView } from './actions';
 import { IResultWithStatus, INode } from '../types';
+import { updateNodeEverywhere } from '../node/sagas';
+import { selectFlowNodes } from './selectors';
 
 function* onGetFlow() {
   const {
@@ -20,6 +21,12 @@ function* onGetFlow() {
   yield put(flowSetNodes(nodes));
 }
 
+function* onSetCellView({ id, flow }: ReturnType<typeof flowSetCellView>) {
+  const nodes = yield select(selectFlowNodes);
+  yield put(flowSetNodes(nodes.map(node => (node.id === id ? { ...node, flow } : node))));
+}
+
 export default function* nodeSaga() {
   yield takeLatest([FLOW_ACTIONS.GET_FLOW, REHYDRATE], onGetFlow);
+  yield takeLatest(FLOW_ACTIONS.SET_CELL_VIEW, onSetCellView);
 }
diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts
index 70340422..4e0c577e 100644
--- a/src/redux/node/sagas.ts
+++ b/src/redux/node/sagas.ts
@@ -41,7 +41,7 @@ import { NODE_EDITOR_DIALOGS, DIALOGS } from '../modal/constants';
 import { INodeState } from './reducer';
 import { IFlowState } from '../flow/reducer';
 
-function* updateNodeEverythere(node) {
+export function* updateNodeEverywhere(node) {
   const {
     current: { id },
   }: INodeState = yield select(selectNode);
@@ -189,13 +189,13 @@ function* onLikeSaga({ id }: ReturnType<typeof nodeLike>) {
     current: { is_liked },
   } = yield select(selectNode);
 
-  yield call(updateNodeEverythere, { ...current, is_liked: !is_liked });
+  yield call(updateNodeEverywhere, { ...current, is_liked: !is_liked });
 
   const { data, error } = yield call(reqWrapper, postNodeLike, { id });
 
   if (!error || data.is_liked === !is_liked) return; // ok and matches
 
-  yield call(updateNodeEverythere, { ...current, is_liked });
+  yield call(updateNodeEverywhere, { ...current, is_liked });
 }
 
 function* onStarSaga({ id }: ReturnType<typeof nodeLike>) {
@@ -204,13 +204,13 @@ function* onStarSaga({ id }: ReturnType<typeof nodeLike>) {
     current: { is_heroic },
   } = yield select(selectNode);
 
-  yield call(updateNodeEverythere, { ...current, is_heroic: !is_heroic });
+  yield call(updateNodeEverywhere, { ...current, is_heroic: !is_heroic });
 
   const { data, error } = yield call(reqWrapper, postNodeStar, { id });
 
   if (!error || data.is_heroic === !is_heroic) return; // ok and matches
 
-  yield call(updateNodeEverythere, { ...current, is_heroic });
+  yield call(updateNodeEverywhere, { ...current, is_heroic });
 }
 
 export default function* nodeSaga() {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 6af3bd4e..6cbf9b63 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,8 +1,8 @@
 @import 'colors';
 
-$cell: 320px;
+$cell: 280px;
 $grid_line: 4px;
-$content_width: $cell * 4 + $grid_line * 3;
+$content_width: $cell * 5 + $grid_line * 4;
 $gap: 10px;
 $spc: $gap * 2;
 $comment_height: 72px;