Merge pull request #175 from Lapkipomoshi/dev

Dev to test: 08.2023 release
Lapkipomoshi · Aug 29, 2023 · 58710bf · 58710bf
2 parents 8331509 + a44682b
commit 58710bf
Show file tree

Hide file tree

Showing 17 changed files with 160 additions and 53 deletions.
diff --git a/src/components/CardsSlider/CardsSlider.jsx b/src/components/CardsSlider/CardsSlider.jsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import './CardsSlider.scss';
 
-const CardsSlider = ({ children, isButtonsHidden = false }) => {
+const CardsSlider = ({ children, isButtonsHidden = false, modifier }) => {
   const defaultScrollPixelsAmount = 350;
 
   const sliderContainerRef = useRef(null);
@@ -16,10 +16,10 @@ const CardsSlider = ({ children, isButtonsHidden = false }) => {
 
   return (
     <>
-      <ul className='cards-slider' ref={sliderContainerRef}>
+      <ul className={`cards-slider cards-slider_${modifier}`} ref={sliderContainerRef}>
         {children}
       </ul>
-      <div className={`cards-slider__buttons ${isButtonsHidden && 'cards-slider__buttons_hidden'}`}>
+      <div className={`cards-slider__buttons cards-slider__buttons_${modifier} ${isButtonsHidden && 'cards-slider__buttons_hidden'}`}>
         <button className='cards-slider__button' type='button' onClick={handleSliderScroll('left')} />
         <button className='cards-slider__button cards-slider__button_next' type='button' onClick={handleSliderScroll('right')} />
       </div>

diff --git a/src/components/CardsSlider/styles/__buttons/cards-slider__buttons.scss b/src/components/CardsSlider/styles/__buttons/cards-slider__buttons.scss
@@ -5,7 +5,15 @@
     display: none;
   }
 
+  &_profile {
+    margin-bottom: 0;
+  }
+
   @media (min-width: 768px) {
     margin-bottom: 80px;
+
+    &_profile {
+      margin-bottom: 0;
+    }
   }
 }
diff --git a/src/components/CardsSlider/styles/cards-slider.scss b/src/components/CardsSlider/styles/cards-slider.scss
@@ -10,11 +10,27 @@
   column-gap: 38px;
   overflow: hidden;
 
+  &_profile {
+    padding: 0;
+  }
+
   @media (min-width: 768px) {
-    padding: 20px 0 44px 44px;
+    .cards-slider {
+      padding: 20px 0 44px 44px;
+
+      &_profile {
+        padding: 0;
+      }
+    }
   }
 
   @media (min-width: 1440px) {
-    padding-left: 132px;
+    .cards-slider {
+      padding-left: 132px;
+
+      &_profile {
+        padding: 0;
+      }
+    }
   }
 }
diff --git a/src/components/PrivacyCheckbox/PrivacyCheckbox.scss b/src/components/PrivacyCheckbox/PrivacyCheckbox.scss
@@ -1,6 +1,7 @@
 .privacy-checkbox {
   display: flex;
   flex-direction: row;
+  align-items: center;
   margin-top: 18px;
   position: relative;
 }
@@ -35,10 +36,10 @@
   content: '';
   box-sizing: border-box;
   display: inline-block;
-  height: 35px;
-  width: 35px;
+  height: 20px;
+  width: 20px;
   border: 1px solid var(--color-text-base);
-  border-radius: 8px;
+  border-radius: 2px;
   margin-right: 20px;
   background-repeat: no-repeat;
   background-position: center;

diff --git a/src/components/ProfileContainer/ProfileContainer.scss b/src/components/ProfileContainer/ProfileContainer.scss
@@ -1,6 +1,6 @@
 .profile-container {
   background-color: var(--color-background-base);
-  padding: 44px 132px 199px;
+  padding: 44px 132px 80px;
   position: relative;
 
   &_edit-profile {

diff --git a/src/components/ProfileSheltersBlock/ProfileSheltersBlock.jsx b/src/components/ProfileSheltersBlock/ProfileSheltersBlock.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import './ProfileSheltersBlock.scss';
 import ShelterCard from '../ShelterCard/ShelterCard';
 import Button from '../../ui/Button/Button';
+import CardsSlider from '../CardsSlider/CardsSlider';
 
 const ProfileSheltersBlock = ({ shelters, sheltersTitle, owner }) => {
   return (
@@ -10,27 +11,30 @@ const ProfileSheltersBlock = ({ shelters, sheltersTitle, owner }) => {
         <div className='profile-shelters__container'>
           <h3 className='profile-shelters__title standard-font standard-font_type_h3'>{sheltersTitle}</h3>
 
-          <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>
-
-          {owner && <Button link to='/'>Перейти в приют</Button>}
+          <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>}
+          </div>
         </div>
       }
     </div>

diff --git a/src/components/ProfileSheltersBlock/ProfileSheltersBlock.scss b/src/components/ProfileSheltersBlock/ProfileSheltersBlock.scss
@@ -1,9 +1,19 @@
+.profile-shelters__shelters {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .profile-shelters__container {
   display: flex;
   flex-direction: column;
   margin-bottom: 44px;
 }
 
+.profile-shelters__container:last-of-type {
+  margin-bottom: 0;
+}
+
 .profile-shelters__title {
   margin-top: 0;
   margin-bottom: 28px;

diff --git a/src/components/ShelterMetricsOverview/ShelterMetricsOverview.jsx b/src/components/ShelterMetricsOverview/ShelterMetricsOverview.jsx
@@ -7,7 +7,7 @@ const ShelterMetricsOverview = ({ title, metricValue, actionText, path }) => {
     <div className='shelter-metrics'>
       <h3 className='shelter-metrics__title standard-font_type_h3'>
         {title}
-        {metricValue}
+        <span className='shelter-metrics__metrics-donation-sum'> {metricValue}</span>
       </h3>
 
       <Button link to={path}>

diff --git a/src/components/ShelterMetricsOverview/ShelterMetricsOverview.scss b/src/components/ShelterMetricsOverview/ShelterMetricsOverview.scss
@@ -7,3 +7,7 @@
 .shelter-metrics__title {
   margin: 0;
 }
+
+.shelter-metrics__metrics-donation-sum {
+  color: var(--color-accent-base);
+}
diff --git a/src/modules/ShelterOwnerStatistics/ShelterOwnerStatistics.jsx b/src/modules/ShelterOwnerStatistics/ShelterOwnerStatistics.jsx
@@ -2,16 +2,22 @@ import React from 'react';
 import './ShelterOwnerStatistics.scss';
 import ShelterMetricsOverview from '../../components/ShelterMetricsOverview/ShelterMetricsOverview';
 
-// TODO доделать на получение данных с бэка вместо статики, Максим добавит чуть позже поля в shelter, чтобы не делать доп запросы
 // TODO додалеть пути, сейчас эти страницы не сверстаны
+
 const ShelterOwnerStatistics = ({ shelter }) => {
-  console.log(shelter);
+  const metrics = [
+    { 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'>
-      <ShelterMetricsOverview title='Количество питомцев: ' metricValue='123' actionText='Посмотреть всех питомцев' path='/' />
-      <ShelterMetricsOverview title='Количество вакансий: ' metricValue='32' actionText='Посмотреть все вакансии' path='/' />
-      <ShelterMetricsOverview title='Количество тегов: ' metricValue='1000' actionText='Посмотреть все теги' path='/' />
-      <ShelterMetricsOverview title='Количество новостей: ' metricValue='666' actionText='Посмотреть все новостей' path='/' />
+      {metrics.map((metric) => {
+        return (
+          <ShelterMetricsOverview key={metric.title} title={metric.title} metricValue={metric.valueKey} path={metric.path} actionText={metric.actionText} />
+        );
+      })}
     </div>
   );
 };

diff --git a/src/modules/ShelterVacancies/ShelterVacancies.jsx b/src/modules/ShelterVacancies/ShelterVacancies.jsx
@@ -5,8 +5,14 @@ import VacancyList from './VacancyList';
 import Button from '../../ui/Button/Button';
 import AddVacancyForm from './components/AddVacancyForm/AddVacancyForm';
 import shelterVacanciesApi from './api';
+import imageSuccess from '../../images/icons/ic_success.svg';
+import InfoTooltip from '../../components/InfoTooltip/InfoTooltip';
+
+const message = 'Вакансия успешно добавлена!';
 
 const ShelterVacancies = () => {
+  const [infoTooltipOpen, setInfoTooltipOpen] = useState(false);
+
   const [vacanciesList, setVacanciesList] = useState([]);
   const [isOpenVacancyForm, setIsOpenVacancyForm] = useState(false);
 
@@ -39,6 +45,19 @@ const ShelterVacancies = () => {
     });
   };
 
+  const closeInfoTooltip = () => {
+    setInfoTooltipOpen(false);
+  };
+
+  const handleSubmit = () => {
+    setIsOpenVacancyForm(false);
+    setInfoTooltipOpen(true);
+
+    setTimeout(() => {
+      closeInfoTooltip();
+    }, 5000);
+  };
+
   if (isLoading) {
     return null;
   }
@@ -55,8 +74,9 @@ const ShelterVacancies = () => {
       <h3 className='standard-font_type_h3 shelter-section__subtitle'>Всего вакансий: {vacanciesList.length}</h3>
       <div className='shelter-vacancies__vacancies-container'>
         <VacancyList vacancies={vacanciesList} isLoading={isLoading} />
-        {isOpenVacancyForm && <AddVacancyForm onChange={cancelVacancyForm} />}
+        {isOpenVacancyForm && <AddVacancyForm onChange={cancelVacancyForm} onSubmitSuccess={handleSubmit} />}
       </div>
+      <InfoTooltip isOpen={infoTooltipOpen} image={imageSuccess} message={message} onClose={closeInfoTooltip} />
     </section>
   );
 };

diff --git a/src/modules/ShelterVacancies/components/AddVacancyForm/AddVacancyForm.jsx b/src/modules/ShelterVacancies/components/AddVacancyForm/AddVacancyForm.jsx
@@ -10,17 +10,18 @@ import FormActionButtons from './components/FormActionButtons';
 import FormTextarea from './components/FormTextarea';
 import PrivacyCheckbox from '../../../../components/PrivacyCheckbox/PrivacyCheckbox';
 
-const AddVacancyForm = ({ onChange }) => {
+const AddVacancyForm = ({ onChange, onSubmitSuccess }) => {
   const [formValues, setFormValues] = useState(defaultFormValues);
 
   const jobTitleInput = useInput('', { notEmpty: true, maxLength: 30, regex: regex.NAME_REGEX }, errorMessage.VACANCY_NAME);
   const salaryInput = useInput('', { notEmpty: true, maxLength: 12, regex: regex.NUMBER }, errorMessage.VACANCY_SALARY);
   const jobDescriptionInput = useInput('', { notEmpty: true, maxLength: 3000, regex: regex.TEXT }, errorMessage.VACANCY_DESCRIPTION);
 
   const [isChecked, setIsChecked] = useState(false);
-
   const toggleCheckbox = () => {
-    setIsChecked(!isChecked);
+    setIsChecked((prev) => {
+      return !prev;
+    });
   };
 
   const isSubmitButtonDisabled =
@@ -91,9 +92,9 @@ const AddVacancyForm = ({ onChange }) => {
 
       <FormTextarea jobDescriptionInput={jobDescriptionInput} handleDescriptionChange={handleDescriptionChange} />
 
-      <PrivacyCheckbox toggleCheckbox={toggleCheckbox} />
+      <PrivacyCheckbox onClick={toggleCheckbox} />
 
-      <FormActionButtons isSubmitButtonDisabled={isSubmitButtonDisabled} onClick={handleCancelClick} />
+      <FormActionButtons isSubmitButtonDisabled={isSubmitButtonDisabled} onClick={handleCancelClick} onSubmitSuccess={onSubmitSuccess} />
     </form>
   );
 };

diff --git a/src/modules/ShelterVacancies/components/AddVacancyForm/components/FormActionButtons.jsx b/src/modules/ShelterVacancies/components/AddVacancyForm/components/FormActionButtons.jsx
@@ -1,13 +1,17 @@
 import React from 'react';
 import Button from '../../../../../ui/Button/Button';
 
-const FormActionButtons = ({ isSubmitButtonDisabled, onClick }) => {
+const FormActionButtons = ({ isSubmitButtonDisabled, onClick, onSubmitSuccess }) => {
+  const handleSubmit = () => {
+    // TODO сделать отправку формы
+    onSubmitSuccess();
+  };
+
   return (
     <div className='add-shelter-form__submit-buttons'>
-      <Button submit disabled={isSubmitButtonDisabled}>
+      <Button submit disabled={isSubmitButtonDisabled} onClick={handleSubmit} onSubmitSuccess={onSubmitSuccess}>
         Добавить вакансию
       </Button>
-
       <Button onClick={onClick}>Отменить</Button>
     </div>
   );

diff --git a/src/pages/App/App.jsx b/src/pages/App/App.jsx
@@ -47,6 +47,8 @@ const App = () => {
   const [infoTooltipImage, setInfoTooltipImage] = useState(null);
   const [message, setMessage] = useState('');
 
+  const [success, setSuccess] = useState(false);
+
   const closeInfoTooltip = () => {
     setInfoTooltipOpen(false);
     setInfoTooltipImage(null);
@@ -84,6 +86,7 @@ const App = () => {
       .then(() => {
         setInfoTooltipImage(imageSuccess);
         setMessage('Спасибо за регистрацию! Для активации аккаунта перейдите по ссылке, отправленной на вашу почту.');
+        setSuccess(true);
         setInfoTooltipOpen(true);
         setTimeout(closeInfoTooltip, 15000);
         setTimeout(() => {
@@ -107,6 +110,7 @@ const App = () => {
       .login({ password, email })
       .then((res) => {
         setLoggedIn(true);
+        setSuccess(true);
         localStorage.setItem('access', res.access);
         localStorage.setItem('refresh', res.refresh);
         tokenCheck();
@@ -169,8 +173,28 @@ const App = () => {
             <Route path='/privacy' element={<PrivacyPolicyPage />} />
             <Route path='/terms' element={<TermsPage />} />
 
-            <Route exact path='/sign-in' element={<ProtectedRoute condition={!loggedIn} component={LoginPage} onLogin={handleLogin} />} />
-            <Route exact path='/sign-up' element={<ProtectedRoute condition={!loggedIn} component={RegisterPage} onRegister={handleRegister} />} />
+            <Route
+              exact path='/sign-in'
+              element={
+                <ProtectedRoute
+                  condition={!loggedIn}
+                  component={LoginPage}
+                  onLogin={handleLogin}
+                  isSuccess={success}
+                />
+              }
+            />
+            <Route
+              exact path='/sign-up'
+              element={
+                <ProtectedRoute
+                  condition={!loggedIn}
+                  component={RegisterPage}
+                  onRegister={handleRegister}
+                  isSuccess={success}
+                />
+              }
+            />
             <Route exact path='/sign-up/confirm' element={<ProtectedRoute condition={!loggedIn} component={SignUpConfirm} />} />
             <Route exact path='/password-recovery' element={<ProtectedRoute condition={!loggedIn} component={PasswordRecovery} />} />