new post service and ui

.firebaserc

@@ -0,0 +1,14 @@
+{
+  "targets": {
+    "quack-1": {
+      "hosting": {
+        "quack": [
+          "quack-1"
+        ]
+      }
+    }
+  },
+  "projects": {
+    "default": "quack-1"
+  }
+}

.gitignore

@@ -40,3 +40,8 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+# Firebase
+.firebase
+*-debug.log
+.runtimeconfig.json

angular.json

@@ -96,6 +96,23 @@
             ],
             "scripts": []
           }
+        },
+        "deploy": {
+          "builder": "@angular/fire:deploy",
+          "options": {
+            "version": 2
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "quack:build:production",
+              "serveTarget": "quack:serve:production"
+            },
+            "development": {
+              "buildTarget": "quack:build:development",
+              "serveTarget": "quack:serve:development"
+            }
+          },
+          "defaultConfiguration": "production"
         }
       }
     }

firebase.json

@@ -0,0 +1,9 @@
+{
+  "hosting": [
+    {
+      "target": "quack",
+      "source": ".",
+      "frameworksBackend": {}
+    }
+  ]
+}

package.json

@@ -15,6 +15,7 @@
     "@angular/common": "^17.3.0",
     "@angular/compiler": "^17.3.0",
     "@angular/core": "^17.3.0",
+    "@angular/fire": "^17.0.1",
     "@angular/forms": "^17.3.0",
     "@angular/material": "^17.3.3",
     "@angular/platform-browser": "^17.3.0",

src/app/app-routing.module.ts

@@ -6,7 +6,8 @@ export const routes: Routes = [
   { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule) },
   { path: 'feed', loadChildren: () => import('./feed/feed.module').then(m => m.FeedModule), canActivate: [CheckTokenCanActivate] },
   { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule), canActivate: [CheckTokenCanActivate] },
-  { path: '', redirectTo: 'feed', pathMatch: 'full'}
+  { path: 'new-post', loadChildren: () => import('./new-post/new-post.module').then(m => m.NewPostModule), canActivate: [CheckTokenCanActivate] },
+  { path: '', redirectTo: 'feed', pathMatch: 'full' },
 ];
 
 @NgModule({

src/app/app.config.ts

@@ -1,9 +1,13 @@
-import { ApplicationConfig } from '@angular/core';
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app-routing.module';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
+import { getAuth, provideAuth } from '@angular/fire/auth';
+import { getFirestore, provideFirestore } from '@angular/fire/firestore';
+import { getStorage, provideStorage } from '@angular/fire/storage';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideAnimationsAsync()]
+  providers: [provideRouter(routes), provideAnimationsAsync(), importProvidersFrom(provideFirebaseApp(() => initializeApp({ "projectId": "quack-1", "appId": "1:697758733170:web:433bd10dcb3566c06683eb", "storageBucket": "quack-1.appspot.com", "apiKey": "AIzaSyA4GSbuT6SNs_SPXvwVxyRyLcU_tlV9qo0", "authDomain": "quack-1.firebaseapp.com", "messagingSenderId": "697758733170" }))), importProvidersFrom(provideAuth(() => getAuth())), importProvidersFrom(provideFirestore(() => getFirestore())), importProvidersFrom(provideStorage(() => getStorage()))]
 };

src/app/feed/feed.module.ts

@@ -6,7 +6,6 @@ import { FeedComponent } from './feed.component';
 import { TopMenuComponent } from '../shared/top-menu/top-menu.component';
 import { SideMenuComponent } from '../shared/side-menu/side-menu.component';
 import { PostComponent } from '../shared/views/post/post.component';
-import { MatSidenavModule } from '@angular/material/sidenav';
 
 @NgModule({
   declarations: [
@@ -19,7 +18,6 @@ import { MatSidenavModule } from '@angular/material/sidenav';
     SideMenuComponent,
     PostComponent,
     NgFor,
-    MatSidenavModule
   ]
 })
 export class FeedModule { }

