Skip to content

Commit

Permalink
Refactor JS (#59)
Browse files Browse the repository at this point in the history
  • Loading branch information
optimistic-updt authored May 7, 2021
1 parent 0bfbeb0 commit 9470e01
Showing 3 changed files with 71 additions and 70 deletions.
81 changes: 41 additions & 40 deletions frontend/javascript/components/calendar-day.js
Original file line number Diff line number Diff line change
@@ -1,65 +1,66 @@
import React from "react"
import ReactDOM from "react-dom"
import { DateTime } from "luxon"
import CalendarEvent from "./calendar-event"

export default class CalendarDay extends React.Component {
_date = () => {
return DateTime.fromISO(this.props.day)
}

_dayInCurrentMonth() {
return this._date().toFormat('y-MM') == DateTime.fromISO(this.props.currentMonth).toFormat('y-MM')
export const CalendarDay = ({ events, day, currentMonth }) => {

function date() {
return DateTime.fromISO(day)
}

_dayHasPast() {
return this._date() < DateTime.local() && !this._dayIsToday();

function dayInCurrentMonth() {
return date().toFormat('y-MM') == DateTime.fromISO(currentMonth).toFormat('y-MM')
}

function dayHasPast() {
return date() < DateTime.local() && !dayIsToday();
}

_dayHasEvents() {
return this._eventsOnDay().length > 0;
function dayHasEvents() {
return eventsOnDay().length > 0;
}

_dayIsToday() {
return this._date().toLocaleString(DateTime.DATE_SHORT) == DateTime.local().toLocaleString(DateTime.DATE_SHORT);
function dayIsToday() {
return date().toLocaleString(DateTime.DATE_SHORT) == DateTime.local().toLocaleString(DateTime.DATE_SHORT);
}

_eventsOnDay = () => {
return this.props.events.filter(event => DateTime.fromISO(event.datetime).toLocaleString(DateTime.DATE_SHORT) == this._date().toLocaleString(DateTime.DATE_SHORT));
function eventsOnDay() {
return events.filter(event => DateTime.fromISO(event.datetime).toLocaleString(DateTime.DATE_SHORT) == date().toLocaleString(DateTime.DATE_SHORT));
}

_classNames() {
var classes = ['calendar-day calendar-day--body']
function classNames() {
const classes = ['calendar-day calendar-day--body']

if ( this._dayHasEvents() ) { classes.push('calendar-day--with-events') }
if ( !this._dayInCurrentMonth() ) { classes.push('calendar-day--not-in-current-month') }
if ( this._dayHasPast() ) { classes.push('calendar-day--past') }
if ( this._dayIsToday() ) { classes.push('calendar-day--today') }
if ( dayHasEvents() ) { classes.push('calendar-day--with-events') }
if ( !dayInCurrentMonth() ) { classes.push('calendar-day--not-in-current-month') }
if ( dayHasPast() ) { classes.push('calendar-day--past') }
if ( dayIsToday() ) { classes.push('calendar-day--today') }

return classes.join(' ');
}

_renderEvents() {
if(!this._dayHasEvents()) { return; }

return (
function renderEvents() {
return dayHasEvents() ? (
<ul>
{ this._eventsOnDay().map((event) => <CalendarEvent key={event.title + event.datetime} event={ event } />) }
{ eventsOnDay().map((event) => <CalendarEvent key={event.title + event.datetime} event={ event } />) }
</ul>
)
) : null
}



render() {
return (
<div className={ this._classNames() }>
<div className="calendar-day__date">
<span className="calendar-day__day_of_week">{ this._date().toFormat('cccc') }&nbsp;</span>
{ this._date().toFormat('d') }
</div>

{ this._renderEvents() }
return (
<div className={ classNames() }>
<div className="calendar-day__date">
<span className="calendar-day__day_of_week">{ date().toFormat('cccc') }&nbsp;</span>
{ date().toFormat('d') }
</div>
);
}

{ renderEvents() }
</div>
);

}


export default CalendarDay
36 changes: 14 additions & 22 deletions frontend/javascript/components/calendar-event.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,17 @@
import React from "react"
import ReactDOM from "react-dom"
import { DateTime } from "luxon"

export default class CalendarEvent extends React.Component {
_formatted_datetime() {
DateTime.fromISO(this.props.event.datetime).toLocaleString(DateTime.TIME_WITH_SHORT_OFFSET)
}
const CalendarEvent = ({event}) => (
<li className="text-xs mb-1 list-disc list-inside">
<a href={ event.external_url } target="_blank">
{ event.name }
<span> - </span>
<time
data-format="%l:%M%P"
data-local="time"
datetime={ event.datetime }
>{ event.datetime }</time>
</a>
</li>
);

render() {
return (
<li className="text-xs mb-1 list-disc list-inside">
<a href={ this.props.event.external_url } target="_blank">
{ this.props.event.name }
<span> - </span>
<time
data-format="%l:%M%P"
data-local="time"
datetime={ this.props.event.datetime }
>{ this.props.event.datetime }</time>
</a>
</li>
);
}
}
export default CalendarEvent
24 changes: 16 additions & 8 deletions frontend/javascript/components/calendar.js
Original file line number Diff line number Diff line change
@@ -2,18 +2,26 @@ import React from "react"
import ReactDOM from "react-dom"
import CalendarDay from "./calendar-day"

class ReactCalendarDays extends React.Component {
render() {
return (
<div className="calendar-days">{this.listCalendarDays()}</div>
);
}

listCalendarDays() {
return this.props.dateRange.map((day) => <CalendarDay key={ day } day={ day } currentMonth={ this.props.currentMonth } events={ this.props.events }/>);
const ReactCalendarDays = ({dateRange, currentMonth, events}) => {

function listCalendarDays() {
return dateRange.map((day) => (
<CalendarDay
key={ day }
day={ day }
currentMonth={ currentMonth }
events={ events } />
)
);
}

return (
<div className="calendar-days">{listCalendarDays()}</div>
);
}


class CalendarDays extends HTMLElement {
connectedCallback() {
const data = JSON.parse(this.querySelector('[type="application/json"]').innerHTML)

0 comments on commit 9470e01

Please sign in to comment.