diff --git a/src/modules/ShelterOwnerStatistics/ShelterOwnerStatistics.jsx b/src/modules/ShelterOwnerStatistics/ShelterOwnerStatistics.jsx index 24ee2d49..34627e59 100644 --- 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 index 56380675..60f939ba 100644 --- 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 (

{petType}

- {checkedId.length !== 0 ? ( - @@ -129,7 +141,7 @@ const ShelterPetsType = ({ type }) => { {pets.length !== 0 ? (
    {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 (
  • @@ -141,7 +153,7 @@ const ShelterPetsType = ({ type }) => { }} /> { + const { shelter, countPets, setCountPets, isLoading } = useOutletContext(); + + if (isLoading) { + return null; + } + + return ( +
    +
    +

    Питомцы приюта {shelter.name}

    + +
    +

    Всего питомцев: {countPets}

    + {shelter.animal_types && shelter.animal_types.length ? ( + <> + {shelter.animal_types.map((type) => { + return ( + + ); + })} + + + ) : ( +

    На данный момент в приюте животных нет

    + )} +
    + ); +}; + +export default ShelterAllPets; \ No newline at end of file diff --git a/src/modules/shelterAllPets/ShelterAllPets.scss b/src/modules/shelterAllPets/ShelterAllPets.scss new file mode 100644 index 00000000..07f73b87 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/pages/App/App.jsx b/src/pages/App/App.jsx index e9933cfe..12f2dac3 100644 --- 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 = () => { }> } /> } /> - } /> - } /> } /> } /> } /> + }> + } /> + } /> + + } /> diff --git a/src/pages/MyShelterPage/MyShelterPage.jsx b/src/pages/MyShelterPage/MyShelterPage.jsx index f07d84f4..91e9f9a7 100644 --- 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 index 4e3a3e4f..6ad8c06d 100644 --- 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 ( -
    -
    -

    Питомцы приюта {shelter.name}

    -

    Всего питомцев: {shelter.count_pets}

    - -
    - {shelter.animal_types && shelter.animal_types.length ? ( - <> - {shelter.animal_types.map((type) => { - return ( - - ); - })} - - - ) : ( -

    На данный момент в приюте животных нет

    - )} -
    + +
    +
    + + + Вернуться назад + + +
    +
    +     ); }; diff --git a/src/pages/ShelterPetsPage/ShelterPetsPage.scss b/src/pages/ShelterPetsPage/ShelterPetsPage.scss index a813306c..18a39f42 100644 --- 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; } \ No newline at end of file diff --git a/src/pages/ShelterPetsPage/api.js b/src/pages/ShelterPetsPage/api.js new file mode 100644 index 00000000..4b46b534 --- /dev/null +++ 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; \ No newline at end of file