[feat] create post and interface adjustments

apps/web/src/app/app.routes.ts

@@ -16,6 +16,11 @@ export const appRoutes: Route[] = [
         loadChildren: () =>
           import('./modules/user/user.module').then((m) => m.UserModule),
       },
+      {
+        path: 'post',
+        loadChildren: () =>
+          import('./modules/post/post.module').then((m) => m.PostModule)
+      }
     ],
   },
 ];

apps/web/src/app/core/interfaces/like.interface.ts

@@ -0,0 +1,9 @@
+import { Post } from "./post.interface";
+import { User } from "./user.interface";
+
+export interface Like {
+  id: string;
+  user: User;
+  post: Post;
+  createdAt?: Date;
+}

apps/web/src/app/core/interfaces/loginResponse.interface.ts

@@ -0,0 +1,7 @@
+import { User } from "./user.interface";
+
+export interface LoginResponse {
+  accessToken: string;
+  refreshToken: string;
+  user: User;
+}

apps/web/src/app/core/interfaces/post.interface.ts

@@ -0,0 +1,16 @@
+import { Like } from "./like.interface";
+import { Topic } from "./topic.interface";
+import { User } from "./user.interface";
+
+export interface Post {
+  id: string;
+  title: string;
+  content: string;
+  published: boolean;
+  author?: User;
+  topics?: Topic[];
+  like?: Like;
+  likes?: Like[];
+  createdAt?: Date;
+  updatedAt?: Date;
+}

apps/web/src/app/core/interfaces/refreshToken.interface.ts

@@ -0,0 +1,4 @@
+export interface RefreshTokenResponse {
+  accessToken: string;
+  refreshToken: string;
+}

apps/web/src/app/core/interfaces/registerResponse.interface.ts

@@ -0,0 +1,7 @@
+export interface RegisterResponse {
+  id: string;
+  email: string;
+  name: string;
+  createdAt: Date;
+  updatedAt: Date;
+}

apps/web/src/app/core/interfaces/topic.interface.ts

@@ -0,0 +1,10 @@
+import { Post } from "./post.interface";
+
+export interface Topic {
+  id: string;
+  label: string;
+  posts?: Post[];
+  selected?: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}

apps/web/src/app/core/interfaces/user.interface.ts

@@ -0,0 +1,5 @@
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+}

apps/web/src/app/core/services/auth/auth.service.ts

@@ -1,6 +1,10 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { environment } from '@web/environments/environment';
+import { LoginResponse } from '../../interfaces/loginResponse.interface';
+import { RefreshTokenResponse } from '../../interfaces/refreshToken.interface';
+import { RegisterResponse } from '../../interfaces/registerResponse.interface';
+import { User } from '../../interfaces/user.interface';
 
 @Injectable({ providedIn: 'root' })
 export class AuthService {
@@ -72,28 +76,3 @@ export class AuthService {
     localStorage.removeItem('refreshToken');
   }
 }
-
-export interface User {
-  id: string;
-  email: string;
-  name: string;
-}
-
-export interface RefreshTokenResponse {
-  accessToken: string;
-  refreshToken: string;
-}
-
-export interface LoginResponse {
-  accessToken: string;
-  refreshToken: string;
-  user: User;
-}
-
-export interface RegisterResponse {
-  id: string;
-  email: string;
-  name: string;
-  createdAt: Date;
-  updatedAt: Date;
-}

apps/web/src/app/core/services/post/post.service.ts

@@ -1,13 +1,14 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Topic, User } from '@web/app/core/services';
 import { environment } from '@web/environments/environment';
