рефакторинг: переделал страницу питомцев

Lapkipomoshi · Jun 22, 2024 · 8de3735 · 8de3735
1 parent c4e7602
commit 8de3735
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 75 deletions.
diff --git a/src/modules/ShelterOwnerStatistics/ShelterOwnerStatistics.jsx b/src/modules/ShelterOwnerStatistics/ShelterOwnerStatistics.jsx
@@ -9,7 +9,7 @@ const ShelterOwnerStatistics = ({ shelter }) => {
     { title: 'Количество питомцев: ',
       valueKey: shelter.count_pets,
       actionText: 'Посмотреть всех питомцев',
-      path: `/profile/my-shelter/${shelter.id}/all-pets` },
+      path: `/my-shelter/${shelter.id}/all-pets` },
     { title: 'Количество вакансий: ', valueKey: shelter.count_vacancies, actionText: 'Посмотреть все вакансии', path: `/shelters/${shelter.id}/vacancies` },
     { title: 'Количество тегов: ', valueKey: shelter.count_pets, actionText: 'Посмотреть все теги', path: '/' },
     { title: 'Количество новостей: ', valueKey: shelter.count_news, actionText: 'Посмотреть новости приюта', path: `/shelters/${shelter.id}/news` },

diff --git a/src/modules/ShelterPetsType/ShelterPetsType.jsx b/src/modules/ShelterPetsType/ShelterPetsType.jsx
@@ -11,7 +11,7 @@ const ShelterPetsType = ({ type }) => {
   const [pets, setPets] = useState([]);
   const [isChecked, setIsChecked] = useState(false);
   const [isSelected, setIsSelected] = useState(false);
-  const [checkedId, setCheckedId] = useState([]);
+  const [checkedPets, setCheckedPets] = useState([]);
 
   useEffect(() => {
     shelterPetsApi
@@ -46,41 +46,53 @@ const ShelterPetsType = ({ type }) => {
   };
   const handleButtonCancelSelectedClick = () => {
     setIsSelected(false);
-    setCheckedId([]);
+    setCheckedPets([]);
   };
   const handleButtonSelectedAllClick = () => {
     setIsSelected(true);
     setIsChecked(true);
-    setCheckedId((items) => {
+    setCheckedPets((items) => {
       return [...items, ...pets];
     });
   };
   const handleButtonCancelSelectedAllClick = () => {
     setIsSelected(false);
     setIsChecked(false);
-    setCheckedId([]);
+    setCheckedPets([]);
   };
   const handleChangePet = (pet) => {
-    if (!checkedId.includes(pet)) {
-      setCheckedId((items) => {
+    if (!checkedPets.includes(pet)) {
+      setCheckedPets((items) => {
         return [...items, pet];
       });
     } else {
-      setCheckedId (
-        checkedId.filter((petsId) => {
-          return !(petsId === pet);
+      setCheckedPets (
+        checkedPets.filter((checkedPet) => {
+          return !(checkedPet === pet);
         })
       );
-    }
+    };
   };
 
+  // const handleButtonDeletedClick = () => {
+  //   checkedPets.forEach((checkedPet) => {
+  //     pets.filter((pet) => {
+  //       return pet === checkedPet;
+  //     });
+  //   });
+  // };
+
+
   return (
     <div className='shelter-pets-type'>
       <div className='shelter-pets-type__header'>
         <h2 className='shelter-pets-type__title'>{petType}</h2>
         <div className='shelter-pets-type__controls'>
-          {checkedId.length !== 0 ? (
-            <Button theme='tertiary' className='shelter-pets-type__btn-deleted'>
+          {checkedPets.length !== 0 ? (
+            <Button theme='tertiary'
+              className='shelter-pets-type__btn-deleted'
+              // onClick={handleButtonDeletedClick}
+            >
               <DeleteIcon />
               Удалить
             </Button>
@@ -129,7 +141,7 @@ const ShelterPetsType = ({ type }) => {
       {pets.length !== 0 ? (
         <ul className='shelter-pets-type__list'>
           {pets.map((pet) => {
-            const isCheckedPet = checkedId.includes(pet);
+            const isCheckedPet = checkedPets.includes(pet);
             const className = `${isSelected ? 'shelter-pets-type__input_selected' : ''} ${isCheckedPet ? 'shelter-pets-type__input_checked' : ''}`;
             return (
               <li className='shelter-pets-type__list-item' key={pet.id}>
@@ -141,7 +153,7 @@ const ShelterPetsType = ({ type }) => {
                   }}
                 />
                 <PetCard
-                  link={!isSelected ? `../${id}/pets/${pet.id}` : ''}
+                  link={!isSelected ? `/my-shelter/${id}/pets/${pet.id}` : ''}
                   id={pet.id}
                   name={pet.name}
                   age={pet.age}

diff --git a/src/modules/shelterAllPets/ShelterAllPets.jsx b/src/modules/shelterAllPets/ShelterAllPets.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { useOutletContext } from 'react-router-dom';
+import Button from '../../ui/Button/Button';
+import ShelterPetsType from '../ShelterPetsType/ShelterPetsType';
+import './ShelterAllPets.scss';
+
+const ShelterAllPets = () => {
+  const { shelter, countPets, setCountPets, isLoading } = useOutletContext();
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <section className='shelter-all-pets'>
+      <div className='shelter-all-pets__header'>
+        <h1 className='shelter-all-pets__title'>Питомцы приюта {shelter.name}</h1>
+        <Button className='shelter-all-pets__add-pets-button'>Добавить питомца</Button>
+      </div>
+      <p className='shelter-all-pets__count-pets'>Всего питомцев: <span>{countPets}</span></p>
+      {shelter.animal_types && shelter.animal_types.length ? (
+        <>
+          {shelter.animal_types.map((type) => {
+            return (
+              <ShelterPetsType type={type} key={type} countPets={countPets} setCountPets={setCountPets} />
+            );
+          })}
+          <Button className='shelter-all-pets__load-more-button' theme='transparent'>
+            Загрузить ещё
+          </Button>
+        </>
+      ) : (
+        <p className='standard-font_type_body'>На данный момент в приюте животных нет</p>
+      )}
+    </section>
+  );
+};
+
+export default ShelterAllPets;
diff --git a/src/modules/shelterAllPets/ShelterAllPets.scss b/src/modules/shelterAllPets/ShelterAllPets.scss
@@ -0,0 +1,30 @@
+.shelter-all-pets__header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 19px;
+}
+
+.shelter-all-pets__title {
+  margin: 0;
+  font-size: 40px;
+  font-weight: 600;
+  line-height: 49px;
+}
+
+.shelter-all-pets__count-pets {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 30px;
+  margin: 0;
+  margin-bottom: 44px;
+
+  span {
+    color: var(--color-accent-base);
+  }
+}
+
+.shelter-all-pets__load-more-button {
+  align-self: center;
+  margin-top: 40px;
+}
diff --git a/src/pages/App/App.jsx b/src/pages/App/App.jsx
@@ -40,6 +40,7 @@ import MyShelterEdit from '../../modules/MySheelterEdit/MyShelterEdit';
 import AddNewsPage from '../AddNewsPage/AddNewsPage';
 import ConfirmPopup from '../../components/ConfirmPopup/ConfirmPopup';
 import ShelterPetsPage from '../ShelterPetsPage/ShelterPetsPage';
+import ShelterAllPets from '../../modules/shelterAllPets/ShelterAllPets';
 
 const App = () => {
   const navigate = useNavigate();
@@ -223,12 +224,15 @@ const App = () => {
             <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 path=':id/all-pets' element={<ProtectedRoute condition={loggedIn} component={ShelterPetsPage} />} />
-              <Route path=':id/pets/:petId' element={<ProtectedRoute condition={loggedIn} component={shelterModules.PetModule} />} />
             </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} />} />
+            <Route path='/my-shelter/:id' element={<ProtectedRoute condition={loggedIn} component={ShelterPetsPage} />}>
+              <Route path='all-pets' element={<ProtectedRoute condition={loggedIn} component={ShelterAllPets} />} />
+              <Route path='pets/:petId' element={<ProtectedRoute condition={loggedIn} component={shelterModules.PetModule} />} />
+            </Route>
+
 
             <Route path='*' element={<NotFoundPage />} />
           </Routes>

diff --git a/src/pages/MyShelterPage/MyShelterPage.jsx b/src/pages/MyShelterPage/MyShelterPage.jsx
@@ -17,18 +17,13 @@ const MyShelterPage = () => {
   const contentText = {
     GO_TO_BACK: 'Вернуться назад',
     BACK_TO_PROFILE: 'Вернуться в Личный Кабинет',
-    GO_TO_SHELTER: 'Вернуться к приюту'
   };
 
   let linkTo;
   let linkText;
-  if (location.pathname.includes('edit') || location.pathname.includes('pets')) {
+  if (location.pathname.includes('edit')) {
     linkTo = -1;
     linkText = contentText.GO_TO_BACK;
-  }
-  else if(location.pathname.includes('all-pets')) {
-    linkTo = -1;
-    linkText = contentText.GO_TO_SHELTER;
   } else {
     linkTo = '/profile';
     linkText = contentText.BACK_TO_PROFILE;

diff --git a/src/pages/ShelterPetsPage/ShelterPetsPage.jsx b/src/pages/ShelterPetsPage/ShelterPetsPage.jsx
@@ -1,34 +1,48 @@
-import React from 'react';
-import { useOutletContext } from 'react-router-dom';
+import React, { useEffect, useState, useContext } from 'react';
+import { useParams, Link, Outlet } from 'react-router-dom';
+import shelterApi from './api';
 import './ShelterPetsPage.scss';
-import Button from '../../ui/Button/Button';
-import ShelterPetsType from '../../modules/ShelterPetsType/ShelterPetsType';
+import MainContainer from '../../components/MainContainer/MainContainer';
+import LeftArrowIcon from '../../images/LeftArrowIcon/LeftArrowIcon';
+import CurrentUserContext from '../../contexts/CurrentUserContext';
 
 const ShelterPetsPage = () => {
-  const { shelter } = useOutletContext();
+  const { id } = useParams();
+  const currentUser = useContext(CurrentUserContext);
+  const isOwner = currentUser?.own_shelter?.id === Number(id);
+  const [shelter, setShelter] = useState({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [countPets, setCountPets] = useState(0);
+
+  useEffect(() => {
+    shelterApi
+      .getShelterById(id) // загрузка инфо о приюте
+      .then((res) => {
+        setIsLoading(false);
+        setShelter(res);
+        setCountPets(res.count_pets);
+      })
+      .catch((err) => {
+        throw new Error(err);
+      });
+  }, []);
+
+  if (isLoading) {
+    return null;
+  }
 
   return (
-    <div className='shelter-pets'>
-      <div className='shelter-pets__header'>
-        <h1 className='shelter-pets__title'>Питомцы приюта {shelter.name}</h1>
-        <p className='shelter-pets__all-pets'>Всего питомцев: <span>{shelter.count_pets}</span></p>
-        <Button className='shelter-pets__add-pets-button'>Добавить питомца</Button>
-      </div>
-      {shelter.animal_types && shelter.animal_types.length ? (
-        <>
-          {shelter.animal_types.map((type) => {
-            return (
-              <ShelterPetsType type={type} key={type} />
-            );
-          })}
-          <Button className='shelter-pets__load-more-button' theme='transparent'>
-            Загрузить ещё
-          </Button>
-        </>
-      ) : (
-        <p className='standard-font_type_body'>На данный момент в приюте животных нет</p>
-      )}
-    </div>
+    <MainContainer>
+      <main className='main'>
+        <section className='shelter-pets'>
+          <Link to={-1} className='shelter-pets__back-profile-button'>
+            <LeftArrowIcon />
+            <span>Вернуться назад</span>
+          </Link>
+          <Outlet context={{ shelter, isOwner, isLoading, countPets, setCountPets }} />
+        </section>
+      </main>
+    </MainContainer>
   );
 };
 

diff --git a/src/pages/ShelterPetsPage/ShelterPetsPage.scss b/src/pages/ShelterPetsPage/ShelterPetsPage.scss
@@ -6,39 +6,26 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-}
 
-.shelter-pets__header {
-  position: relative;
-  margin-bottom: 44px;
+  section {
+    padding: 0;
+  }
 }
 
-.shelter-pets__title {
-  margin: 0;
-  margin-bottom: 16px;
-  font-size: 40px;
+.shelter-pets__back-profile-button {
+  font-size: 18px;
+  font-style: normal;
   font-weight: 600;
-  line-height: 49px;
-}
+  line-height: 20px;
+  padding: 44px 0;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
 
-.shelter-pets__all-pets {
-  font-size: 24px;
-  font-weight: 500;
-  line-height: 30px;
-  margin: 0;
 
   span {
+    margin-left: 16px;
     color: var(--color-accent-base);
   }
-}
-
-.shelter-pets__add-pets-button {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.shelter-pets__load-more-button {
-  align-self: center;
-  margin-top: 40px;
 }
diff --git a/src/pages/ShelterPetsPage/api.js b/src/pages/ShelterPetsPage/api.js
@@ -0,0 +1,24 @@
+import BaseApi from '../../utils/BaseApi';
+import { baseUrl, apiHeaders } from '../../utils/constants';
+
+class ShelterApi extends BaseApi {
+  constructor({ _baseUrl, _headers }) {
+    super({ _baseUrl });
+    this._headers = _headers;
+  }
+
+  getShelterById(id) { // загрузка информации о приюте по его id
+    return fetch(`${this._baseUrl}/v1/shelters/${id}/`, {
+      headers: this._headers,
+    }).then((res) => {
+      return super._processTheResponse(res);
+    });
+  }
+}
+
+const shelterApi = new ShelterApi({
+  _baseUrl: baseUrl,
+  _headers: apiHeaders,
+});
+
+export default shelterApi;