feat: generic & profile feed

CodeURJC-DAW-2022-23 · May 5, 2023 · 94033c1 · 94033c1
1 parent a5d60f8
commit 94033c1
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 112 deletions.
diff --git a/front/src/app/post/pages/feed/feed.component.css b/front/src/app/post/pages/feed/feed.component.css
@@ -139,15 +139,14 @@ input[type='text'] {
 .feed-container {
   margin: 0 1rem;
 }
-.createPostButton{
+.createPostButton {
   position: -webkit-sticky; /* Safari */
   z-index: 1;
   position: sticky;
   top: 90%;
   left: 100%;
 }
 
-
 @media only screen and (min-width: 768px) {
   /* For desktop: */
   .post,
@@ -157,7 +156,7 @@ input[type='text'] {
     margin: auto;
   }
 
-  .createPostButton{
+  .createPostButton {
     top: 50%;
     left: 75%;
   }

diff --git a/front/src/app/post/pages/feed/feed.component.html b/front/src/app/post/pages/feed/feed.component.html
@@ -1,5 +1,5 @@
-<div class="feed-container pt-3"> <!-- *ngIf="!filter"-->
-  <a class="createPostButton" href="/create-list">
+<div class="feed-container">
+  <a class="createPostButton" [routerLink]="['/create']">
     <button class="btn btn-lg btn-primary">
       <i class="fa-solid fa-plus"></i>
     </button>
@@ -8,8 +8,12 @@
     <app-post *ngFor="let currentPost of posts" [post]="currentPost"></app-post>
   </div>
   <div class="text-center my-5">
-    <mat-progress-spinner class="m-auto" mode="indeterminate" color="white"
-      [style.display]="loading ? 'block' : 'none'"></mat-progress-spinner>
-    <div class="no-posts text-white" [style.display]="endOfFeed ? 'block' : 'none'">No more posts :(</div>
+    <ng-container *ngIf="loading; else elseLoading">
+      <mat-progress-spinner class="m-auto" mode="indeterminate" color="white"></mat-progress-spinner>
+    </ng-container>
+    <ng-template #elseLoading>
+      <div class="no-posts text-white" *ngIf="endOfFeed">No more posts :(</div>
+      <div class="no-posts text-white" *ngIf="endOfFeed === undefined && profileUsername">User has no posts :(</div>
+    </ng-template>
   </div>
 </div>
diff --git a/front/src/app/post/pages/feed/feed.component.ts b/front/src/app/post/pages/feed/feed.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit } from '@angular/core';
+import { Component, HostListener, Input, OnInit } from '@angular/core';
 import { PostsService } from '../../services/posts.service';
 import { Post } from 'src/app/models/post.model';
 import { distinctUntilChanged, take } from 'rxjs';
@@ -13,72 +13,59 @@ export class FeedComponent implements OnInit {
   followedUsers: string[] = [];
   page: number = 0;
   loading: boolean = true;
-  endOfFeed: boolean = false;
+  endOfFeed: boolean | undefined;
 
-  constructor(private postsService: PostsService) {}
+  @Input() profileUsername: any | undefined;
+
+  constructor(private postService: PostsService) { }
 
   ngOnInit(): void {
-    //this.initializeFollowersList();
-    this.postsService
-      .getFilter()
-      .pipe(distinctUntilChanged())
-      .subscribe(data => {
-        this.page = 0;
-        this.posts = [];
-        this.getPosts();
-      });
+    if (this.profileUsername) this._getUserPosts();
+    else {
+      this.postService
+        .getFilter()
+        .pipe(distinctUntilChanged())
+        .subscribe(_ => this._getPosts());
+    }
+  }
+
+  private _getUserPosts() {
+    this.postService
+      .getUserPosts(this.page, this.profileUsername)
+      .pipe(take(1))
+      .subscribe(data => this._processData(data));
   }
 
-  getPosts() {
-    this.postsService
+  private _getPosts() {
+    this.postService
       .getPosts(this.page)
       .pipe(take(1))
-      .subscribe(response => {
-        let data: any = response;
-        if (data === null) this.endOfFeed = true;
-        else {
-          for (var i = 0; i < data.content.length; i++) {
-            let post = data.content[i];
-            //check author
-            /* if (this.authService.isLoggedIn()) {
-                post.followingAuthor = this.followedUsers.includes(
-                  post.authorName
-                );
-              } */
-            this.posts.push(post);
-          }
-        }
-      });
+      .subscribe(data => this._processData(data));
   }
 
-  /* initializeFollowersList() {
-    if (this.authService.isLoggedIn())
-      this.userService
-        .getFollowing(this.authService.loggedUser!.username)
-        .pipe()
-        .subscribe(response => {
-          let usernames: any = response;
-          for (var i = 0; i < usernames.users.length; i++) {
-            let username = usernames.users[i].username;
-            if (username !== this.authService.loggedUser?.username)
-              this.followedUsers.push(username);
-          }
-        });
-    console.log(this.followedUsers);
-  } */
+  private _processData(data: any) {
+    const postsData: Post[] = data.content;
+    const noPostsUser: boolean =
+      postsData.length === 0 && this.endOfFeed === undefined;
+    if (noPostsUser) this.loading = false;
+    else if (postsData.length <= 1) {
+      this.endOfFeed = true;
+      this.loading = false;
+    } else this.endOfFeed = false;
+    this.posts.push(...postsData);
+  }
 
   @HostListener('window:scroll', ['$event'])
   onWindowScroll() {
-    //In chrome and some browser scroll is given to body tag
-    let pos =
+    if (!this.posts || !this.loading) return;
+    const maxHeight: number = document.documentElement.scrollHeight - 1;
+    const heightPos: number =
       (document.documentElement.scrollTop || document.body.scrollTop) +
       document.documentElement.offsetHeight;
-    let max = document.documentElement.scrollHeight;
-    // pos/max will give you the distance between scroll bottom and and bottom of screen in percentage.
-    if (pos == max) {
+    if (heightPos >= maxHeight) {
       this.page++;
-      this.getPosts();
-      this.loading = false;
+      if (this.profileUsername) this._getUserPosts();
+      else this._getPosts();
     }
   }
 }
diff --git a/front/src/app/profile/pages/profile/profile.component.html b/front/src/app/profile/pages/profile/profile.component.html
@@ -44,18 +44,7 @@
           <p>{{profileUser.bio}}</p>
         </div>
       </div>
-      <div class="post-container col-md-9 p-0">
-        <app-post *ngFor="let currentPost of posts" [post]="currentPost"></app-post>
-        <div class="text-center my-5">
-          <ng-container *ngIf="loading; else elseLoading">
-            <mat-progress-spinner class="m-auto" mode="indeterminate" color="white"></mat-progress-spinner>
-          </ng-container>
-          <ng-template #elseLoading>
-            <div class="no-posts text-white" *ngIf="endOfFeed">No more posts :(</div>
-            <div class="no-posts text-white" *ngIf="endOfFeed === undefined">User has no posts :(</div>
-          </ng-template>
-        </div>
-      </div>
+      <app-feed class="col-md-9 p-0" [profileUsername]="profileUser.username"></app-feed>
     </form>
   </main>
 </div>
diff --git a/front/src/app/profile/pages/profile/profile.component.ts b/front/src/app/profile/pages/profile/profile.component.ts
@@ -3,10 +3,7 @@ import { Router } from '@angular/router';
 import { UserService } from '../../services/user.service';
 import { AuthService } from '../../../auth/services/auth.service';
 import { Follow, UserFollow } from '../../interfaces/follow.interface';
-import { Post } from 'src/app/models/post.model';
 import { PostsService } from 'src/app/post/services/posts.service';
-import { take } from 'rxjs';
-import { User } from 'src/app/models/user.model';
 import { Title } from '@angular/platform-browser';
 
 @Component({
@@ -20,11 +17,6 @@ export class ProfileComponent implements OnInit {
   ownProfile: boolean | undefined;
   followUser: UserFollow | undefined;
 
-  posts: Post[] = [];
-  page: number = 0;
-  loading: boolean = true;
-  endOfFeed: boolean | undefined;
-
   constructor(
     private router: Router,
     private titleService: Title,
@@ -40,7 +32,6 @@ export class ProfileComponent implements OnInit {
       next: user => {
         this.profileUser = user;
         this._checkLoggedUser(profileUsername);
-        this._getPosts(profileUsername);
       },
       error: _ => this.router.navigate(['/error']),
     });
@@ -75,37 +66,6 @@ export class ProfileComponent implements OnInit {
     });
   }
 
-  private _getPosts(profileUsername: string) {
-    this.postService
-      .getUserPosts(this.page, profileUsername)
-      .pipe(take(1))
-      .subscribe(data => {
-        const postsData: Post[] = data.content;
-        const noPostsUser: boolean =
-          postsData.length === 0 && this.endOfFeed === undefined;
-        if (noPostsUser) this.loading = false;
-        else if (postsData.length <= 1) {
-          this.endOfFeed = true;
-          this.loading = false;
-        } else this.endOfFeed = false;
-        this.posts.push(...postsData);
-      });
-  }
-
-  @HostListener('window:scroll', ['$event'])
-  onWindowScroll() {
-    if (!this.profileUser) return;
-    if (!this.loading) return;
-    const maxHeight: number = document.documentElement.scrollHeight;
-    const heightPos: number =
-      (document.documentElement.scrollTop || document.body.scrollTop) +
-      document.documentElement.offsetHeight;
-    if (heightPos >= maxHeight) {
-      this.page++;
-      this._getPosts(this.profileUser.username);
-    }
-  }
-
   fetchImage(id: number) {
     return this.postService.downloadImage(id);
   }