From db407fc24fd9aa52d0b4cb583e6a546ca0ee4a4b Mon Sep 17 00:00:00 2001
From: marktechson <2554588+MarkTechson@users.noreply.github.com>
Date: Thu, 7 Mar 2024 17:10:35 -0600
Subject: [PATCH 01/10] add refactor of code to use ngFor and ngIf as well as
 become standalone

---
 angularfire-start/src/app/app.component.ts    |  4 ++
 angularfire-start/src/app/app.config.ts       | 12 ++++
 angularfire-start/src/app/app.module.ts       | 43 --------------
 angularfire-start/src/app/app.routes.ts       | 32 ++++++++++
 .../components/header/header.component.html   | 59 ++++++++++---------
 .../app/components/header/header.component.ts |  1 +
 .../pages/chat-page/chat-page.component.html  | 34 +++++++----
 .../pages/chat-page/chat-page.component.ts    |  1 +
 .../pages/login-page/login-page.component.ts  |  1 +
 angularfire-start/src/main.ts                 | 12 ++--
 10 files changed, 108 insertions(+), 91 deletions(-)
 create mode 100644 angularfire-start/src/app/app.config.ts
 delete mode 100644 angularfire-start/src/app/app.module.ts
 create mode 100644 angularfire-start/src/app/app.routes.ts

diff --git a/angularfire-start/src/app/app.component.ts b/angularfire-start/src/app/app.component.ts
index e45e9d8ca..678855ded 100644
--- a/angularfire-start/src/app/app.component.ts
+++ b/angularfire-start/src/app/app.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
+import { HeaderComponent } from './components/header/header.component';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
+  standalone: true,
+  imports: [HeaderComponent, RouterModule],
 })
 export class AppComponent {
   title = 'friendlychat';
diff --git a/angularfire-start/src/app/app.config.ts b/angularfire-start/src/app/app.config.ts
new file mode 100644
index 000000000..5f405a3c6
--- /dev/null
+++ b/angularfire-start/src/app/app.config.ts
@@ -0,0 +1,12 @@
+import { ApplicationConfig } from "@angular/core";
+import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
+import { environment } from '../environments/environment';
+import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
+import { provideFirestore, getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
+import { provideFunctions, getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
+import { provideMessaging, getMessaging } from '@angular/fire/messaging';
+import { provideStorage, getStorage, connectStorageEmulator } from '@angular/fire/storage';
+
+export const appConfig: ApplicationConfig = {
+    providers: [],
+}
\ No newline at end of file
diff --git a/angularfire-start/src/app/app.module.ts b/angularfire-start/src/app/app.module.ts
deleted file mode 100644
index a46708965..000000000
--- a/angularfire-start/src/app/app.module.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
-import { environment } from '../environments/environment';
-import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
-import {
-  provideFirestore,
-  getFirestore,
-  connectFirestoreEmulator,
-} from '@angular/fire/firestore';
-import {
-  provideFunctions,
-  getFunctions,
-  connectFunctionsEmulator,
-} from '@angular/fire/functions';
-import { provideMessaging, getMessaging } from '@angular/fire/messaging';
-import {
-  provideStorage,
-  getStorage,
-  connectStorageEmulator,
-} from '@angular/fire/storage';
-
-import { LoginPageComponent } from './pages/login-page/login-page.component';
-import { ChatPageComponent } from './pages/chat-page/chat-page.component';
-import { HeaderComponent } from './components/header/header.component';
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    LoginPageComponent,
-    ChatPageComponent,
-    HeaderComponent,
-  ],
-  imports: [BrowserModule, AppRoutingModule, CommonModule, FormsModule],
-  providers: [],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
diff --git a/angularfire-start/src/app/app.routes.ts b/angularfire-start/src/app/app.routes.ts
new file mode 100644
index 000000000..1d386138e
--- /dev/null
+++ b/angularfire-start/src/app/app.routes.ts
@@ -0,0 +1,32 @@
+import { RouterModule, Routes } from '@angular/router';
+import {
+  AuthGuard,
+  redirectLoggedInTo,
+  redirectUnauthorizedTo,
+} from '@angular/fire/auth-guard';
+import { LoginPageComponent } from './pages/login-page/login-page.component';
+import { ChatPageComponent } from './pages/chat-page/chat-page.component';
+
+const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
+const redirectLoggedInToHome = () => redirectLoggedInTo(['chat']);
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: LoginPageComponent,
+    canActivate: [AuthGuard],
+    data: { authGuardPipe: redirectLoggedInToHome },
+  },
+  {
+    path: 'login',
+    component: LoginPageComponent,
+    canActivate: [AuthGuard],
+    data: { authGuardPipe: redirectLoggedInToHome },
+  },
+  {
+    path: 'chat',
+    component: ChatPageComponent,
+    canActivate: [AuthGuard],
+    data: { authGuardPipe: redirectUnauthorizedToLogin },
+  },
+];
diff --git a/angularfire-start/src/app/components/header/header.component.html b/angularfire-start/src/app/components/header/header.component.html
index dec33c9c8..88303f04b 100644
--- a/angularfire-start/src/app/components/header/header.component.html
+++ b/angularfire-start/src/app/components/header/header.component.html
@@ -7,37 +7,38 @@
                     Friendly Chat
                 </span>
             </a>
