API & Client: refactor (rename mpwo to fittrackee)

fittrackee_client/src/components/Others/AccessDenied.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+
+export default function AccessDenied () {
+  return (
+    <div>
+      <Helmet>
+        <title>FitTrackee - Access denied</title>
+      </Helmet>
+      <h1 className="page-title">Access denied</h1>
+      <p className="App-center">
+        {'You don\'t have permissions to access this page.'}
+      </p>
+    </div>
+  )
+}

fittrackee_client/src/components/Others/Calendar.jsx

@@ -0,0 +1,180 @@
+// eslint-disable-next-line max-len
+// source: https://blog.flowandform.agency/create-a-custom-calendar-in-react-3df1bfd0b728
+import dateFns from 'date-fns'
+import React from 'react'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import { getMonthActivities } from '../../actions/activities'
+
+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 {
+  constructor(props, context) {
+    super(props, context)
+    const calendarDate = new Date()
+    this.state = {
+      currentMonth: calendarDate,
+      startDate: getStartAndEndMonth(calendarDate).start,
+      endDate: getStartAndEndMonth(calendarDate).end,
+    }
+  }
+
+  componentDidMount() {
+    this.props.loadMonthActivities(this.state.startDate, this.state.endDate)
+  }
+
+  renderHeader() {
+    const dateFormat = 'MMM YYYY'
+    return (
+      <div className="header row flex-middle">
+        <div className="col col-start" onClick={() => this.handlePrevMonth()}>
+          <i
+            className="fa fa-chevron-left"
+            aria-hidden="true"
+          />
+        </div>
+        <div className="col col-center">
+          <span>
+            {dateFns.format(this.state.currentMonth, dateFormat)}
+          </span>
+        </div>
+        <div className="col col-end" onClick={() => this.handleNextMonth()}>
+            <i
+              className="fa fa-chevron-right"
+              aria-hidden="true"
+            />
+        </div>
+      </div>
+    )
+  }
+
+  renderDays() {
+    const dateFormat = 'ddd'
+    const days = []
+    const { startDate } = this.state
+
+    for (let i = 0; i < 7; i++) {
+      days.push(
+        <div className="col col-center" key={i}>
+          {dateFns.format(dateFns.addDays(startDate, i), dateFormat)}
+        </div>
+      )
+    }
+    return <div className="days row">{days}</div>
+  }
+
+  filterActivities(day) {
+    const { activities } = this.props
+    if (activities) {
+      return activities
+        .filter(act => dateFns.isSameDay(act.activity_date, day))
+    }
+    return []
+  }
+
+  renderCells() {
+    const { currentMonth, startDate, endDate } = this.state
+    const { sports } = this.props
+
+    const dateFormat = 'D'
+    const rows = []
+
+    let days = []
+    let day = startDate
+    let formattedDate = ''
+
+    while (day <= endDate) {
+      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 img-${isDisabled}`}
+            key={day}
+          >
+            <span className="number">{formattedDate}</span>
+            {dayActivities.map(act => (
+              <Link key={act.id} to={`/activities/${act.id}`}>
+                <img
+                  className={`activity-sport ${isDisabled}`}
+                  src={sports
+                    .filter(s => s.id === act.sport_id)
+                    .map(s => s.img)}
+                  alt="activity sport logo"
+                />
+              </Link>
+            ))}
+          </div>
+        )
+        day = dateFns.addDays(day, 1)
+      }
+      rows.push(
+        <div className="row" key={day}>
+          {days}
+        </div>
+      )
+      days = []
+    }
+    return <div className="body">{rows}</div>
+  }
+
+  updateStateDate (calendarDate) {
+    const { start, end } = getStartAndEndMonth(calendarDate)
+    this.setState({
+      currentMonth: calendarDate,
+      startDate: start,
+      endDate: end,
+    })
+    this.props.loadMonthActivities(start, end)
+  }
+
+  handleNextMonth () {
+    const calendarDate = dateFns.addMonths(this.state.currentMonth, 1)
+    this.updateStateDate(calendarDate)
+  }
+
+  handlePrevMonth () {
+    const calendarDate = dateFns.subMonths(this.state.currentMonth, 1)
+    this.updateStateDate(calendarDate)
+  }
+
+  render() {
+    return (
+      <div className="card activity-card">
+        <div className="calendar">
+          {this.renderHeader()}
+          {this.renderDays()}
+          {this.renderCells()}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default connect(
+  state => ({
+    activities: state.calendarActivities.data,
+    sports: state.sports.data,
+  }),
+  dispatch => ({
+    loadMonthActivities: (start, end) => {
+      const dateFormat = 'YYYY-MM-DD'
+      dispatch(getMonthActivities(
+        dateFns.format(start, dateFormat),
+        dateFns.format(end, dateFormat),
+      ))
+    },
+  })
+)(Calendar)

fittrackee_client/src/components/Others/CustomModal.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+export default function CustomModal(props) {
+  return (
+    <div className="custom-modal-backdrop">
+      <div className="custom-modal">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">{props.title}</h5>
+            <button
+              type="button"
+              className="close"
+              aria-label="Close"
+              onClick={() => props.close}
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div className="modal-body">
+            <p>{props.text}</p>
+          </div>
+          <div className="modal-footer">
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={() => props.confirm()}
+            >
+              Yes
+            </button>
+            <button
+              type="button"
+              className="btn btn-secondary"
+              onClick={() => props.close()}
+            >
+              No
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

fittrackee_client/src/components/Others/NotFound.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+
+export default function NotFound () {
+  return (
+    <div>
+      <Helmet>
+        <title>fittrackee - 404</title>
+      </Helmet>
+        <h1 className="page-title">Page not found</h1>
+    </div>
+  )
+}