Handle side effects

dear-diary-angular/package.json

@@ -14,10 +14,15 @@
     "@angular/common": "^14.2.0",
     "@angular/compiler": "^14.2.0",
     "@angular/core": "^14.2.0",
+    "@angular/fire": "^7.5.0",
     "@angular/forms": "^14.2.0",
     "@angular/platform-browser": "^14.2.0",
     "@angular/platform-browser-dynamic": "^14.2.0",
     "@angular/router": "^14.2.0",
+    "@ngrx/effects": "^14.3.3",
+    "@ngrx/store": "^14.3.3",
+    "@ngrx/store-devtools": "^14.3.3",
+    "firebase": "^9.17.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

dear-diary-angular/src/app/app.component.css

@@ -1,5 +1,5 @@
-.background{
-    min-height: 97vh;
-    background-position: center;
-    background-size: cover;
-}
+.background {
+  min-height: 97vh;
+  background-position: center;
+  background-size: cover;
+}

dear-diary-angular/src/app/app.module.ts

@@ -1,12 +1,19 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { SignInPageComponent } from './containers/sign-in-page/sign-in-page.component';
 import { HomePageComponent } from './containers/home-page/home-page.component';
 import { DiaryCardComponent } from './components/diary-card/diary-card.component';
+import { StoreModule } from '@ngrx/store';
+import { environment } from 'src/environments/environment';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { EffectsModule } from '@ngrx/effects';
+import { cardReducer } from './store/reducers/card.reducers';
+import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
+import { getFirestore, provideFirestore } from '@angular/fire/firestore';
+import { HomePageEffects } from './store/effects/card.effects';
 
 @NgModule({
   declarations: [
@@ -15,7 +22,25 @@ import { DiaryCardComponent } from './components/diary-card/diary-card.component
     HomePageComponent,
     DiaryCardComponent,
   ],
-  imports: [BrowserModule, AppRoutingModule, ReactiveFormsModule],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    ReactiveFormsModule,
+
+    provideFirebaseApp(() => initializeApp(environment.firebase)),
+    provideFirestore(() => getFirestore()),
+
+    StoreModule.forRoot({ cards: cardReducer }),
+
+    EffectsModule.forRoot([HomePageEffects]),
+
+    StoreDevtoolsModule.instrument({
+      maxAge: 25,
+      logOnly: environment.production,
+      autoPause: true,
+    }),
+  ],
+
   providers: [],
   bootstrap: [AppComponent],
 })

dear-diary-angular/src/app/components/diary-card/diary-card.component.css

@@ -31,4 +31,6 @@
   left: 13rem;
   position: relative;
   cursor: pointer;
+  color: #78398b;
+  font-weight: bold;
 }

dear-diary-angular/src/app/components/diary-card/diary-card.component.ts

@@ -1,31 +1,25 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { cardDetails } from 'src/app/models/cardDetails';
 @Component({
   selector: 'app-diary-card',
   templateUrl: './diary-card.component.html',
   styleUrls: ['./diary-card.component.css'],
 })
 export class DiaryCardComponent implements OnInit {
-  card:cardDetails;
-  isLarge:boolean=false;
+  @Input()
+  card!: cardDetails;
+  isLarge: boolean = false;
   showMore: boolean = false;
-
-  constructor() {
-    this.card = {
-      title: 'hello',
-      userName: 'lahiru',
-      description:
-        'a lifecycle that starts when Angular instantiates lifecycle that starts pppp  instantiates lifecycle that starts pppp instantiates lifecycle that starts pppp',
-    };
-  }
+
+  constructor() {}
 
   ngOnInit(): void {
     console.log(this.card?.description.length);
-    this.isLarge = this.card?.description.length>100 ? true : false
-    this.showMore = true
+    this.isLarge = this.card?.description.length > 100 ? true : false;
+    this.showMore = true;
   }
 
-  showMoreAction(): void {  
+  showMoreAction(): void {
     this.showMore = this.showMore ? false : true;
   }
 }

dear-diary-angular/src/app/containers/home-page/home-page.component.css

@@ -0,0 +1,86 @@
+.mainArea {
+  background-color: rgb(59, 165, 202);
+  height: 100%;
+  width: 100%;
+}
+.navbar {
+  position: fixed;
+  height: 3rem;
+  background-color: #00bcd4;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.contentA {
+  display: flex;
+  justify-content: center;
+}
+.inputFields {
+  /* background-color: #f1f6f7;
+  height: max-content;
+  width: 96%;
+  border-radius: 10px;
+  top: 4rem;
+  position: relative;
+  display: inline; */
+
+      background-color: #f1f6f7;
+    width: 96%;
+    border-radius: 10px;
+    top: 4rem;
+    margin: 4% 0% 2% 0%;
+}
+.titleInput {
+  margin: 1% 2% 1% 2%;
+  height: 2rem;
+  min-width: 22rem;
+  border: 1px solid black;
+  border-radius: 15px;
+  padding-left: 1%;
+  transition: width 1s;
+}
+#descInput {
+  margin: 1% 2% 1% 2%;
+  height: 40%;
+  width: 87rem;
+  border: 1px solid black;
+  border-radius: 15px;
+  padding: 1%;
+  transition: height 1s;
+}
+.lable {
+  margin-left: 2rem;
+  margin-top: 1%;
+}
+.submitBtn {
+  border-radius: 15px;
+  background-color: #14a5dd;
+  height: 2rem;
+  color: white;
+  font-size: 16px;
+  border: 1px solid #14a5dd;
+  width: max-content;
+  position: relative;
+  cursor: pointer;
+}
+
+.cardsArea {
+  width: 95%;
+  height: max-content;
+  display: inline-flex;
+  flex-direction: row;
+  background-color: rgb(59, 165, 202);
+  border: 1px solid rgb(59, 165, 202);
+  border-radius: 10px;
+  margin-bottom: 2%;
+  top: 5rem;
+  margin-left: 3%;
+  padding: 8px;
+  flex-wrap: wrap;
+}
+.card {
+  margin-top: 1%;
+   margin-left: 2%;
+  display: inline-block;
+}

