From dd1c64754fba71a1d11e88bfae8198f288fc89e0 Mon Sep 17 00:00:00 2001 From: Gururajj77 Date: Mon, 15 Jan 2024 01:00:34 +0530 Subject: [PATCH] added the sub routes for profile page --- src/app/app.routes.ts | 12 ++++++- .../followers/followers.component.html | 1 + .../followers/followers.component.scss | 0 .../followers/followers.component.spec.ts | 23 ++++++++++++ .../profile/followers/followers.component.ts | 12 +++++++ .../following/following.component.html | 1 + .../following/following.component.scss | 0 .../following/following.component.spec.ts | 23 ++++++++++++ .../profile/following/following.component.ts | 12 +++++++ src/app/profile/posts/posts.component.html | 1 + src/app/profile/posts/posts.component.scss | 0 src/app/profile/posts/posts.component.spec.ts | 23 ++++++++++++ src/app/profile/posts/posts.component.ts | 12 +++++++ src/app/profile/profile.component.html | 10 ++++++ src/app/profile/profile.component.scss | 36 +++++++++++++++++-- src/app/profile/profile.component.ts | 5 ++- src/app/sign-up/sign-up.component.ts | 6 ++-- 17 files changed, 168 insertions(+), 9 deletions(-) create mode 100644 src/app/profile/followers/followers.component.html create mode 100644 src/app/profile/followers/followers.component.scss create mode 100644 src/app/profile/followers/followers.component.spec.ts create mode 100644 src/app/profile/followers/followers.component.ts create mode 100644 src/app/profile/following/following.component.html create mode 100644 src/app/profile/following/following.component.scss create mode 100644 src/app/profile/following/following.component.spec.ts create mode 100644 src/app/profile/following/following.component.ts create mode 100644 src/app/profile/posts/posts.component.html create mode 100644 src/app/profile/posts/posts.component.scss create mode 100644 src/app/profile/posts/posts.component.spec.ts create mode 100644 src/app/profile/posts/posts.component.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index fd70dd2..1ab201f 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -6,6 +6,9 @@ import { authGuard } from './shared/services/guard/auth.guard'; import { MainLayoutComponent } from './shared/components/main-layout/main-layout.component'; import { UsersComponent } from './users/users.component'; import { ProfileComponent } from './profile/profile.component'; +import { FollowersComponent } from './profile/followers/followers.component'; +import { FollowingComponent } from './profile/following/following.component'; +import { PostsComponent } from './profile/posts/posts.component'; export const routes: Routes = [ { path: '', redirectTo: '/sign-in', pathMatch: 'full' }, @@ -17,7 +20,14 @@ export const routes: Routes = [ children: [ { path: 'feed', component: FeedComponent, canActivate: [authGuard] }, { path: 'users', component: UsersComponent, canActivate: [authGuard] }, - { path: 'profile', component: ProfileComponent, canActivate: [authGuard] } + { + path: 'profile', component: ProfileComponent, canActivate: [authGuard], children: [ + { path: '', redirectTo: 'posts', pathMatch: 'full' }, + { path: 'posts', component: PostsComponent }, + { path: 'followers', component: FollowersComponent }, + { path: 'following', component: FollowingComponent } + ] + } ] }, { path: '**', redirectTo: '/sign-in' } diff --git a/src/app/profile/followers/followers.component.html b/src/app/profile/followers/followers.component.html new file mode 100644 index 0000000..c45d622 --- /dev/null +++ b/src/app/profile/followers/followers.component.html @@ -0,0 +1 @@ +

followers works!

diff --git a/src/app/profile/followers/followers.component.scss b/src/app/profile/followers/followers.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/profile/followers/followers.component.spec.ts b/src/app/profile/followers/followers.component.spec.ts new file mode 100644 index 0000000..75c72a2 --- /dev/null +++ b/src/app/profile/followers/followers.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FollowersComponent } from './followers.component'; + +describe('FollowersComponent', () => { + let component: FollowersComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FollowersComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FollowersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/profile/followers/followers.component.ts b/src/app/profile/followers/followers.component.ts new file mode 100644 index 0000000..fe245cf --- /dev/null +++ b/src/app/profile/followers/followers.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-followers', + standalone: true, + imports: [], + templateUrl: './followers.component.html', + styleUrl: './followers.component.scss' +}) +export class FollowersComponent { + +} diff --git a/src/app/profile/following/following.component.html b/src/app/profile/following/following.component.html new file mode 100644 index 0000000..7e79126 --- /dev/null +++ b/src/app/profile/following/following.component.html @@ -0,0 +1 @@ +

following works!

diff --git a/src/app/profile/following/following.component.scss b/src/app/profile/following/following.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/profile/following/following.component.spec.ts b/src/app/profile/following/following.component.spec.ts new file mode 100644 index 0000000..013a3aa --- /dev/null +++ b/src/app/profile/following/following.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FollowingComponent } from './following.component'; + +describe('FollowingComponent', () => { + let component: FollowingComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FollowingComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FollowingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/profile/following/following.component.ts b/src/app/profile/following/following.component.ts new file mode 100644 index 0000000..8ef25e5 --- /dev/null +++ b/src/app/profile/following/following.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-following', + standalone: true, + imports: [], + templateUrl: './following.component.html', + styleUrl: './following.component.scss' +}) +export class FollowingComponent { + +} diff --git a/src/app/profile/posts/posts.component.html b/src/app/profile/posts/posts.component.html new file mode 100644 index 0000000..2c30d20 --- /dev/null +++ b/src/app/profile/posts/posts.component.html @@ -0,0 +1 @@ +

posts works!

diff --git a/src/app/profile/posts/posts.component.scss b/src/app/profile/posts/posts.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/profile/posts/posts.component.spec.ts b/src/app/profile/posts/posts.component.spec.ts new file mode 100644 index 0000000..0f677e2 --- /dev/null +++ b/src/app/profile/posts/posts.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PostsComponent } from './posts.component'; + +describe('PostsComponent', () => { + let component: PostsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [PostsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(PostsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/profile/posts/posts.component.ts b/src/app/profile/posts/posts.component.ts new file mode 100644 index 0000000..488f158 --- /dev/null +++ b/src/app/profile/posts/posts.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-posts', + standalone: true, + imports: [], + templateUrl: './posts.component.html', + styleUrl: './posts.component.scss' +}) +export class PostsComponent { + +} diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html index f08c9ef..d2d98ca 100644 --- a/src/app/profile/profile.component.html +++ b/src/app/profile/profile.component.html @@ -12,4 +12,14 @@ } +
    +
  • Posts
    • +
  • + Followers +
    • +
  • + Following +
    • +
+ diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss index 41b103d..8d3cd19 100644 --- a/src/app/profile/profile.component.scss +++ b/src/app/profile/profile.component.scss @@ -6,7 +6,7 @@ .user-profile { display: grid; - grid-template-columns: 1fr 3fr; + grid-template-columns: 1fr 2fr; gap: 10px; padding: 10px 0; } @@ -29,7 +29,10 @@ .user-details { grid-column: 2; - + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; .user-name { margin: 0; padding: 0; @@ -42,3 +45,32 @@ gap: 10px; } } +.navigation-header { + list-style: none; + display: flex; + align-items: center; + gap: 20px; + width: 100%; + padding: 0; + justify-content: space-around; + border-top: 0.5px solid rgb(190, 190, 190); + .active { + border-top: 2px solid rgb(101, 101, 101); + } + li { + padding: 10px 0; + } +} +@media (max-width: 768px) { + .feed-container { + padding: 10px; + } + .navigation-header { + width: 100%; + } + .user-details { + .user-name { + font-size: 28px; + } + } +} diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts index 8caf440..5a5d6d4 100644 --- a/src/app/profile/profile.component.ts +++ b/src/app/profile/profile.component.ts @@ -1,14 +1,13 @@ import { Component, inject } from '@angular/core'; import { Auth } from '@angular/fire/auth'; import { FirestoreService } from '../shared/services/firestore/firestore.service'; -import { Observable, of } from 'rxjs'; import { CommonModule } from '@angular/common'; -import { User } from '../shared/types/User'; +import { RouterModule, RouterOutlet } from '@angular/router'; @Component({ selector: 'app-profile', standalone: true, - imports: [CommonModule], + imports: [CommonModule, RouterModule], templateUrl: './profile.component.html', styleUrl: './profile.component.scss' }) diff --git a/src/app/sign-up/sign-up.component.ts b/src/app/sign-up/sign-up.component.ts index 53f32ab..8a395df 100644 --- a/src/app/sign-up/sign-up.component.ts +++ b/src/app/sign-up/sign-up.component.ts @@ -28,7 +28,7 @@ export class SignUpComponent { private readonly formBuilder: FormBuilder = inject(FormBuilder); private readonly snackbarService: SnackbarService = inject(SnackbarService); - private firestoreService: FirestoreService = inject(FirestoreService); + private firestore: FirestoreService = inject(FirestoreService); constructor() { this.registerForm = this.formBuilder.group({ name: ['', Validators.required], @@ -56,7 +56,7 @@ export class SignUpComponent { photoUrl }; - await this.firestoreService.addUserDetails(uid, userDetails); + await this.firestore.addUserDetails(uid, userDetails); this.snackbarService.show('User details added to Firestore'); await updateProfile(userCredential.user, { displayName: name }); @@ -81,7 +81,7 @@ export class SignUpComponent { const userDetails: UserData = { uid, name, email, photoUrl }; - await this.firestoreService.addUserDetails(uid, userDetails); + await this.firestore.addUserDetails(uid, userDetails); this.snackbarService.show('User details added to Firestore'); this.router.navigateByUrl('app/feed');