Merge pull request #478 from rpetti/add-edit-posts

Support Mastodon 4.0.0's Edit Feature

src/app/app.module.ts

@@ -40,6 +40,7 @@ import { SettingsComponent } from './components/floating-column/settings/setting
 import { AddNewAccountComponent } from './components/floating-column/add-new-account/add-new-account.component';
 import { SearchComponent } from './components/floating-column/search/search.component';
 import { AddNewStatusComponent } from "./components/floating-column/add-new-status/add-new-status.component";
+import { EditStatusComponent } from "./components/floating-column/edit-status/edit-status.component";
 import { ManageAccountComponent } from "./components/floating-column/manage-account/manage-account.component";
 import { ActionBarComponent } from './components/stream/status/action-bar/action-bar.component';
 import { WaitingAnimationComponent } from './components/waiting-animation/waiting-animation.component';
@@ -111,6 +112,7 @@ const routes: Routes = [
         FloatingColumnComponent,
         ManageAccountComponent,
         AddNewStatusComponent,
+        EditStatusComponent,
         AttachementsComponent,
         SettingsComponent,
         AddNewAccountComponent,

src/app/components/create-status/create-status.component.ts

@@ -83,6 +83,15 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         return s;
     }
 
+    @Input('statusToEdit')
+    set statusToEdit(value: StatusWrapper) {
+        if (value) {
+            this.isEditing = true;
+            this.editingId = value.status.id;
+            this.redraftedStatus = value;
+        }
+    }
+
     @Input('redraftedStatus')
     set redraftedStatus(value: StatusWrapper) {
         if (value) {
@@ -141,6 +150,8 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
     autosuggestData: string = null;
     instanceSupportsPoll = true;
     instanceSupportsScheduling = true;
+    isEditing: boolean;
+    editingId: string;
     private statusLoaded: boolean;
     private hasSuggestions: boolean;
 
@@ -572,7 +583,11 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
 
         usableStatus
             .then((status: Status) => {
-                return this.sendStatus(acc, this.status, visibility, this.title, status, mediaAttachments, poll, scheduledTime);
+                if (this.isEditing) {
+                    return this.editStatus(acc, this.editingId, this.status, visibility, this.title, status, mediaAttachments, poll, scheduledTime);
+                } else {
+                    return this.sendStatus(acc, this.status, visibility, this.title, status, mediaAttachments, poll, scheduledTime);
+                }
             })
             .then((res: Status) => {
                 this.title = '';
@@ -635,6 +650,42 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
         return resultPromise;
     }
 
+    private editStatus(account: AccountInfo, statusId: string, status: string, visibility: VisibilityEnum, title: string, previousStatus: Status, attachments: Attachment[], poll: PollParameters, scheduledAt: string): Promise<Status> {
+        let parsedStatus = this.parseStatus(status);
+        let resultPromise = Promise.resolve(previousStatus);
+
+        for (let i = 0; i < parsedStatus.length; i++) {
+            let s = parsedStatus[i];
+            resultPromise = resultPromise
+                .then((pStatus: Status) => {
+                    let inReplyToId = null;
+                    if (pStatus) {
+                        inReplyToId = pStatus.id;
+                    }
+
+                    if (i === 0) {
+                        return this.mastodonService.editStatus(account, statusId, s, visibility, title, inReplyToId, attachments.map(x => x.id), poll, scheduledAt)
+                            .then((status: Status) => {
+                                this.mediaService.clearMedia();
+                                return status;
+                            });
+                    } else {
+                        return this.mastodonService.editStatus(account, statusId, s, visibility, title, inReplyToId, [], null, scheduledAt);
+                    }
+                })
+                .then((status: Status) => {
+                    if (this.statusReplyingToWrapper) {
+                        let cwPolicy = this.toolsService.checkContentWarning(status);
+                        this.notificationService.newStatusPosted(this.statusReplyingToWrapper.status.id, new StatusWrapper(cwPolicy.status, account, cwPolicy.applyCw, cwPolicy.hide));
+                    }
+
+                    return status;
+                });
+        }
+
+        return resultPromise;
+    }
+
     private parseStatus(status: string): string[] {
         //console.error(status.toString());
 

src/app/components/floating-column/edit-status/edit-status.component.html

@@ -0,0 +1,9 @@
+<div class="panel">
+    <h3 class="panel__title">edit message</h3>
+
+    <div class=" new-message-body flexcroll">
+        <app-create-status (onClose)="closeColumn()" [isDirectMention]="isDirectMention"
+            [replyingUserHandle]="userHandle" [statusToEdit]="statusToEdit"></app-create-status>
+
+    </div>
+</div>

src/app/components/floating-column/edit-status/edit-status.component.scss

@@ -0,0 +1,37 @@
+@import "variables";
+@import "panel";
+@import "buttons";
+@import "commons";
+
+$btn-send-status-width: 60px;
+
+.form-control { 
+    margin-bottom: 5px;
+
+    &--privacy{
+        display: inline-block; 
+        width: calc(100% - 5px - #{$btn-send-status-width});
+    }
+}
+
+.btn-custom-primary {
+    display: inline-block;
+    width: $btn-send-status-width;
+    position: relative;
+    top: -1px;
+    left: 5px;
+    font-weight: 500;
+}
+
+.panel {
+    padding-left: 0;
+    padding-right: 0;    
+}
+
+.new-message-body {
+    overflow: auto;
+    height: calc(100% - 30px);
+    padding-right: 5px;
+    
+    padding-bottom: 100px;    
+}

src/app/components/floating-column/edit-status/edit-status.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { EditStatusComponent } from '../edit-status/edit-status.component';
+
+
+xdescribe('EditStatusComponent', () => {
+  let component: EditStatusComponent;
+  let fixture: ComponentFixture<EditStatusComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditStatusComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditStatusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/floating-column/edit-status/edit-status.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { NavigationService } from '../../../services/navigation.service';
+import { StatusWrapper } from '../../../models/common.model';
+
+@Component({
+    selector: 'app-edit-status',
+    templateUrl: './edit-status.component.html',
+    styleUrls: ['./edit-status.component.scss']
+})
+export class EditStatusComponent implements OnInit {
+
+    @Input() isDirectMention: boolean;
+    @Input() userHandle: string;
+    @Input() statusToEdit: StatusWrapper;
+
+    constructor(private readonly navigationService: NavigationService) {
+    }
+
+    ngOnInit() {
+    }
+
+    closeColumn() {
+        this.navigationService.closePanel();
+    }
+}

src/app/components/floating-column/floating-column.component.html

@@ -20,6 +20,8 @@
                     (browseThreadEvent)="browseThread($event)"></app-manage-account>
                 <app-add-new-status *ngIf="openPanel === 'createNewStatus'" [isDirectMention]="isDirectMention"
                     [userHandle]="userHandle" [redraftedStatus]="redraftedStatus"></app-add-new-status>
+                <app-edit-status *ngIf="openPanel === 'editStatus'" [statusToEdit]="statusToEdit" [isDirectMention]="isDirectMention"
+                    [userHandle]="userHandle"></app-edit-status>
                 <app-add-new-account *ngIf="openPanel === 'addNewAccount'"></app-add-new-account>
                 <app-search *ngIf="openPanel === 'search'"
                     (browseAccountEvent)="browseAccount($event)"

src/app/components/floating-column/floating-column.component.ts

@@ -25,6 +25,7 @@ export class FloatingColumnComponent implements OnInit, OnDestroy {
     isDirectMention: boolean;
     userHandle: string;
     redraftedStatus: StatusWrapper;
+    statusToEdit: StatusWrapper;
 
     openPanel: string = '';
 
@@ -58,6 +59,16 @@ export class FloatingColumnComponent implements OnInit, OnDestroy {
                         this.openPanel = 'createNewStatus';
                     }
                     break;
+                case LeftPanelType.EditStatus:
+                    if (this.openPanel === 'editStatus') {
+                        this.closePanel();
+                    } else {
+                        this.isDirectMention = event.action === LeftPanelAction.DM;
+                        this.userHandle = event.userHandle;
+                        this.statusToEdit = event.status;
+                        this.openPanel = 'editStatus';
+                    }
+                    break;
                 case LeftPanelType.ManageAccount:
                     let lastUserAccountId = '';
                     if (this.userAccountUsed && this.userAccountUsed.info) {

src/app/components/stream/status/action-bar/status-user-context-menu/status-user-context-menu.component.html

@@ -40,6 +40,9 @@
     <ng-template contextMenuItem (execute)="unpinFromProfile()" *ngIf="statusWrapper && isOwnerSelected && displayedStatus.pinned && displayedStatus.visibility === 'public'">
         Unpin from profile
     </ng-template>
+    <ng-template contextMenuItem (execute)="edit()" *ngIf="statusWrapper && isOwnerSelected && isEditingAvailable">
+        Edit
+    </ng-template>
     <ng-template contextMenuItem (execute)="delete(false)" *ngIf="statusWrapper && isOwnerSelected">
         Delete
     </ng-template>

src/app/components/stream/status/action-bar/status-user-context-menu/status-user-context-menu.component.ts

@@ -5,7 +5,7 @@ import { Observable, Subscription } from 'rxjs';
 import { Store } from '@ngxs/store';
 
 import { Status, Account, Results } from '../../../../../services/models/mastodon.interfaces';
-import { ToolsService, OpenThreadEvent } from '../../../../../services/tools.service';
+import { ToolsService, OpenThreadEvent, InstanceInfo } from '../../../../../services/tools.service';
 import { StatusWrapper } from '../../../../../models/common.model';
 import { NavigationService } from '../../../../../services/navigation.service';
 import { AccountInfo } from '../../../../../states/accounts.state';
@@ -27,6 +27,8 @@ export class StatusUserContextMenuComponent implements OnInit, OnDestroy {
     username: string;
     isOwnerSelected: boolean;
 
+    isEditingAvailable: boolean;
+
     @Input() statusWrapper: StatusWrapper;
     @Input() displayedAccount: Account;
 
@@ -78,6 +80,14 @@ export class StatusUserContextMenuComponent implements OnInit, OnDestroy {
 
         this.isOwnerSelected = selectedAccount.username.toLowerCase() === this.displayedStatus.account.username.toLowerCase()
             && selectedAccount.instance.toLowerCase() === this.displayedStatus.account.url.replace('https://', '').split('/')[0].toLowerCase();
+
+        this.toolsService.getInstanceInfo(selectedAccount).then((instanceInfo: InstanceInfo) => {
+            if (instanceInfo.major >= 4) {
+                this.isEditingAvailable = true;
+            } else {
+                this.isEditingAvailable = false;
+            }
+        });
     }
 
 
@@ -282,6 +292,18 @@ export class StatusUserContextMenuComponent implements OnInit, OnDestroy {
         return false;
     }
 
+    edit(): boolean {
+        const selectedAccount = this.toolsService.getSelectedAccounts()[0];
+        this.getStatus(selectedAccount)
+            .then(() => {
+                this.navigationService.edit(this.statusWrapper);
+            })
+            .catch(err => {
+                this.notificationService.notifyHttpError(err, selectedAccount);
+            });
+        return false;
+    }
+
     private getStatus(account: AccountInfo): Promise<Status> {
         let statusPromise: Promise<Status> = Promise.resolve(this.statusWrapper.status);
 

src/app/services/mastodon-wrapper.service.ts

@@ -124,6 +124,13 @@ export class MastodonWrapperService {
             });
     }
 
+    editStatus(account: AccountInfo, statusId: string, status: string, visibility: VisibilityEnum, spoiler: string = null, in_reply_to_id: string = null, mediaIds: string[], poll: PollParameters = null, scheduled_at: string = null): Promise<Status> {
+        return this.refreshAccountIfNeeded(account)
+            .then((refreshedAccount: AccountInfo) => {
+                return this.mastodonService.editStatus(refreshedAccount, statusId, status, visibility, spoiler, in_reply_to_id, mediaIds, poll, scheduled_at);
+            });
+    }
+
     getStatus(account: AccountInfo, statusId: string): Promise<Status> {
         return this.refreshAccountIfNeeded(account)
             .then((refreshedAccount: AccountInfo) => {

src/app/services/mastodon.service.ts

@@ -128,6 +128,50 @@ export class MastodonService {
         return this.httpClient.post<Status>(url, statusData, { headers: headers }).toPromise();
     }
 
+    editStatus(account: AccountInfo, statusId: string, status: string, visibility: VisibilityEnum, spoiler: string = null, in_reply_to_id: string = null, mediaIds: string[], poll: PollParameters = null, scheduled_at: string = null): Promise<Status> {
+        const url = `https://${account.instance}${this.apiRoutes.editStatus.replace('{0}', statusId)}`;
+
+        const statusData = new StatusData();
+        statusData.status = status;
+        statusData.media_ids = mediaIds;
+
+        if (poll) {
+            statusData['poll'] = poll;
+        }
+
+        if (scheduled_at) {
+            statusData['scheduled_at'] = scheduled_at;
+        }
+
+        if (in_reply_to_id) {
+            statusData.in_reply_to_id = in_reply_to_id;
+        }
+        if (spoiler) {
+            statusData.sensitive = true;
+            statusData.spoiler_text = spoiler;
+        }
+        switch (visibility) {
+            case VisibilityEnum.Public:
+                statusData.visibility = 'public';
+                break;
+            case VisibilityEnum.Unlisted:
+                statusData.visibility = 'unlisted';
+                break;
+            case VisibilityEnum.Private:
+                statusData.visibility = 'private';
+                break;
+            case VisibilityEnum.Direct:
+                statusData.visibility = 'direct';
+                break;
+            default:
+                statusData.visibility = 'private';
+                break;
+        }
+
+        const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
+        return this.httpClient.put<Status>(url, statusData, { headers: headers }).toPromise();
+    }
+
     getStatus(account: AccountInfo, statusId: string): Promise<Status> {
         const route = `https://${account.instance}${this.apiRoutes.getStatus.replace('{0}', statusId)}`;
         const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });

src/app/services/models/api.settings.ts

@@ -41,6 +41,7 @@ export class ApiRoutes {
     getStatusRebloggedBy = '/api/v1/statuses/{0}/reblogged_by';
     getStatusFavouritedBy = '/api/v1/statuses/{0}/favourited_by';
     postNewStatus = '/api/v1/statuses';
+    editStatus = '/api/v1/statuses/{0}';
     deleteStatus = '/api/v1/statuses/{0}';
     reblogStatus = '/api/v1/statuses/{0}/reblog';
     unreblogStatus = '/api/v1/statuses/{0}/unreblog';

src/app/services/navigation.service.ts

@@ -41,6 +41,11 @@ export class NavigationService {
         this.activatedPanelSubject.next(newEvent);
     }
 
+    edit(status: StatusWrapper){
+        const newEvent = new OpenLeftPanelEvent(LeftPanelType.EditStatus, LeftPanelAction.Edit, null, status);
+        this.activatedPanelSubject.next(newEvent);
+    }
+
     columnSelected(index: number): void {
         this.columnSelectedSubject.next(index);
     }
@@ -68,6 +73,7 @@ export enum LeftPanelAction {
     DM = 1,
     Mention = 2,
     Redraft = 3,
+    Edit = 4,
 }
 
 export enum LeftPanelType {
@@ -77,5 +83,6 @@ export enum LeftPanelType {
     Search = 3,
     AddNewAccount = 4,
     Settings = 5,
-    ScheduledStatuses = 6
+    ScheduledStatuses = 6,
+    EditStatus = 7,
 }