Merge pull request #204 from Lapkipomoshi/feat/shelter-owner-layout-6…

….2.1.2-6.2.1.8

Feat/shelter owner layout 6.2.1.2 6.2.1.8

src/components/ProfileSheltersBlock/ProfileSheltersBlock.jsx

@@ -1,39 +1,39 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import './ProfileSheltersBlock.scss';
 import ShelterCard from '../ShelterCard/ShelterCard';
 import Button from '../../ui/Button/Button';
-import CardsSlider from '../CardsSlider/CardsSlider';
 
-const ProfileSheltersBlock = ({ shelters, sheltersTitle, owner }) => {
+const ProfileSheltersBlock = ({ myShelters, sheltersTitle }) => {
+  const navigate = useNavigate();
+
   return (
     <div className='profile-shelters'>
-      {shelters && shelters.length !== 0 &&
+      {myShelters && myShelters.length !== 0 &&
         <div className='profile-shelters__container'>
           <h3 className='profile-shelters__title standard-font standard-font_type_h3'>{sheltersTitle}</h3>
-
           <div className='profile-shelters__shelters'>
-            <CardsSlider modifier='profile'>
-              <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>
-            </CardsSlider>
-
-            {owner && <Button link to='/'>Перейти в приют</Button>}
+            <ul className='profile-shelters__shelters-container'>
+              {myShelters.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>
+            {myShelters && <Button onClick={
+              () => {return navigate('my-shelter');}
+            }>Перейти в приют</Button>}
           </div>
         </div>
       }

src/components/ProfileSheltersBlock/ProfileSheltersBlock.scss

@@ -1,7 +1,6 @@
 .profile-shelters__shelters {
   display: flex;
   flex-direction: column;
-  align-items: center;
 }
 
 .profile-shelters__container {

src/images/LeftArrowIcon/LeftArrowIcon.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import './LeftArrowIcon.scss';
+
+const LeftArrowIcon = () => {
+  return (
+    <svg className='left-arrow-icon' xmlns='http://www.w3.org/2000/svg' width='18' height='15' viewBox='0 0 18 15' fill='none'>
+      <path d={`M17 8.50391C17.5523 8.50391 18 8.05619 18 7.50391C18 6.95162 17.5523 6.50391 17 6.50391V8.50391ZM0.292892 
+      6.7968C-0.0976315 7.18732 -0.0976315 7.82049 0.292892 8.21101L6.65685 14.575C7.04738 14.9655 7.68054 14.9655 8.07107 
+      14.575C8.46159 14.1844 8.46159 13.5513 8.07107 13.1608L2.41421 7.50391L8.07107 1.84705C8.46159 1.45653 8.46159 0.823363 
+      8.07107 0.432838C7.68054 0.0423141 7.04738 0.0423141 6.65685 0.432838L0.292892 6.7968ZM17 6.50391L1 6.50391V8.50391L17 
+      8.50391V6.50391Z`} fill='#F0924F'/>
+    </svg>
+  );
+};
+
+export default LeftArrowIcon;

src/images/LeftArrowIcon/LeftArrowIcon.scss

@@ -0,0 +1,3 @@
+.edit-icon {
+  height: 1em;
+}

src/modules/AboutShelter/AboutShelter.jsx

@@ -35,7 +35,7 @@ const AboutShelter = () => {
               {isOwner && (
                 <>
                   {/* TODO  <EditPenIcon /> ведет на 6.2.1.4 в фигме, оно пока не реализовано */}
-                  <Link to='/' className='about-shelter__icon-button about-shelter__icon-button_edit'>
+                  <Link to='/profile/my-shelter/edit' className='about-shelter__icon-button about-shelter__icon-button_edit'>
                     <EditIcon />
                   </Link>
                   {/* TODO  при нажатии попап как на 6.2.1.3 в фигме, попап не сверстан */}

src/modules/AboutShelter/styles/shelter-info/__logo/shelter-info__logo.css

@@ -4,4 +4,5 @@
   object-fit: contain;
   border: 1px solid var(--color-accent-base);
   border-radius: 16px;
+  object-fit: cover;
 }

src/modules/MySheelterEdit/MyShelterEdit.jsx

@@ -0,0 +1,47 @@
+import React, { useContext, useState } from 'react';
+import './MyShelterEdit.scss';
+import AddPhotoBlock from '../../ui/AddPhotoBlock/AddPhotoBlock';
+import DeclarationInput from '../../ui/DeclarationInput/DeclarationInput';
+import CurrentUserContext from '../../contexts/CurrentUserContext';
+import useInput from '../../hooks/useInput';
+import * as regex from '../../utils/regex';
+import * as errorMessage from '../../utils/errorMessage';
+
+const contentText = {
+  PAGE_TITLE: 'Редактирование приюта',
+  LABEL_TEXT_LOGO: 'Логотип приюта',
+  LABEL_TEXT_PHOTO: 'Фото приюта',
+};
+
+const MyShelterEdit = () => {
+  const sizeLimit = 5 * 1024 * 1024; // ограничение для размера картинки - 5 МБ
+  const [logo, setLogo] = useState();
+  const [mainPhoto, setMainPhoto] = useState();
+  const currentUser = useContext(CurrentUserContext);
+  const username = useInput(currentUser.username, {
+    notEmpty: true, minLength: 4, maxLength: 50, regex: regex.NAME_REGEX,
+  }, errorMessage.FIO, true);
+  const tel = useInput('+7', { notEmpty: true, minLength: 18, maxLength: 18 }, errorMessage.TEL);
+  const email = useInput(currentUser.email, { notEmpty: true, maxLength: 100, regex: regex.EMAIL_REGEX }, errorMessage.EMAIL, true);
+  console.log(currentUser);
+
+  return (
+    <section className='my-shelter-edit-section'>
+      <h2 className='my-shelter-edit-section__title'>{contentText.PAGE_TITLE}</h2>
+      <div className='edit-my-shelter-form'>
+        <div className='edit-my-shelter-form__photos'>
+          <AddPhotoBlock photo={logo} setPhoto={setLogo} name='logo' sizeLimit={sizeLimit} labelText={contentText.LABEL_TEXT_LOGO} />
+          <AddPhotoBlock photo={mainPhoto} setPhoto={setMainPhoto} name='mainPhoto' sizeLimit={sizeLimit} labelText={contentText.LABEL_TEXT_PHOTO} />
+        </div>
+        <ul className='edit-my-shelter-form__list'>
+          <DeclarationInput caption='ФИО владельца приюта*' inputState={username} type='text' name='username' placeholder={currentUser.username} required />
+          <DeclarationInput caption='Номер телефона*' inputState={tel} type='tel' name='tel' placeholder='+7 (9XX) XXX-XX-XX' required />
+          <DeclarationInput caption='E-mail*' inputState={email} type='email' name='email' placeholder={currentUser.email} required />
+        </ul>
+      </div>
+
+    </section>
+  );
+};
+
+export default MyShelterEdit;

src/modules/MySheelterEdit/MyShelterEdit.scss

@@ -0,0 +1,31 @@
+.my-shelter-edit-section {
+  display: flex;
+  flex-direction: column;
+  padding: 0 0 80px 132px;
+
+  &__title {
+    width: 100%;
+    margin: 0;
+    padding: 0 0 44px 0;
+    font-size: 40px;
+    line-height: 49px;
+    font-weight: 600;
+    font-family: 'Montserrat Alternates', 'Inter', Arial, sans-serif;
+  }
+}
+
+.edit-my-shelter-form {
+  width: 100%;
+
+  &__photos {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 48px;
+  }
+
+  &__list {
+  max-width: 37%;
+  padding-inline-start: 0;
+  }
+}

src/modules/ShelterOwnerProfile/ShelterOwnerProfile.jsx

@@ -5,19 +5,13 @@ import ProfileSheltersBlock from '../../components/ProfileSheltersBlock/ProfileS
 
 const ShelterOwnerProfile = () => {
   const currentUser = useContext(CurrentUserContext);
-  const { subscription_shelter } = currentUser;
+  const myShelters = [currentUser.own_shelter];
 
   return (
     <div>
       <ProfileSheltersBlock
-        shelters={subscription_shelter}
+        myShelters={myShelters}
         sheltersTitle='Ваши приюты'
-        owner
-      />
-
-      <ProfileSheltersBlock
-        shelters={subscription_shelter}
-        sheltersTitle='Ваши любимые приюты'
       />
     </div>
   );

src/modules/ShelterOwnerStatistics/ShelterOwnerStatistics.jsx

@@ -9,7 +9,7 @@ const ShelterOwnerStatistics = ({ shelter }) => {
     { title: 'Количество питомцев: ', valueKey: shelter.count_pets, actionText: 'Посмотреть всех питомцев', path: '/' },
     { title: 'Количество вакансий: ', valueKey: shelter.count_pets, actionText: 'Посмотреть все вакансии', path: '/' },
     { title: 'Количество тегов: ', valueKey: shelter.count_pets, actionText: 'Посмотреть все теги', path: '/' },
-    { title: 'Количество новостей: ', valueKey: shelter.count_pets, actionText: 'Посмотреть все новости', path: '/' },
+    { title: 'Количество новостей: ', valueKey: shelter.count_pets, actionText: 'Посмотреть новости приюта', path: '/' },
   ];
   return (
     <div className='shelter-owner-statistic'>

src/pages/App/App.jsx

@@ -35,6 +35,8 @@ import imageSuccess from '../../images/icons/ic_success.svg';
 import imageError from '../../images/icons/ic_error.svg';
 import getUserInfo from './api/userApi';
 import AppContext from '../../contexts/App';
+import MyShelterPage from '../MyShelterPage/MyShelterPage';
+import MyShelterEdit from '../../modules/MySheelterEdit/MyShelterEdit';
 
 const App = () => {
   const navigate = useNavigate();
@@ -187,6 +189,10 @@ const App = () => {
             <Route exact path='/email-reset/:uid/:token/:new_email' element={<ActivateEmailPage onUpdateCurrentUser={setCurrentUser} />} />
 
             <Route path='/profile' element={<ProtectedRoute condition={loggedIn} component={ProfilePage} />} />
+            <Route path='/profile/my-shelter' element={<ProtectedRoute condition={loggedIn} component={MyShelterPage} />}>
+              <Route index element={<ProtectedRoute condition={loggedIn} component={shelterModules.AboutShelter} />} />
+              <Route path='edit' element={<ProtectedRoute condition={loggedIn} component={MyShelterEdit} />} />
+            </Route>
             <Route path='/profile/edit' element={<ProtectedRoute condition={loggedIn} component={EditProfilePage} onUpdateCurrentUser={setCurrentUser} />} />
             <Route path='/profile/sign-out' element={<ProtectedRoute condition={loggedIn} component={SignOutPage} onSignOut={handleSignOut} />} />
             <Route path='/profile/edit/password' element={<ProtectedRoute condition={loggedIn} component={ChangePasswordPage} />} />

src/pages/MyShelterPage/MyShelterPage.jsx

@@ -0,0 +1,59 @@
+import React, { useState, useEffect, useContext } from 'react';
+import './MyShelterPage.scss';
+import { Outlet, Link, useLocation } from 'react-router-dom';
+import MainContainer from '../../components/MainContainer/MainContainer';
+import LeftArrowIcon from '../../images/LeftArrowIcon/LeftArrowIcon';
+import myShelterApi from './api';
+import CurrentUserContext from '../../contexts/CurrentUserContext';
+
+const MyShelterPage = () => {
+  const curentUser = useContext(CurrentUserContext);
+  const mySheltersId = curentUser.own_shelter.id;
+  const [shelter, setShelter] = useState({}); 
+  const isOwner = true;
+  const [isLoading, setIsLoading] = useState(true);
+
+  const location = useLocation();
+  const contentText = {
+    GO_TO_BACK: 'Вернуться назад',
+    BACK_TO_PROFILE: 'Вернуться в Личный Кабинет',
+  };
+
+  let linkTo; 
+  let linkText;
+  if (location.pathname.includes('edit')) {
+    linkTo = -1;
+    linkText = contentText.GO_TO_BACK;
+  } else {
+    linkTo = '/profile';
+    linkText = contentText.BACK_TO_PROFILE;
+  }
+
+
+
+  useEffect(() => {
+    myShelterApi.getShelterById(mySheltersId)
+      .then((res) => {
+        setShelter(res);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        throw new Error(err);
+      });}, [mySheltersId]);
+
+
+  return (
+    <MainContainer>
+      <main className='main'>
+        <section className='my-shelter-section'>
+          <Link to={linkTo} className='my-shelter-section__back-profile-button'>
+            <LeftArrowIcon /><span>{linkText}</span>
+          </Link>
+          <Outlet context={{ shelter, isOwner, isLoading }} />
+        </section>
+      </main>
+    </MainContainer>
+  );
+};
+
+export default MyShelterPage;

src/pages/MyShelterPage/MyShelterPage.scss

@@ -0,0 +1,25 @@
+.my-shelter-section {
+  display: flex;
+  width: 1440px;
+  min-height: 625px;
+  flex-direction: column;
+  background-color: var(--color-background-base);
+  box-sizing: border-box;
+  overflow: hidden;
+
+  &__back-profile-button {
+    font-family: Montserrat Alternates, sans-serif;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    padding: 44px 0 44px 132px;
+    cursor: pointer;
+    text-decoration: none;
+
+    span {
+      margin-left: 16px;
+      color: var(--color-accent-base);
+    }
+  }
+}

src/pages/MyShelterPage/api.js

@@ -0,0 +1,27 @@
+import BaseApi from '../../utils/BaseApi';
+import { baseUrl } from '../../utils/constants';
+
+class MyShelterApi extends BaseApi {
+  constructor({ _baseUrl, _headers }) {
+    super({ _baseUrl });
+    this._headers = _headers;
+  }
+
+  getShelterById(id) {
+    return fetch(`${this._baseUrl}/v1/shelters/${id}/`, {
+      headers: this._headers,
+    }).then((res) => {
+      return super._processTheResponse(res);
+    });
+  }
+}
+
+const myShelterApi = new MyShelterApi({
+  _baseUrl: baseUrl,
+  _headers: {
+    'Content-Type': 'application/json',
+    Authorization: `Bearer ${localStorage.getItem('access')}`,
+  },
+});
+
+export default myShelterApi;

src/pages/ShelterPage/ShelterPage.css

@@ -1,3 +1,3 @@
 @import url('./styles/shelter-menu-section/shelter-menu-section.css');
 @import url('./styles/shelter-section/shelter-section.css');
-@import url('./styles/shelter-section/__title/shelter-section__title.css');
+@import url('./styles/shelter-section/__title/shelter-section__title.css');