webOS

webOS: web app 개발일지(5)

savelog_webos 2022. 10. 6. 17:00

지난 번에 이어서 calendar를 마저 보았다.

 

onSelectChange = (data) => {
	this.setMonth(data.data);	// reset dataContext
    this.props.onMonthChange && this.props.onMonthChange();
};

SelectList = (props) => {
	let popup = props.data.map((data) => { // return mapped array
        return (
            <div key={data}>
                <a href="#" onClick={(e) => {
                    this.onSelectChange(e, data); // change dataContext if clicked
                }}>
                    {data}
                </a>
            </div>
        );
  	});
	
    return (
    	<div className="month-popup"> // return popup array
        	{popup}
		</div>
     );
};

onSelectChange(data)에서 setMonth로 dataContext를 갱신하고, SelectList에서는 data로 이루어진 popup array를 생성한다. 이때 각 popup의 element는 클릭 시 onSelectChange에서 dataContext를 갱신한다. 그리고 popup element를 갱신한다.

 

setYear = (year) => {
     let dateContext = Object.assign({}, this.state.dateContext);
     dateContext = moment(dateContext).set('year', year);
     this.setDateContext(dateContext);
};

onYearChange = (e) => {
     this.setYear(e.value);
};

onDayClick = (e, day) => {
     let currentMonth = this.months.indexOf(this.month()) + 1;
     let currentYear = this.year().toString();
     let currentDate = day.toString();
     // console.log("Selected date data :: ", this.state.monthsData[currentYear][currentMonth.toString()][currentDate]);
     // let selectedDayData = this.state.monthsData[currentYear][currentMonth.toString()][currentDate]
     // let dailogSubTitle = selectedDayData ? "Events of the Day" : "Add new event"
     let dailogSubTitle = 'Add new event';
     if (this.state.monthsData[currentYear] && this.state.monthsData[currentYear][currentMonth.toString()] && this.state.monthsData[currentYear][currentMonth.toString()][currentDate]) {
      console.log('Data exists');
      this.setState({
       dailogType: 'list'
      });
      dailogSubTitle = 'Events of the Day';
     }
     this.setState({
      selectedDay: day,
      dailog: true,
      dailogSubTitle: dailogSubTitle
     });
  this.props.onDayClick && this.props.onDayClick(e, day);
 };

 onDailogClose = () => {
  this.setState({
   dailog: false,
   dailogType: 'form'
  });
 };

setYear는 setMonth과 마찬가지로 dataContext를 복사 후 year를 갱신하여 setDataContext로 dataContext를 갱신한다. onYearChange()는 인수로 setYear()를 호출한다.

onDayClick은 현재의 월/연/일을 받은 후 monthsData에 월/연/일이 존재하면 dailogType을 list로 변경한다.

이후 setState로 selectedDay, dailog, dailogSubTitle을 변경한다.

onDailogClose()는 호출 시 dailog, dailogType를 변경한다.

onDayClick으로 날짜가 선택되면 dailog, dailogType 등의 state를 변경하고 dailog가 닫히면 이를 다시 default 값으로 수정하는 것 같다.

 

postObj = (obj) => {
  obj['_kind'] = _kind;
  dbServices.putData(obj, (res) => { // dbServices.js
   if (res.returnValue) {
    this.getDataFromDb();
   }
  });
  this.setState({
   dailog: false
  });
 };

 triggerNotification = (msg) => {
  let self = this;
  this.setState({
   notification: true,
   notificationMsg: msg.message
  }, () => {
   setTimeout(() => {
    self.setState({
     notification: false,
     notificationMsg: ''
    });
   }, 3000);
  });
 };

 deleteEvent = (event, date, month, year) => {
  this.onDailogClose();
  let query = generateQuery.findQuery({
   'year': year,
   'month': month.toString(),
   'date': date
  });
  console.log('Delete Event Query here :: ', query);
  dbServices.findData(query, (res) => {
   console.log('Find data response :: ', res);
   let ev = '';
   for (let i in res.results) {
    console.log(res.results[i]);
    if (res.results[i].event.title === event.title && res.results[i].event.description === event.description) {
     ev = res.results[i]._id;
    }
   }
   console.log(ev);
   dbServices.deleteEvent(ev);
   this.getDataFromDb();
  });
 };

 createNewEvent = () => {
  this.setState({
   dailogType: 'form',
   dailog: true
  });
 };

 

 putData : (obj, cb) => {
  return new LS2Request().send({ // use LS2 API, send a request to an LS2 service method
   service: 'luna://com.webos.service.db', // the name of the LS2 service
   method: 'put',
   parameters: {
    'objects':[
     obj
    ]
   }, // required parameters by the service method
   onSuccess: (res) => {
    console.log('Success response :: ', res);
    cb(res);
   },
   onFailure: (res) => {
    console.log('Failed response :: ', res);
    cb(res);
   }
  });
 }

 