+import { Post } from '../../interfaces/post.interface';
+import { Like } from '../../interfaces/like.interface';
 
 @Injectable({ providedIn: 'root' })
 export class PostService {
   private readonly apiUrl = environment.apiUrl;
 
-  constructor(private readonly httpClient: HttpClient) {}
+  constructor(private readonly _httpClient: HttpClient) {}
 
   public getPosts(
     search: {
@@ -20,34 +21,31 @@ export class PostService {
     let params: any = { skip: search.skip, take: search.take };
     if (search.keywords) params = { ...params, keywords: search.keywords };
     if (search.topics) params = { ...params, topics: search.topics };
-    return this.httpClient.get<Post[]>(`${this.apiUrl}/post`, { params });
+    return this._httpClient.get<Post[]>(`${this.apiUrl}/post`, { params });
+  }
+
+  public getPostById(id: string) {
+    return this._httpClient.get<Post>(`${this.apiUrl}/post/${id}`);
   }
 
   public like(post: { id: string }) {
-    return this.httpClient.post<Like>(`${this.apiUrl}/like`, { post });
+    return this._httpClient.post<Like>(`${this.apiUrl}/like`, { post });
   }
 
   public unlike(likeId: string) {
-    return this.httpClient.delete(`${this.apiUrl}/like/${likeId}`);
+    return this._httpClient.delete(`${this.apiUrl}/like/${likeId}`);
   }
-}
 
-export interface Post {
-  id: string;
-  title: string;
-  content: string;
-  published: boolean;
-  author?: User;
-  topics?: Topic[];
-  like?: Like;
-  likes?: Like[];
-  createdAt?: Date;
-  updatedAt?: Date;
-}
+  public createPost(post : Post){
+    return this._httpClient.post<Post>(`${this.apiUrl}/post`, post)
+  }
 
-export interface Like {
-  id: string;
-  user: User;
-  post: Post;
-  createdAt?: Date;
+  public deletePost(postId: string){
+    return this._httpClient.delete(`${this.apiUrl}/post/${postId}`)
+  }
+
+  public editPost(postId:string, post: Post){
+    return this._httpClient.put<Post>(`${this.apiUrl}/post/${postId}`, post)
+  }
 }
+

apps/web/src/app/core/services/topic/topic.service.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Post } from '@web/app/core/services';
 import { environment } from '@web/environments/environment';
+import { Topic } from '../../interfaces/topic.interface';
 
 @Injectable({ providedIn: 'root' })
 export class TopicService {
@@ -13,12 +13,3 @@ export class TopicService {
     return this.httpClient.get<Topic[]>(`${this.apiUrl}/topic`);
   }
 }
-
-export interface Topic {
-  id: string;
-  label: string;
-  posts?: Post[];
-  selected?: boolean;
-  createdAt: Date;
-  updatedAt: Date;
-}

apps/web/src/app/modules/home/components/post/post.component.html

@@ -1,4 +1,4 @@
-<a class="nexus-post" [routerLink]="['/']">
+<a class="nexus-post">
   <header class="nexus-post__header">
     <div class="nexus-post__author">
       <span class="nexus-post__author-picture">
@@ -13,7 +13,7 @@
     </div>
   </header>
   <section class="nexus-post__section">
-    <h2 class="nexus-post__title">{{ data.title }}</h2>
+    <a [routerLink]="['/post/' + data.id]"><h2 class="nexus-post__title">{{ data.title }}</h2></a>
     <p class="nexus-post__content-preview" [innerHTML]="data.content"></p>
   </section>
   <footer class="nexus-post__footer">

apps/web/src/app/modules/home/components/post/post.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Like, Post } from '@web/app/core/services/post/post.service';
+import { Like } from '@web/app/core/interfaces/like.interface';
+import { Post } from '@web/app/core/interfaces/post.interface';
 
 @Component({
   selector: 'nexus-post',

apps/web/src/app/modules/home/components/topic/topic.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Topic } from '@web/app/core/services';
+import { Topic } from '@web/app/core/interfaces/topic.interface';
 
 @Component({
   selector: 'nexus-topic',

apps/web/src/app/modules/home/home.component.html

@@ -94,7 +94,7 @@ <h5 class="nexus-home__contributors-title">Meet the contributors</h5>
     </div>
   </aside>
 </section>
-<button class="nexus-home__create-post" *ngIf="isLoggedIn">
+<button class="nexus-home__create-post" *ngIf="isLoggedIn" routerLink="/post">
   Create post
   <svg
     xmlns="http://www.w3.org/2000/svg"

apps/web/src/app/modules/home/home.component.ts

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import { Post } from '@web/app/core/interfaces/post.interface';
+import { Topic } from '@web/app/core/interfaces/topic.interface';
 import {
   AuthService,
-  Post,
   PostService,
   SearchService,
-  Topic,
   TopicService,
 } from '@web/app/core/services';
 import { throwError } from 'rxjs';

apps/web/src/app/modules/post/components/create-post-toolbar/create-post-toolbar.component.html

@@ -0,0 +1,7 @@
+<div class="nexus-toolbar">
+  <header class="nexus-toolbar_header">
+    <h1 class="nexus-toolbar_title">Enter you knowledge</h1>
+    <p class="nexus-toolbar_description">Share with the community your ideas, and let us know everything that you want!</p>
+    <h2 class="nexus-toolbar_subtitle  tracking-in-expand">Be creative!</h2>
+  </header>
+</div>

apps/web/src/app/modules/post/components/create-post-toolbar/create-post-toolbar.component.scss

@@ -0,0 +1,34 @@
+.nexus-toolbar{
+  @apply w-full
+  mx-auto
+  text-lg
+  min-h-[1vh];
+
+
+  &_header{
+    @apply mb-5
+    p-1;
+  }
+
+  &_title{
+    @apply text-primary
+    flex
+    font-bold
+    text-center;
+  }
+
+  &_description {
+    @apply text-lg
+    text-justify;
+  }
+
+  &_subtitle{
+    @apply text-primary
+    text-center
+    font-bold
+    pt-5;
+  }
+}
+
+@keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}
+.tracking-in-expand{animation:tracking-in-expand .7s cubic-bezier(.215,.61,.355,1.000) both}

apps/web/src/app/modules/post/components/create-post-toolbar/create-post-toolbar.component.spec.ts

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

apps/web/src/app/modules/post/components/create-post-toolbar/create-post-toolbar.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nexus-create-post-toolbar',
+  templateUrl: './create-post-toolbar.component.html',
+  styleUrls: ['./create-post-toolbar.component.scss'],
+})
+export class CreatePostToolbarComponent {}

apps/web/src/app/modules/post/components/create-post/create-post.component.html

@@ -0,0 +1,24 @@
+<div [ngClass]="{'scale-out-center': addScaleOutClass}">
+  <form [formGroup]="post" class="nexus-create_form">
+    <input type="text" placeholder="Insert title" formControlName="title" class="nexus-create_title"/>
+    <ul class="nexus-create_topics">
+      <li *ngFor="let topic of topics">
+        <nexus-topic
+          [data]="topic"
+          [disabled]="false"
+          (toggle)="topic.selected = !topic.selected"
+        ></nexus-topic>
+      </li>
+    </ul>
+    <div class="nexus-create_content">
+      <ckeditor
+        [editor]="editor"
+        [config]="config"
+        formControlName="content"
+      ></ckeditor>
+    </div>
+    <div class="nexus-create_footer">
+      <button type="submit" class="nexus-create_submit" (click)="submit()">Submit</button>
+    </div>
+  </form>
+</div>