From 0ad091c48abc324bea3a78dd1b04b41c2128f90a Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Mon, 4 Jun 2018 19:29:26 +0200
Subject: [PATCH] Client: fix #2

---
 mpwo_client/src/components/App.css            |  4 ++
 .../src/components/Dashboard/Records.jsx      |  2 +-
 .../src/components/Others/Calendar.jsx        | 38 +++++++++++--------
 mpwo_client/src/mwpoApi/index.js              |  2 +-
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/mpwo_client/src/components/App.css b/mpwo_client/src/components/App.css
index 23ddef0d..47ed1f3b 100644
--- a/mpwo_client/src/components/App.css
+++ b/mpwo_client/src/components/App.css
@@ -165,6 +165,10 @@ input, textarea {
   color: lightgrey;
 }
 
+.img-disabled {
+  opacity: .4;
+}
+
 .record-logo {
   margin-right: 5px;
   max-width: 25px;
diff --git a/mpwo_client/src/components/Dashboard/Records.jsx b/mpwo_client/src/components/Dashboard/Records.jsx
index 90d2e5d7..c4acb2eb 100644
--- a/mpwo_client/src/components/Dashboard/Records.jsx
+++ b/mpwo_client/src/components/Dashboard/Records.jsx
@@ -24,7 +24,7 @@ export default function RecordsCard (props) {
       </div>
       <div className="card-body">
         {Object.keys(recordsBySport).length === 0
-          ? 'No records.'
+          ? 'No records'
           : (Object.keys(recordsBySport).map(sportLabel => (
             <table
               className="table table-borderless record-table"
diff --git a/mpwo_client/src/components/Others/Calendar.jsx b/mpwo_client/src/components/Others/Calendar.jsx
index 302bc0d3..8ba79eff 100644
--- a/mpwo_client/src/components/Others/Calendar.jsx
+++ b/mpwo_client/src/components/Others/Calendar.jsx
@@ -7,10 +7,14 @@ import { Link } from 'react-router-dom'
 
 import { getMonthActivities } from '../../actions/activities'
 
-const getStartAndEndMonth = date => ({
-  start: dateFns.startOfMonth(date),
-  end: dateFns.endOfMonth(date),
-})
+const getStartAndEndMonth = date => {
+  const monthStart = dateFns.startOfMonth(date)
+  const monthEnd = dateFns.endOfMonth(date)
+  return {
+    start: dateFns.startOfWeek(monthStart),
+      end: dateFns.endOfWeek(monthEnd),
+  }
+}
 
 
 class Calendar extends React.Component {
@@ -19,13 +23,13 @@ class Calendar extends React.Component {
     const calendarDate = new Date()
     this.state = {
       currentMonth: calendarDate,
-      monthStart: getStartAndEndMonth(calendarDate).start,
-      monthEnd: getStartAndEndMonth(calendarDate).end,
+      startDate: getStartAndEndMonth(calendarDate).start,
+      endDate: getStartAndEndMonth(calendarDate).end,
     }
   }
 
   componentDidMount() {
-    this.props.loadMonthActivities(this.state.monthStart, this.state.monthEnd)
+    this.props.loadMonthActivities(this.state.startDate, this.state.endDate)
   }
 
   renderHeader() {
@@ -56,7 +60,7 @@ class Calendar extends React.Component {
   renderDays() {
     const dateFormat = 'ddd'
     const days = []
-    const startDate = dateFns.startOfWeek(this.state.currentMonth)
+    const { startDate } = this.state
 
     for (let i = 0; i < 7; i++) {
       days.push(
@@ -78,10 +82,8 @@ class Calendar extends React.Component {
   }
 
   renderCells() {
-    const { monthStart, monthEnd } = this.state
+    const { currentMonth, startDate, endDate } = this.state
     const { sports } = this.props
-    const startDate = dateFns.startOfWeek(monthStart)
-    const endDate = dateFns.endOfWeek(monthEnd)
 
     const dateFormat = 'D'
     const rows = []
@@ -94,13 +96,19 @@ class Calendar extends React.Component {
       for (let i = 0; i < 7; i++) {
         formattedDate = dateFns.format(day, dateFormat)
         const dayActivities = this.filterActivities(day)
+        const isDisabled = dateFns.isSameMonth(day, currentMonth)
+          ? ''
+          : 'disabled'
         days.push(
-          <div className="col cell" key={day} >
+          <div
+            className={`col cell img-${isDisabled}`}
+            key={day}
+          >
             <span className="number">{formattedDate}</span>
             {dayActivities.map(act => (
               <Link key={act.id} to={`/activities/${act.id}`}>
                 <img
-                  className="activity-sport"
+                  className={`activity-sport ${isDisabled}`}
                   src={sports
                     .filter(s => s.id === act.sport_id)
                     .map(s => s.img)}
@@ -126,8 +134,8 @@ class Calendar extends React.Component {
     const { start, end } = getStartAndEndMonth(calendarDate)
     this.setState({
       currentMonth: calendarDate,
-      monthStart: start,
-      monthEnd: end,
+      startDate: start,
+      endDate: end,
     })
     this.props.loadMonthActivities(start, end)
   }
diff --git a/mpwo_client/src/mwpoApi/index.js b/mpwo_client/src/mwpoApi/index.js
index 854ae6a3..f4b42e82 100644
--- a/mpwo_client/src/mwpoApi/index.js
+++ b/mpwo_client/src/mwpoApi/index.js
@@ -17,7 +17,7 @@ export default class MpwoApi {
           }${
         data.order ? `&order=${data.order}` : ''
         }${
-        data.per_page ? `$per_page=${data.per_page}` : ''
+        data.per_page ? `&per_page=${data.per_page}` : ''
         }`
     }
     const params = {