updates

Author: rmatovu987

.gitignore

@@ -36,6 +36,7 @@ yarn-error.log
 /libpeerconnection.log
 testem.log
 /typings
+.env
 
 # System files
 .DS_Store

backend/app.js

@@ -3,11 +3,13 @@ const parser = require("body-parser");
 const mongoose = require("mongoose");
 const Post = require("./models/post");
 
+require('dotenv/config');
+
 const app = express();
 
 mongoose
   .connect(
-    "mongodb+srv://rmatovu987:arkounts@cluster0.rcg5o9d.mongodb.net/posts?retryWrites=true&w=majority",
+    process.env.DB_CONNECTION,
     { useNewUrlParser: true, useUnifiedTopology: true }
   )
   .then(() => {

package-lock.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
     "body-parser": "^1.20.0",
+    "dotenv": "^16.0.1",
     "express": "^4.18.1",
     "mongoose": "^6.4.5",
     "rxjs": "~7.5.0",

package.json

@@ -5,10 +5,11 @@ import { PostListComponent } from './posts/post-list/post-list.component';
 
 export const routes: Routes = [
   { path: '', component: PostListComponent },
-  { path: 'new', component:PostCreateComponent}
+  { path: 'new', component: PostCreateComponent },
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)]
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
 })
 export class AppRoutingModule {}

src/app/app-routing.module.ts

@@ -1,6 +1,5 @@
 <app-header></app-header>
 <main>
-  <app-post-create></app-post-create>
-  <app-post-list></app-post-list>
+  <router-outlet></router-outlet>
 </main>
 

src/app/app.component.html

@@ -2,6 +2,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { AppRoutingModule } from './app-routing.module';
 
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -19,6 +20,7 @@ import { PostListComponent } from './posts/post-list/post-list.component';
   declarations: [AppComponent, PostCreateComponent, HeaderComponent, PostListComponent],
   imports: [
     BrowserModule,
+    AppRoutingModule,
     FormsModule,
     HttpClientModule,
     BrowserAnimationsModule,

src/app/app.module.ts

@@ -0,0 +1,15 @@
+ul{
+  display: block;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+a{
+  text-decoration: none;
+  color: white;
+}
+
+.spacer{
+  flex: 1 1 auto;
+}

src/app/header/header.component.css

@@ -1 +1,8 @@
-<mat-toolbar color="primary">My Messages</mat-toolbar>
+<mat-toolbar color="primary">
+  <span><a [routerLink]="['/']" routerLinkActive="router-link-active" >My Messages</a></span>
+  <span class="spacer"></span>
+  <ul>
+    <li><a mat-button [routerLink]="['/']" routerLinkActive="router-link-active" >Home</a></li>
+    <li><a mat-button [routerLink]="['/new']" routerLinkActive="router-link-active" >New Post</a></li>
+  </ul>
+</mat-toolbar>