Merge pull request #134 from Lapkipomoshi/dev

test-deploy: june-1

.eslintrc.json

@@ -63,6 +63,7 @@
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "class-methods-use-this": "warn",
     "prefer-promise-reject-errors": "warn",
-    "react/jsx-one-expression-per-line": "off"
+    "react/jsx-one-expression-per-line": "off",
+    "camelcase": [1, { "properties": "never" }]
   }
 }

src/components/InfoTooltip/InfoTooltip.jsx

@@ -1,12 +1,35 @@
-import React from 'react';
-import './InfoTooltip.css';
+import React, { useEffect, useRef } from 'react';
+import './InfoTooltip.scss';
+
+const InfoTooltip = ({ isOpen, image, message, onClose }) => {
+  const popup = useRef(null);
+
+  const handleOverlayClose = (e) => {
+    const infoPopup = e.target.classList;
+    if (infoPopup.contains('popup_opened') || infoPopup.contains('popup__button-close')) {
+      onClose();
+    }
+  };
+
+  const handleEscClose = (e) => {
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleEscClose);
+    document.addEventListener('click', handleOverlayClose);
+    return () => {
+      document.removeEventListener('keydown', handleEscClose);
+      document.removeEventListener('click', handleOverlayClose);
+    };
+  }, []);
 
-function InfoTooltip({
-  isOpen, image, message,
-}) {
   return (
     <div
       className={`popup ${isOpen && 'popup_opened'}`}
+      ref={popup}
     >
       <div className='popup__container'>
         <img
@@ -16,9 +39,15 @@ function InfoTooltip({
         />
 
         <p className='popup__text'>{message}</p>
+
+        <button
+          type='button'
+          className='popup__button-close'
+          onClick={onClose}
+        />
       </div>
     </div>
   );
-}
+};
 
 export default InfoTooltip;

src/components/InfoTooltip/InfoTooltip.css → src/components/InfoTooltip/InfoTooltip.scss

@@ -1,3 +1,5 @@
+$images-path: '../../images';
+
 .popup {
   width: 100%;
   height: 100%;
@@ -11,13 +13,13 @@
   visibility: hidden;
   opacity: 0;
   transition: visibility 0.5s, opacity 0.5s ease-in-out;
-}
 
-.popup_opened {
-  display: flex;
-  visibility: visible;
-  opacity: 1;
-  z-index: 2;
+  &_opened {
+    display: flex;
+    visibility: visible;
+    opacity: 1;
+    z-index: 2;
+  }
 }
 
 .popup__container {
@@ -39,11 +41,31 @@
 }
 
 .popup__text {
-  font-family: 'Montserrat Alternates', Arial, sans-serif;
+  font-family: var(--font-family-title);
   font-style: normal;
   font-weight: 600;
   font-size: 40px;
   line-height: 49px;
   text-align: center;
   color: var(--color-text-base);
 }
+
+.popup__button-close {
+  background-image: url('#{$images-path}/icons/ic_button_close.svg');
+  background-size: contain;
+  border: none;
+  width: 36px;
+  height: 36px;
+  background-color: rgba(0, 0, 0, 0);
+  padding: 0;
+  margin: 0;
+  transition: opacity 0.2s;
+  position: absolute;
+  top: 36px;
+  right: 36px;
+
+  &:hover {
+    opacity: 0.6;
+    cursor: pointer;
+  }
+}

src/components/ProfileContainer/ProfileContainer.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import './ProfileContainer.css';
+import './ProfileContainer.scss';
 import Dog from '../../images/dog.png';
 import VioletBall from '../Ball/VioletBall/VioletBall';
 import OrangeBall from '../Ball/OrangeBall/OrangeBall';

src/components/ProfileContainer/ProfileContainer.css → src/components/ProfileContainer/ProfileContainer.scss

@@ -2,6 +2,14 @@
   background-color: var(--color-background-base);
   padding: 44px 132px 199px;
   position: relative;
+
+  &_edit-profile {
+    padding-bottom: 85px;
+  }
+
+  &_sign-out {
+    min-height: 375px;
+  }
 }
 
 .profile-container__image {
@@ -10,12 +18,5 @@
   position: absolute;
   right: 132px;
   top: 137px;
-}
-
-.profile-container_edit-profile {
-  padding-bottom: 85px;
-}
-
-.profile-container_sign-out {
-  min-height: 375px;
+  z-index: 0;
 }

