fix: handle message deletion effects

Includes transpiled JS/TS, and Typescript declaration files (typings).

[skip ci]

extensions/emoji/js/src/forum/addComposerAutocomplete.js

@@ -70,6 +70,7 @@ export default function addComposerAutocomplete() {
           return (
             <Tooltip text={name}>
               <button
+                type="button"
                 key={emoji}
                 onclick={() => applySuggestion(emoji)}
                 onmouseenter={function () {

extensions/mentions/js/src/forum/components/MentionsDropdownItem.tsx

@@ -17,7 +17,7 @@ export default class MentionsDropdownItem<CustomAttrs extends IMentionsDropdownI
     const className = classList('MentionsDropdownItem', 'PostPreview', `MentionsDropdown-${mentionable.type()}`);
 
     return (
-      <button className={className} {...attrs}>
+      <button className={className} type="button" {...attrs}>
         <span className="PostPreview-content">{vnode.children}</span>
       </button>
     );

extensions/mentions/js/src/forum/fragments/PostQuoteButton.js

@@ -15,6 +15,7 @@ export default class PostQuoteButton extends Fragment {
     return (
       <button
         className="Button PostQuoteButton"
+        type="button"
         onclick={() => {
           reply(this.post, this.content);
         }}

extensions/messages/js/src/common/models/Dialog.ts

@@ -30,6 +30,9 @@ export default class Dialog extends Model {
   unreadCount() {
     return Model.attribute<number>('unreadCount').call(this);
   }
+  lastMessageId() {
+    return Model.attribute<number>('lastMessageId').call(this);
+  }
   lastReadMessageId() {
     return Model.attribute<number>('lastReadMessageId').call(this);
   }

extensions/messages/js/src/forum/utils/MessageControls.tsx

@@ -59,6 +59,56 @@ const MessageControls = {
 
     return message.delete().then(() => {
       context.attrs.state.remove(message);
+
+      const dialog = message.dialog();
+
+      if (dialog) {
+        const noMessagesLeft =
+          context.attrs.state.getAllItems().filter((m) => {
+            const mDialog = m.dialog();
+
+            if (!mDialog) return false;
+
+            return mDialog?.id() === dialog!.id();
+          }).length === 0;
+
+        if (noMessagesLeft) {
+          app.dialogs.remove(dialog!);
+          m.route.set(app.route('messages'));
+        }
+
+        if (parseInt(message.id()!) === dialog.lastMessageId()) {
+          const lastMessage = context.attrs.state
+            .getAllItems()
+            .filter((m) => {
+              const mDialog = m.dialog();
+
+              if (!mDialog) return false;
+
+              return mDialog.id() === dialog?.id();
+            })
+            .sort((a, b) => parseInt(a.id()!) - parseInt(b.id()!))
+            .pop();
+
+          if (lastMessage) {
+            dialog!.pushData({
+              relationships: {
+                ...dialog!.data.relationships,
+                lastMessage: {
+                  data: {
+                    type: 'dialog-messages',
+                    id: lastMessage.id()!,
+                  },
+                },
+              },
+            });
+            dialog.pushAttributes({
+              lastMessageId: parseInt(lastMessage.id()!),
+            });
+          }
+        }
+      }
+
       m.redraw();
     });
   },

extensions/messages/src/Api/Resource/DialogResource.php

@@ -68,9 +68,6 @@ class DialogResource extends Resource\AbstractDatabaseResource
                     $connection = UserDialogState::query()->getConnection();
                     $grammar = UserDialogState::query()->getGrammar();
 
-                    $table = $grammar->wrapTable('dialogs');
-                    $column = $grammar->wrap('last_message_id');
-
                     UserDialogState::query()
                         ->where('dialog_user.user_id', $context->getActor()->id)
                         ->update([
@@ -121,6 +118,7 @@ class DialogResource extends Resource\AbstractDatabaseResource
                 ->get(function (Dialog $dialog) {
                     return $dialog->state->last_read_at;
                 }),
+            Schema\Integer::make('lastMessageId'),
             Schema\Integer::make('lastReadMessageId')
                 ->visible(fn (Dialog $dialog) => $dialog->state !== null)
                 ->get(function (Dialog $dialog) {

extensions/messages/src/DialogMessage.php

@@ -70,6 +70,24 @@ class DialogMessage extends AbstractModel implements Formattable
                     ->toSql()
                 .')');
         });
+
+        static::deleted(function (self $message) {
+            if ($message->dialog) {
+                if ($message->dialog->messages()->count() === 0) {
+                    $message->dialog->delete();
+                } elseif ($message->dialog->first_message_id === $message->id) {
+                    $message->dialog->setFirstMessage(
+                        $message->dialog->messages()->oldest('id')->first()
+                    );
+                    $message->dialog->save();
+                } elseif ($message->dialog->last_message_id === $message->id) {
+                    $message->dialog->setLastMessage(
+                        $message->dialog->messages()->latest('id')->first()
+                    );
+                    $message->dialog->save();
+                }
+            }
+        });
     }
 
     public function dialog(): BelongsTo

extensions/statistics/js/src/admin/components/StatisticsWidget.tsx

@@ -279,6 +279,7 @@ export default class StatisticsWidget extends DashboardWidget {
             return (
               <button
                 className={classList('Button--ua-reset StatisticsWidget-entity', { active: this.selectedEntity === entity })}
+                type="button"
                 onclick={this.changeEntity.bind(this, entity)}
               >
                 <h3 className="StatisticsWidget-heading">{app.translator.trans('flarum-statistics.admin.statistics.' + entity + '_heading')}</h3>

framework/core/js/src/admin/components/AdminPage.tsx

@@ -67,7 +67,13 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
    */
   submitButton(): Mithril.Children {
     return (
-      <Button onclick={this.saveSettings.bind(this)} className="Button Button--primary" loading={this.loading} disabled={!this.isChanged()}>
+      <Button
+        type="submit"
+        onclick={this.saveSettings.bind(this)}
+        className="Button Button--primary"
+        loading={this.loading}
+        disabled={!this.isChanged()}
+      >
         {app.translator.trans('core.admin.settings.submit_button')}
       </Button>
     );

framework/core/js/src/admin/components/PermissionsPage.tsx

@@ -25,12 +25,12 @@ export default class PermissionsPage extends AdminPage {
             .all<Group>('groups')
             .filter((group) => [Group.GUEST_ID, Group.MEMBER_ID].indexOf(group.id()!) === -1)
             .map((group) => (
-              <button className="Button Group" onclick={() => app.modal.show(EditGroupModal, { group })}>
+              <button className="Button Group" type="button" onclick={() => app.modal.show(EditGroupModal, { group })}>
                 <GroupBadge group={group} className="Group-icon" label={null} />
                 <span className="Group-name">{group.namePlural()}</span>
               </button>
             ))}
-          <button className="Button Group Group--add" onclick={() => app.modal.show(EditGroupModal)}>
+          <button className="Button Group Group--add" type="button" onclick={() => app.modal.show(EditGroupModal)}>
             <Icon name="fas fa-plus" className="Group-icon" />
             <span className="Group-name">{app.translator.trans('core.admin.permissions.new_group_button')}</span>
           </button>

framework/core/js/src/admin/components/UserListPage.tsx

@@ -352,6 +352,7 @@ export default class UserListPage extends AdminPage {
               <button
                 onclick={toggleEmailVisibility}
                 className="Button Button--text UserList-emailIconBtn"
+                type="button"
                 title={app.translator.trans('core.admin.users.grid.columns.email.visibility_show')}
               >
                 <Icon name="far fa-eye-slash fa-fw" className="icon" />

framework/core/js/src/common/components/DetailedDropdownItem.tsx

@@ -21,7 +21,7 @@ export default class DetailedDropdownItem<
 > extends Component<CustomAttrs> {
   view() {
     return (
-      <button className="DetailedDropdownItem hasIcon" onclick={this.attrs.onclick}>
+      <button type="button" className="DetailedDropdownItem hasIcon" onclick={this.attrs.onclick}>
         <Icon name={this.attrs.active ? 'fas fa-check' : 'fas'} className="Button-icon" />
         <span className="DetailedDropdownItem-content">
           <Icon name={this.attrs.icon} className="Button-icon" />

framework/core/js/src/common/components/Dropdown.tsx

@@ -139,6 +139,7 @@ export default class Dropdown<CustomAttrs extends IDropdownAttrs = IDropdownAttr
   getButton(children: Mithril.ChildArray): Mithril.Vnode<any, any> {
     let button = (
       <button
+        type="button"
         className={'Dropdown-toggle ' + this.attrs.buttonClassName}
         aria-haspopup="menu"
         aria-label={this.attrs.accessibleToggleLabel}

framework/core/js/src/common/components/SplitDropdown.tsx

@@ -45,6 +45,7 @@ export default class SplitDropdown<CustomAttrs extends ISplitDropdownAttrs = ISp
       <>
         {button}
         <button
+          type="button"
           className={'Dropdown-toggle Button Button--icon ' + this.attrs.buttonClassName}
           aria-haspopup="menu"
           aria-label={this.attrs.accessibleToggleLabel}

framework/core/js/src/forum/components/AvatarEditor.js

@@ -43,6 +43,7 @@ export default class AvatarEditor extends Component {
       <div className={classList(['AvatarEditor', 'Dropdown', this.attrs.className, this.loading && 'loading', this.isDraggedOver && 'dragover'])}>
         <Avatar user={user} loading="eager" />
         <button
+          type="button"
           className={user.avatarUrl() ? 'Dropdown-toggle' : 'Dropdown-toggle AvatarEditor--noAvatar'}
           title={app.translator.trans('core.forum.user.avatar_upload_tooltip')}
           ariaLabel={app.translator.trans('core.forum.user.avatar_upload_tooltip')}

framework/core/js/src/forum/components/PostMeta.tsx

@@ -40,6 +40,7 @@ export default class PostMeta<CustomAttrs extends IPostMetaAttrs = IPostMetaAttr
     items.add(
       'time',
       <button
+        type="button"
         className={classList({
           'Button Button--text': true,
           'Dropdown-toggle Button--link': !!permalink,

framework/core/js/src/forum/components/PostStreamScrubber.js

@@ -58,7 +58,7 @@ export default class PostStreamScrubber extends Component {
 
     return (
       <div className={classNames.join(' ')}>
-        <button className="Button Dropdown-toggle" data-toggle="dropdown">
+        <button type="button" className="Button Dropdown-toggle" data-toggle="dropdown">
           {viewing} <Icon name={'fas fa-sort'} />
         </button>
 

framework/core/js/src/forum/components/ReplyPlaceholder.tsx

@@ -54,7 +54,7 @@ export default class ReplyPlaceholder<CustomAttrs extends IReplyPlaceholderAttrs
       });
 
     return (
-      <button className="Post ReplyPlaceholder" onclick={reply}>
+      <button type="button" className="Post ReplyPlaceholder" onclick={reply}>
         <div className="Post-container">
           <div className="Post-side">
             <Avatar user={app.session.user} className="Post-avatar" />