Merge pull request #195 from Lapkipomoshi/dev

Merge dev into test

.github/workflows/pr_closed.yml

@@ -15,18 +15,18 @@ jobs:
     steps:
       - name: Check out the repo
         uses: actions/checkout@v2
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
       - name: Login to Docker
         uses: docker/login-action@v1
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Push to Docker Hub
+      - name: Build and Push to Docker Hub
         uses: docker/build-push-action@v2
         with:
           push: true
           tags: lapkipomoshi/help_paw_f:latest
+          build-args:
+            SERVER_ENV=${{ secrets.REACT_APP_SERVER_TYPE_PROD }}
 
   deploy:
     runs-on: ubuntu-latest

Dockerfile

@@ -1,4 +1,6 @@
 FROM node:13.12.0-alpine as build
+ARG SERVER_ENV
+ENV REACT_APP_SERVER_TYPE=$SERVER_ENV
 WORKDIR /app
 COPY package*.json ./
 RUN npm install

src/components/Modal/Modal.jsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import './Modal.scss';
+import DeclarationInput from '../../ui/DeclarationInput/DeclarationInput';
+import { Button } from '../../ui';
+import PrivacyCheckbox from '../PrivacyCheckbox/PrivacyCheckbox';
+import EscapeIcon from '../../images/EscapeIcon/EscapeIcon';
+
+const Modal = ({ descrText, onClose, handleTakePet }) => {
+  const createInputState = (initialValue = '', allowText = true) => {
+    const [inputState, setInputState] = useState({
+      value: initialValue,
+      onChange: (e) => {
+        let newValue = e.target.value;
+        if (!allowText) {
+          newValue = newValue.replace(/\D/g, '');
+        }
+
+        setInputState((prevState) => {
+          return {
+            ...prevState,
+            value: newValue,
+            dirty: true,
+            // invalidText: newValue.length >= 2 ? '' : 'Введите хотя бы 2 символа',
+          };
+        });
+      },
+      onBlur: () => {
+        // Здесь можно добавить дополнительную логику, если нужно
+      },
+      dirty: false,
+      invalidText: '',
+    });
+
+    return inputState;
+  };
+
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [isPrivacyChecked, setIsPrivacyChecked] = useState(false);
+
+  const nameInputState = createInputState();
+  const phoneInputState = createInputState('', false);
+  const emailInputState = createInputState();
+
+  const handleTakeHomeButtonClick = () => {
+    setIsModalOpen(false);
+    handleTakePet();
+  };
+
+  const isSubmitButtonEnabled = () => {
+    return nameInputState.value.trim() !== '' && phoneInputState.value.trim() !== '' && emailInputState.value.trim() !== '' && isPrivacyChecked;
+  };
+
+  return (
+    isModalOpen && (
+      <div className='modal-overlay'>
+        <div className='wrapper'>
+          {/* <EscapeIcon onClick={handleTakeHomeButtonClick} /> */}
+          <EscapeIcon
+            onClick={() => {
+              setIsModalOpen(false);
+              onClose(); // Добавьте вызов onClose, чтобы установить isApplicationSent в true при закрытии по иконке
+            }}
+          />
+          <div className='modal'>
+            <div className='modal__title standard-font standard-font_type_h3'>Оставьте заявку и приют с вами свяжется</div>
+            <div className='modal__descr standard-font standard-font_type_small'>{descrText}</div>
+            <DeclarationInput caption='Имя' inputState={nameInputState} type='text' name='name' required showError={false} />
+            <DeclarationInput
+              caption='Номер телефона'
+              inputState={phoneInputState}
+              type='tel'
+              name='phone'
+              placeholder='+7 (999) 999-99-99'
+              required
+              showError={false}
+            />
+            <DeclarationInput
+              caption='E-mail'
+              inputState={emailInputState}
+              type='email'
+              name='email'
+              placeholder='[email protected]'
+              required
+              showError={false}
+            />
+            <PrivacyCheckbox
+              isChecked={isPrivacyChecked}
+              onChange={(isChecked) => {
+                setIsPrivacyChecked(isChecked);
+              }}
+            />
+          </div>
+          <div className='btn'>
+            <Button theme='accent' type='button' onClick={handleTakeHomeButtonClick} disabled={!isSubmitButtonEnabled()}>
+              Отправить заявку
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default Modal;

src/components/Modal/Modal.scss

@@ -0,0 +1,38 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.32);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.wrapper {
+  padding: 52px 32px;
+  width: 482px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  background-color: white;
+  border-radius: 30px;
+  position: relative;
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 20px;
+
+  &__title {
+    color: var(--color-text-base);
+  }
+
+  &__descr {
+    color: var(--color-text-additional);
+  }
+}

src/components/NewBigCard/NewBigCard.css

@@ -5,5 +5,5 @@
 @import url('./styles/__info-block/new-big-card__info-block.css');
 @import url('./styles/__icon/new-big-card__icon.css');
 @import url('./styles/__info/new-big-card__info.css');
-@import url('./styles/__header/new-big-card__header.css');
+@import url('./styles/__header/new-big-card__header.scss');
 @import url('./styles/__text/new-big-card__text.css');

src/components/NewBigCard/NewBigCard.jsx

@@ -21,7 +21,7 @@ const NewBigCard = ({
             <p className='new-big-card__info'>{shelter.name}</p>
           </div>
         </div>
-        <h3 className='new-big-card__header'>{header}</h3>
+        <h3 className='standard-font standard-font_type_h3 new-big-card__header'>{header}</h3>
         <p className='new-big-card__text'>{description}</p>
       </div>
     </Link>

src/components/NewBigCard/styles/__content/new-big-card__content.css

@@ -8,7 +8,8 @@
   background-image: linear-gradient(rgba(43,43,43,0), #2b2b2b); /* 43 = 2b */
   color: #fff;
   flex-direction: column;
-  justify-content: end;
+  /* justify-content: end; */
+  justify-content: flex-end;
   box-sizing: border-box;
   z-index: 2;
 }

src/components/NewBigCard/styles/__header/new-big-card__header.css → src/components/NewBigCard/styles/__header/new-big-card__header.scss

@@ -2,7 +2,4 @@
   width: 92%;
   margin: 0 0 12px;
   padding: 0;
-  font-size: 24px;
-  line-height: 29px;
-  font-weight: 500;
 }

src/components/PetCard/PetCard.jsx

@@ -5,14 +5,14 @@ import maleIcon from '../../images/icons/ic_male.svg';
 import femaleIcon from '../../images/icons/ic_female.svg';
 
 const PetCard = ({
-  id, shelterId, name, age, sex, photo,
+  id, shelterId, name, age, sex, gallery,
 }) => {
   return (
     <Link
       className='pet-card'
       to={`/shelters/${shelterId}/pets/${id}`}
     >
-      <img className='pet-card__photo' src={photo} alt={name} />
+      <img className='pet-card__photo' src={gallery[0].image} alt={name} />
       <div className='pet-card__cover' />
       <img className='pet-card__icon' src={sex === 'male' ? maleIcon : femaleIcon} alt={sex === 'male' ? 'самец' : 'самка'} />
       <p className='pet-card__name'>{name}</p>

src/components/PrivacyCheckbox/PrivacyCheckbox.jsx

@@ -3,11 +3,20 @@ import { Link } from 'react-router-dom';
 
 import './PrivacyCheckbox.scss';
 
-const PrivacyCheckbox = ({ onClick }) => {
+const PrivacyCheckbox = ({ isChecked, onChange }) => {
+  const handleCheckboxChange = () => {
+    onChange(!isChecked);
+  };
+
   return (
     <div className='privacy-checkbox'>
       <label className='privacy-checkbox__container'>
-        <input className='privacy-checkbox__input' type='checkbox' onClick={onClick} />
+        <input
+          className='privacy-checkbox__input'
+          type='checkbox'
+          checked={isChecked}
+          onChange={handleCheckboxChange}
+        />
         <span className='privacy-checkbox__checkbox' />
       </label>
 

src/components/VacancyCard/VacancyCard.jsx

@@ -30,8 +30,8 @@ const VacancyCard = ({ title, salary, schedule, description, education, isLoadin
         )}
       </div>
       <p className='vacancy-card__text'>{`ЗП: ${salary}`}</p>
-      <p className='vacancy-card__text'>{`График работы: ${schedule}`}</p>
-      <p className='vacancy-card__text'>{`Образование: ${education}`}</p>
+      <p className='vacancy-card__text'>{`График работы: ${schedule.map((item) => { return item.name; }).join(', ')}`}</p>
+      <p className='vacancy-card__text'>{`Образование: ${education.name}`}</p>
       <p className='vacancy-card__text'>{`Обязанности: ${description}`}</p>
     </li>
   );

src/images/EscapeIcon/EscapeIcon.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import './EscapeIcon.scss';
+
+const EscapeIcon = ({ onClick }) => {
+  return (
+    <svg className='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' onClick={onClick}>
+      <path
+        d={
+          'M7.76562 4.84358L16.0003 13.0782L24.1923 4.88624C24.3732 4.69364 24.5912 4.53957 ' +
+          '24.8332 4.43326C25.0751 4.32695 25.336 4.2706 25.6003 4.26758C26.1661 4.26758 26.7087 ' +
+          '4.49234 27.1088 4.89242C27.5089 5.29249 27.7336 5.83512 27.7336 6.40091C27.7386 6.66246 ' +
+          '27.6901 6.92227 27.591 7.16439C27.492 7.40651 27.3445 7.62584 27.1576 7.80891L18.8589 ' +
+          '16.0009L27.1576 24.2996C27.5092 24.6436 27.7154 25.1094 27.7336 25.6009C27.7336 26.1667 ' +
+          '27.5089 26.7093 27.1088 27.1094C26.7087 27.5095 26.1661 27.7342 25.6003 27.7342C25.3284 ' +
+          '27.7455 25.0571 27.7001 24.8037 27.601C24.5503 27.5018 24.3203 27.3511 24.1283 27.1582' +
+          'L16.0003 18.9236L7.78695 27.1369C7.60669 27.3231 7.39135 27.4717 7.15335 27.5743C6.91535 ' +
+          '27.6768 6.65941 27.7312 6.40028 27.7342C5.83449 27.7342 5.29186 27.5095 4.89179 27.1094' +
+          'C4.49171 26.7093 4.26695 26.1667 4.26695 25.6009C4.26197 25.3394 4.3105 25.0796 4.40955 ' +
+          '24.8374C4.5086 24.5953 4.65608 24.376 4.84295 24.1929L13.1416 16.0009L4.84295 7.70224C4.49134 ' +
+          '7.35826 4.28517 6.89246 4.26695 6.40091C4.26695 5.83512 4.49171 5.29249 4.89179 4.89242C5.29186 ' +
+          '4.49234 5.83449 4.26758 6.40028 4.26758C6.91228 4.27398 7.40295 4.48091 7.76562 4.84358Z'
+        }
+        fill='#111C2C'
+      />
+    </svg>
+  );
+};
+
+export default EscapeIcon;

src/images/EscapeIcon/EscapeIcon.scss

@@ -0,0 +1,8 @@
+.icon {
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  right: 17px;
+  top: 15px;
+  cursor: pointer;
+}

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 };

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';

src/modules/Faq/Faq.jsx

@@ -7,7 +7,7 @@ const Faq = ({ faqList }) => {
   return (
     <MainContainer base='additional'>
       <section className='faq' id='faq'>
-        <h2 className='section-title'>Часто задаваемые вопросы</h2>
+        <h2 className='section-title standard-font standard-font_type_h2'>Часто задаваемые вопросы</h2>
         <ul className='faq__list'>
           {faqList && faqList.length !== 0 ? (
             // список карточек с часто задаваемыми вопросами

src/modules/NewsSection/NewsSection.jsx

@@ -29,25 +29,9 @@ const NewsSection = ({ shelterId = null }) => {
       });
   };
 
-  const setShelterNews = () => {
-    if (app.shelterNewsById && app.shelterNewsById[shelterId]) {
-      setNewsList(app.shelterNewsById[shelterId]);
-    } else {
-      fetchNews(shelterId);
-    }
-  };
-
-  const setPortalNews = () => {
-    if (app.portalNews) {
-      setNewsList(app.portalNews);
-    } else {
-      fetchNews(null);
-    }
-  };
-
   useEffect(() => {
-    shelterId ? setShelterNews() : setPortalNews();
-  }, []);
+    fetchNews(shelterId);
+  }, [shelterId]);
 
   return (
     <div className='news-section'>

src/modules/NewsSection/api.js

@@ -8,7 +8,11 @@ class NewsApi extends BaseApi {
   }
 
   getNews({ shelterId, amount }) { // загрузка новостей с параметрами у запроса
-    return fetch(`${this._baseUrl}/v1/news/?${shelterId ? `shelter=${shelterId}&` : ''}limit=${amount}`, {
+    const apiUrl = shelterId
+      ? `${this._baseUrl}/v1/shelters/${shelterId}/news/?limit=${amount}`
+      : `${this._baseUrl}/v1/news/?limit=${amount}`;
+
+    return fetch(apiUrl, {
       headers: this._headers,
     })
       .then((res) => {

src/modules/PapersOnMain/PapersOnMain.jsx

@@ -8,7 +8,7 @@ const PapersOnMain = ({ papersList }) => {
   return (
     <MainContainer theme='additional'>
       <section className='papers-on-main'>
-        <h2 className='section-title'>Полезные статьи</h2>
+        <h2 className='section-title standard-font standard-font_type_h2'>Полезные статьи</h2>
         <ul className='papers-on-main__flex-container'>
           {papersList && papersList.length !== 0
             ? papersList.map((card) => {

src/modules/PapersOnMain/styles/papers-on-main.css

@@ -1,7 +1,7 @@
 .papers-on-main {
   display: flex;
   width: 1440px;
-  padding: 0 132px 64px;
+  padding: 64px 132px;
   flex-direction: column;
   box-sizing: border-box;
   background-color: var(--color-background-additional);