Skip to content

Commit 920daec

Browse files
fihryfihry
committed
feat: enhance user suggestions and implement follow/unfollow functionality
1 parent 4af570c commit 920daec

2 files changed

Lines changed: 33 additions & 57 deletions

File tree

‎frontend/src/app/features/feed/feed.component.html‎

Lines changed: 21 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ <h1 class="text-3xl font-bold text-foreground m-0 mb-1">Feed</h1>
8989
<div class="col-lg-3 d-none d-lg-block">
9090
<div class="sidebar-sticky-widget">
9191

92-
<!-- Activity Card -->
92+
Activity Card
9393
<div class="app-widget-card mb-3">
9494
<h6 class="font-semibold text-foreground mb-3 d-flex align-items-center">
9595
<i class="bi bi-activity text-success me-2"></i>
@@ -116,67 +116,32 @@ <h6 class="font-semibold text-foreground mb-3 d-flex align-items-center">
116116
<div class="d-flex justify-content-between align-items-center mb-3">
117117
<h6 class="font-semibold text-foreground m-0">Suggested Users</h6>
118118
<a routerLink="/users" class="text-xs text-primary text-decoration-none hover:underline">See
119-
all</a>
119+
all users</a>
120120
</div>
121121

122-
<div class="d-flex flex-column gap-3">
123-
<div class="d-flex align-items-center justify-content-between">
124-
<div class="d-flex align-items-center gap-2 flex-grow-1 min-w-0">
125-
<div class="avatar-placeholder flex-shrink-0"
126-
style="width: 2.5rem; height: 2.5rem;"></div>
127-
<div class="d-flex flex-column min-w-0">
128-
<span class="text-sm font-medium text-foreground text-truncate">Alice
129-
Johnson</span>
130-
<span class="text-xs text-muted-foreground">@aliceux</span>
122+
<div *ngFor="let user of SuggestionsUsers" class="d-flex flex-column gap-3 gap-3 mb-3">
123+
<div class="d-flex align-items-center justify-content-between">
124+
<div class="d-flex align-items-center gap-2 flex-grow-1 min-w-0">
125+
<div class="avatar-placeholder flex-shrink-0"
126+
style="width: 2.5rem; height: 2.5rem;">
127+
<img src="{{user.avatarUrl}}" alt="User Avatar"
128+
class="rounded-circle w-100 h-100 object-fit-cover">
129+
</div>
130+
<div class="d-flex flex-column min-w-0">
131+
<span
132+
class="text-sm font-medium text-foreground text-truncate">@{{user.username}}</span>
133+
<span class="text-xs text-muted-foreground">@{{user.bio}}</span>
134+
</div>
131135
</div>
136+
<button class="btn btn-sm btn-outline-primary rounded-pill px-3 flex-shrink-0"
137+
(click)="toggleFollow(user)">
138+
{{user.followed ? 'Unfollow' : 'Follow'}}
139+
</button>
132140
</div>
133-
<button
134-
class="btn btn-sm btn-outline-primary rounded-pill px-3 flex-shrink-0">Follow</button>
135-
</div>
136-
137-
<div class="d-flex align-items-center justify-content-between">
138-
<div class="d-flex align-items-center gap-2 flex-grow-1 min-w-0">
139-
<div class="avatar-placeholder flex-shrink-0"
140-
style="width: 2.5rem; height: 2.5rem;"></div>
141-
<div class="d-flex flex-column min-w-0">
142-
<span class="text-sm font-medium text-foreground text-truncate">Bob Smith</span>
143-
<span class="text-xs text-muted-foreground">@bobdev</span>
144-
</div>
145-
</div>
146-
<button
147-
class="btn btn-sm btn-outline-primary rounded-pill px-3 flex-shrink-0">Follow</button>
148-
</div>
149-
150-
<div class="d-flex align-items-center justify-content-between">
151-
<div class="d-flex align-items-center gap-2 flex-grow-1 min-w-0">
152-
<div class="avatar-placeholder flex-shrink-0"
153-
style="width: 2.5rem; height: 2.5rem;"></div>
154-
<div class="d-flex flex-column min-w-0">
155-
<span class="text-sm font-medium text-foreground text-truncate">Carol
156-
White</span>
157-
<span class="text-xs text-muted-foreground">@carolw</span>
158-
</div>
159-
</div>
160-
<button
161-
class="btn btn-sm btn-outline-primary rounded-pill px-3 flex-shrink-0">Follow</button>
162-
</div>
163141
</div>
164142
</div>
165-
166-
<!-- Footer Links -->
167-
<div class="text-xs text-muted-foreground px-2">
168-
<div class="d-flex flex-wrap gap-2 mb-2">
169-
<a href="#" class="text-muted-foreground text-decoration-none hover:underline">About</a>
170-
<span>·</span>
171-
<a href="#" class="text-muted-foreground text-decoration-none hover:underline">Privacy</a>
172-
<span>·</span>
173-
<a href="#" class="text-muted-foreground text-decoration-none hover:underline">Terms</a>
174-
</div>
175-
<p class="m-0">© 2026 ZeroOneBlog</p>
176-
</div>
177143
</div>
178-
</div>
179144

145+
</div>
180146
</div>
181-
</div>
182-
</div>
147+
</div>

‎frontend/src/app/features/feed/feed.component.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export class FeedComponent implements OnInit {
7171
this.userService.getUsers().subscribe(
7272
{
7373
next: (Sug: User[]) => {
74-
this.SuggestionsUsers = Sug.filter(u => !u.followed)
74+
this.SuggestionsUsers = Sug.filter(u => !u.followed && u.id !== this.currentUser?.id).slice(0, 8)
7575
console.log(this.SuggestionsUsers)
7676
},
7777
error: (err) => {
@@ -83,6 +83,17 @@ export class FeedComponent implements OnInit {
8383
)
8484
}
8585

86+
toggleFollow(user: User) {
87+
this.userService.toggleFollow(user.id).subscribe({
88+
next: () => {
89+
user.followed = !user.followed;
90+
},
91+
error: (err) => {
92+
console.error('Failed to toggle follow', err);
93+
}
94+
});
95+
}
96+
8697

8798

8899

0 commit comments

Comments
 (0)