From 23c9e42bd58a97309f26be0a7d2fff7b6e65dbe1 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 8 Jan 2020 12:15:00 +0700
Subject: [PATCH] fixed logo components

---
 src/components/dialogs/LogoDialog.tsx     | 22 +++++++++++++++------
 src/components/dialogs/ProviderDialog.tsx |  1 -
 src/components/logo/LogoPreview.tsx       | 24 +++++++++++------------
 src/redux/map/selectors.ts                |  1 +
 4 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/components/dialogs/LogoDialog.tsx b/src/components/dialogs/LogoDialog.tsx
index e3a5b2d..2fb26e5 100644
--- a/src/components/dialogs/LogoDialog.tsx
+++ b/src/components/dialogs/LogoDialog.tsx
@@ -3,14 +3,20 @@ import { LOGOS } from '$constants/logos';
 import { Icon } from '$components/panels/Icon';
 import classnames from 'classnames';
 import * as MAP_ACTIONS from "$redux/map/actions"
-import { IMapReducer } from '$redux/map';
+import { selectMapLogo } from '$redux/map/selectors';
+import { connect } from 'react-redux';
 
-interface Props  {
-  logo: IMapReducer['logo'],
-  mapSetLogo: typeof MAP_ACTIONS.mapSetLogo,
-}
+const mapStateToProps = state => ({
+  logo: selectMapLogo(state),
+});
 
-export const LogoDialog = ({ logo, mapSetLogo }: Props) => (
+const mapDispatchToProps = {
+  mapSetLogo: MAP_ACTIONS.mapSetLogo,
+};
+
+type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+const LogoDialogUnconnected = ({ logo, mapSetLogo }: Props) => (
   <div className="control-dialog top">
     <div className="helper logo-helper">
       <div className="helper-back">
@@ -30,3 +36,7 @@ export const LogoDialog = ({ logo, mapSetLogo }: Props) => (
     </div>
   </div>
 );
+
+const LogoDialog = connect(mapStateToProps, mapDispatchToProps)(LogoDialogUnconnected);
+
+export { LogoDialog };
\ No newline at end of file
diff --git a/src/components/dialogs/ProviderDialog.tsx b/src/components/dialogs/ProviderDialog.tsx
index 8aeaeb9..3a870c2 100644
--- a/src/components/dialogs/ProviderDialog.tsx
+++ b/src/components/dialogs/ProviderDialog.tsx
@@ -3,7 +3,6 @@ import { PROVIDERS, replaceProviderUrl } from '$constants/providers';
 import { Icon } from '$components/panels/Icon';
 import classnames from 'classnames';
 import * as MAP_ACTIONS from "$redux/map/actions";
-import { IRootState } from "$redux/user";
 import { selectMapProvider } from '$redux/map/selectors';
 import { connect } from 'react-redux';
 
diff --git a/src/components/logo/LogoPreview.tsx b/src/components/logo/LogoPreview.tsx
index 923234a..5a6f212 100644
--- a/src/components/logo/LogoPreview.tsx
+++ b/src/components/logo/LogoPreview.tsx
@@ -1,21 +1,21 @@
-import * as React from "react";
-import { LOGOS } from "$constants/logos";
-import { connect } from "react-redux";
-import { IRootState } from "$redux/user";
+import * as React from 'react';
+import { LOGOS } from '$constants/logos';
+import { connect } from 'react-redux';
+import { IRootState } from '$redux/user';
+import { selectMapLogo } from '$redux/map/selectors';
 
-interface Props extends IRootState {}
+const mapStateToProps = state => ({ logo: selectMapLogo(state) });
+type Props = ReturnType<typeof mapStateToProps>;
 
-const Component = ({ logo }: Props) => (
+const LogoPreviewUnconnected = React.memo(({ logo }: Props) => (
   <div
     className="logo-preview"
     style={{
-      backgroundImage: logo
-        ? `url(${LOGOS && LOGOS[logo] && LOGOS[logo][1]})`
-        : "none"
+      backgroundImage: logo ? `url(${LOGOS && LOGOS[logo] && LOGOS[logo][1]})` : 'none',
     }}
   />
-);
+));
 
-const mapStateToProps = ({ user: { logo } }) => ({ logo });
+const LogoPreview = connect(mapStateToProps)(LogoPreviewUnconnected);
 
-export const LogoPreview = connect(mapStateToProps)(Component);
+export { LogoPreview };
diff --git a/src/redux/map/selectors.ts b/src/redux/map/selectors.ts
index 6bceeda..222d8aa 100644
--- a/src/redux/map/selectors.ts
+++ b/src/redux/map/selectors.ts
@@ -2,5 +2,6 @@ import { IState } from "$redux/store";
 
 export const selectMap = (state: IState) => state.map;
 export const selectMapProvider = (state: IState) => state.map.provider;
+export const selectMapLogo = (state: IState) => state.map.logo;
 export const selectMapRoute= (state: IState) => state.map.route;
 export const selectMapStickers = (state: IState) => state.map.stickers;
\ No newline at end of file