Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

refactoring to only use one component for status creation

This commit is contained in:
Nicolas Constant 2019-03-05 22:46:50 -05:00
parent 58bab220cd
commit ac5092aa76
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
19 changed files with 296 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -49,6 +49,7 @@ import { TutorialComponent } from './components/tutorial/tutorial.component';
import { NotificationHubComponent } from './components/notification-hub/notification-hub.component';
import { NotificationService } from "./services/notification.service";
import { MediaViewerComponent } from './components/media-viewer/media-viewer.component';
import { CreateStatusComponent } from './components/create-status/create-status.component';
const routes: Routes = [
{ path: "", redirectTo: "home", pathMatch: "full" },
@ -87,7 +88,8 @@ const routes: Routes = [
StreamEditionComponent,
TutorialComponent,
NotificationHubComponent,
MediaViewerComponent
MediaViewerComponent,
CreateStatusComponent
],
imports: [
FontAwesomeModule,

13
src/app/components/create-status/create-status.component.html Normal file
View File

@ -0,0 +1,13 @@
<form (ngSubmit)="onSubmit()">
<input [(ngModel)]="title" type="text" class="form-control form-control-sm" name="title" autocomplete="off" placeholder="Title, Content Warning (optional)" />
<textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm" rows="5" required
placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
<select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy"
[(ngModel)]="selectedPrivacy">
<option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>
</select>
<button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="statusReplyingToWrapper">REPLY!</button>
<button type="submit" class="btn btn-sm btn-custom-primary" *ngIf="!statusReplyingToWrapper">POST!</button>
</form>

36
src/app/components/create-status/create-status.component.scss Normal file
View File

@ -0,0 +1,36 @@
@import "variables";
@import "panel";
@import "buttons";
$btn-send-status-width: 60px;
.form-control {
margin: 0 0 5px 5px;
width: calc(100% - 10px);
background-color: $column-color;
border-color: $status-secondary-color;
color: #fff;
font-size: $default-font-size;
&:focus {
box-shadow: none;
}
&--privacy {
display: inline-block;
width: calc(100% - 15px - #{$btn-send-status-width});
}
}
.btn-custom-primary {
display: inline-block;
width: $btn-send-status-width;
position: relative;
top: -1px;
left: 5px; // background-color: orange;
// border-color: orange;
// color: black;
font-weight: 500; // &:hover {
// }
// &:focus {
// border-color: darkblue;
// }
}

25
src/app/components/create-status/create-status.component.spec.ts Normal file
View File

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

135
src/app/components/create-status/create-status.component.ts Normal file
View File

@ -0,0 +1,135 @@
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { MastodonService, VisibilityEnum } from '../../services/mastodon.service';
import { Status } from '../../services/models/mastodon.interfaces';
import { ToolsService } from '../../services/tools.service';
import { NotificationService } from '../../services/notification.service';
import { StatusWrapper } from '../../models/common.model';
@Component({
selector: 'app-create-status',
templateUrl: './create-status.component.html',
styleUrls: ['./create-status.component.scss']
})
export class CreateStatusComponent implements OnInit {
title: string;
status: string = '';
@Input() statusReplyingToWrapper: StatusWrapper;
@Output() onClose = new EventEmitter();
@ViewChild('reply') replyElement: ElementRef;
private statusReplyingTo: Status;
selectedPrivacy = 'Public';
privacyList: string[] = ['Public', 'Unlisted', 'Follows-only', 'DM'];
constructor(
// private readonly store: Store,
private readonly notificationService: NotificationService,
private readonly toolsService: ToolsService,
private readonly mastodonService: MastodonService) { }
ngOnInit() {
if (this.statusReplyingToWrapper) {
if (this.statusReplyingToWrapper.status.reblog) {
this.statusReplyingTo = this.statusReplyingToWrapper.status.reblog;
} else {
this.statusReplyingTo = this.statusReplyingToWrapper.status;
}
// const mentions = [...this.statusReplyingTo.mentions.map(x => x.acct), this.statusReplyingTo.account.acct];
// let uniqueMentions = [];
// for(const mention of mentions){
// if(!uniqueMentions.includes(mention)){
// uniqueMentions.push(mention);
// }
// }
const uniqueMentions = this.getMentions(this.statusReplyingTo);
for (const mention of uniqueMentions) {
this.status += `@${mention} `;
}
}
setTimeout(() => {
this.replyElement.nativeElement.focus();
}, 0);
}
private getMentions(status: Status): string[]{
const mentions = [...status.mentions.map(x => x.acct), status.account.acct];
let uniqueMentions = [];
for(let mention of mentions){
if(!uniqueMentions.includes(mention)){
// if(!mention.includes('@')){
// mention += `@${status.}`;
// }
uniqueMentions.push(mention);
}
}
return uniqueMentions;
}
onSubmit(): boolean {
let visibility: VisibilityEnum = VisibilityEnum.Unknown;
switch (this.selectedPrivacy) { //FIXME: in case of responding, set the visibility to original
case 'Public':
visibility = VisibilityEnum.Public;
break;
case 'Unlisted':
visibility = VisibilityEnum.Unlisted;
break;
case 'Follows-only':
visibility = VisibilityEnum.Private;
break;
case 'DM':
visibility = VisibilityEnum.Direct;
break;
}
let spoiler = this.title;
if (this.statusReplyingToWrapper) {
spoiler = this.statusReplyingTo.spoiler_text;
}
const acc = this.toolsService.getSelectedAccounts()[0];
let usableStatus: Promise<Status>;
if (this.statusReplyingToWrapper) {
usableStatus = this.toolsService.getStatusUsableByAccount(acc, this.statusReplyingToWrapper);
} else {
usableStatus = Promise.resolve(null);
}
usableStatus
.then((status: Status) => {
let inReplyToId = null;
if (status) {
inReplyToId = status.id;
}
return this.mastodonService.postNewStatus(acc, this.status, visibility, spoiler, inReplyToId);
})
.then((res: Status) => {
this.title = '';
this.status = '';
this.onClose.emit();
})
.catch((err: HttpErrorResponse) => {
this.notificationService.notifyHttpError(err);
});
return false;
}
// private getRegisteredAccounts(): AccountInfo[] {
// var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
// return regAccounts;
// }
onCtrlEnter(): boolean {
this.onSubmit();
return false;
}
}

1
src/app/components/floating-column/add-new-account/add-new-account.component.html
View File

@ -8,5 +8,4 @@
<br />
<button type="submit" class="btn btn-success btn-sm">Submit</button>
</form>
</div>

8
src/app/components/floating-column/add-new-status/add-new-status.component.html
View File

@ -1,17 +1,15 @@
<div class="panel">
<h3 class="panel__title">new message</h3>
<form (ngSubmit)="onSubmit()">
<!-- <label>Please provide your account:</label> -->
<!-- <form (ngSubmit)="onSubmit()">
<input [(ngModel)]="title" type="text" class="form-control form-control-sm" name="title" autocomplete="off" placeholder="Title (optional)" />
<!-- <textarea rows="4" cols="50"> -->
<textarea #reply [(ngModel)]="status" name="status" class="form-control form-control-sm" style="min-width: 100%" rows="5" required placeholder="What's in your mind?" (keydown.control.enter)="onCtrlEnter()"></textarea>
<select class="form-control form-control-sm form-control--privacy" id="privacy" name="privacy" [(ngModel)]="selectedPrivacy">
<option *ngFor="let p of privacyList" [ngValue]="p">{{p}}</option>
</select>
<button type="submit" class="btn btn-sm btn-custom-primary">POST!</button>
</form>
</form> -->
<app-create-status (onClose)="closeColumn()"></app-create-status>
</div>

112
src/app/components/floating-column/add-new-status/add-new-status.component.ts
View File

@ -14,12 +14,12 @@ import { NavigationService } from '../../../services/navigation.service';
styleUrls: ['./add-new-status.component.scss']
})
export class AddNewStatusComponent implements OnInit {
@Input() title: string;
@Input() status: string;
@ViewChild('reply') replyElement: ElementRef;
// @Input() title: string;
// @Input() status: string;
// @ViewChild('reply') replyElement: ElementRef;
selectedPrivacy = 'Public';
privacyList: string[] = ['Public', 'Unlisted', 'Follows-only', 'DM'];
// selectedPrivacy = 'Public';
// privacyList: string[] = ['Public', 'Unlisted', 'Follows-only', 'DM'];
constructor(
private readonly store: Store,
@ -28,58 +28,62 @@ export class AddNewStatusComponent implements OnInit {
private readonly mastodonService: MastodonService) { }
ngOnInit() {
setTimeout(() => {
this.replyElement.nativeElement.focus();
}, 0);
// setTimeout(() => {
// this.replyElement.nativeElement.focus();
// }, 0);
}
onSubmit(): boolean {
const accounts = this.getRegisteredAccounts();
const selectedAccounts = accounts.filter(x => x.isSelected);
let visibility: VisibilityEnum = VisibilityEnum.Unknown;
switch (this.selectedPrivacy) {
case 'Public':
visibility = VisibilityEnum.Public;
break;
case 'Unlisted':
visibility = VisibilityEnum.Unlisted;
break;
case 'Follows-only':
visibility = VisibilityEnum.Private;
break;
case 'DM':
visibility = VisibilityEnum.Direct;
break;
}
let spoiler = this.title;
if(spoiler === '') {
spoiler = null;
}
for (const acc of selectedAccounts) {
this.mastodonService.postNewStatus(acc, this.status, visibility, spoiler)
.then((res: Status) => {
this.title = '';
this.status = '';
this.navigationService.closePanel();
})
.catch((err: HttpErrorResponse) => {
this.notificationService.notifyHttpError(err);
});
}
return false;
closeColumn() {
this.navigationService.closePanel();
}
private getRegisteredAccounts(): AccountInfo[] {
var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
return regAccounts;
}
// onSubmit(): boolean {
// const accounts = this.getRegisteredAccounts();
// const selectedAccounts = accounts.filter(x => x.isSelected);
onCtrlEnter(): boolean {
this.onSubmit();
return false;
}
// let visibility: VisibilityEnum = VisibilityEnum.Unknown;
// switch (this.selectedPrivacy) {
// case 'Public':
// visibility = VisibilityEnum.Public;
// break;
// case 'Unlisted':
// visibility = VisibilityEnum.Unlisted;
// break;
// case 'Follows-only':
// visibility = VisibilityEnum.Private;
// break;
// case 'DM':
// visibility = VisibilityEnum.Direct;
// break;
// }
// let spoiler = this.title;
// if(spoiler === '') {
// spoiler = null;
// }
// for (const acc of selectedAccounts) {
// this.mastodonService.postNewStatus(acc, this.status, visibility, spoiler)
// .then((res: Status) => {
// this.title = '';
// this.status = '';
// this.navigationService.closePanel();
// })
// .catch((err: HttpErrorResponse) => {
// this.notificationService.notifyHttpError(err);
// });
// }
// return false;
// }
// private getRegisteredAccounts(): AccountInfo[] {
// var regAccounts = <AccountInfo[]>this.store.snapshot().registeredaccounts.accounts;
// return regAccounts;
// }
// onCtrlEnter(): boolean {
// this.onSubmit();
// return false;
// }
}

2
src/app/components/floating-column/search/search.component.ts
View File

@ -5,8 +5,8 @@ import { MastodonService } from '../../../services/mastodon.service';
import { AccountInfo } from '../../../states/accounts.state';
import { Results, Account } from '../../../services/models/mastodon.interfaces';
import { ToolsService, OpenThreadEvent } from '../../../services/tools.service';
import { StatusWrapper } from '../../stream/stream.component';
import { NotificationService } from '../../../services/notification.service';
import { StatusWrapper } from '../../../models/common.model';
@Component({
selector: 'app-search',

2
src/app/components/stream/status/action-bar/action-bar.component.ts
View File

@ -5,12 +5,12 @@ import { Observable, Subscription } from 'rxjs';
import { faWindowClose, faReply, faRetweet, faStar } from "@fortawesome/free-solid-svg-icons";
import { faWindowClose as faWindowCloseRegular } from "@fortawesome/free-regular-svg-icons";
import { StatusWrapper } from '../../stream.component';
import { MastodonService } from '../../../../services/mastodon.service';
import { AccountInfo } from '../../../../states/accounts.state';
import { Status } from '../../../../services/models/mastodon.interfaces';
import { ToolsService } from '../../../../services/tools.service';
import { NotificationService } from '../../../../services/notification.service';
import { StatusWrapper } from '../../../../models/common.model';
@Component({
selector: 'app-action-bar',

7
src/app/components/stream/status/reply-to-status/reply-to-status.component.ts
View File

@ -1,12 +1,11 @@
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
// import { Store } from '@ngxs/store';
import { HttpErrorResponse } from '@angular/common/http';
import { MastodonService, VisibilityEnum } from '../../../../services/mastodon.service';
// import { AccountInfo } from '../../../../states/accounts.state';
import { StatusWrapper } from '../../stream.component';
import { Status } from '../../../../services/models/mastodon.interfaces';
import { ToolsService } from '../../../../services/tools.service';
import { NotificationService } from '../../../../services/notification.service';
import { HttpErrorResponse } from '@angular/common/http';
import { StatusWrapper } from '../../../../models/common.model';
@Component({
selector: 'app-reply-to-status',

6
src/app/components/stream/status/status.component.html
View File

@ -50,6 +50,8 @@
<app-action-bar #appActionBar [statusWrapper]="statusWrapper" (cwIsActiveEvent)="changeCw($event)"
(replyEvent)="openReply()"></app-action-bar>
<app-reply-to-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="statusWrapper" (onClose)="closeReply()">
</app-reply-to-status>
<!-- <app-reply-to-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="statusWrapper" (onClose)="closeReply()">
</app-reply-to-status> -->
<app-create-status *ngIf="replyingToStatus" [statusReplyingToWrapper]="statusWrapper" (onClose)="closeReply()"></app-create-status>
</div>

2
src/app/components/stream/status/status.component.ts
View File

@ -1,8 +1,8 @@
import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from "@angular/core";
import { Status, Account } from "../../../services/models/mastodon.interfaces";
import { StatusWrapper } from "../stream.component";
import { OpenThreadEvent } from "../../../services/tools.service";
import { ActionBarComponent } from "./action-bar/action-bar.component";
import { StatusWrapper } from '../../../models/common.model';
@Component({
selector: "app-status",

2
src/app/components/stream/stream-statuses/stream-statuses.component.ts
View File

@ -8,9 +8,9 @@ import { AccountInfo } from '../../../states/accounts.state';
import { StreamingService, EventEnum, StreamingWrapper, StatusUpdate } from '../../../services/streaming.service';
import { Status } from '../../../services/models/mastodon.interfaces';
import { MastodonService } from '../../../services/mastodon.service';
import { StatusWrapper } from '../stream.component';
import { NotificationService } from '../../../services/notification.service';
import { OpenThreadEvent, ToolsService } from '../../../services/tools.service';
import { StatusWrapper } from '../../../models/common.model';
@Component({
selector: 'app-stream-statuses',

6
src/app/components/stream/stream.component.ts
View File

@ -97,9 +97,3 @@ export class StreamComponent implements OnInit {
}
}
export class StatusWrapper {
constructor(
public status: Status,
public provider: AccountInfo
) { }
}

3
src/app/components/stream/thread/thread.component.ts
View File

@ -1,13 +1,12 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { StatusWrapper } from '../stream.component';
import { MastodonService } from '../../../services/mastodon.service';
import { ToolsService, OpenThreadEvent } from '../../../services/tools.service';
import { Results, Context, Status } from '../../../services/models/mastodon.interfaces';
import { NotificationService } from '../../../services/notification.service';
import { AccountInfo } from '../../../states/accounts.state';
import { StreamStatusesComponent } from '../stream-statuses/stream-statuses.component';
import { StatusWrapper } from '../../../models/common.model';
@Component({
selector: 'app-thread',

2
src/app/components/stream/user-profile/user-profile.component.ts
View File

@ -8,9 +8,9 @@ import { Store } from '@ngxs/store';
import { Account, Status, Relationship } from "../../../services/models/mastodon.interfaces";
import { MastodonService } from '../../../services/mastodon.service';
import { ToolsService, OpenThreadEvent } from '../../../services/tools.service';
import { StatusWrapper } from '../stream.component';
import { NotificationService } from '../../../services/notification.service';
import { AccountInfo } from '../../../states/accounts.state';
import { StatusWrapper } from '../../../models/common.model';

10
src/app/models/common.model.ts
View File

@ -1,8 +1,16 @@
import { Attachment } from "../services/models/mastodon.interfaces";
import { Attachment, Status } from "../services/models/mastodon.interfaces";
import { AccountInfo } from '../states/accounts.state';
export class OpenMediaEvent {
constructor(
public selectedIndex: number,
public attachments: Attachment[]) {
}
}
export class StatusWrapper {
constructor(
public status: Status,
public provider: AccountInfo
) { }
}

3
src/app/services/tools.service.ts
View File

@ -4,8 +4,7 @@ import { Store } from '@ngxs/store';
import { AccountInfo } from '../states/accounts.state';
import { MastodonService } from './mastodon.service';
import { Account, Results, Status } from "./models/mastodon.interfaces";
import { StatusWrapper } from '../components/stream/stream.component';
import { StatusWrapper } from '../models/common.model';
@Injectable({
providedIn: 'root'