refactoring

Author: rmatovu987

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "image-upload": {
+    "post-creator": {
       "projectType": "application",
       "schematics": {},
       "root": "",
@@ -13,7 +13,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/image-upload",
+            "outputPath": "dist/post-creator",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -65,18 +65,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "image-upload:build:production"
+              "browserTarget": "post-creator:build:production"
             },
             "development": {
-              "browserTarget": "image-upload:build:development"
+              "browserTarget": "post-creator:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "image-upload:build"
+            "browserTarget": "post-creator:build"
           }
         },
         "test": {
@@ -100,5 +100,5 @@
       }
     }
   },
-  "defaultProject": "image-upload"
+  "defaultProject": "post-creator"
 }

backend/app.js

@@ -1,17 +1,18 @@
 const express = require("express");
 const parser = require("body-parser");
 const mongoose = require("mongoose");
-const Post = require("./models/post");
 
-require('dotenv/config');
+const postsRoutes = require("./routes/posts");
+
+require("dotenv/config");
 
 const app = express();
 
 mongoose
-  .connect(
-    process.env.DB_CONNECTION,
-    { useNewUrlParser: true, useUnifiedTopology: true }
-  )
+  .connect(process.env.DB_CONNECTION, {
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+  })
   .then(() => {
     console.log("Connected to database!");
   })
@@ -34,38 +35,6 @@ app.use((req, res, next) => {
   next();
 });
 
-app.get("/api/posts", (req, res) => {
-  Post.find()
-    .then((posts) => {
-      res.status(200).json({
-        message: "Posts fetched successfully",
-        data: posts,
-      });
-    })
-    .catch((err) => {
-      console.log(err);
-    });
-});
-
-app.post("/api/posts", (req, res) => {
-  const post = new Post({
-    title: req.body.title,
-    content: req.body.content,
-  });
-  post.save();
-
-  res.status(201).json({
-    message: "Post saved successfully",
-  });
-});
-
-app.delete("/api/posts/:id", (req, res) => {
-  Post.deleteOne({_id : req.params.id}).then(()=>{
-    res.status(200).json({ message: "Post deleted succesffully" });
-  }).catch((err)=>{
-    console.log(err)
-  });
-
-});
+app.use('/api/posts', postsRoutes);
 
 module.exports = app;

backend/routes/posts.js

