feat(posts): Implement posts editing

package.json

@@ -30,7 +30,9 @@
     "@ngrx/router-store": "^6.0.1",
     "@ngrx/store": "^6.0.1",
     "@ngrx/store-devtools": "^6.0.1",
+    "buffer": "^5.1.0",
     "core-js": "^2.5.7",
+    "diff-match-patch": "^1.0.1",
     "hammerjs": "^2.0.8",
     "idb": "^2.1.3",
     "ngx-cookie": "^4.0.2",
@@ -47,7 +49,7 @@
     "@angular/language-service": "6.1.0",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~10.5.4",
+    "@types/node": "^10.5.8",
     "codelyzer": "^4.4.2",
     "jasmine-core": "~3.1.0",
     "jasmine-spec-reporter": "~4.2.1",

src/app/app-routing.module.ts

@@ -1,11 +1,17 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from './core/guards/auth.guard';
 
 const appRoutes: Routes = [
   {
     path: 'drafts',
     loadChildren: './drafts/drafts.module#DraftsModule'
   },
+  {
+    path: 'posts',
+    loadChildren: './posts/posts.module#PostsModule',
+    canLoad: [AuthGuard]
+  },
   {
     path: 'templates',
     loadChildren: './templates/templates.module#TemplatesModule'

src/app/core/containers/app/app.component.html

@@ -14,6 +14,7 @@
   <mat-toolbar-row fxLayout="row" fxLayoutAlign="center center" class="toolbar__row">
     <button mat-button routerLink="drafts">Drafts</button>
     <button mat-button routerLink="templates">Templates</button>
+    <button mat-button routerLink="posts" *ngIf="!!(currentUser$ | async)">Posts</button>
   </mat-toolbar-row>
 </mat-toolbar>
 

src/app/posts/components/post-card/post-card.component.html

@@ -0,0 +1,16 @@
+<mat-card class="post-card">
+  <mat-card-header>
+    <mat-card-title>
+      <span class="mat-title">{{post.entry.title}}</span>
+    </mat-card-title>
+    <mat-card-subtitle>{{post.entry.created | date}}</mat-card-subtitle>
+  </mat-card-header>
+
+  <img mat-card-image *ngIf="thumbnail" [src]="thumbnail">
+
+  <mat-card-actions class="post-card__actions">
+    <button mat-icon-button (click)="editPost()">
+      <mat-icon>edit</mat-icon>
+    </button>
+  </mat-card-actions>
+</mat-card>

src/app/posts/components/post-card/post-card.component.scss

@@ -0,0 +1,3 @@
+.post-card__actions {
+  text-align: right;
+}

src/app/posts/components/post-card/post-card.component.ts

@@ -0,0 +1,40 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Output,
+  EventEmitter
+} from '@angular/core';
+import { always, o, prop, tryCatch } from 'ramda';
+import { getImages } from '../../../../core/steemize/withJsonMetadata';
+import { Post } from '../../../store/posts-store';
+
+@Component({
+  selector: 'app-post-card',
+  templateUrl: './post-card.component.html',
+  styleUrls: ['./post-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PostCardComponent {
+  @Input()
+  post: Post;
+  @Output()
+  edit = new EventEmitter<number>();
+
+  get thumbnail(): string {
+    const imagesFromMetadata = tryCatch(
+      o(prop('image'), JSON.parse),
+      always(null)
+    )(this.post.entry.json_metadata);
+    const imagesFromBody = getImages(this.post.entry.body);
+    return imagesFromMetadata && imagesFromMetadata.length > 0
+      ? `https://steemitimages.com/0x0/${imagesFromMetadata[0]}`
+      : imagesFromBody.length > 0
+        ? `https://steemitimages.com/0x0/${imagesFromBody[0]}`
+        : null;
+  }
+
+  editPost() {
+    this.edit.emit(this.post.id);
+  }
+}

src/app/posts/containers/post-editor/post-editor.component.html

@@ -0,0 +1,5 @@
+<div *ngIf="post$ | async">
+  <app-editor [config]="editorConfig$ | async" (whenSubmit)="broadcast($event)"></app-editor>
+</div>
+
+<mat-spinner *ngIf="isBroadcasting$ | async" style="margin-left: 10px;"></mat-spinner>

src/app/posts/containers/post-editor/post-editor.component.ts

@@ -0,0 +1,67 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { complement, isNil, mapObjIndexed, mergeDeepRight } from 'ramda';
+import { Observable } from 'rxjs';
+import { filter, first, map } from 'rxjs/operators';
+import { steeditorizePost, SteeditorPost } from '../../../../core';
+import { createEditorConfig, EditorConfig } from '../../../editor';
+import {
+  Post,
+  postsActionCreators,
+  selectCurrentPost,
+  selectPostsBroadcasting
+} from '../../../store/posts-store';
+import { State } from '../../../store/root-state';
+
+@Component({
+  selector: 'app-post-editor',
+  templateUrl: './post-editor.component.html',
+  styleUrls: ['./post-editor.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PostEditorComponent implements OnInit {
+  post$: Observable<Post>;
+  editorConfig$: Observable<EditorConfig>;
+  isBroadcasting$: Observable<boolean>;
+
+  constructor(private store: Store<State>) {}
+
+  ngOnInit() {
+    this.post$ = this.store.select(selectCurrentPost);
+    this.editorConfig$ = this.post$.pipe(
+      filter(complement(isNil)),
+      map(post => post.entry),
+      map(steeditorizePost),
+      map(mapObjIndexed(value => ({ value }))),
+      map((fields: any) =>
+        createEditorConfig({
+          fields: mergeDeepRight(fields, {
+            beneficiaries: { disabled: true },
+            percentSteemDollars: {
+              max: fields.percentSteemDollars.value
+            },
+            maxAcceptedPayout: {
+              max: fields.maxAcceptedPayout.value
+            },
+            allowCurationRewards: {
+              disabled: !fields.allowCurationRewards.value
+            }
+          })
+        })
+      )
+    );
+    this.isBroadcasting$ = this.store.select(selectPostsBroadcasting);
+  }
+
+  broadcast(post: SteeditorPost) {
+    this.store.dispatch(
+      postsActionCreators.broadcastPost(post, this.currentPost)
+    );
+  }
+
+  private get currentPost(): Post {
+    let currentPost;
+    this.post$.pipe(first()).subscribe(post => (currentPost = post));
+    return currentPost;
+  }
+}

src/app/posts/containers/posts/posts.component.html

@@ -0,0 +1,15 @@
+<div fxLayout="row wrap" fxLayoutGap="1%" fxLayoutAlign="center" class="posts">
+  <div *ngFor="let post of posts$ | async" fxFlex.xl="15%" fxFlex.lg="20%" fxFlex.md="40%" fxFlex.sm="45%" fxFlex.xs="90%"
+    class="post">
+    <app-post-card [post]="post" (edit)="editPost($event)"></app-post-card>
+  </div>
+</div>
+
+<div class="actions-container">
+  <mat-spinner *ngIf="loading$ | async; else loaded" [diameter]="50" style="margin:0 auto;"></mat-spinner>
+  <ng-template #loaded>
+    <button mat-raised-button color="accent" (click)="loadMorePosts()" *ngIf="(posts$ | async)?.length && (lastCheckedId$ | async) !== 0">
+      LOAD MORE
+    </button>
+  </ng-template>
+</div>

src/app/posts/containers/posts/posts.component.scss

@@ -0,0 +1,8 @@
+.post {
+  margin-bottom: 30px;
+}
+
+.actions-container {
+  text-align: center;
+  margin-bottom: 40px;
+}

src/app/posts/containers/posts/posts.component.ts

@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { first, tap } from 'rxjs/operators';
+import {
+  Post,
+  postsActionCreators,
+  selectAllPosts,
+  selectPostsLastCheckedId,
+  selectPostsLoading
+} from '../../../store/posts-store';
+import { State } from '../../../store/root-state';
+import { routerActionCreators } from '../../../store/router-store';
+
+@Component({
+  selector: 'app-posts',
+  templateUrl: './posts.component.html',
+  styleUrls: ['./posts.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PostsComponent implements OnInit {
+  posts$: Observable<Post[]>;
+  loading$: Observable<boolean>;
+  lastCheckedId$: Observable<number>;
+
+  constructor(private store: Store<State>) {}
+
+  ngOnInit() {
+    this.store.dispatch(postsActionCreators.loadPosts(0, 8));
+    this.loading$ = this.store.select(selectPostsLoading);
+    this.posts$ = this.store.select(selectAllPosts);
+    this.lastCheckedId$ = this.store.select(selectPostsLastCheckedId);
+  }
+
+  editPost(id: number) {
+    this.store.dispatch(routerActionCreators.go({ path: ['/posts', id] }));
+  }
+
+  loadMorePosts() {
+    this.lastCheckedId$
+      .pipe(
+        first(),
+        tap(id => this.store.dispatch(postsActionCreators.loadPosts(id - 1, 8)))
+      )
+      .subscribe();
+  }
+}

src/app/posts/guards/post-loaded.guard.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
+import {
+  catchError,
+  filter,
+  first,
+  map,
+  switchMap,
+  tap,
+  withLatestFrom
+} from 'rxjs/operators';
+import {
+  postsActionCreators,
+  selectCurrentPost
+} from '../../store/posts-store';
+import { State } from '../../store/root-state';
+import { selectRouterState } from '../../store/router-store';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PostLoadedGuard implements CanActivate {
+  constructor(private store: Store<State>) {}
+
+  canActivate(): Observable<boolean> {
+    return this.checkStore().pipe(
+      switchMap(() => of(true)),
+      catchError(() => of(false))
+    );
+  }
+
+  checkStore(): Observable<boolean> {
+    return this.store.select(selectCurrentPost).pipe(
+      withLatestFrom(this.store.select(selectRouterState)),
+      tap(([post, router]) => {
+        if (!post) {
+          this.store.dispatch(
+            postsActionCreators.syncPost(router.state.params.postId)
+          );
+        }
+      }),
+      map(([post, router]) => !!post),
+      filter(post => post),
+      first()
+    );
+  }
+}