-            <div class="flex flex-wrap items-end auth" *ngIf="user$ | async as user">
-                <div class="flex flex-wrap justify-between text-white">
-                    <img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
-                        [alt]="user?.displayName" />
-                    <span class="text-white text-xl whitespace-nowrap font-light px-4 lg:px-5 py-2 lg:py-2.5">
-                        {{user?.displayName}}
-                    </span>
-                    <div class="dropdown inline-block relative shadow-lg">
-                        <button class=" text-gray-700 py-2 px-4 rounded inline-flex items-center font-semibold">
-                            <img class="w-8 h-8 rounded-full" src="../../../assets/menu.svg" />
-                        </button>
-                        <ul class="dropdown-menu absolute hidden text-gray-700 pt-3 w-48 right-2">
-                            <li class="bg-white p-4 flex-row">
-                                <img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
-                                    [alt]="user?.displayName" />
-                                <span
-                                    class="text-navy-200 text-md whitespace-nowrap px-4 lg:px-5 py-2 lg:py-2.5 mr-6">
-                                    {{user?.displayName}}
-                                </span>
-                            </li>
-                            <li class="">
-                                <a class="bg-white hover:bg-navy-20 py-3 px-4 block whitespace-no-wrap text-navy-500 font-semibold"
-                                    href="/" (click)="this.chatService.logout()">
-                                    Logout
-                                </a>
-                            </li>
-                        </ul>
+            @if(user$ | async as user) {
+                <div class="flex flex-wrap items-end auth">
+                    <div class="flex flex-wrap justify-between text-white">
+                        <img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
+                            [alt]="user?.displayName" />
+                        <span class="text-white text-xl whitespace-nowrap font-light px-4 lg:px-5 py-2 lg:py-2.5">
+                            {{user?.displayName}}
+                        </span>
+                        <div class="dropdown inline-block relative shadow-lg">
+                            <button class=" text-gray-700 py-2 px-4 rounded inline-flex items-center font-semibold">
+                                <img class="w-8 h-8 rounded-full" src="../../../assets/menu.svg" />
+                            </button>
+                            <ul class="dropdown-menu absolute hidden text-gray-700 pt-3 w-48 right-2">
+                                <li class="bg-white p-4 flex-row">
+                                    <img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
+                                        [alt]="user?.displayName" />
+                                    <span
+                                        class="text-navy-200 text-md whitespace-nowrap px-4 lg:px-5 py-2 lg:py-2.5 mr-6">
+                                        {{user?.displayName}}
+                                    </span>
+                                </li>
+                                <li class="">
+                                    <a class="bg-white hover:bg-navy-20 py-3 px-4 block whitespace-no-wrap text-navy-500 font-semibold"
+                                        href="/" (click)="this.chatService.logout()">
+                                        Logout
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
-
-            </div>
+            }
         </div>
     </nav>
 </header>
