76 lines
2.4 KiB
JavaScript
76 lines
2.4 KiB
JavaScript
import React, {useEffect, useState} from 'react'
|
|
import {useSelector} from 'react-redux'
|
|
import {Link, useNavigate} from 'react-router-dom'
|
|
|
|
import CalendarComponent from './CalendarComponent'
|
|
import {currentMonth} from './calendarHelper'
|
|
import {Footer} from '../Footer/Footer'
|
|
import {LogoutButton} from "../LogoutButton/LogoutButton";
|
|
|
|
import {selectCurrentCandidate} from '../../redux/outstaffingSlice'
|
|
|
|
import rectangle from '../../images/rectangle_secondPage.png'
|
|
|
|
import './calendar.scss'
|
|
import {urlForLocal} from "../../helper";
|
|
|
|
|
|
const Calendar = () => {
|
|
|
|
const candidateForCalendar = useSelector(selectCurrentCandidate);
|
|
|
|
const [month, setMonth] = useState('');
|
|
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
setMonth(currentMonth)
|
|
}, [month]);
|
|
|
|
const {name, skillsName, photo} = candidateForCalendar;
|
|
|
|
const abbreviatedName = name && name.substring(0, name.lastIndexOf(' '));
|
|
|
|
return (
|
|
<div className='container'>
|
|
<section className='calendar'>
|
|
<div className='row'>
|
|
<div className='calendar__header'>
|
|
<h2 className='calendar__profile'>
|
|
Добрый день, <span>Александр !</span>
|
|
</h2>
|
|
<LogoutButton />
|
|
</div>
|
|
<div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
|
|
<div className='calendar__info'>
|
|
{photo && <img className='calendar__info-img' src={urlForLocal(photo)} alt='img'/>}
|
|
<h3 className='calendar__info-name'>{abbreviatedName}</h3>
|
|
</div>
|
|
<div className='calendar__title'>
|
|
<h3 className='calendar__title-text'>{skillsName} разработчик</h3>
|
|
<img className='calendar__title-img' src={rectangle} alt='img'/>
|
|
</div>
|
|
<div>
|
|
<Link to='/report'>
|
|
<button className='calendar__btn'>Заполнить отчет за день</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='row'>
|
|
<div className='col-12 col-xl-12'>
|
|
<CalendarComponent onSelect={() => { navigate('/report/0') }}/>
|
|
<p className='calendar__hours'>
|
|
{month} : <span> 60 часов </span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Footer/>
|
|
</section>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
export default Calendar
|