new post service and ui

This commit is contained in:
Benedek László 2024-04-19 13:57:41 +02:00
parent b56053af8d
commit f3c165173f
20 changed files with 1367 additions and 154 deletions

14
.firebaserc Normal file
View File

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

5
.gitignore vendored
View File

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

View File

@ -96,8 +96,25 @@
],
"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"
}
}
}
}
}
}

9
firebase.json Normal file
View File

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

1301
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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",

View File

@ -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({

View File

@ -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()))]
};

View File

@ -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 { }

View File

@ -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 { }

View File

@ -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>

View File

@ -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;
}

View File

@ -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();
});
});

View File

@ -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");
}
}
}

View File

@ -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 { }

View File

@ -60,10 +60,10 @@ export class PostService {
return new Promise<Array<Post>>((resolve, reject) => {
// TODO: fetch feed
this.auth.getToken()
.then( (token)=> {
.then((token) => {
resolve(this.examplePosts);
})
.catch( ()=> { reject() });
.catch(() => { reject() });
});
}
@ -71,10 +71,32 @@ export class PostService {
return new Promise<Array<Post>>((resolve, reject) => {
// TODO: fetch feed
this.auth.getToken()
.then( (token)=> {
.then((token) => {
resolve(this.examplePosts);
})
.catch( ()=> { reject() });
.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() })
});
}
}

View File

@ -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>

View File

@ -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';

View File

@ -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>

View File

@ -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'
})