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(() => {
-    fetchReportList({
-      link: `${
-        process.env.REACT_APP_API_URL
-      }/api/reports/index?user_id=${userId}${getDateParamString({
-        paramName: 'fromDate',
-        value: fromDate
-      })}${getDateParamString({
-        paramName: 'toDate',
-        value: toDate
-      })}`,
-      history,
-      role,
-      logout: () => dispatch(auth(false))
-    })
-  }, [])
+  // useEffect(() => {
+  //   fetchReportList({
+  //     link: `${
+  //       process.env.REACT_APP_API_URL
+  //     }/api/reports/index?user_id=${userId}${getDateParamString({
+  //       paramName: 'fromDate',
+  //       value: fromDate
+  //     })}${getDateParamString({
+  //       paramName: 'toDate',
+  //       value: toDate
+  //     })}`,
+  //     history,
+  //     role,
+  //     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')
-  }
-
-  const prevMonthFirst = () => {
-    return moment().subtract(1, 'month').format('MMMM')
-  }
-  const prevMonthSecond = () => {
-    return moment().subtract(2, 'month').format('MMMM')
+    return value.clone().add(1, 'month');
   }
 
   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');
-}
+}