calendar routes

src/components/Calendar/Calendar.js

@@ -17,7 +17,7 @@ const getDateParamString = ({ paramName, value }) => {
   return value ? `${paramName}=${value}` : ''
 }
 
-const Calendar = () => {
+const Calendar = ({ onSelect }) => {
   const dispatch = useDispatch()
   const candidateForCalendar = useSelector(selectCurrentCandidate)
   const role = useSelector(getRole)
@@ -28,22 +28,22 @@ const Calendar = () => {
 
   const history = useHistory()
 
-  useEffect(() => {
+  // useEffect(() => {
-    fetchReportList({
+  //   fetchReportList({
-      link: `${
+  //     link: `${
-        process.env.REACT_APP_API_URL
+  //       process.env.REACT_APP_API_URL
-      }/api/reports/index?user_id=${userId}${getDateParamString({
+  //     }/api/reports/index?user_id=${userId}${getDateParamString({
-        paramName: 'fromDate',
+  //       paramName: 'fromDate',
-        value: fromDate
+  //       value: fromDate
-      })}${getDateParamString({
+  //     })}${getDateParamString({
-        paramName: 'toDate',
+  //       paramName: 'toDate',
-        value: toDate
+  //       value: toDate
-      })}`,
+  //     })}`,
-      history,
+  //     history,
-      role,
+  //     role,
-      logout: () => dispatch(auth(false))
+  //     logout: () => {}
-    })
+  //   })
-  }, [])
+  // }, [])
 
   useEffect(() => {
     setMonth(currentMonth)
@@ -78,7 +78,7 @@ const Calendar = () => {
 
       <div className='row'>
         <div className='col-12 col-xl-12'>
-          <CalendarComponent />
+          <CalendarComponent onSelect={onSelect} />
           <p className='calendar__hours'>
             {month} : <span> 60 часов </span>
           </p>

src/components/Calendar/CalendarComponent.js

@@ -4,11 +4,11 @@ import rectangle from '../../images/rectangle__calendar.png'
 import calendarIcon from '../../images/calendar_icon.png'
 import moment from 'moment'
 import 'moment/locale/ru'
-import { calendarHelper, currentMonthAndDay } from './calendarHelper'
+import { calendarHelper, currentMonthAndDay, } from './calendarHelper'
 
 import './calendarComponent.scss'
 
-const CalendarComponent = () => {
+const CalendarComponent = ({ onSelect }) => {
   const [value, setValue] = useState(moment())
   const [calendar, setCalendar] = useState([])
 
@@ -36,14 +36,7 @@ const CalendarComponent = () => {
   }
 
   function nextMonth() {
-    return value.clone().subtract(2, 'month')
+    return value.clone().add(1, 'month');
-  }
-
-  const prevMonthFirst = () => {
-    return moment().subtract(1, 'month').format('MMMM')
-  }
-  const prevMonthSecond = () => {
-    return moment().subtract(2, 'month').format('MMMM')
   }
 
   return (
@@ -52,11 +45,11 @@ const CalendarComponent = () => {
         <h3>Мои отчеты</h3>
         <div className='calendar-component__header-box'>
           <img src={ellipse} alt='' />
-          <span onClick={() => setValue(prevMonth())}>{prevMonthFirst()}</span>
+          <span onClick={() => setValue(prevMonth())}>{prevMonth().format('MMMM')}</span>
         </div>
         <div className='calendar-component__header-box'>
           <img src={ellipse} alt='' />
-          <span onClick={() => setValue(nextMonth())}>{prevMonthSecond()}</span>
+          <span onClick={() => setValue(nextMonth())}>{nextMonth().format('MMMM')}</span>
         </div>
       </div>
 
@@ -79,7 +72,7 @@ const CalendarComponent = () => {
           {calendar.map((week) =>
             week.map((day) => (
               <button
-                onClick={() => setValue(day)}
+                onClick={() => { setValue(day); onSelect(day) }}
                 key={day}
                 className={dayStyles(day)}
                 name={day.format('dddd')}

src/components/Calendar/calendarHelper.js

@@ -32,4 +32,4 @@ export function currentMonthAndDay(day) {
 
 export function currentMonthAndDayReportPage() {
   return moment().format('D MMMM');
-}
+}

src/components/Candidate/Candidate.js

@@ -31,7 +31,7 @@ const Candidate = () => {
 
   useEffect(() => {
     fetchGet({
-      link: `${process.env.REACT_APP_API_URL}/api/profile/`,
+      link: `${process.env.REACT_APP_API_URL}/api/profile/${candidateId}`,
       params: Number(candidateId),
       history,
       role,
@@ -82,7 +82,7 @@ const Candidate = () => {
   }
 
   const { header, img, classes } = setStyles()
-
+  
   return (
     <div className='candidate'>
       <div className='row'>

src/components/CandidateSidebar/CandidateSidebar.js

@@ -45,6 +45,11 @@ const CandidateSidebar = ({ candidate, position }) => {
             Выбрать к собеседованию
           </button>
         </Link>
+        <Link to={`/${candidate.id}/calendar`}>
+          <button className='candidate-sidebar__select'>
+            Отчёты
+          </button>
+        </Link>
         <div className='candidate-sidebar__achievements'>
           {candidate &&
             candidate.achievements &&

src/components/CandidateSidebar/candidateSidebar.scss

@@ -85,7 +85,7 @@
   line-height: normal;
   text-align: center;
   margin-top: 20px;
-  margin-bottom: 40px;
+  margin-bottom: 10px;
 }
 
 .candidate-sidebar__select:hover {

src/pages/CalendarPage.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import { useHistory } from 'react-router';
 import { WithLogout } from '../hoc/withLogout';
 import Calendar from '../components/Calendar/Calendar';
 
 const CalendarPage = () => {
-  return <WithLogout><Calendar /></WithLogout>;
+  const history = useHistory();
+  return <WithLogout><Calendar onSelect={() => { history.push('/report/0') }} /></WithLogout>;
 };
 
 export default CalendarPage;

src/redux/reportSlice.js

@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+    dateSelected: '',
+};
+
+export const reportSlice = createSlice({
+  name: 'report',
+  initialState,
+  reducers: {
+    dateSelected: (state, action) => {
+      state.dateSelected = action.payload;
+    },
+  },
+});
+
+export const { dateSelected, } = reportSlice.actions;
+
+export const selectDate = (state) => state.report.dateSelected;
+
+export default reportSlice.reducer;

src/store/store.js

@@ -2,11 +2,13 @@ import { configureStore } from '@reduxjs/toolkit';
 import outstaffingReducer from '../redux/outstaffingSlice';
 import loaderReducer from '../redux/loaderSlice';
 import roleReducer from '../redux/roleSlice';
+import reportReducer from '../redux/reportSlice';
 
 export const store = configureStore({
   reducer: {
     outstaffing: outstaffingReducer,
     loader: loaderReducer,
-    role: roleReducer
+    role: roleReducer,
+    report: reportReducer,
   },
 });