diff --git a/angularfire-start/src/app/components/header/header.component.ts b/angularfire-start/src/app/components/header/header.component.ts
index 7083da8e9..21d11e701 100644
--- a/angularfire-start/src/app/components/header/header.component.ts
+++ b/angularfire-start/src/app/components/header/header.component.ts
@@ -5,6 +5,7 @@ import { ChatService } from 'src/app/services/chat.service';
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css'],
+  standalone: true,
 })
 export class HeaderComponent {
   chatService = inject(ChatService);
diff --git a/angularfire-start/src/app/pages/chat-page/chat-page.component.html b/angularfire-start/src/app/pages/chat-page/chat-page.component.html
index 7f301d7ba..a36172641 100644
--- a/angularfire-start/src/app/pages/chat-page/chat-page.component.html
+++ b/angularfire-start/src/app/pages/chat-page/chat-page.component.html
@@ -1,24 +1,32 @@
 <div class="min-h-screen h-full w-full bg-navy-30">
     <div class="w-3/4 bg-navy-10 min-h-screen h-full mx-auto flex flex-col flex-grow pb-56">
-        <div *ngFor="let message of (messages$ | async)?.reverse() as messages;">
+        @for (let message of (messages$ | async)?.reverse() as messages; track message) {
+        <div> <!-- TODO: I think this div can be removed-->
             <div class="flex flex-col flex-grow p-4 overflow-scroll space-x-3">
-                <div *ngIf="user$ | async as user">
-                    <div class="flex flex-wrap min-h-[50px] mt-4">
-                        <img class="w-10 h-10 rounded-full" [src]="message['profilePicUrl']"
-                            [alt]="message['name']" />
-                        <span class="text-gray-500 mx-5 my-auto">{{message['name']}}: </span>
-                    </div>
-                    <div class="mt-4 ml-12 p-5 rounded-full max-w-xl bg-amber-200 shadow-lg border-b-2">
-                        <div *ngIf="message['text'] && message['text'].length > 0">
-                            {{message['text']}} 
+                @if (user$ | async as user) {
+                    <div>
+                        <div class="flex flex-wrap min-h-[50px] mt-4">
+                            <img class="w-10 h-10 rounded-full" [src]="message['profilePicUrl']"
+                                [alt]="message['name']" />
+                            <span class="text-gray-500 mx-5 my-auto">{{message['name']}}: </span>
                         </div>
-                        <div *ngIf="message['imageUrl'] && message['imageUrl'].length > 0">
-                            <img class="max-w-[150px]" [src]="message['imageUrl']" alt="image" />
+                        <div class="mt-4 ml-12 p-5 rounded-full max-w-xl bg-amber-200 shadow-lg border-b-2">
+                            @if (message['text'] && message['text'].length > 0){
+                                <div>
+                                    {{message['text']}} 
+                                </div>
+                            }
+                            @if (message['imageUrl'] && message['imageUrl'].length > 0) {
+                                <div>
+                                    <img class="max-w-[150px]" [src]="message['imageUrl']" alt="image" />
+                                </div>
+                            }
                         </div>
                     </div>
-                </div>
+                }
             </div>
         </div>
+    }
     </div>
     <div class="bg-navy-10 w-full shadow-[0_35px_60px_-15px_rgba(0,0,0,1)] min-h-32 h-auto bottom-0 fixed">
         <div class="flex-wrap flex w-5/6 mx-auto">
diff --git a/angularfire-start/src/app/pages/chat-page/chat-page.component.ts b/angularfire-start/src/app/pages/chat-page/chat-page.component.ts
index a6807c1d1..2bb58f02c 100644
--- a/angularfire-start/src/app/pages/chat-page/chat-page.component.ts
+++ b/angularfire-start/src/app/pages/chat-page/chat-page.component.ts
@@ -7,6 +7,7 @@ import { ChatService } from 'src/app/services/chat.service';
   selector: 'app-chat-page',
   templateUrl: './chat-page.component.html',
   styleUrls: ['./chat-page.component.css'],
+  standalone: true,
 })
 export class ChatPageComponent {
   chatService = inject(ChatService);
diff --git a/angularfire-start/src/app/pages/login-page/login-page.component.ts b/angularfire-start/src/app/pages/login-page/login-page.component.ts
index 76cf29153..3ab845fc3 100644
--- a/angularfire-start/src/app/pages/login-page/login-page.component.ts
+++ b/angularfire-start/src/app/pages/login-page/login-page.component.ts
@@ -5,6 +5,7 @@ import { ChatService } from 'src/app/services/chat.service';
   selector: 'app-login-page',
   templateUrl: './login-page.component.html',
   styleUrls: ['./login-page.component.css'],
+  standalone: true,
 })
 export class LoginPageComponent {
   chatService = inject(ChatService);
diff --git a/angularfire-start/src/main.ts b/angularfire-start/src/main.ts
index c58dc05cb..a0dbb2c94 100644
--- a/angularfire-start/src/main.ts
+++ b/angularfire-start/src/main.ts
@@ -1,7 +1,7 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
-import { AppModule } from './app/app.module';
-
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);

From 4ed47d1efdb4642a91ac6e17517b95edd4ee05fe Mon Sep 17 00:00:00 2001
From: marktechson <2554588+MarkTechson@users.noreply.github.com>
Date: Thu, 7 Mar 2024 17:14:45 -0600
Subject: [PATCH 02/10] ng cli upgrade

---
 angularfire-start/angular.json |  6 +++---
 angularfire-start/package.json | 28 ++++++++++++++--------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/angularfire-start/angular.json b/angularfire-start/angular.json
index 2bc599b94..9830cbebd 100644
--- a/angularfire-start/angular.json
+++ b/angularfire-start/angular.json
@@ -63,10 +63,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "friendlychat:build:production"
+              "buildTarget": "friendlychat:build:production"
             },
             "development": {
-              "browserTarget": "friendlychat:build:development"
+              "buildTarget": "friendlychat:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -74,7 +74,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "friendlychat:build"
+            "buildTarget": "friendlychat:build"
           }
         },
         "test": {
diff --git a/angularfire-start/package.json b/angularfire-start/package.json
index b141bca62..ec8bd9561 100644
--- a/angularfire-start/package.json
+++ b/angularfire-start/package.json
@@ -10,23 +10,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.0.0",
-    "@angular/common": "^16.0.0",
-    "@angular/compiler": "^16.0.0",
-    "@angular/core": "^16.0.0",
+    "@angular/animations": "^17.2.4",
+    "@angular/common": "^17.2.4",
+    "@angular/compiler": "^17.2.4",
+    "@angular/core": "^17.2.4",
     "@angular/fire": "^7.6.1",
-    "@angular/forms": "^16.0.0",
-    "@angular/platform-browser": "^16.0.0",
-    "@angular/platform-browser-dynamic": "^16.0.0",
-    "@angular/router": "^16.0.0",
+    "@angular/forms": "^17.2.4",
+    "@angular/platform-browser": "^17.2.4",
+    "@angular/platform-browser-dynamic": "^17.2.4",
+    "@angular/router": "^17.2.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.4",
-    "@angular/cli": "~16.0.4",
-    "@angular/compiler-cli": "^16.0.0",
+    "@angular-devkit/build-angular": "^17.2.3",
+    "@angular/cli": "~17.2.3",
+    "@angular/compiler-cli": "^17.2.4",
     "@types/jasmine": "~4.3.0",
     "autoprefixer": "^10.4.14",
     "jasmine-core": "~4.6.0",
@@ -37,6 +37,6 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "postcss": "^8.4.24",
     "tailwindcss": "^3.3.2",
-    "typescript": "~5.0.2"
+    "typescript": "~5.3.3"
   }
-}
+}
\ No newline at end of file

