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,26 +1,34 @@
-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
+	// The arguments accepted by the component
-  Args: {
+	Args: {
-    isInTimeline: boolean;
+		isInTimeline: boolean;
-  };
+		note: {
-  // Any blocks yielded by the component
+			content: string;
-  Blocks: {
+			server: string;
-    default: [];
+			username: string;
-  };
+			displayname: string;
-  // The element to which `...attributes` is applied in the component template
+			createdAt: number;
-  Element: null;
+			editedAt?: number;
+		};
+	};
+	// Any blocks yielded by the component
+	Blocks: {
+		default: [];
+	};
+	// The element to which `...attributes` is applied in the component template
+	Element: null;
 }
 
 export default class Note extends Component<NoteSignature> {
-  @action
+	@action
-  openFullView() {
+	openFullView() {
-    if (this.args.isInTimeline) {
+		if (this.args.isInTimeline) {
-      alert("Would have opened note's own view");
+			alert("Would have opened note's own view");
-    } else {
+		} else {
-      console.log("Alread in note specific view, can't open it again");
+			console.log("Alread in note specific view, can't open it again");
-    }
+		}
-  }
+	}
 }

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,15 +1,11 @@
-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;
+	location = config.locationType;
-  rootURL = config.rootURL;
+	rootURL = config.rootURL;
 }
 
 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() {
+	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,16 +1,19 @@
-'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, {
+	const app = new EmberApp(defaults, {
-    'ember-cli-babel': { enableTypeScriptTransform: true },
+		"ember-cli-babel": { enableTypeScriptTransform: true },
-    minifyCSS: {
+		minifyCSS: {
-      options: { processImport: true },
+			options: { processImport: true },
-    },
+		},
 
-    // Add options here
+		// Add options here
-  });
+		autoImport: {
+			watchDependencies: ["ember-moment"],
+		},
+	});
 
-  return app.toTree();
+	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"
 	}
 }