Skip to content

Commit

Permalink
Merge pull request #175 from Lapkipomoshi/dev
Browse files Browse the repository at this point in the history
Dev to test: 08.2023 release
  • Loading branch information
bevuxyna authored Aug 29, 2023
2 parents 8331509 + a44682b commit 58710bf
Show file tree
Hide file tree
Showing 17 changed files with 160 additions and 53 deletions.
6 changes: 3 additions & 3 deletions src/components/CardsSlider/CardsSlider.jsx
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,15 @@
display: none;
}

&_profile {
margin-bottom: 0;
}

@media (min-width: 768px) {
margin-bottom: 80px;

&_profile {
margin-bottom: 0;
}
}
}
20 changes: 18 additions & 2 deletions src/components/CardsSlider/styles/cards-slider.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
7 changes: 4 additions & 3 deletions src/components/PrivacyCheckbox/PrivacyCheckbox.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.privacy-checkbox {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 18px;
position: relative;
}
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/ProfileContainer/ProfileContainer.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.profile-container {
background-color: var(--color-background-base);
padding: 44px 132px 199px;
padding: 44px 132px 80px;
position: relative;

&_edit-profile {
Expand Down
44 changes: 24 additions & 20 deletions src/components/ProfileSheltersBlock/ProfileSheltersBlock.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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>
Expand Down
10 changes: 10 additions & 0 deletions src/components/ProfileSheltersBlock/ProfileSheltersBlock.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,7 @@
.shelter-metrics__title {
margin: 0;
}

.shelter-metrics__metrics-donation-sum {
color: var(--color-accent-base);
}
18 changes: 12 additions & 6 deletions src/modules/ShelterOwnerStatistics/ShelterOwnerStatistics.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
Expand Down
22 changes: 21 additions & 1 deletion src/modules/ShelterVacancies/ShelterVacancies.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -39,6 +45,19 @@ const ShelterVacancies = () => {
});
};

const closeInfoTooltip = () => {
setInfoTooltipOpen(false);
};

const handleSubmit = () => {
setIsOpenVacancyForm(false);
setInfoTooltipOpen(true);

setTimeout(() => {
closeInfoTooltip();
}, 5000);
};

if (isLoading) {
return null;
}
Expand All @@ -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>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand Down Expand Up @@ -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>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
28 changes: 26 additions & 2 deletions src/pages/App/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -84,6 +86,7 @@ const App = () => {
.then(() => {
setInfoTooltipImage(imageSuccess);
setMessage('Спасибо за регистрацию! Для активации аккаунта перейдите по ссылке, отправленной на вашу почту.');
setSuccess(true);
setInfoTooltipOpen(true);
setTimeout(closeInfoTooltip, 15000);
setTimeout(() => {
Expand All @@ -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();
Expand Down Expand Up @@ -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} />} />

Expand Down
Loading

0 comments on commit 58710bf

Please sign in to comment.