postObj는 dbServices.putData를 사용하는데, putData는 LS2 API의 luna://com.webos.service.db의 put을 활용하여 obj를 db에 집어 넣는다. 성공 시에 getDataFromDb()하여 data를 조회한다. 이후 dailog의 state를 변경한다.

 

triggerNotification은 notification, notificationMsg의 state를 변경하고 3초 후 notification, notificationMsg의 state를 다시 변경한다.

 

deleteEvent()는 onDailogClose로 dailog, dailogType의 state를 변경하고 service/generateQuery의 findQuery로 query에 push한다. 이후 sevice/dbServices.findData로 query를 조회하여 event가 존재하면 dbSevices.deleteEvent()를 호출한 후 gaetDataFromDb state를 변경해준다.

 

 

 deleteEvent: (id) => {
  return new LS2Request().send({
   service: 'luna://com.webos.service.db',
   method: 'del',
   parameters: {
    'ids' : [id]
   },
   onSuccess: (res) => {
    console.log('Success response :: ', res);
   },
   onFailure: (res) => {
    console.log('Failed response :: ', res);
   }
  });
 }
dbServices.deleteEvent는 LS2 API를 활용하여 luna://com.webos.service.db의 del method를 호출한다. 이를 통해 ids에 해당하는 JSON object를 삭제한다. 

 

createNewEvent()는 dailogType, dailog의 state를 변경한다.
 
결국 정리해보면, 

calendar class 내부 functions

  • componentDidMount(): services/dbServices.createKind에서 LS2 putKind 통해 db 생성
  • getDataFromDb():
    • services/generateQuery.findQuery에서 query에 push
    • services/dbServices.findData에서 LS2 find 통해 query에 맞는 array 조회
    • services/generateQuery.filterData에서 filtered data 획득
    • setState()에서 monthsData의 state 변경한다.
  • year() / month() / daysInMonth() / currentDate() / currentDay() / firstDayOfMonth()
    • this.state.dataContext에서 연/월/일 등 획득
  • setDateContext(dataContext): setState에서 dataContext 변경, 변경 후 dataContext로 getDataFromDb()
  • setMonth() / nextMonth() / prevMonth(): dataContext를 setting해서 setDataContext(dataContext)
  • onSelectChange(): setMonth()를 통해 dataContext 갱신
  • SelectList(): popup으로 이루어진 onSelectChange()하는 array element를 return
  • setYear(): dataContext의 year를 주어진 값으로 변경
  • onYearChange(): 호출 시 주어진 값으로 setYear()
  • onDayClick(): 월/연/일을 받아 monthsData와 대조 후 존재하면 dailogType을 변경, selectedDay, dailog, dailogSubTitle을 변경
  • onDailogClose(): dailog, dailogType의 state 변경
  • postObj(): services/dbServices.putData에서 LS2 put을 통해 db에 넣은 후 getDataFromDb()하고 dailog의 state 변경
  • triggerNotification(): notification, notificationMsg의 state 변경, 3초 후 다시 변경
  • deleteEvent(): onDailogClose() 후 generateQuery.findQuery하여 query를 조회 후 dbServices.findData하여 LS2 find로 query 조회, 있을 시 dbServices.deleteEvent로 LS2 API del을 통해 event를 db에서 삭제
  • createNewEvent(): dailogType, dailog의 state 변경

 

이런 식으로 구성되고 기능하는 것 같다.