prayer-timetable-react/src/components/Footer.jsx

Prayer timetable made with React

import React from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'

import moment from 'moment-hijri'

import { Offline, Online } from 'react-detect-offline'
import Refresh from 'react-feather/dist/icons/refresh-cw'
import Download from 'react-feather/dist/icons/download'
import styles from '../styles'

import { wifiOn, wifiOff } from '../styles/img/icons'

const FooterStyle = styles.footer

const updatedDisp = (settings) => {
  let result
  if (!settings.online) result = null
  // if < 1/1/2018 0:00
  else if (settings.updated < 1514764800) {
    result = (
      <div className="right">
        <Refresh size={36} />
        {' - '}
      </div>
    )
  } else {
    result = (
      <div className="right">
        <Refresh size={36} />
        {`${moment.duration(moment().diff(moment(settings.updated * 1000))).humanize()} ago`}
      </div>
    )
  }
  return result
}

// RAMADAN
const ramadanDisp = (day) => {
  const result = day.ramadanCountdown ? <div className="left">{`${day.ramadanCountdown} to Ramadan`}</div> : null
  return result
}

// JUMMUAH
const jummuahDisp = (settings) => {
  const jummuahTime = moment({
    hour: settings.jummuahtime[0],
    minute: settings.jummuahtime[1],
  }).day(5)

  const result = settings.jummuahtime[0] ? <div className="center">{`Jummuah ${jummuahTime.format('H:mm')}`}</div> : 0
  return result
}

// TARAWEEH
const taraweehDisp = (settings) => {
  const taraweehTime = moment({
    hour: settings.taraweehtime[0],
    minute: settings.taraweehtime[1],
  })

  const result =
    moment().format('iM') === '9' ? (
      <div className="left">{`${settings.labels.taraweeh} ${taraweehTime.format('H:mm')}`}</div>
    ) : null

  return result
}

// ONLINE
const onlineDisp = (settings) => {
  const result = settings.online ? (
    <div className="wifi">
      <Offline>{wifiOff}</Offline>
      <Online>{wifiOn}</Online>
    </div>
  ) : null
  return result
}

// REFRESHDIFF
const refreshDiffDisp = (settings, downloaded) => {
  /* eslint-disable babel/no-unused-expressions */
  let diff
  downloaded !== '-' && moment.isMoment(downloaded)
    ? (diff = `${moment.duration(moment().diff(downloaded)).humanize()} ago (${settings.updateInterval})`)
    : (diff = '-')
  const result = settings.online ? (
    <div className="right">
      <Download size={36} />
      {diff}
    </div>
  ) : null

  return result
}

// MAPPING
const mapStateToProps = (state) => ({
  day: state.day,
  settings: state.settings,
  update: state.update,
})

// COMPONENT
const ConnectedFooter = ({ day, settings, update }) => (
  <FooterStyle>
    {onlineDisp(settings)}
    {jummuahDisp(settings)}
    {ramadanDisp(day)}
    {taraweehDisp(settings)}
    {refreshDiffDisp(settings, update.downloaded)}
    {updatedDisp(settings)}
  </FooterStyle>
)

// EXPORT
const Footer = connect(mapStateToProps)(ConnectedFooter)
export default Footer

ConnectedFooter.propTypes = {
  day: PropTypes.object,
  update: PropTypes.object,
  settings: PropTypes.object,
}