dear-diary-angular/src/app/containers/home-page/home-page.component.html

@@ -1,5 +1,39 @@
-<p>home-page works!</p>
-<div>
-<app-diary-card></app-diary-card>
+<div class="mainArea">
+  <div class="navbar">
+    <h4 class="pageName">DIARY HOME</h4>
+  </div>
 
-</div>
+  <div class="contentA">
+    <div class="inputFields">
+      <h2 class="lable" (click)="expand = false">Home</h2>
+      <input
+        type="text"
+        placeholder="Title"
+        class="titleInput"
+        (click)="expand = true"
+        [style.width]="expand ? '82rem' : '20rem'"
+        [formControl]="titleTxt"
+      />
+      <button
+        class="submitBtn"
+        [style.display]="expand ? 'inline' : 'none'"
+        (click)="submitBtnAction()"
+      >
+        Submit
+      </button>
+      <textarea
+        name="Description"
+        placeholder="Description"
+        id="descInput"
+        cols="30"
+        rows="10"
+        [style.display]="expand ? 'inline' : 'none'"
+        [formControl]="descTxt"
+      ></textarea>
+    </div>
+  </div>
+
+  <div class="cardsArea" >
+    <app-diary-card class="card"[card]="card" *ngFor="let card of cards| async" ></app-diary-card>
+  </div>
+</div>

dear-diary-angular/src/app/containers/home-page/home-page.component.ts

@@ -1,15 +1,56 @@
 import { Component, OnInit } from '@angular/core';
-
+import { cardDetails } from 'src/app/models/cardDetails';
+import { FormControl, Validators } from '@angular/forms';
+import { select, Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { DiaryCard } from 'src/app/store/types/DiaryCard';
+import {
+  addCard,
+  addCardSuccess,
+  getCards,
+} from 'src/app/store/actions/card.action';
+import { selectCards } from 'src/app/store/selectors/card.selectors';
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
-  styleUrls: ['./home-page.component.css']
+  styleUrls: ['./home-page.component.css'],
 })
 export class HomePageComponent implements OnInit {
+  titleTxt = new FormControl('', Validators.required);
+  descTxt = new FormControl('', Validators.required);
+  card: cardDetails | undefined;
+  expand: boolean = false;
+
+  public cards: Observable<cardDetails[]> = this.store.pipe(
+    select(selectCards)
+  );
 
-  constructor() { }
+  constructor(private store: Store<{ DiaryCard: any }>) {}
 
   ngOnInit(): void {
+    this.titleTxt.setValue(this.titleTxt.value);
+    this.descTxt.setValue(this.descTxt.value);
+    this.store.dispatch(getCards());
   }
 
+  submitBtnAction(): void {
+    this.expand = false;
+
+    if (this.titleTxt.value != '' && this.descTxt.value != '') {
+      const card = {
+        title: this.titleTxt.value,
+        userName: localStorage.getItem('username'),
+        description: this.descTxt.value,
+      } as cardDetails;
+
+      this.store.dispatch(addCard({ card }));
+    } else if (this.titleTxt.value == '') {
+      console.log('Missing title !');
+    } else {
+      console.log('Missing description !');
+    }
+
+    this.titleTxt.setValue('');
+    this.descTxt.setValue('');
+  }
 }

dear-diary-angular/src/app/containers/sign-in-page/sign-in-page.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 @Component({
@@ -8,7 +8,8 @@ import { Router } from '@angular/router';
 })
 export class SignInPageComponent implements OnInit {
   public disabled: boolean = true;
-  userName = new FormControl('', Validators.required);
+  @Input()
+  public userName = new FormControl('', Validators.required);
 
   constructor(private router: Router) {}
 
@@ -26,6 +27,9 @@ export class SignInPageComponent implements OnInit {
 
   logInAction(): void {
     console.log(this.userName.value);
-    this.router.navigate(['/home']);
+    if (this.userName.value !== null) {
+      this.router.navigate(['/home']);
+      localStorage.setItem('username', this.userName.value);
+    }
   }
 }

dear-diary-angular/src/app/services/homePage.services.ts

@@ -0,0 +1,54 @@
+import {
+  CollectionReference,
+  DocumentData,
+  addDoc,
+  collection,
+  onSnapshot,
+  doc,
+  Firestore,
+  query,
+  orderBy,
+} from '@angular/fire/firestore';
+
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { cardDetails } from '../models/cardDetails';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HomePageService {
+  cards: cardDetails[] = [];
+  cardsCollection: CollectionReference<DocumentData>;
+
+  constructor(firestore: Firestore) {
+    this.cardsCollection = collection(firestore, 'Post');
+  }
+
+  getAll(): Observable<cardDetails[]> {
+    return new Observable((observer) => {
+      const qry = query(this.cardsCollection, orderBy('time'));
+      onSnapshot(qry, (snapshot) => {
+        const cards: any[] = snapshot.docs.map((doc) => ({
+          id: doc.id,
+          ...doc.data(),
+        }));
+        console.log('cards ', cards);
+        observer.next(cards);
+      });
+    });
+  }
+
+  add(card: cardDetails) {
+    const date = new Date();
+    return new Observable((observer) => {
+      addDoc(this.cardsCollection, {
+        time: date,
+        userName: card.userName,
+        title: card.title,
+        description: card.description,
+      });
+      observer.next();
+    });
+  }
+}