From 7a99256569b80fbaf3661582ecb696729e5149aa Mon Sep 17 00:00:00 2001
From: marktechson <2554588+MarkTechson@users.noreply.github.com>
Date: Mon, 18 Mar 2024 21:57:29 -0500
Subject: [PATCH 03/10] add updates to support the latest versions of the code

---
 angularfire-start/angular.json                                | 3 ++-
 angularfire-start/package.json                                | 4 ++--
 .../src/app/components/header/header.component.html           | 2 +-
 .../src/app/components/header/header.component.ts             | 2 ++
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/angularfire-start/angular.json b/angularfire-start/angular.json
index 9830cbebd..0173853b8 100644
--- a/angularfire-start/angular.json
+++ b/angularfire-start/angular.json
@@ -2,7 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "npm"
+    "packageManager": "npm",
+    "analytics": false
   },
   "newProjectRoot": "projects",
   "projects": {
diff --git a/angularfire-start/package.json b/angularfire-start/package.json
index ec8bd9561..6fd828e6c 100644
--- a/angularfire-start/package.json
+++ b/angularfire-start/package.json
@@ -14,7 +14,7 @@
     "@angular/common": "^17.2.4",
     "@angular/compiler": "^17.2.4",
     "@angular/core": "^17.2.4",
-    "@angular/fire": "^7.6.1",
+    "@angular/fire": "^17.0.1",
     "@angular/forms": "^17.2.4",
     "@angular/platform-browser": "^17.2.4",
     "@angular/platform-browser-dynamic": "^17.2.4",
@@ -39,4 +39,4 @@
     "tailwindcss": "^3.3.2",
     "typescript": "~5.3.3"
   }
-}
\ No newline at end of file
+}
diff --git a/angularfire-start/src/app/components/header/header.component.html b/angularfire-start/src/app/components/header/header.component.html
index 88303f04b..ceb488707 100644
--- a/angularfire-start/src/app/components/header/header.component.html
+++ b/angularfire-start/src/app/components/header/header.component.html
@@ -7,7 +7,7 @@
                     Friendly Chat
                 </span>
             </a>
