From b85141046d104959205ac33f0405c50431b3909f Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Wed, 28 Nov 2018 18:37:54 +0700
Subject: [PATCH] cropper: separate crop panel

---
 src/components/panels/RendererPanel.jsx | 39 +++++++++++++++++++++++
 src/components/panels/UserPanel.jsx     |  2 +-
 src/components/renderer/Renderer.jsx    | 42 ++++---------------------
 src/redux/store.js                      | 11 ++-----
 src/styles/panel.less                   |  6 ++++
 5 files changed, 54 insertions(+), 46 deletions(-)
 create mode 100644 src/components/panels/RendererPanel.jsx

diff --git a/src/components/panels/RendererPanel.jsx b/src/components/panels/RendererPanel.jsx
new file mode 100644
index 0000000..853d363
--- /dev/null
+++ b/src/components/panels/RendererPanel.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Icon } from '$components/panels/Icon';
+
+type Props = {
+
+};
+
+export const RendererPanel = ({ onCancel, onSubmit }): Props => (
+  <div
+    className="panel active center"
+    style={{ zIndex: 1000 }}
+  >
+    <div className="control-bar control-bar-padded">
+      <button>
+        <Icon icon="icon-logo-3" />
+      </button>
+    </div>
+
+    <div className="control-sep" />
+
+    <div className="control-bar">
+      <button
+        className="highlighted cancel"
+        onClick={onCancel}
+      >
+        <Icon icon="icon-cancel-1" />
+        <span>Отмена</span>
+      </button>
+
+      <button
+        className="success"
+        onClick={onSubmit}
+      >
+        <span>СКАЧАТЬ</span>
+        <Icon icon="icon-get-1" />
+      </button>
+    </div>
+  </div>
+);
diff --git a/src/components/panels/UserPanel.jsx b/src/components/panels/UserPanel.jsx
index 6039fea..71e97ce 100644
--- a/src/components/panels/UserPanel.jsx
+++ b/src/components/panels/UserPanel.jsx
@@ -93,7 +93,7 @@ export class Component extends React.PureComponent<Props, void> {
             <button
               onClick={this.props.takeAShot}
             >
-              <Icon icon="icon-shot-3" />
+              <Icon icon="icon-shot-2" />
             </button>
           </div>
         </div>
diff --git a/src/components/renderer/Renderer.jsx b/src/components/renderer/Renderer.jsx
index d79f1e2..9f61010 100644
--- a/src/components/renderer/Renderer.jsx
+++ b/src/components/renderer/Renderer.jsx
@@ -7,6 +7,7 @@ import Croppr from 'croppr';
 import 'croppr/dist/croppr.css';
 import { Icon } from '$components/panels/Icon';
 import { LOGOS } from '$constants/logos';
+import { RendererPanel } from '$components/panels/RendererPanel';
 
 type Props = {
   data: String,
@@ -45,7 +46,7 @@ class Component extends React.Component<Props, State> {
     this.logo.style.transform = `scale(${scale})`;
 
     this.logoImg = document.createElement('img');
-    this.logoImg.src = LOGOS[this.props.logo][1];
+    if (this.props.logo && LOGOS[this.props.logo][1]) this.logoImg.src = LOGOS[this.props.logo][1];
 
     this.logo.append(this.logoImg);
     regionEl.append(this.logo);
@@ -89,41 +90,10 @@ class Component extends React.Component<Props, State> {
           </div>
         </div>
 
-        <div
-          className="panel active"
-          style={{
-            zIndex: 1000,
-            left: '50%',
-            right: 'auto',
-            transform: 'translateX(-50%)',
-          }}
-        >
-          <div className="control-bar control-bar-padded">
-            <button>
-              <Icon icon="icon-logo-3" />
-            </button>
-          </div>
-
-          <div className="control-sep" />
-
-          <div className="control-bar">
-            <button
-              className="highlighted cancel"
-              onClick={this.props.hideRenderer}
-            >
-              <Icon icon="icon-cancel-1" />
-              <span>Отмена</span>
-            </button>
-
-            <button
-              className="success"
-              onClick={this.getImage}
-            >
-              <span>СКАЧАТЬ</span>
-              <Icon icon="icon-get-1" />
-            </button>
-          </div>
-        </div>
+        <RendererPanel
+          onCancel={this.props.hideRenderer}
+          onSubmit={this.getImage}
+        />
       </div>
     );
   }
diff --git a/src/redux/store.js b/src/redux/store.js
index 582b3a9..11f93dc 100644
--- a/src/redux/store.js
+++ b/src/redux/store.js
@@ -4,15 +4,12 @@ import { persistStore, persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 import createSagaMiddleware from 'redux-saga';
 
-// import createHistory from 'history/createBrowserHistory';
-// import { routerReducer, routerMiddleware } from 'react-router-redux';
-
 import { userReducer } from '$redux/user/reducer';
 import { userSaga } from '$redux/user/sagas';
 
 const userPersistConfig = {
   key: 'user',
-  whitelist: ['user'],
+  whitelist: ['user', 'logo'],
   storage,
 };
 
@@ -39,13 +36,9 @@ export const store = createStore(
 );
 
 export function configureStore() {
-  // run sagas
   sagaMiddleware.run(userSaga);
 
   const persistor = persistStore(store);
 
-  return {
-    store,
-    persistor
-  };
+  return { store, persistor };
 }
diff --git a/src/styles/panel.less b/src/styles/panel.less
index 962eb10..9c14125 100644
--- a/src/styles/panel.less
+++ b/src/styles/panel.less
@@ -56,6 +56,12 @@
     right: 10px;
   }
 
+  &.center {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+
   button {
     border: none;
     background: transparent;