glimmer-ify date nav

emberobserver · Mar 7, 2020 · 2c3cc0f · 2c3cc0f
1 parent 58c6aac
commit 2c3cc0f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 25 deletions.
diff --git a/app/components/date-nav.js b/app/components/date-nav.js
@@ -1,34 +1,24 @@
-import classic from 'ember-classic-decorator';
-import Component from '@ember/component';
-import { computed } from '@ember/object';
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import moment from 'moment';
 
-@classic
 export default class DateNavComponent extends Component {
-  tagName = 'section';
+  @tracked date;
 
-  classNames = ['date-nav'];
-
-  @computed('date')
   get formattedDisplayDate() {
-    return moment(this.get('date')).utc().format('YYYY-MM-DD');
+    return moment(this.args.date).utc().format('YYYY-MM-DD');
   }
 
-  @computed('date')
   get formattedPreviousDate() {
-    let date = this.get('date');
-    return moment(date).subtract(1, 'day').format('YYYY-MM-DD');
+    return moment(this.args.date).subtract(1, 'day').format('YYYY-MM-DD');
   }
 
-  @computed('date')
   get formattedFollowingDate() {
-    let date = this.get('date');
-    return moment(date).add(1, 'day').format('YYYY-MM-DD');
+    return moment(this.args.date).add(1, 'day').format('YYYY-MM-DD');
   }
 
-  @computed('date')
   get showFollowingDayLink() {
-    let dateFromParam = moment(this.get('date'));
+    let dateFromParam = moment(this.args.date);
     let currentDate = moment();
     return !dateFromParam.isSame(currentDate, 'day');
   }

diff --git a/app/templates/components/date-nav.hbs b/app/templates/components/date-nav.hbs
@@ -1,8 +1,10 @@
-{{yield
-  (hash
-    formattedPreviousDate=this.formattedPreviousDate
-    formattedDisplayDate=this.formattedDisplayDate
-    formattedFollowingDate=this.formattedFollowingDate
-    showFollowingDayLink=this.showFollowingDayLink
-  )
-}}
+<section class="date-nav">
+  {{yield
+    (hash
+      formattedPreviousDate=this.formattedPreviousDate
+      formattedDisplayDate=this.formattedDisplayDate
+      formattedFollowingDate=this.formattedFollowingDate
+      showFollowingDayLink=this.showFollowingDayLink
+    )
+  }}
+</section>