feat: add pet content

Lapkipomoshi · Sep 7, 2023 · a16bb97 · a16bb97
1 parent bf46b11
commit a16bb97
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 55 deletions.
diff --git a/src/images/index.js b/src/images/index.js
@@ -0,0 +1,7 @@
+import slide1 from './main__banner.png';
+import slide2 from './main__promo_position_left.jpg';
+import slide3 from './main__promo_position_right.jpg';
+import clockIcon from './icons/ic_clock.svg';
+import locationIcon from './icons/ic_location.svg';
+
+export { slide1, slide2, slide3, clockIcon, locationIcon };
diff --git a/src/modules/AboutShelter/AboutShelter.jsx b/src/modules/AboutShelter/AboutShelter.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useOutletContext, Link } from 'react-router-dom';
 import './AboutShelter.scss';
-import InfoItem from '../../ui/InfoItem/InfoItem';
+import { InfoItem } from '../../ui';
 import classmatesIcon from '../../images/icons/footer__icon_classmates.svg';
 import vkIcon from '../../images/icons/footer__icon_vk.svg';
 import telegramIcon from '../../images/icons/footer__icon_telegram.svg';

diff --git a/src/modules/PetModule/PetModule.jsx b/src/modules/PetModule/PetModule.jsx
@@ -1,40 +1,45 @@
 /* eslint-disable no-unused-vars */ // удалить, когда подключат api
 import React, { useEffect, useState } from 'react';
 import { useOutletContext, useParams } from 'react-router-dom';
+
 import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { baseUrl, apiHeaders } from '../../utils/constants';
+
+import { InfoItem, Button, Tooltip } from '../../ui';
+
+import { clockIcon, locationIcon, slide1, slide2, slide3 } from '../../images';
+
+import getPet from './api';
+
 import 'swiper/swiper.scss';
 import './PetModule.scss';
-import InfoItem from '../../ui/InfoItem/InfoItem';
-import Button from '../../ui/Button/Button';
-import clockIcon from '../../images/icons/ic_clock.svg';
-import locationIcon from '../../images/icons/ic_location.svg';
-import slide1 from '../../images/main__banner.png';
-import slide2 from '../../images/main__promo_position_left.jpg';
-import slide3 from '../../images/main__promo_position_right.jpg';
-import Tooltip from '../../ui/Tooltip';
-import getPet from './api';
+import generateKey from '../../utils/getUniqueKey';
 
 const PetModule = () => {
   SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
   const { id: shelterId, petId } = useParams();
   const { shelter } = useOutletContext();
 
-  const [pet, setPet] = useState({}); // информация о питомце
+  const [{ name, age, breed, gallery, sex, sheltering_time }, setPet] = useState({}); // информация о питомце
 
   const [isTakedHome, setIsTakedHome] = useState(false);
   const [popupIsVisible, setPopupIsVisible] = useState(false);
   const [tooltipIsVisible, setTooltipIsVisible] = useState(false);
 
+  const [isLoadingReq, setIsLoadingReq] = useState(false);
+  const [error, setError] = useState(null);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const data = await getPet(shelterId, petId);
-        setPet(data);
-        console.log(data);
-      } catch (error) {
-        console.log(error);
+        setIsLoadingReq(true);
+        const pet = await getPet(shelterId, petId);
+        setPet(pet);
+        setIsLoadingReq(false);
+        console.log(pet);
+      } catch (err) {
+        setIsLoadingReq(false);
+        setError(err); // Можно вывести модалочку с ошибкой
       }
     };
     fetchData();
@@ -58,40 +63,60 @@ const PetModule = () => {
     }
   };
 
