display a popup to show more activities - fix #46

fittrackee_client/src/components/Dashboard/CalendarActivities.jsx

@@ -1,47 +1,57 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
 
-import { recordsLabels } from '../../utils/activities'
+import CalendarActivity from './CalendarActivity'
+
+export default class CalendarActivities extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      isHidden: true,
+    }
+  }
+
+  handleDisplayMore() {
+    this.setState({
+      isHidden: !this.state.isHidden,
+    })
+  }
 
-export default class CalendarActivities extends React.PureComponent {
   render() {
     const { dayActivities, isDisabled, sports } = this.props
+    const { isHidden } = this.state
     return (
       <div>
         {dayActivities.map(act => (
-          <Link
-            className="calendar-activity"
+          <CalendarActivity
             key={act.id}
-            to={`/activities/${act.id}`}
-          >
-            <>
-              <img
-                alt="activity sport logo"
-                className={`activity-sport ${isDisabled}`}
-                src={sports.filter(s => s.id === act.sport_id).map(s => s.img)}
-                title={act.title}
-              />
-              {act.records.length > 0 && (
-                <sup>
-                  <i
-                    className="fa fa-trophy custom-fa-small"
-                    aria-hidden="true"
-                    title={act.records.map(
-                      rec =>
-                        ` ${
-                          recordsLabels.filter(
-                            r => r.record_type === rec.record_type
-                          )[0].label
-                        }`
-                    )}
-                  />
-                </sup>
-              )}
-            </>
-          </Link>
+            activity={act}
+            isDisabled={isDisabled}
+            isMore=""
+            sportImg={sports.filter(s => s.id === act.sport_id).map(s => s.img)}
+          />
         ))}
         {dayActivities.length > 2 && (
-          <i className="fa fa-plus-circle calendar-more" aria-hidden="true" />
+          <i
+            className="fa fa-plus calendar-more"
+            aria-hidden="true"
+            onClick={() => this.handleDisplayMore()}
+            title="show more activities"
+          />
+        )}
+        {!isHidden && (
+          <div className="calendar-display-more">
+            {dayActivities.map(act => (
+              <CalendarActivity
+                key={act.id}
+                activity={act}
+                isDisabled={isDisabled}
+                isMore="-more"
+                sportImg={sports
+                  .filter(s => s.id === act.sport_id)
+                  .map(s => s.img)}
+              />
+            ))}
+          </div>
         )}
       </div>
     )

fittrackee_client/src/components/Dashboard/CalendarActivity.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+import { recordsLabels } from '../../utils/activities'
+
+export default function CalendarActivity(props) {
+  const { activity, isDisabled, isMore, sportImg } = props
+  return (
+    <Link
+      className={`calendar-activity${isMore}`}
+      to={`/activities/${activity.id}`}
+    >
+      <>
+        <img
+          alt="activity sport logo"
+          className={`activity-sport ${isDisabled}`}
+          src={sportImg}
+          title={activity.title}
+        />
+        {activity.records.length > 0 && (
+          <sup>
+            <i
+              className="fa fa-trophy custom-fa-small"
+              aria-hidden="true"
+              title={activity.records.map(
+                rec =>
+                  ` ${
+                    recordsLabels.filter(
+                      r => r.record_type === rec.record_type
+                    )[0].label
+                  }`
+              )}
+            />
+          </sup>
+        )}
+      </>
+    </Link>
+  )
+}