add counter

src/components/Calendar/Calendar.js

@@ -1,11 +1,18 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import style from './Calendar.module.css';
 import calendarMale from '../../images/medium_male.png';
 import rectangle from '../../images/rectangle_secondPage.png';
 import CalendarComponent from './CalendarComponent';
+import { currentMonth } from './calendarHelper';
 
 const Calendar = () => {
+  const [month, setMonth] = useState('');
+
+  useEffect(() => {
+    setMonth(currentMonth);
+  }, [month]);
+
   return (
     <section className={style.calendar}>
       <div className="container">
@@ -36,7 +43,7 @@ const Calendar = () => {
           <div className="col-12 col-xl-12">
             <CalendarComponent />
             <p className={style.calendarFooter__text}>
-              Июнь : <span> 60 часов </span>
+              {month} : <span> 60 часов </span>
             </p>
           </div>
         </div>

src/components/Calendar/CalendarComponent.js

@@ -5,7 +5,7 @@ import rectangle from '../../images/rectangle__calendar.png';
 import calendarIcon from '../../images/calendar_icon.png';
 import moment from 'moment';
 import 'moment/locale/ru';
-import calendarHelper from './calendarHelper';
+import { calendarHelper, currentMonthAndDay } from './calendarHelper';
 
 const CalendarComponent = () => {
   const [value, setValue] = useState(moment());
@@ -30,10 +30,6 @@ const CalendarComponent = () => {
     return '';
   }
 
-  function currentMonth(day) {
-    return day.format('D MMMM');
-  }
-
   function prevMonth() {
     return value.clone().subtract(1, 'month');
   }
@@ -82,7 +78,7 @@ const CalendarComponent = () => {
                 id="btn"
               >
                 <img className={style.calendarIcon} src={calendarIcon} alt="" />
-                {currentMonth(day)}
+                {currentMonthAndDay()}
               </button>
             ))
           )}

src/components/Calendar/calendarHelper.js

@@ -1,4 +1,7 @@
-export default function calendarHelper(value) {
+import moment from 'moment';
+import 'moment/locale/ru';
+
+export function calendarHelper(value) {
   const startDay = value.clone().startOf('month').startOf('week').startOf('day');
   const endDay = value.clone().endOf('month').endOf('week');
 
@@ -16,3 +19,17 @@ export default function calendarHelper(value) {
 
   return calendar;
 }
+
+export function currentMonth() {
+  const currentMonth = moment().format('MMMM');
+
+  return currentMonth.charAt(0).toUpperCase() + currentMonth.slice(1);
+}
+
+// export function currentMonthAndDay(day) {
+//   return day.format('D MMMM');
+// }
+
+export function currentMonthAndDay() {
+  return moment().format('D MMMM');
+}