@@ -0,0 +1,71 @@
+const express = require('express')
+const Post = require("../models/post");
+
+const router = express.Router()
+
+router.get("", (req, res) => {
+  Post.find()
+    .then((posts) => {
+      res.status(200).json({
+        message: "Posts fetched successfully",
+        data: posts,
+      });
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+});
+
+router.get("/:id", (req, res) => {
+  Post.findById(req.params.id)
+    .then((post) => {
+      res.status(200).json({
+        message: "Posts fetched successfully",
+        data: post,
+      });
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+});
+
+router.post("", (req, res) => {
+  const post = new Post({
+    title: req.body.title,
+    content: req.body.content,
+  });
+  post.save();
+
+  res.status(201).json({
+    message: "Post saved successfully",
+  });
+});
+
+router.put("/:id", (req, res) => {
+  const post = new Post({
+    _id: req.params.id,
+    title: req.body.title,
+    content: req.body.content,
+  });
+
+  Post.updateOne({ _id: req.params.id }, post)
+    .then(() => {
+      res.status(201).json({
+        message: "Post updated successfully",
+      });
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+});
+
+router.delete("/:id", (req, res) => {
+  Post.deleteOne({_id : req.params.id}).then(()=>{
+    res.status(200).json({ message: "Post deleted succesffully" });
+  }).catch((err)=>{
+    console.log(err)
+  });
+
+});
+
+module.exports = router;

karma.conf.js

@@ -25,7 +25,7 @@ module.exports = function (config) {
       suppressAll: true // removes the duplicated traces
     },
     coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/image-upload'),
+      dir: require('path').join(__dirname, './coverage/post-creator'),
       subdir: '.',
       reporters: [
         { type: 'html' },

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "image-upload",
+  "name": "post-creator",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",

package.json

@@ -6,6 +6,7 @@ import { PostListComponent } from './posts/post-list/post-list.component';
 export const routes: Routes = [
   { path: '', component: PostListComponent },
   { path: 'new', component: PostCreateComponent },
+  { path: 'edit/:id', component: PostCreateComponent },
 ];
 
 @NgModule({

src/app/app-routing.module.ts

@@ -16,16 +16,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'image-upload'`, () => {
+  it(`should have as title 'post-creator'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('image-upload');
+    expect(app.title).toEqual('post-creator');
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('image-upload app is running!');
+    expect(compiled.querySelector('.content span')?.textContent).toContain('post-creator app is running!');
   });
 });

src/app/app.component.spec.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-  title = 'image-upload';
+  title = 'post-creator';
 }

src/app/app.component.ts

@@ -8,6 +8,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -28,7 +29,8 @@ import { PostListComponent } from './posts/post-list/post-list.component';
     MatCardModule,
     MatButtonModule,
     MatToolbarModule,
-    MatExpansionModule
+    MatExpansionModule,
+    MatProgressSpinnerModule
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/app.module.ts

@@ -2,3 +2,7 @@ mat-form-field,
 textarea{
   width: 100%;
 }
+
+mat-spinner{
+  margin: auto;
+}

src/app/posts/post-create/post-create.component.css

@@ -1,19 +1,20 @@
 <mat-card>
-  <form (submit)="onSavePost(postForm)" #postForm="ngForm">
+  <mat-spinner *ngIf="isLoading"></mat-spinner>
+  <form (submit)="onSavePost(postForm)" #postForm="ngForm" *ngIf="!isLoading">
     <mat-form-field appearance="fill">
       <mat-label>Title</mat-label>
-      <input matInput type="text" ngModel name="title" required #title="ngModel"/>
+      <input matInput type="text" [ngModel]="post?.title" name="title" required #title="ngModel"/>
       <mat-error *ngIf="title.invalid">Please enter a title</mat-error>
     </mat-form-field>
 
     <mat-form-field appearance="fill">
       <mat-label>Content</mat-label>
-      <textarea matInput ngModel name="content" required  #content="ngModel"></textarea>
+      <textarea matInput [ngModel]="post?.content" name="content" required  #content="ngModel"></textarea>
       <mat-error *ngIf="content.invalid">Please enter the content</mat-error>
     </mat-form-field>
 
     <button mat-raised-button color="primary" type="submit">
-      Save Post
+      {{ post ? 'Update Post' : 'Save Post' }}
     </button>
   </form>
 </mat-card>

src/app/posts/post-create/post-create.component.html

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { NgForm } from '@angular/forms';
+import { ActivatedRoute, ParamMap } from '@angular/router';
 import { PostsService } from '../posts.service';
 import { Post } from './../post.model';
 
@@ -9,10 +10,29 @@ import { Post } from './../post.model';
   styleUrls: ['./post-create.component.css'],
 })
 export class PostCreateComponent implements OnInit {
+  id: string;
+  post: Post;
+  isLoading = false;
 
-  constructor(public postService: PostsService) {}
+  constructor(public postService: PostsService, public route: ActivatedRoute) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.route.paramMap.subscribe((paramMap: ParamMap) => {
+      if (paramMap.has('id')) {
+        this.isLoading = true;
+        this.id = paramMap.get('id');
+        this.postService.getPostDetails(this.id).subscribe({
+          next: (data: any) => {
+            this.post = data.data;
+          },
+          error: (err: any) => {
+            console.log(err);
+          },
+          complete: () => {this.isLoading=false},
+        });
+      }
+    });
+  }
 
   onSavePost(form: NgForm) {
     if (form.valid) {
@@ -22,9 +42,13 @@ export class PostCreateComponent implements OnInit {
         content: form.value.content,
       };
 
-      this.postService.addPost(post)
+      if (this.id != null || this.id != undefined) {
+        this.postService.updatePost(this.id, post);
+      } else {
+        this.postService.addPost(post);
+      }
 
-      form.resetForm()
+      form.resetForm();
     }
   }
 }

src/app/posts/post-create/post-create.component.ts

@@ -6,3 +6,7 @@
 .info-text{
   text-align: center;
 }
+
+mat-spinner{
+  margin: auto;
+}

src/app/posts/post-list/post-list.component.css

@@ -1,4 +1,7 @@
-<mat-accordion multi="true" *ngIf="posts.length > 0">
+<mat-spinner *ngIf="isLoading"></mat-spinner>
+
+
+<mat-accordion multi="true" *ngIf="posts.length > 0  && !isLoading">
   <mat-expansion-panel *ngFor="let post of posts">
     <mat-expansion-panel-header>
       <mat-panel-title>
@@ -7,10 +10,10 @@
     </mat-expansion-panel-header>
     <p>{{post.content}}</p>
     <mat-action-row>
-      <button mat-button color="primary">EDIT</button>
+      <button [routerLink]="['/edit', post.id]" routerLinkActive="router-link-active"  mat-button color="primary">EDIT</button>
       <button mat-button color="warn" (click)="onDelete(post.id)">DELETE</button>
     </mat-action-row>
   </mat-expansion-panel>
 </mat-accordion>
 
-<p class="mat-body-2 info-text" *ngIf="posts.length < 1">No posts added yet</p>
+<p class="mat-body-2 info-text" *ngIf="posts.length < 1 && !isLoading">No posts added yet</p>