fixed logo components

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  {
+const mapStateToProps = state => ({
-  logo: IMapReducer['logo'],
+  logo: selectMapLogo(state),
-  mapSetLogo: typeof MAP_ACTIONS.mapSetLogo,
+});
-}
 
-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 };

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';
 

src/components/logo/LogoPreview.tsx

@@ -1,21 +1,21 @@
-import * as React from "react";
+import * as React from 'react';
-import { LOGOS } from "$constants/logos";
+import { LOGOS } from '$constants/logos';
-import { connect } from "react-redux";
+import { connect } from 'react-redux';
-import { IRootState } from "$redux/user";
+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
+      backgroundImage: logo ? `url(${LOGOS && LOGOS[logo] && LOGOS[logo][1]})` : 'none',
-        ? `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 };

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;