src/components/ProfileSheltersBlock/ProfileSheltersBlock.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import './ProfileSheltersBlock.scss';
+import ShelterCard from '../ShelterCard/ShelterCard';
+import Button from '../../ui/Button/Button';
+
+const ProfileSheltersBlock = ({ shelters, sheltersTitle, owner }) => {
+  return (
+    <div className='profile-shelters'>
+      {shelters && shelters.length !== 0 &&
+        <div className='profile-shelters__container'>
+          <h3 className='profile-shelters__title standard-font standard-font_type_h3'>{sheltersTitle}</h3>
+
+          <ul className='profile-shelters__shelters-container'>
+            {shelters.map((shelter) => {
+              return (
+                <li key={shelter.id}>
+                  <ShelterCard
+                    id={shelter.id}
+                    name={shelter.name}
+                    address={shelter.address}
+                    workingFromHour={shelter.working_from_hour}
+                    workingToHour={shelter.working_to_hour}
+                    workingHours={shelter.working_hours}
+                    logo={shelter.logo}
+                    profileImage={shelter.profile_image}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+
+          {owner && <Button link to='/'>Перейти в приют</Button>}
+
+        </div>
+      }
+    </div>
+  );
+};
+
+export default ProfileSheltersBlock;

src/components/ProfileSheltersBlock/ProfileSheltersBlock.scss

@@ -0,0 +1,21 @@
+.profile-shelters__container {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 44px;
+}
+
+.profile-shelters__title {
+  margin-top: 0;
+  margin-bottom: 28px;
+}
+
+.profile-shelters__shelters-container {
+  display: flex;
+  flex-direction: row;
+  column-gap: 24px;
+  margin-top: 0;
+  margin-bottom: 28px;
+  padding: 0;
+  z-index: 1;
+  overflow: hidden;
+}

src/components/SignUpBlock/SignUpBlock.jsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 const SignUpBlock = ({ className }) => {
   return (
     <div className={`signup-block signup-block_${className}`}>
-      <p className='signup-block__text standard-font standard-font_type_base'>Нет аккаунта?</p>
+      <p className='signup-block__text standard-font standard-font_type_base'>Нет аккаунта?&nbsp;</p>
       <Link className='signup-block__link standard-font standard-font_type_base' to='/sign-up'>Зарегистрироваться</Link>
     </div>
   );

src/components/SignUpBlock/SignUpBlock.scss

@@ -16,6 +16,7 @@
 
   @media (min-width: 750px) {
     margin-top: 20px;
+    flex-direction: row;
   }
 }
 

src/components/UserContainer/UserContainer.scss

@@ -3,10 +3,25 @@
   flex-direction: row;
   padding: 24px 16px 38px;
 
+  @media (min-width: 750px) {
+    padding: 60px 45px 120px 14px;
+  }
+
+  @media (min-width: 1440px) {
+    padding-left: 134px;
+    padding-top: 62px;
+    padding-bottom: 147px;
+
+    &_register {
+      padding-right: 132px;
+    }
+  }
+
   &_login {
     padding-bottom: 142px;
 
     @media (min-width: 1440px) {
+      padding-bottom: 213px;
       padding-right: 169px;
     }
   }
@@ -20,20 +35,6 @@
     padding-right: 132px;
     padding-bottom: 188px;
   }
-
-  @media (min-width: 750px) {
-    padding: 60px 45px 120px 14px;
-  }
-
-  @media (min-width: 1440px) {
-    padding-left: 134px;
-    padding-top: 62px;
-    padding-bottom: 147px;
-
-    &_register {
-      padding-right: 132px;
-    }
-  }
 }
 
 .user-container__container {

src/modules/ShelterOwnerProfile/ShelterOwnerProfile.jsx

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import './ShelterOwnerProfile.scss';
+import CurrentUserContext from '../../contexts/CurrentUserContext';
+import ProfileSheltersBlock from '../../components/ProfileSheltersBlock/ProfileSheltersBlock';
+
+const ShelterOwnerProfile = () => {
+  const currentUser = useContext(CurrentUserContext);
+  const { subscription_shelter } = currentUser;
+
+  return (
+    <div>
+      <ProfileSheltersBlock
+        shelters={subscription_shelter}
+        sheltersTitle='Ваши приюты'
+        owner
+      />
+
+      <ProfileSheltersBlock
+        shelters={subscription_shelter}
+        sheltersTitle='Ваши любимые приюты'
+      />
+    </div>
+  );
+};
+
+export default ShelterOwnerProfile;

src/modules/UserProfile/UserProfile.jsx

@@ -0,0 +1,33 @@
+import React, { useContext } from 'react';
+import './UserProfile.scss';
+import CurrentUserContext from '../../contexts/CurrentUserContext';
+import ProfileSheltersBlock from '../../components/ProfileSheltersBlock/ProfileSheltersBlock';
+
+const UserProfile = () => {
+  const currentUser = useContext(CurrentUserContext);
+  const { donations_sum, subscription_shelter } = currentUser;
+
+  return (
+    <div>
+      <div className='user-profile__donation'>
+        <p className='user-profile__donation-text standard-font standard-font_type_body'>Вы пожертвовали приютам за всё время:</p>
+        <div className='user-profile__donation-sum'>
+          { donations_sum }
+          <p className='user-profile__donation-rubles'>рублей</p>
+        </div>
+      </div>
+
+      <ProfileSheltersBlock
+        shelters={subscription_shelter}
+        sheltersTitle='Ваши любимые приюты'
+      />
+
+      <ProfileSheltersBlock
+        shelters={subscription_shelter}
+        sheltersTitle='Приюты, которым вы помогли'
+      />
+    </div>
+  );
+};
+
+export default UserProfile;

src/modules/UserProfile/UserProfile.scss

@@ -0,0 +1,34 @@
+.user-profile__donation {
+  display: flex;
+  align-items: center;
+  margin-bottom: 60px;
+}
+
+.user-profile__donation-text {
+  margin-right: 16px;
+}
+
+.user-profile__donation-sum {
+  border-width: 0 2px;
+  border-style: solid;
+  border-color: #FF852E;
+  border-radius: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  min-height: 52px;
+  max-width: 82px;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 24px;
+  color: #FF852E;
+  text-align: center;
+  margin: 0;
+}
+
+.user-profile__donation-rubles {
+  margin: 0;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 28px;
+  color: #FF852E;
+}