import React, {Component} from 'react';
import moment from 'moment';
import WeekCalendar from './weekCalendar';
import './App.css';
import Modal from "./modal";
import Acordion from './Acordion';
import Header from './Header';
import Week from './Week';
class App extends Component {
constructor(props) {
super(props)
this.state = {
data: moment(),
weekViewMode: false,
isModalOpen: false,
notes: []
}
}
nextMonth = () => {
this.setState({
date: this.state.data.add(1, 'months')
})
}
prevMonth = () => {
this.setState({
date: this.state.data.subtract(1, 'months')
})
}
weekMode = () => {
this.setState({
weekViewMode: true
})
}
monthMode = () => {
this.setState({
weekViewMode: false
})
}
openModal = () => {
this.setState({
isModalOpen: true
})
}
closeModal = () => {
this.setState({
isModalOpen: false
})
}
res = ''
data = {}
nameHandleChange = (e) => {
this.data.name = e.target.value
}
bodyHandleChange = (e) => {
this.data.body = e.target.value
}
timeHandleChange = (e) => {
this.data.time = e.target.value
}
getDate = (date) => {
this.openModal()
this.res = moment(date)
}
makeNote = () => {
const notes = [...this.state.notes];;
const sameEventDate = notes.find(n => n.date.isSame(this.res, 'data'));
if (sameEventDate){
sameEventDate.events.push(this.data);
} else{
const newEventDate={
date:this.res,
events:[this.data]
};
notes.push(newEventDate);
}
this.setState({ notes: notes });
console.log(this.state)
this.closeModal()
}
isToday = (day)=>{
return moment().isSame(day,'day');
}
isWeekend =(day) => {
return [6,0].includes(moment(day).day())
}
renderCalendarItem = (day, dayIndex) => {
const eventsForDay = this.state.notes.find(note =>
moment(note.date).isSame((day), 'day'));
const haveEventForDay = eventsForDay ? !!eventsForDay.events.length : false;
return (
<td
className={`${haveEventForDay ? 'events' : ''} ${this.isWeekend(day) ? 'weekend' : 'workday'}
${this.isToday(day) ? 'today': ''}`}
onClick={() => this.getDate(day)}
key={dayIndex}>{day.date()}
</td>
);
}
render() {
const startWeek = this.state.data.startOf('month').week();
const endWeek = this.state.data.endOf('month').week();
let calendar = []
for (let week = startWeek; week < endWeek; week++) {
calendar.push({
week: week,
days: Array(7).fill(0).map((n, i) => moment().week(week).startOf('week').clone().add(n + i, 'day'))
})
}
return (
<div className="container">
{this.state.isModalOpen ?
<Modal
handleName={this.nameHandleChange}
handleBody={this.bodyHandleChange}
handleTime={this.timeHandleChange}
makeNote={this.makeNote}
res={this.res}
data={this.data}
/> : null}
<Header
isWeekViewMode={this.state.weekViewMode}
data={ this.state.data}
nextMonth={this.nextMonth}
prevMonth={this.prevMonth}
/>
<Acordion
weekMode={this.weekMode}
monthMode={this.monthMode}
/>
<Week/>
<div className="table">
<table >
{this.state.weekViewMode ? <WeekCalendar/> :
calendar.map((week, weekIndex) => (
<tr key={weekIndex}>
{week.days.map((day, dayIndex) =>
this.renderCalendarItem(day, dayIndex))}
</tr>))}
</table>
</div>
<div >
{this.state.notes.map((note,noteIndex)=>(<div className="notesHead" key={noteIndex}>{moment(note.date).format('ddd DD MMM')}
<div className="notes">
{note.events.map((event,noteIndex)=>(<label className="row" key={noteIndex}>{event.name}</label>))}
{note.events.map((event,noteIndex)=>(<label className="row" key={noteIndex}>{event.time}</label>))}
{note.events.map((event,noteIndex)=>(<label key={noteIndex}>{event.body}</label>))}
</div>
</div>))}
</div>
</div>
);
}
}
export default App;