+  // Функция для отображения текста загрузки или значения
+  const renderLoadingOrValue = (isLoading, value) => {
+    return isLoading ? 'Загрузка...' : value;
+  };
+
   return (
     <section className='shelter-section pet-module'>
       <div className='pet-module__pet-part'>
-        <Swiper spaceBetween={50} slidesPerView={1} navigation loop='true' pagination={{ clickable: true }}>
-          <SwiperSlide>
-            <img className='pet-swiper__slide-image' src={slide1} alt='' />
-          </SwiperSlide>
-          <SwiperSlide>
-            <img className='pet-swiper__slide-image' src={slide2} alt='' />
-          </SwiperSlide>
-          <SwiperSlide>
-            <img className='pet-swiper__slide-image' src={slide3} alt='' />
-          </SwiperSlide>
-        </Swiper>
-        <div className='pet-module__info-container'>
-          <h2 className='standard-font standard-font_type_h2'>Пушистик</h2>
-          <ul className='pet-module__info-list'>
-            <InfoItem argument='Пол'>девочка</InfoItem>
-            <InfoItem argument='Возраст'>2 года</InfoItem>
-            <InfoItem argument='Порода'>Британская</InfoItem>
-          </ul>
-          <div className='pet-module__additional-shelter-info'>
-            <div className='pet-additional-info-card'>
-              <img className='pet-additional-info-card__shelter-info-image' src={clockIcon} alt='срок содержания' />
-              <div className='pet-additional-info-card__text-container'>
-                <p className='standard-font standard-font_type_bode'>1 год</p>
-                <p className='pet-additional-info-card__secondary-string standard-font standard-font_type_small'>В приюте</p>
+        <div className='pet-module__preview'>
+          <Swiper spaceBetween={50} slidesPerView={1} navigation loop='true' pagination={{ clickable: true }}>
+            {!!gallery && gallery.length > 0 ? (
+              gallery.map(({ image }, index) => {
+                return (
+                  <SwiperSlide key={generateKey(index)}>
+                    <img className='pet-swiper__slide-image' src={image} alt='' />
+                  </SwiperSlide>
+                );
+              })
+            ) : (
+              <>
+                <SwiperSlide>
+                  <img className='pet-swiper__slide-image' src={slide1} alt='' />
+                </SwiperSlide>
+                <SwiperSlide>
+                  <img className='pet-swiper__slide-image' src={slide2} alt='' />
+                </SwiperSlide>
+                <SwiperSlide>
+                  <img className='pet-swiper__slide-image' src={slide3} alt='' />
+                </SwiperSlide>
+              </>
+            )}
+          </Swiper>
+          <div className='pet-module__info-container'>
+            <h2 className='standard-font standard-font_type_h2'>{renderLoadingOrValue(isLoadingReq, name || 'Безымянный')}</h2>
+            <ul className='pet-module__info-list'>
+              {/* eslint-disable-next-line no-nested-ternary */}
+              <InfoItem argument='Пол'>{renderLoadingOrValue(isLoadingReq, sex ? (sex === 'male' ? 'Мальчик' : 'Девочка') : '~')}</InfoItem>
+              <InfoItem argument='Возраст'>{renderLoadingOrValue(isLoadingReq, age >= 0 ? age : '~')}</InfoItem>
+              <InfoItem argument='Порода'>{renderLoadingOrValue(isLoadingReq, breed || 'Обыкновенная')}</InfoItem>
+            </ul>
+            <div className='pet-module__additional-shelter-info'>
+              <div className='pet-additional-info-card'>
+                <img className='pet-additional-info-card__shelter-info-image' src={clockIcon} alt='срок содержания' />
+                <div className='pet-additional-info-card__text-container'>
+                  <p className='standard-font standard-font_type_bode'>{renderLoadingOrValue(isLoadingReq, sheltering_time >= 0 ? sheltering_time : '~')}</p>
+                  <p className='pet-additional-info-card__secondary-string standard-font standard-font_type_small'>В приюте</p>
+                </div>
               </div>
-            </div>
-            <div className='pet-additional-info-card'>
-              <img className='pet-additional-info-card__shelter-info-image' src={locationIcon} alt='место расположения' />
-              <div className='pet-additional-info-card__text-container'>
-                <p className='standard-font standard-font_type_bode'>Приют Бирюлево</p>
-                <p className='pet-additional-info-card__secondary-string standard-font standard-font_type_small'>г. Москва</p>
+              <div className='pet-additional-info-card'>
+                <img className='pet-additional-info-card__shelter-info-image' src={locationIcon} alt='место расположения' />
+                <div className='pet-additional-info-card__text-container'>
+                  <p className='standard-font standard-font_type_bode'>{shelter.name}</p>
+                  <p className='pet-additional-info-card__secondary-string standard-font standard-font_type_small'>{shelter.address}</p>
+                </div>
               </div>
             </div>
           </div>

diff --git a/src/modules/PetModule/styles/pet-module.scss b/src/modules/PetModule/styles/pet-module.scss
@@ -4,15 +4,17 @@
 
   &__pet-part {
     display: flex;
-    width: 847px;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    row-gap: 40px;
+    flex-direction: column;
+    gap: 40px;
+  }
+
+  &__preview {
+    display: flex;
+    gap: 44px;
   }
 
   &__info-container {
     display: flex;
-    width: 368px;
     flex-direction: column;
   }
 
@@ -29,11 +31,12 @@
     display: flex;
     width: 100%;
     justify-content: space-between;
+    gap: 44px;
   }
 
   &__description-container {
     display: flex;
-    width: 100;
+    width: 820px;
     flex-direction: column;
     row-gap: 20px;
   }

diff --git a/src/modules/PetModule/styles/pet-swiper.scss b/src/modules/PetModule/styles/pet-swiper.scss
@@ -5,6 +5,7 @@
     height: 283px;
     border-radius: 30px;
     overflow: hidden;
+    margin: 0;
   }
 
   .pet-swiper__slide-image {
@@ -49,7 +50,7 @@
     width: 100%;
     text-align: center;
     z-index: 2;
-}
+  }
 
   .swiper-pagination-bullet {
     display: inline-block;
@@ -64,4 +65,4 @@
   .swiper-pagination-bullet-active {
     background: var(--color-accent-base);
   }
-}
+}
diff --git a/src/ui/InfoItem/InfoItem.jsx → src/ui/InfoItem/index.jsx b/src/ui/InfoItem/InfoItem.jsx → src/ui/InfoItem/index.jsx
diff --git a/src/ui/index.js b/src/ui/index.js
@@ -0,0 +1,5 @@
+import Button from './Button/Button';
+import Tooltip from './Tooltip';
+import InfoItem from './InfoItem';
+
+export { Button, Tooltip, InfoItem };
diff --git a/src/utils/getUniqueKey.js b/src/utils/getUniqueKey.js
@@ -0,0 +1,5 @@
+const generateKey = (pre) => {
+  return `${pre}_${new Date().getTime()}`;
+};
+
+export default generateKey;