DEV: migrate post event to glimmer #615

jjaffeux · 2024-10-13T14:28:18Z

This commit is making two major changes:

Move all the post event widgets code to glimmer
Implement tracked models to ensure reactivity, many paths didn't have real reactivity atm and were mostly working by luck or the fact that widgets re-render a lot

jjaffeux · 2024-10-17T08:23:59Z

app/controllers/discourse_post_event/invitees_controller.rb

@@ -11,7 +11,7 @@ def index
 event_invitees = event.invitees
 event_invitees = event_invitees.with_status(params[:type].to_sym) if params[:type]

- possible_invitees = []
+ suggested_users = []


This is recent code sam added, I just changed the name as we actually return users and not invitees

jjaffeux · 2024-10-17T08:24:16Z

app/serializers/discourse_post_event/event_serializer.rb

- not_going: not_going,
- invited: going + interested + not_going + unanswered,
- }
+ EventStatsSerializer.new(object, root: false).as_json


I now use this serializer at two places so I extracted it

jjaffeux · 2024-10-17T08:24:30Z

app/serializers/discourse_post_event/event_stats_serializer.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true


The extracted serialize; no new code

jjaffeux · 2024-10-17T08:25:00Z

app/serializers/discourse_post_event/invitee_list_serializer.rb

@@ -12,21 +12,21 @@ def invitees

 def meta
 {
- possible_invitees:
+ suggested_users:


still name change of recent sam change

jjaffeux · 2024-10-17T08:25:25Z

app/serializers/discourse_post_event/invitee_serializer.rb

@@ -15,5 +15,14 @@ def include_id?
 def user
 BasicUserSerializer.new(object.user, embed: :objects, root: false)
 end
+
+ def meta


Im returning these info in meta so I can properly update the model without any other remote calls when changing attendance

jjaffeux · 2024-10-17T08:25:37Z

assets/javascripts/discourse/components/discourse-post-event/creator.gjs

@@ -0,0 +1,29 @@
+import Component from "@glimmer/component";


1:1 migration from widget

jjaffeux · 2024-10-17T08:25:57Z

assets/javascripts/discourse/components/discourse-post-event/dates.gjs

@@ -0,0 +1,84 @@
+import Component from "@glimmer/component";


This one is a little bit tricky as most of it was computed in the initializer before

There are two cases:

local dates is enabled

local dates is disabled

jjaffeux · 2024-10-17T08:26:44Z

assets/javascripts/discourse/components/discourse-post-event/index.gjs

@@ -0,0 +1,198 @@
+import Component from "@glimmer/component";


1:1 migration, most notable change is that message bus is not setup in this component instead of the initializer

jjaffeux · 2024-10-17T08:26:58Z

assets/javascripts/discourse/components/discourse-post-event/index.gjs

+ return this.currentUser && this.args.event.can_act_on_discourse_post_event;
+ }
+
+ get containerHeight() {


This part was also done in the initializer before

jjaffeux · 2024-10-17T08:27:06Z

assets/javascripts/discourse/components/discourse-post-event/invitee.gjs

@@ -0,0 +1,65 @@
+import Component from "@glimmer/component";


1:1 migration from widget

jjaffeux · 2024-10-17T08:27:15Z

assets/javascripts/discourse/components/discourse-post-event/invitees.gjs

@@ -0,0 +1,70 @@
+import Component from "@glimmer/component";


1/1 migration from widget

jjaffeux · 2024-10-17T08:27:34Z

assets/javascripts/discourse/components/discourse-post-event/more-menu.gjs

@@ -0,0 +1,367 @@
+import Component from "@glimmer/component";


This was using the widget dropdown and now is using DMenu

jjaffeux · 2024-10-17T08:27:59Z

assets/javascripts/discourse/components/discourse-post-event/status.gjs

@@ -0,0 +1,110 @@
+import Component from "@glimmer/component";


1:1 migration from widgets with PluginOutlets to support customizations we have

jjaffeux · 2024-10-17T08:28:18Z

assets/javascripts/discourse/components/discourse-post-event/url.gjs

@@ -0,0 +1,25 @@
+import Component from "@glimmer/component";


1:1 migration from widget

jjaffeux · 2024-10-17T08:29:23Z

assets/javascripts/discourse/components/modal/post-event-builder.hbs

@@ -2,15 +2,15 @@
 @title={{i18n
 (concat
 "discourse_calendar.discourse_post_event.builder_modal."
- (if @model.event.isNew "create_event_title" "update_event_title")
+ (if @model.event.id "update_event_title" "create_event_title")


I removed isNew, technically it's persisted once we have an id

jjaffeux · 2024-10-17T08:29:34Z

assets/javascripts/discourse/components/modal/post-event-builder.hbs

 )
 }}
 class="post-event-builder-modal"
 @closeModal={{@closeModal}}
 @flash={{this.flash}}
 >
 <:body>
- <ConditionalLoadingSection @isLoading={{@model.event.isSaving}}>
+ <ConditionalLoadingSection @isLoading={{this.isSaving}}>


I moved isSaving out of the model

jjaffeux · 2024-10-17T08:29:50Z

assets/javascripts/discourse/components/modal/post-event-builder.hbs

- @action={{this.createEvent}}
- />
- {{else}}
+ {{#if @model.event.id}}


I just inverted the logic here

jjaffeux · 2024-10-17T08:30:48Z

assets/javascripts/discourse/components/modal/post-event-invitees/index.gjs

@@ -12,29 +12,29 @@ import concatClass from "discourse/helpers/concat-class";
 import i18n from "discourse-common/helpers/i18n";


I created a new "Invitees" model which can also old the suggested users. Not sure yet about this design but this is ok for now

jjaffeux · 2024-10-17T08:31:12Z

assets/javascripts/discourse/components/modal/post-event-invitees/user.gjs

@@ -0,0 +1,30 @@
+import Component from "@glimmer/component";


This is replacing the renderInvitee helper. We are actually rendering a User here.

jjaffeux · 2024-10-17T08:31:33Z

assets/javascripts/discourse/components/upcoming-events-calendar.js

@@ -75,12 +75,10 @@ export default Component.extend({



Mostly casing changes

jjaffeux · 2024-10-17T08:31:55Z

assets/javascripts/discourse/initializers/add-event-ui-builder.js

 starts_at: moment(),
 timezone: moment.tz.guess(),
 });

 modal.show(PostEventBuilder, {
- model: {
- event: eventModel,


these functions are mostly not needed anymore

jjaffeux · 2024-10-17T08:32:02Z

assets/javascripts/discourse/initializers/add-event-ui-builder.js

 status: "public",
- custom_fields: EmberObject.create({}),


This is now a default, could probably use something else than EmberObject but didn't want to refactor everything

jjaffeux · 2024-10-17T08:32:45Z

assets/javascripts/discourse/initializers/discourse-post-event-decorator.js

@@ -245,34 +138,6 @@ function initializeDiscoursePostEventDecorator(api) {
 "notification.discourse_post_event.notifications.ongoing_event_reminder",
 "calendar-day"
 );
-


move into the component

jjaffeux · 2024-10-17T08:32:57Z

assets/javascripts/discourse/initializers/discourse-post-event-decorator.js

- if (eventModel && eventContainer) {
- eventContainer.innerHTML = "";
-
- const datesHeight = 50;


moved into the component

jjaffeux · 2024-10-17T08:33:16Z

assets/javascripts/discourse/initializers/discourse-post-event-decorator.js

- eventContainer.style.height = `${widgetHeight}px`;
-
- const glueContainer = document.createElement("div");
- glueContainer.innerHTML = '<div class="spinner medium"></div>';


I haven't reimplemented the spinner logic yet, I should maybe do it

jjaffeux · 2024-10-17T08:33:33Z

assets/javascripts/discourse/models/discourse-post-event-event.js

- },
- },
-};
+import { tracked } from "@glimmer/tracking";


tracked properties for events

jjaffeux · 2024-10-17T08:33:40Z

assets/javascripts/discourse/models/discourse-post-event-event-stats.js

@@ -0,0 +1,19 @@
+import { tracked } from "@glimmer/tracking";


A tracked stats model

jjaffeux · 2024-10-17T08:33:54Z

assets/javascripts/discourse/models/discourse-post-event-invitee.js

- this.__type = "discourse-post-event-invitee";
- },
-});
+import { tracked } from "@glimmer/tracking";


tracked invitee model

jjaffeux · 2024-10-17T08:34:09Z

assets/javascripts/discourse/models/discourse-post-event-invitees.js

@@ -0,0 +1,52 @@
+import { TrackedArray } from "@ember-compat/tracked-built-ins";


the invitees model; also holding suggested users

jjaffeux · 2024-10-17T08:34:24Z

assets/javascripts/discourse/routes/discourse-post-event-upcoming-events-index.js

@@ -1,18 +1,23 @@
-import { on } from "@ember/object/evented";
-import Route from "@ember/routing/route";
+import { action } from "@ember/object";


modernizing the route

jjaffeux · 2024-10-17T08:34:57Z

assets/javascripts/discourse/services/discourse-post-event-api.js

@@ -0,0 +1,126 @@
+import Service from "@ember/service";


I tried to have all the reactivity done in this file, so it's easier to know what's going on after a remote call

jjaffeux · 2024-10-17T08:35:25Z

config/routes.rb

+ put "/discourse-post-event/events/:event_id/invitees/:invitee_id" => "invitees#update"
+ post "/discourse-post-event/events/:event_id/invitees" => "invitees#create"


I probably should have avoided doing it without refactoring all of them, but I did it... No excuse.

CvX · 2024-10-17T12:05:44Z

assets/javascripts/discourse/components/discourse-post-event/creator.gjs

+ <template>
+ <span class="event-creator">
+ <a class="topic-invitee-avatar" data-user-card={{@user.username}}>
+ {{this.avatarImage}}


I'd recommend using the avatar helper:

Suggested change

{{this.avatarImage}}

{{avatar this.user imageSize="tiny"}}

assets/javascripts/discourse/components/modal/post-event-invitees/user.gjs

assets/javascripts/discourse/components/discourse-post-event/index.gjs

assets/javascripts/discourse/components/discourse-post-event/invitee.gjs

assets/javascripts/discourse/components/discourse-post-event/url.gjs

CvX · 2024-10-17T13:46:12Z

assets/javascripts/discourse/components/discourse-post-event/more-menu.gjs

+ }
+
+ @action
+ async inviteUserOrGroup(event) {


I think all these 7 methods don't need to have an event arg and could use this.args.event directly

assets/javascripts/discourse/components/discourse-post-event/more-menu.gjs

CvX · 2024-10-17T13:49:45Z

assets/javascripts/discourse/components/discourse-post-event/more-menu.gjs

+import { cook } from "discourse/lib/text";
+import i18n from "discourse-common/helpers/i18n";
+import { getAbsoluteURL } from "discourse-common/lib/get-url";
+import I18n from "I18n";


the i18n helper should be enough here

assets/javascripts/discourse/components/discourse-post-event/status.gjs

assets/javascripts/discourse/components/discourse-post-event/invitee.gjs

CvX

Great stuff! 🚀

assets/javascripts/discourse/components/discourse-post-event/index.gjs

…ndex.gjs Co-authored-by: Jarek Radosz <[email protected]>

DEV: moves post event from widgets to glimmer

d1e7930

jjaffeux force-pushed the migrate-post-event-to-glimmer branch from 0299275 to d1e7930 Compare October 15, 2024 10:47

jjaffeux added 8 commits October 15, 2024 19:52

Merge branch 'main' into migrate-post-event-to-glimmer

1c4a685

suggested users

8eba159

linting

0b1721f

wip

1b5b990

Merge branch 'main' into migrate-post-event-to-glimmer

e1edf10

fixing frontend tests

e19d138

fix ruby specs

4642424

fix system specs

90e82f7

jjaffeux changed the title ~~wip: migrate post event to glimmer~~ DEV: migrate post event to glimmer Oct 17, 2024

jjaffeux marked this pull request as ready for review October 17, 2024 07:51

jjaffeux added 2 commits October 17, 2024 17:18

adds plugin outlets for customization

ad0c128

refine outlets

2aab0af

jjaffeux commented Oct 17, 2024

View reviewed changes

jjaffeux requested review from CvX and renato October 17, 2024 10:42

CvX reviewed Oct 17, 2024

View reviewed changes

renato reviewed Oct 17, 2024

View reviewed changes

assets/javascripts/discourse/components/discourse-post-event/invitee.gjs Outdated Show resolved Hide resolved

renato reviewed Oct 17, 2024

View reviewed changes

assets/javascripts/discourse/components/discourse-post-event/invitee.gjs Show resolved Hide resolved

jjaffeux added 3 commits October 18, 2024 09:07

review fixes

fb3bfc2

fixes

dc83c27

fix spec

f497a0a

jjaffeux requested review from CvX and renato October 18, 2024 10:45

use correct case

3686977

CvX reviewed Oct 18, 2024

View reviewed changes

assets/javascripts/discourse/components/discourse-post-event/index.gjs Outdated Show resolved Hide resolved

jjaffeux and others added 2 commits October 18, 2024 21:41

Update assets/javascripts/discourse/components/discourse-post-event/i…

80ed8bc

…ndex.gjs Co-authored-by: Jarek Radosz <[email protected]>

linting

433a943

		@@ -0,0 +1,198 @@
		import Component from "@glimmer/component";

		@@ -0,0 +1,367 @@
		import Component from "@glimmer/component";

		@@ -0,0 +1,110 @@
		import Component from "@glimmer/component";

		@@ -12,29 +12,29 @@ import concatClass from "discourse/helpers/concat-class";
		import i18n from "discourse-common/helpers/i18n";

		@@ -0,0 +1,19 @@
		import { tracked } from "@glimmer/tracking";

		@@ -0,0 +1,52 @@
		import { TrackedArray } from "@ember-compat/tracked-built-ins";

		put "/discourse-post-event/events/:event_id/invitees/:invitee_id" => "invitees#update"
		post "/discourse-post-event/events/:event_id/invitees" => "invitees#create"

DEV: migrate post event to glimmer #615

Are you sure you want to change the base?

DEV: migrate post event to glimmer #615

Conversation

jjaffeux commented Oct 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jjaffeux Oct 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CvX left a comment

Choose a reason for hiding this comment

jjaffeux commented Oct 13, 2024 •

edited

Loading

jjaffeux Oct 17, 2024 •

edited

Loading