sync

frontend-reactive/app/components/note.hbs

@@ -1,14 +1,14 @@
 <div class="note">
   {{!-- TODO: figure out how to make the entire note clickable for opening with something like {{on "click" (fn this.openFullView)}} --}}
   <Note::UserHeader
-    @displayname="{{@displayname}}"
+    @displayname="{{@note.displayname}}"
-    @handle="@{{@username}}@{{@serverdomain}}"
+    @handle="@{{@note.username}}@{{@note.server}}"
   />
-  <Note::Content @content="{{@content}}" />
+  <Note::Content @content="{{@note.content}}" />
   <div class="note-timestamps-container">
-    <p class="note-timestamp" id="note-edited-timestamp">Edited: At some time in
+    {{#if @note.editedAt}}
-      the future</p>
+    <p class="note-timestamp" id="note-edited-timestamp">Edited: {{moment-format @note.editedAt}}</p>
-    <p class="note-timestamp" id="note-created-timestamp">Posted: Before the Big
+    {{/if}}
-      Bang</p>
+    <p class="note-timestamp" id="note-created-timestamp">Posted: {{moment-format @note.createdAt ""}}</p>
   </div>
 </div>

frontend-reactive/app/components/note.ts

@@ -1,10 +1,18 @@
-import { action } from '@ember/object';
+import { action } from "@ember/object";
-import Component from '@glimmer/component';
+import Component from "@glimmer/component";
 
 export interface NoteSignature {
 	// The arguments accepted by the component
 	Args: {
 		isInTimeline: boolean;
+		note: {
+			content: string;
+			server: string;
+			username: string;
+			displayname: string;
+			createdAt: number;
+			editedAt?: number;
+		};
 	};
 	// Any blocks yielded by the component
 	Blocks: {

frontend-reactive/app/components/timeline.hbs

@@ -1,5 +1,3 @@
-{{#each this.notes as |note|}}
+{{#each this.model.notes as |note|}}
-  <Note />
+  <Note @isInTimeline="true" @content="{{note.content}}" @username="{{note.username}}" @serverdomain="{{note.server}}"/>
 {{/each}}
-
-<InfinityLoader />

frontend-reactive/app/router.ts

@@ -1,5 +1,5 @@
-import EmberRouter from '@ember/routing/router';
+import EmberRouter from "@ember/routing/router";
-import config from 'frontend-reactive/config/environment';
+import config from "frontend-reactive/config/environment";
 
 export default class Router extends EmberRouter {
 	location = config.locationType;
@@ -7,9 +7,5 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function () {
-  this.route('about');
+	this.route("about");
-
-  this.route('notes', function () {
-    this.route(':note_id');
-  });
 });

frontend-reactive/app/routes/application.ts

@@ -1,7 +1,19 @@
-import Route from '@ember/routing/route';
+import Route from "@ember/routing/route";
 
 export default class ApplicationRoute extends Route {
 	model() {
-    console.log('root route loaded');
+		console.log("root route loaded");
+		return {
+			notes: [
+				{
+					displayname: "alice",
+					username: "bob",
+					server: "example.com",
+					content: "lorem ipsum",
+					createdAt: Date.now() - 360000,
+					editedAt: Date.now() - 60000,
+				},
+			],
+		};
 	}
 }

frontend-reactive/app/routes/notes/:note-id.ts

@@ -1,3 +0,0 @@
-import Route from '@ember/routing/route';
-
-export default class Notes:noteIdRoute extends Route {}

frontend-reactive/app/templates/application.hbs

@@ -1,14 +1,11 @@
 {{page-title "FrontendReactive"}}
 
 {{outlet}}
+{{#each @model.notes as |note|}}
 <Note
-  @displayname="bob"
+    @note={{note}}
-  @username="alice"
-  @serverdomain="example.com"
   @isInTimeline="false"
-  @content="Scuttle crack Jennys tea cup American Main lass Jolly Roger prow reef sails tackle ye Chain Shot. Cackle fruit topgallant draft bilge gangplank Jolly Roger ahoy holystone black jack aye. Mizzenmast stern warp Buccaneer Spanish Main Letter of Marque pink aft skysail grog blossom.
-
-Crow's nest scuppers topgallant fore dance the hempen jig loot tack fluke squiffy flogging. Red ensign Letter of Marque poop deck scallywag chandler rutters sheet avast sloop to go on account. Spike loaded to the gunwalls prow smartly gabion heave down scallywag interloper chantey case shot.
-
-Quarterdeck cackle fruit ballast lookout bounty jack trysail crow's nest hulk spyglass. Gabion gangplank long boat coffer ahoy wench parley American Main jack come about. Trysail code of conduct cable provost loaded to the gunwalls chase landlubber or just lubber gibbet gunwalls hempen halter."
 />
+{{/each}}
+
+<!--<Timeline />-->

frontend-reactive/ember-cli-build.js

@@ -1,15 +1,18 @@
-'use strict';
+"use strict";
 
-const EmberApp = require('ember-cli/lib/broccoli/ember-app');
+const EmberApp = require("ember-cli/lib/broccoli/ember-app");
 
 module.exports = function (defaults) {
 	const app = new EmberApp(defaults, {
-    'ember-cli-babel': { enableTypeScriptTransform: true },
+		"ember-cli-babel": { enableTypeScriptTransform: true },
 		minifyCSS: {
 			options: { processImport: true },
 		},
 
 		// Add options here
+		autoImport: {
+			watchDependencies: ["ember-moment"],
+		},
 	});
 
 	return app.toTree();

frontend-reactive/package-lock.json

@@ -8,6 +8,9 @@
 			"name": "frontend-reactive",
 			"version": "0.0.0",
 			"license": "EUPL-1.2",
+			"dependencies": {
+				"moment": "^2.30.1"
+			},
 			"devDependencies": {
 				"@babel/core": "^7.25.2",
 				"@ember/optional-features": "^2.1.0",
@@ -65,6 +68,7 @@
 				"ember-infinity": "^3.0.0",
 				"ember-load-initializers": "^2.1.2",
 				"ember-modifier": "^4.2.0",
+				"ember-moment": "^10.0.1",
 				"ember-page-title": "^8.2.3",
 				"ember-qunit": "^8.1.0",
 				"ember-resolver": "^11.0.1",
@@ -17313,6 +17317,27 @@
 				"rsvp": "^4.8.4"
 			}
 		},
+		"node_modules/ember-moment": {
+			"version": "10.0.1",
+			"resolved": "https://registry.npmjs.org/ember-moment/-/ember-moment-10.0.1.tgz",
+			"integrity": "sha512-Es5PaFBRF6djyb0zwmcCMqWjLhyKrCWs5Ug6iaZoKxDgEc8incVCTv3ED2Z4oCcNDY2gKTqXY5VTsP1J9hUPcg==",
+			"dev": true,
+			"dependencies": {
+				"@embroider/addon-shim": "^1.8.9"
+			},
+			"peerDependencies": {
+				"moment": "^2",
+				"moment-timezone": "^0.5.34"
+			},
+			"peerDependenciesMeta": {
+				"moment": {
+					"optional": true
+				},
+				"moment-timezone": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/ember-page-title": {
 			"version": "8.2.3",
 			"resolved": "https://registry.npmjs.org/ember-page-title/-/ember-page-title-8.2.3.tgz",
@@ -23810,6 +23835,14 @@
 				"node": ">0.9"
 			}
 		},
+		"node_modules/moment": {
+			"version": "2.30.1",
+			"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+			"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/morgan": {
 			"version": "1.10.0",
 			"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",

frontend-reactive/package.json

@@ -82,6 +82,7 @@
 		"ember-infinity": "^3.0.0",
 		"ember-load-initializers": "^2.1.2",
 		"ember-modifier": "^4.2.0",
+		"ember-moment": "^10.0.1",
 		"ember-page-title": "^8.2.3",
 		"ember-qunit": "^8.1.0",
 		"ember-resolver": "^11.0.1",
@@ -110,5 +111,8 @@
 	},
 	"ember": {
 		"edition": "octane"
+	},
+	"dependencies": {
+		"moment": "^2.30.1"
 	}
 }