-            @if(user$ | async as user) {
+            @if(user$ | async; as user) {
                 <div class="flex flex-wrap items-end auth">
                     <div class="flex flex-wrap justify-between text-white">
                         <img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
diff --git a/angularfire-start/src/app/components/header/header.component.ts b/angularfire-start/src/app/components/header/header.component.ts
index 21d11e701..9b3a9305b 100644
--- a/angularfire-start/src/app/components/header/header.component.ts
+++ b/angularfire-start/src/app/components/header/header.component.ts
@@ -1,3 +1,4 @@
+import { AsyncPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { ChatService } from 'src/app/services/chat.service';
 
@@ -6,6 +7,7 @@ import { ChatService } from 'src/app/services/chat.service';
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css'],
   standalone: true,
+  imports: [AsyncPipe],
 })
 export class HeaderComponent {
   chatService = inject(ChatService);

From 0e67869bd52d4ab99fcd0f1702347aa8f5c29eaf Mon Sep 17 00:00:00 2001
From: marktechson <2554588+MarkTechson@users.noreply.github.com>
Date: Fri, 22 Mar 2024 13:17:07 -0500
Subject: [PATCH 04/10] update repo to use modern Angular. Note this example
 doesn't leverage emulators yet.

---
 angularfire-start/src/app/app.config.ts | 33 ++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/angularfire-start/src/app/app.config.ts b/angularfire-start/src/app/app.config.ts
index 5f405a3c6..437088f84 100644
--- a/angularfire-start/src/app/app.config.ts
+++ b/angularfire-start/src/app/app.config.ts
@@ -1,12 +1,33 @@
-import { ApplicationConfig } from "@angular/core";
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { environment } from '../environments/environment';
 import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
-import { provideFirestore, getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
-import { provideFunctions, getFunctions, connectFunctionsEmulator } from '@angular/fire/functions';
+import {
+  provideFirestore,
+  getFirestore,
+  connectFirestoreEmulator,
+} from '@angular/fire/firestore';
+import {
+  provideFunctions,
+  getFunctions,
+  connectFunctionsEmulator,
+} from '@angular/fire/functions';
 import { provideMessaging, getMessaging } from '@angular/fire/messaging';
-import { provideStorage, getStorage, connectStorageEmulator } from '@angular/fire/storage';
+import {
+  provideStorage,
+  getStorage,
+  connectStorageEmulator,
+} from '@angular/fire/storage';
 
 export const appConfig: ApplicationConfig = {
-    providers: [],
-}
\ No newline at end of file
+  providers: [
+    importProvidersFrom(
+      provideFirebaseApp(() => initializeApp(environment.firebase)),
+      provideFirestore(() => getFirestore()),
+      provideAuth(() => getAuth()),
+      provideFunctions(() => getFunctions()),
+      provideStorage(() => getStorage()),
+      provideMessaging(() => getMessaging())
+    ),
+  ],
+};

From 3aec2a6f1d46567864c7536c1da0b55ab66383a9 Mon Sep 17 00:00:00 2001
From: marktechson <2554588+MarkTechson@users.noreply.github.com>
Date: Mon, 25 Mar 2024 21:53:25 -0500
Subject: [PATCH 05/10] update app to use routing and fix last migration to
 ng17 issue

---
 angularfire-start/src/app/app.config.ts       | 21 ++++++-------------
 .../pages/chat-page/chat-page.component.html  |  4 ++--
 .../pages/chat-page/chat-page.component.ts    |  3 +++
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/angularfire-start/src/app/app.config.ts b/angularfire-start/src/app/app.config.ts
index 437088f84..03ce6427b 100644
--- a/angularfire-start/src/app/app.config.ts
+++ b/angularfire-start/src/app/app.config.ts
@@ -2,22 +2,12 @@ import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { environment } from '../environments/environment';
 import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
-import {
-  provideFirestore,
-  getFirestore,
-  connectFirestoreEmulator,
-} from '@angular/fire/firestore';
-import {
-  provideFunctions,
-  getFunctions,
-  connectFunctionsEmulator,
-} from '@angular/fire/functions';
+import { provideFirestore, getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore';
+import { provideFunctions, getFunctions, connectFunctionsEmulator} from '@angular/fire/functions';
 import { provideMessaging, getMessaging } from '@angular/fire/messaging';
-import {
-  provideStorage,
-  getStorage,
-  connectStorageEmulator,
-} from '@angular/fire/storage';
+import { provideStorage, getStorage, connectStorageEmulator } from '@angular/fire/storage';
+import { routes } from './app.routes';
+import { provideRouter } from '@angular/router';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -29,5 +19,6 @@ export const appConfig: ApplicationConfig = {
       provideStorage(() => getStorage()),
       provideMessaging(() => getMessaging())
     ),
+    provideRouter(routes)
   ],
 };
diff --git a/angularfire-start/src/app/pages/chat-page/chat-page.component.html b/angularfire-start/src/app/pages/chat-page/chat-page.component.html
index a36172641..481d21350 100644
--- a/angularfire-start/src/app/pages/chat-page/chat-page.component.html
+++ b/angularfire-start/src/app/pages/chat-page/chat-page.component.html
@@ -1,9 +1,9 @@
 <div class="min-h-screen h-full w-full bg-navy-30">
     <div class="w-3/4 bg-navy-10 min-h-screen h-full mx-auto flex flex-col flex-grow pb-56">
-        @for (let message of (messages$ | async)?.reverse() as messages; track message) {
+        @for (message of (messages$ | async)?.reverse(); track message) {
         <div> <!-- TODO: I think this div can be removed-->
             <div class="flex flex-col flex-grow p-4 overflow-scroll space-x-3">
-                @if (user$ | async as user) {
+                @if (user$ | async; as user) {
                     <div>
                         <div class="flex flex-wrap min-h-[50px] mt-4">
                             <img class="w-10 h-10 rounded-full" [src]="message['profilePicUrl']"
diff --git a/angularfire-start/src/app/pages/chat-page/chat-page.component.ts b/angularfire-start/src/app/pages/chat-page/chat-page.component.ts
index 2bb58f02c..e22978ad3 100644
--- a/angularfire-start/src/app/pages/chat-page/chat-page.component.ts
+++ b/angularfire-start/src/app/pages/chat-page/chat-page.component.ts
@@ -1,5 +1,7 @@
+import { AsyncPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { DocumentData } from '@angular/fire/firestore';
+import { FormsModule } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { ChatService } from 'src/app/services/chat.service';
 
@@ -8,6 +10,7 @@ import { ChatService } from 'src/app/services/chat.service';
   templateUrl: './chat-page.component.html',
   styleUrls: ['./chat-page.component.css'],
   standalone: true,
+  imports: [AsyncPipe, FormsModule]
 })
 export class ChatPageComponent {
   chatService = inject(ChatService);

From 667977d3c78df84dedde43be0a8c8f7667d68963 Mon Sep 17 00:00:00 2001
From: marktechson <2554588+MarkTechson@users.noreply.github.com>
Date: Fri, 19 Apr 2024 14:14:13 -0500
Subject: [PATCH 06/10] remove last modules and add application builder

---
 angularfire-start/.gitignore                  |  3 ++
 angularfire-start/angular.json                | 35 +++++------------
 .../src/app/app-routing.module.ts             | 39 -------------------
 3 files changed, 12 insertions(+), 65 deletions(-)
 create mode 100644 angularfire-start/.gitignore
 delete mode 100644 angularfire-start/src/app/app-routing.module.ts

diff --git a/angularfire-start/.gitignore b/angularfire-start/.gitignore
new file mode 100644
index 000000000..5768ed1a0
--- /dev/null
+++ b/angularfire-start/.gitignore
@@ -0,0 +1,3 @@
+/node_modules
+/dist
+.angular
diff --git a/angularfire-start/angular.json b/angularfire-start/angular.json
index 0173853b8..489c63e39 100644
--- a/angularfire-start/angular.json
+++ b/angularfire-start/angular.json
@@ -15,22 +15,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/friendlychat",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "browser": "src/main.ts",
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -50,9 +43,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -81,18 +72,10 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": []
           }
         },
@@ -106,4 +89,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/angularfire-start/src/app/app-routing.module.ts b/angularfire-start/src/app/app-routing.module.ts
deleted file mode 100644
index e823db899..000000000
--- a/angularfire-start/src/app/app-routing.module.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import {
-  AuthGuard,
-  redirectLoggedInTo,
-  redirectUnauthorizedTo,
-} from '@angular/fire/auth-guard';
-import { LoginPageComponent } from './pages/login-page/login-page.component';
-import { ChatPageComponent } from './pages/chat-page/chat-page.component';
-
-const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
-const redirectLoggedInToHome = () => redirectLoggedInTo(['chat']);
-
-const routes: Routes = [
-  {
-    path: '',
-    component: LoginPageComponent,
-    canActivate: [AuthGuard],
-    data: { authGuardPipe: redirectLoggedInToHome },
-  },
-  {
-    path: 'login',
-    component: LoginPageComponent,
-    canActivate: [AuthGuard],
-    data: { authGuardPipe: redirectLoggedInToHome },
-  },
-  {
-    path: 'chat',
-    component: ChatPageComponent,
-    canActivate: [AuthGuard],
-    data: { authGuardPipe: redirectUnauthorizedToLogin },
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}

From 7626f5decb98af0379d723958eadb75b984e9c9a Mon Sep 17 00:00:00 2001
From: Jeff Huleatt <3759507+jhuleatt@users.noreply.github.com>
Date: Sat, 11 May 2024 09:56:32 -0400
Subject: [PATCH 07/10] fix message sending

---
 angularfire-start/src/app/services/chat.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/angularfire-start/src/app/services/chat.service.ts b/angularfire-start/src/app/services/chat.service.ts
index ff24af30e..b359f9614 100644
--- a/angularfire-start/src/app/services/chat.service.ts
+++ b/angularfire-start/src/app/services/chat.service.ts
@@ -68,7 +68,7 @@ export class ChatService {
 
   // Saves a new message to Cloud Firestore.
   saveTextMessage = async (messageText: string) => {
-    return null;
+    return this.addMessage(messageText, null);
   };
 
   // Loads chat messages history and listens for upcoming ones.

From e39ec813a1db4696f6121ccd15aebdec8af8fc0d Mon Sep 17 00:00:00 2001
From: Jeff Huleatt <3759507+jhuleatt@users.noreply.github.com>
Date: Sat, 11 May 2024 16:04:08 -0400
Subject: [PATCH 08/10] subscribe to user in chat service

---
 .../src/app/services/chat.service.ts          | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/angularfire-start/src/app/services/chat.service.ts b/angularfire-start/src/app/services/chat.service.ts
index b359f9614..f7ded70db 100644
--- a/angularfire-start/src/app/services/chat.service.ts
+++ b/angularfire-start/src/app/services/chat.service.ts
@@ -9,7 +9,7 @@ import {
   getAuth,
   User,
 } from '@angular/fire/auth';
-import { map, switchMap, firstValueFrom, filter, Observable } from 'rxjs';
+import { map, switchMap, firstValueFrom, filter, Observable, Subscription } from 'rxjs';
 import {
   doc,
   docData,
@@ -29,6 +29,7 @@ import {
   limit,
   onSnapshot,
   DocumentData,
+  FieldValue,
 } from '@angular/fire/firestore';
 import {
   Storage,
@@ -39,6 +40,16 @@ import {
 import { getToken, Messaging, onMessage } from '@angular/fire/messaging';
 import { Router } from '@angular/router';
 
+type ChatMessage = {
+  name: string | null,
+  profilePicUrl: string | null,
+  timestamp: FieldValue,
+  uid: string | null,
+  text?: string,
+  imageUrl?: string
+};
+
+
 @Injectable({
   providedIn: 'root',
 })
@@ -51,8 +62,16 @@ export class ChatService {
   private provider = new GoogleAuthProvider();
   LOADING_IMAGE_URL = 'https://www.google.com/images/spin-32.gif?a';
 
-  // Observable user
+  // observable that is updated when the auth state changes
   user$ = user(this.auth);
+  currentUser: User | null = this.auth.currentUser;
+  userSubscription: Subscription;
+  
+  constructor() {
+    this.userSubscription = this.user$.subscribe((aUser: User | null) => {
+        this.currentUser = aUser;
+    });
+  }
 
   // Login Friendly Chat.
   login() {}

From b8a91348ccdba6231f12f2bfda6f1bcd3ded3f9d Mon Sep 17 00:00:00 2001
From: Jeff Huleatt <3759507+jhuleatt@users.noreply.github.com>
Date: Sat, 11 May 2024 16:08:41 -0400
Subject: [PATCH 09/10] Styling refinements

---
 .../components/header/header.component.html   | 27 ++++++-------
 .../pages/chat-page/chat-page.component.html  | 38 ++++++++++++++-----
 .../login-page/login-page.component.html      | 16 ++++----
 angularfire-start/src/index.html              |  2 +-
 4 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/angularfire-start/src/app/components/header/header.component.html b/angularfire-start/src/app/components/header/header.component.html
index ceb488707..bb5f092c4 100644
--- a/angularfire-start/src/app/components/header/header.component.html
+++ b/angularfire-start/src/app/components/header/header.component.html
@@ -8,35 +8,36 @@
                 </span>
             </a>
             @if(user$ | async; as user) {
-                <div class="flex flex-wrap items-end auth">
-                    <div class="flex flex-wrap justify-between text-white">
+                <div class="flex flex-wrap items-center content-center auth">
+                    <div class="hidden sm:flex flex-wrap items-center content-center text-white">
                         <img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
                             [alt]="user?.displayName" />
                         <span class="text-white text-xl whitespace-nowrap font-light px-4 lg:px-5 py-2 lg:py-2.5">
                             {{user?.displayName}}
                         </span>
-                        <div class="dropdown inline-block relative shadow-lg">
-                            <button class=" text-gray-700 py-2 px-4 rounded inline-flex items-center font-semibold">
-                                <img class="w-8 h-8 rounded-full" src="../../../assets/menu.svg" />
-                            </button>
-                            <ul class="dropdown-menu absolute hidden text-gray-700 pt-3 w-48 right-2">
-                                <li class="bg-white p-4 flex-row">
+                    </div>
+                        <div class="dropdown rounded-lg px-4 py-2 hover:bg-navy-700 transition-colors">
+                            <div class="flex items-center">
+                            <button class="text-gray-700 inline-flex items-center font-semibold">
+                                <img class="w-8 h-8" src="../../../assets/menu.svg" />
+                            </button></div>
+                            <ul class="dropdown-menu absolute hidden bg-white w-48 p-1 right-2 shadow-xl rounded-lg">
+                                <li class="bg-white flex flex-row gap-2 items-center px-4 py-4 rounded-lg">
                                     <img class="w-10 h-10 rounded-full" [src]="user?.photoURL"
                                         [alt]="user?.displayName" />
                                     <span
-                                        class="text-navy-200 text-md whitespace-nowrap px-4 lg:px-5 py-2 lg:py-2.5 mr-6">
+                                        class="text-navy-200 text-md whitespace-nowrap">
                                         {{user?.displayName}}
                                     </span>
                                 </li>
-                                <li class="">
-                                    <a class="bg-white hover:bg-navy-20 py-3 px-4 block whitespace-no-wrap text-navy-500 font-semibold"
+                                <li>
+                                    <a class="bg-white hover:bg-navy-20 rounded-md mt-4 py-3 px-4 block whitespace-no-wrap text-navy-500 font-semibold"
                                         href="/" (click)="this.chatService.logout()">
-                                        Logout
+                                        Sign out
                                     </a>
                                 </li>
                             </ul>
                         </div>
-                    </div>
                 </div>
             }
         </div>
diff --git a/angularfire-start/src/app/pages/chat-page/chat-page.component.html b/angularfire-start/src/app/pages/chat-page/chat-page.component.html
index 481d21350..c8253848b 100644
--- a/angularfire-start/src/app/pages/chat-page/chat-page.component.html
+++ b/angularfire-start/src/app/pages/chat-page/chat-page.component.html
@@ -1,34 +1,52 @@
 <div class="min-h-screen h-full w-full bg-navy-30">
-    <div class="w-3/4 bg-navy-10 min-h-screen h-full mx-auto flex flex-col flex-grow pb-56">
+    <div class="w-3/4 bg-navy-10 min-h-screen h-full mx-auto flex flex-col flex-grow pb-56 overflow-auto">
         @for (message of (messages$ | async)?.reverse(); track message) {
         <div> <!-- TODO: I think this div can be removed-->
-            <div class="flex flex-col flex-grow p-4 overflow-scroll space-x-3">
+            <div class="flex flex-col flex-grow p-4 gap-3">
                 @if (user$ | async; as user) {
-                    <div>
-                        <div class="flex flex-wrap min-h-[50px] mt-4">
+                    <div class="flex flex-nowrap gap-4" [class.flex-row-reverse]="user.uid === message['uid']">
                             <img class="w-10 h-10 rounded-full" [src]="message['profilePicUrl']"
                                 [alt]="message['name']" />
-                            <span class="text-gray-500 mx-5 my-auto">{{message['name']}}: </span>
-                        </div>
-                        <div class="mt-4 ml-12 p-5 rounded-full max-w-xl bg-amber-200 shadow-lg border-b-2">
+                        <div class="flex flex-wrap gap-1 text-neutral-800" [class.flex-row-reverse]="user.uid === message['uid']">
+                                <div class="p-4 rounded-lg max-w-xl flex flex-col justify-between gap-1" [class.bg-amber-200]="user.uid === message['uid']" [class.bg-white]="user.uid !== message['uid']">
                             @if (message['text'] && message['text'].length > 0){
                                 <div>
                                     {{message['text']}} 
                                 </div>
                             }
                             @if (message['imageUrl'] && message['imageUrl'].length > 0) {
+                                <div class="flex justify-center">
+                                    <img class="max-w-[50vw] max-h-[30vh] rounded-md" [src]="message['imageUrl']" alt="image" />
+                                </div>
+                            }
+                            <div class="flex flex-nowrap justify-end">
+                                <span class="text-neutral-500 text-sm">
+                                    {{message['timestamp'].toDate().toLocaleTimeString()}}
+                                </span>
+                            </div>
+                        </div>
+                        
+                            @if (message['response'] && message['response'].length > 0){
+                                <div class="transition-all opacity-30 hover:opacity-100 hover:border-2 hover:border-navy-200 hover:py-6 gap-1 p-4 rounded-lg max-w-xl flex flex-col justify-between">
                                 <div>
-                                    <img class="max-w-[150px]" [src]="message['imageUrl']" alt="image" />
+                                    {{message['response']}}
+                                </div>
+                                <div class="flex flex-nowrap justify-end">
+                                    <span class="text-neutral-500 text-sm">
+                                        ✨ ai generated
+                                    </span>
                                 </div>
+                            </div>
                             }
                         </div>
+                        
                     </div>
                 }
             </div>
         </div>
     }
     </div>
-    <div class="bg-navy-10 w-full shadow-[0_35px_60px_-15px_rgba(0,0,0,1)] min-h-32 h-auto bottom-0 fixed">
+    <div class="bg-navy-10 w-full shadow-[0_35px_60px_-15px_rgba(0,0,0,1)] bottom-0 fixed">
         <div class="flex-wrap flex w-5/6 mx-auto">
             <input type="file" class="file-input hidden" (change)="this.uploadImage($event)" #fileUpload>
             <div class="file-upload w-16 h-16 rounded-full bg-amber-800 my-3">
@@ -37,7 +55,7 @@
                 </button>
             </div>
             <textarea
-                class="w-4/5 mx-auto h-16 rounded-3xl my-auto overflow-scroll text-gray-900 dark:placeholder-gray-400 p-4"
+                class="w-4/5 mx-auto h-16 rounded-3xl my-auto overflow-auto text-gray-900 dark:placeholder-gray-400 p-4"
                 placeholder="Write your thoughts here..." [(ngModel)]="this.text"></textarea>
             <button class="w-16 h-16 rounded-full bg-amber-800 my-3" (click)="this.sendTextMessage()">
                 <img class="w-16 h-16" src="../../../assets/send.svg" alt="Send message" />
diff --git a/angularfire-start/src/app/pages/login-page/login-page.component.html b/angularfire-start/src/app/pages/login-page/login-page.component.html
index 9fdc71f94..fafef4041 100644
--- a/angularfire-start/src/app/pages/login-page/login-page.component.html
+++ b/angularfire-start/src/app/pages/login-page/login-page.component.html
@@ -1,15 +1,15 @@
-<div class="min-h-screen h-full w-full bg-slate-100 flex min-w-screen">
-    <div class="w-[50%] h-full items-center m-auto">
+<div class="min-h-[80vh] h-full w-full py-10 flex flex-wrap flex-col-reverse sm:flex-row items-center min-w-screen">
+    <div class="min-w-screen sm:w-[50%] h-full items-center m-auto">
         <img src="../../../assets/WithFirebase.png" class="w-[350px] m-auto" />
     </div>
-    <div class="w-[50%] items-center h-full mt-[15%]">
-        <div class="mx-auto justify-center mr-28  ml-16">
-            <img src="../../../assets/FriendlyChatLogo.png" class="w-[200px] mx-10" />
-            <span class="text-navy-600 text-5xl font-light  ">Friendly Chat</span>
+    <div class="min-w-screen sm:w-[50%] flex flex-col gap-5 items-center h-full gap-5">
+        <div>
+            <img src="../../../assets/FriendlyChatLogo.png" class="w-[200px]" />
+            <span class="text-navy-600 text-5xl font-light mt-5">Friendly Chat</span>
         </div>
-        <button class="w-[400px] bg-white shadow-md flex flex-wrap mt-12" (click)="this.chatService.login()">
+        <button class="transition-all w-[400px] bg-white shadow-md flex flex-wrap items-center rounded-lg p-2 hover:shadow-xl justify-between" (click)="this.chatService.login()">
             <img src="../../../assets/Google.png" class="w-8 m-2" />
-            <span class="text-slate-700 text-xl m-auto">Sign in with Google</span>
+            <span class="text-slate-700 text-xl flex-grow">Sign in with Google</span>
         </button>
     </div>
 </div>
\ No newline at end of file
diff --git a/angularfire-start/src/index.html b/angularfire-start/src/index.html
index 6464c9965..0277f6145 100644
--- a/angularfire-start/src/index.html
+++ b/angularfire-start/src/index.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body>
+<body class="bg-slate-100">
   <app-root></app-root>
 </body>
 </html>

From 5d57db6b43c37e661bd1aad274ddda8ed95c63f1 Mon Sep 17 00:00:00 2001
From: Jeff Huleatt <3759507+jhuleatt@users.noreply.github.com>
Date: Mon, 13 May 2024 20:40:18 -0400
Subject: [PATCH 10/10] remove reverse

it was messing with Angular's change detection and causing the list to invert on every interaction
---
 .../src/app/pages/chat-page/chat-page.component.html          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/angularfire-start/src/app/pages/chat-page/chat-page.component.html b/angularfire-start/src/app/pages/chat-page/chat-page.component.html
index c8253848b..034b89d68 100644
--- a/angularfire-start/src/app/pages/chat-page/chat-page.component.html
+++ b/angularfire-start/src/app/pages/chat-page/chat-page.component.html
@@ -1,7 +1,7 @@
 <div class="min-h-screen h-full w-full bg-navy-30">
     <div class="w-3/4 bg-navy-10 min-h-screen h-full mx-auto flex flex-col flex-grow pb-56 overflow-auto">
-        @for (message of (messages$ | async)?.reverse(); track message) {
-        <div> <!-- TODO: I think this div can be removed-->
+        @for (message of (messages$ | async); track message) {
+            <div> <!-- TODO: I think this div can be removed-->
             <div class="flex flex-col flex-grow p-4 gap-3">
                 @if (user$ | async; as user) {
                     <div class="flex flex-nowrap gap-4" [class.flex-row-reverse]="user.uid === message['uid']">