From c1b8a7a46992b1995bcd34a04fa5ceb8bae3ec22 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 19 Mar 2019 11:15:26 +0200
Subject: [PATCH] separate functions for month rows and days

---
 src/routes/Calendar/Calendar.js | 121 ++++++++++++++++----------------
 1 file changed, 59 insertions(+), 62 deletions(-)

diff --git a/src/routes/Calendar/Calendar.js b/src/routes/Calendar/Calendar.js
index 2e780cead..ab9a8bf57 100644
--- a/src/routes/Calendar/Calendar.js
+++ b/src/routes/Calendar/Calendar.js
@@ -91,9 +91,7 @@ class Calendar extends Component {
         };
     }
 
-    renderMonthButton(month) {
-        const date = new Date(new Date(month).setDate(1));
-
+    renderMonthButton(date) {
         return (
             date.getMonth() === this.state.date.getMonth() ?
                 <div className={styles['month']}>{months[date.getMonth()]}</div>
@@ -102,9 +100,63 @@ class Calendar extends Component {
         );
     }
 
-    render() {
+    renderMonthRows = () => {
         const { padsCount, daysCount, rowsCount } = this.getMonthInfo(this.state.date);
+        var rows = [];
 
+        for (let row = 0; row < rowsCount; row++) {
+            rows.push(
+                <div key={row} className={styles['row']}>
+                    {this.renderMonthDays(row, rowsCount, padsCount, daysCount)}
+                </div>
+            )
+        }
+        return rows;
+    }
+
+    renderMonthDays = (row, rowsCount, padsCount, daysCount) => {
+        var days = [];
+
+        for (let day = 0; day < 7; day++) {
+            days.push(
+                day < padsCount && row === 0
+                    ?
+                    <div key={day} className={styles['pad']} />
+                    :
+                    (row * 7) + (day - padsCount) < daysCount
+                        ?
+                        <Input key={day}
+                            className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}
+                            type={'button'}
+                            data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1)).getTime()}
+                            onClick={this.changeDate}
+                        >
+                            <div className={styles['date-container']}>
+                                <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && new Date().getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
+                            </div>
+                            <div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
+                                {this.props.metaItems
+                                    .map((metaitem) => metaitem.videos
+                                        .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
+                                        .map((video) =>
+                                            <div key={video.id}
+                                                style={{ backgroundImage: `url('${metaitem.poster}')` }}
+                                                className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
+                                                data-video-id={video.id}
+                                                onClick={this.showVideoInfo}
+                                            />
+                                        )
+                                    )}
+                            </div>
+                        </Input>
+                        :
+                        null
+            )
+        }
+        return days;
+    }
+
+    render() {
         const videosDates = this.props.metaItems
             .map((metaitem) => metaitem.videos
                 .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth()))
@@ -119,70 +171,15 @@ class Calendar extends Component {
             <div className={styles['calendar-container']}>
                 <div className={styles['calendar']}>
                     <div className={styles['months']}>
-                        {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() - 1)))}
+                        {this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() - 1), 1)}
                         {this.renderMonthButton(this.state.date)}
-                        {this.renderMonthButton(new Date((new Date(this.state.date)).setMonth(this.state.date.getMonth() + 1)))}
+                        {this.renderMonthButton(new Date(this.state.date.getFullYear(), this.state.date.getMonth() + 1), 1)}
                     </div>
                     <div className={styles['month-days']}>
                         <div className={styles['week-days']}>
                             {days.map((day) => <div key={day} className={styles['day']}>{day}</div>)}
                         </div>
-                        {
-                            (() => {
-                                var rows = [];
-
-                                for (let row = 0; row < rowsCount; row++) {
-                                    rows.push(
-                                        <div key={row} className={styles['row']}>
-                                            {
-                                                (() => {
-                                                    var days = [];
-
-                                                    for (let day = 0; day < 7; day++) {
-                                                        days.push(
-                                                            day < padsCount && row === 0
-                                                                ?
-                                                                <div key={day} className={styles['pad']} />
-                                                                :
-                                                                (row * 7) + (day - padsCount) < daysCount
-                                                                    ?
-                                                                    <Input key={day}
-                                                                        className={classnames(styles['day'], { [styles['selected']]: this.state.date.getDate() === (row * 7) + (day - padsCount + 1) })}
-                                                                        type={'button'}
-                                                                        data-date={new Date(this.state.date.getFullYear(), this.state.date.getMonth(), (row * 7) + (day - padsCount + 1)).getTime()}
-                                                                        onClick={this.changeDate}
-                                                                    >
-                                                                        <div className={styles['date-container']}>
-                                                                            <div className={classnames(styles['date'], { [styles['today']]: this.state.date.getFullYear() === new Date().getFullYear() && this.state.date.getMonth() === new Date().getMonth() && new Date().getDate() === (row * 7) + (day - padsCount + 1) })}>{(row * 7) + (day - padsCount + 1)}</div>
-                                                                        </div>
-                                                                        <div className={classnames(styles['videos'], { [styles['small']]: rowsCount === 6 }, { [styles['big']]: rowsCount === 4 })}>
-                                                                            {this.props.metaItems
-                                                                                .map((metaitem) => metaitem.videos
-                                                                                    .filter((video) => video.released.getFullYear() === this.state.date.getFullYear() && video.released.getMonth() === this.state.date.getMonth() && video.released.getDate() === (row * 7) + (day - padsCount + 1))
-                                                                                    .map((video) =>
-                                                                                        <div key={video.id}
-                                                                                            style={{ backgroundImage: `url('${metaitem.poster}')` }}
-                                                                                            className={classnames(styles['poster'], { [styles['past']]: video.released.getTime() < new Date().getTime() })}
-                                                                                            data-video-id={video.id}
-                                                                                            onClick={this.showVideoInfo}
-                                                                                        />
-                                                                                    )
-                                                                                )}
-                                                                        </div>
-                                                                    </Input>
-                                                                    :
-                                                                    null
-                                                        )
-                                                    }
-                                                    return days;
-                                                })()
-                                            }
-                                        </div>
-                                    )
-                                }
-                                return rows;
-                            })()
-                        }
+                        {this.renderMonthRows()}
                     </div>
                 </div>
                 <div ref={this.videosScrollContainerRef} className={styles['videos-scroll-container']}>