src/app/new-post/new-post-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { NewPostComponent } from './new-post.component';
+
+const routes: Routes = [{ path: '', component: NewPostComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class NewPostRoutingModule { }

src/app/new-post/new-post.component.html

@@ -0,0 +1,16 @@
+<app-top-menu (side)="sideMenu.nav?.toggle()"></app-top-menu>
+<app-side-menu #sideMenu>
+    <div id="main">
+        <div class="post-container outline">
+            <form [formGroup]="contentGroup" (ngSubmit)="publish()">
+                <mat-form-field>
+                    <mat-label>Content</mat-label>
+                    <textarea formControlName="content" matInput cdkTextareaAutosize cdkAutosizeMinRows="1"></textarea>
+                </mat-form-field>
+                <div class="buttons">
+                    <button mat-button type="submit">Publish</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</app-side-menu>

src/app/new-post/new-post.component.scss

@@ -0,0 +1,9 @@
+mat-form-field {
+    width: calc(100% - 20px);
+    margin: 10px 10px 0 10px;
+}
+
+.buttons {
+    margin: 0 auto 10px auto;
+    width: fit-content;
+}

src/app/new-post/new-post.component.spec.ts

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

src/app/new-post/new-post.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { PostService } from '../services/data/post.service';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-new-post',
+  templateUrl: './new-post.component.html',
+  styleUrls: ['./new-post.component.scss', '../shared/views/post/post.component.scss']
+})
+export class NewPostComponent {
+  contentGroup: FormGroup = new FormGroup({
+    content: new FormControl('', [Validators.required])
+  });
+  constructor(private post: PostService, private router: Router,) { }
+
+  publish() {
+    if (this.contentGroup.valid) {
+      this.post.newPost(this.contentGroup.get("content")?.value as String, "")
+        .then(() => { this.router.navigateByUrl("/feed") })
+        .catch(() => alert("failed to publish post"));
+    } else {
+      alert("content empty");
+    }
+  }
+
+}

src/app/new-post/new-post.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { NewPostRoutingModule } from './new-post-routing.module';
+import { NewPostComponent } from './new-post.component';
+import { TopMenuComponent } from '../shared/top-menu/top-menu.component';
+import { SideMenuComponent } from '../shared/side-menu/side-menu.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+
+
+@NgModule({
+  declarations: [
+    NewPostComponent
+  ],
+  imports: [
+    CommonModule,
+    NewPostRoutingModule,
+    TopMenuComponent,
+    SideMenuComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatButtonModule,
+    CdkTextareaAutosize
+  ]
+})
+export class NewPostModule { }

src/app/services/data/post.service.ts

@@ -77,4 +77,26 @@ export class PostService {
         .catch(() => { reject() });
     });
   }
+
+  newPost(content: String, image: String) {
+    return new Promise<Boolean>((resolve, reject) => {
+      // TODO: make post
+      this.auth.getToken()
+        .then((token) => {
+          this.examplePosts.push({
+            user: {
+              username: "Zámbó Jimmy",
+              picture: "assets/placeholder-profile-picture.png",
+              followed: true
+            },
+            content: content,
+            image: image,
+            likes: 0,
+            liked: false
+          })
+          resolve(true);
+        })
+        .catch(() => { reject() })
+    });
+  }
 }

src/app/shared/side-menu/side-menu.component.html

@@ -2,7 +2,7 @@
     <mat-sidenav mode="over" [disableClose]="false" [autoFocus]="true" [fixedInViewport]="true">
         <button mat-button [routerLink]="'/feed'">Feed</button>
         <button mat-button [routerLink]="'/user'">Profile</button>
-        <button mat-button >New Post</button>
+        <button mat-button [routerLink]="'/new-post'">New Post</button>
         <button mat-button (click)="logout()">Logout</button>
     </mat-sidenav>
     <mat-sidenav-content><ng-content></ng-content></mat-sidenav-content>

src/app/shared/side-menu/side-menu.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { Router, RouterModule } from '@angular/router';
 import { AuthService } from '../../services/auth/auth.service';
 import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';

src/app/shared/top-menu/top-menu.component.html

@@ -8,8 +8,8 @@
     <mat-form-field>
         <mat-label>Search</mat-label>
         <input matInput type="text" #search>
-        <button matSuffix mat-icon-button aria-label="Clear" (click)="search.value = ''">
-            <mat-icon>close</mat-icon>
+        <button matSuffix mat-icon-button (click)="search.value = ''">
+            <mat-icon *ngIf="search.value != ''">close</mat-icon>
         </button>
     </mat-form-field>
 </mat-toolbar>

src/app/shared/top-menu/top-menu.component.ts

@@ -3,11 +3,12 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-top-menu',
   standalone: true,
-  imports: [MatToolbarModule, MatInputModule, MatIconModule, MatButtonModule],
+  imports: [MatToolbarModule, MatInputModule, MatIconModule, MatButtonModule, NgIf],
   templateUrl: './top-menu.component.html',
   styleUrl: './top-menu.component.scss'
 })