From 327272a08a493b13ca51e5aa702e257099c32a0b Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 13 Nov 2019 16:15:00 +0700
Subject: [PATCH] displaying profile backdrop

---
 .../profile/ProfileBackdrop/index.tsx         | 35 +++++++++++++++++++
 .../profile/ProfileBackdrop/styles.scss       | 30 ++++++++++++++++
 .../dialogs/BetterScrollDialog/index.tsx      |  4 +++
 .../dialogs/BetterScrollDialog/styles.scss    |  8 +++++
 .../dialogs/ProfileDialog/index.tsx           | 28 +++++++++++----
 5 files changed, 99 insertions(+), 6 deletions(-)
 create mode 100644 src/components/profile/ProfileBackdrop/index.tsx
 create mode 100644 src/components/profile/ProfileBackdrop/styles.scss

diff --git a/src/components/profile/ProfileBackdrop/index.tsx b/src/components/profile/ProfileBackdrop/index.tsx
new file mode 100644
index 00000000..2e27f86d
--- /dev/null
+++ b/src/components/profile/ProfileBackdrop/index.tsx
@@ -0,0 +1,35 @@
+import React, { FC, useState, useCallback, useEffect } from 'react';
+import { IUser } from '~/redux/auth/types';
+import styles from './styles.scss';
+import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import classNames from 'classnames';
+
+interface IProps {
+  cover: IUser['cover'];
+}
+
+const ProfileBackdrop: FC<IProps> = ({ cover }) => {
+  const [is_loaded, setIsLoaded] = useState(false);
+
+  const onLoad = useCallback(() => setIsLoaded(true), [setIsLoaded]);
+
+  const image = getURL(cover, PRESETS.cover);
+
+  useEffect(() => {
+    setIsLoaded(false);
+  }, [cover]);
+
+  if (!cover) return null;
+
+  return (
+    <div
+      className={classNames(styles.cover, { [styles.active]: is_loaded })}
+      style={{ backgroundImage: `url("${image}")` }}
+    >
+      <img src={image} onLoad={onLoad} />
+    </div>
+  );
+};
+
+export { ProfileBackdrop };
diff --git a/src/components/profile/ProfileBackdrop/styles.scss b/src/components/profile/ProfileBackdrop/styles.scss
new file mode 100644
index 00000000..0e29b698
--- /dev/null
+++ b/src/components/profile/ProfileBackdrop/styles.scss
@@ -0,0 +1,30 @@
+.cover {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: 50% 50% no-repeat/cover;
+  opacity: 0;
+  transition: opacity 1s;
+
+  &.active {
+    opacity: 1;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: url('~/sprites/stripes.svg') transparentize($color: #000000, $amount: 0.5);
+  }
+
+  img {
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+}
diff --git a/src/containers/dialogs/BetterScrollDialog/index.tsx b/src/containers/dialogs/BetterScrollDialog/index.tsx
index 6cf511f8..e60c00ad 100644
--- a/src/containers/dialogs/BetterScrollDialog/index.tsx
+++ b/src/containers/dialogs/BetterScrollDialog/index.tsx
@@ -7,6 +7,7 @@ interface IProps {
   children: React.ReactChild;
   header?: JSX.Element;
   footer?: JSX.Element;
+  backdrop?: JSX.Element;
   size?: 'medium' | 'big';
   width?: number;
   error?: string;
@@ -20,6 +21,7 @@ const BetterScrollDialog: FC<IProps> = ({
   children,
   header,
   footer,
+  backdrop,
   width = 600,
   error,
   onClose,
@@ -34,6 +36,8 @@ const BetterScrollDialog: FC<IProps> = ({
 
   return (
     <div className={styles.wrap} ref={ref}>
+      {backdrop && <div className={styles.backdrop}>{backdrop}</div>}
+
       <div className={styles.container} style={{ maxWidth: width }}>
         {onClose && (
           <div className={styles.close} onClick={onClose}>
diff --git a/src/containers/dialogs/BetterScrollDialog/styles.scss b/src/containers/dialogs/BetterScrollDialog/styles.scss
index 994d4bf9..5e181c35 100644
--- a/src/containers/dialogs/BetterScrollDialog/styles.scss
+++ b/src/containers/dialogs/BetterScrollDialog/styles.scss
@@ -97,3 +97,11 @@
   pointer-events: none;
   background: linear-gradient($red, transparentize($red, 1));
 }
+
+.backdrop {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/containers/dialogs/ProfileDialog/index.tsx b/src/containers/dialogs/ProfileDialog/index.tsx
index b09f89d7..05024d6f 100644
--- a/src/containers/dialogs/ProfileDialog/index.tsx
+++ b/src/containers/dialogs/ProfileDialog/index.tsx
@@ -3,17 +3,24 @@ import { BetterScrollDialog } from '../BetterScrollDialog';
 import { ProfileInfo } from '~/containers/profile/ProfileInfo';
 import { IDialogProps } from '~/redux/types';
 import { connect } from 'react-redux';
-import { selectAuthProfile } from '~/redux/auth/selectors';
+import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
 import { ProfileMessages } from '~/containers/profile/ProfileMessages';
 import { ProfileDescription } from '~/components/profile/ProfileDescription';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { IAuthState } from '~/redux/auth/types';
+import pick from 'ramda/es/pick';
+import { ProfileBackdrop } from '~/components/profile/ProfileBackdrop';
 
 const TAB_CONTENT = {
   profile: <ProfileDescription />,
   messages: <ProfileMessages />,
 };
-const mapStateToProps = selectAuthProfile;
+
+const mapStateToProps = state => ({
+  profile: selectAuthProfile(state),
+  user: pick(['id'], selectAuthUser(state)),
+});
+
 const mapDispatchToProps = {
   authSetProfile: AUTH_ACTIONS.authSetProfile,
 };
@@ -23,9 +30,9 @@ type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDisp
 const ProfileDialogUnconnected: FC<IProps> = ({
   onRequestClose,
   authSetProfile,
-  is_loading,
-  user,
-  tab,
+
+  profile: { is_loading, user, tab },
+  user: { id },
 }) => {
   const setTab = useCallback((val: IAuthState['profile']['tab']) => authSetProfile({ tab: val }), [
     authSetProfile,
@@ -33,7 +40,16 @@ const ProfileDialogUnconnected: FC<IProps> = ({
 
   return (
     <BetterScrollDialog
-      header={<ProfileInfo is_loading={is_loading} user={user} tab={tab} setTab={setTab} />}
+      header={
+        <ProfileInfo
+          is_own={user && user.id === id}
+          is_loading={is_loading}
+          user={user}
+          tab={tab}
+          setTab={setTab}
+        />
+      }
+      backdrop={<ProfileBackdrop cover={user && user.cover} />}
       onClose={onRequestClose}
     >
       {TAB_CONTENT[tab] || null}