Skip to content

Commit 180b09e

Browse files
misicodemisicode
committed
feat: update news page component
1 parent 26fb907 commit 180b09e

File tree

8 files changed

+129
-37
lines changed

8 files changed

+129
-37
lines changed

‎src/app/core/interceptors/error.interceptor.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
22
import { Injectable, inject } from "@angular/core";
33
import { ToastrService } from "ngx-toastr";
4-
import { Observable, catchError, of } from "rxjs";
4+
import { Observable, catchError } from "rxjs";
55

66
@Injectable({
77
providedIn: "root"

‎src/app/core/services/user.service.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { HttpClient } from "@angular/common/http";
2+
import { Injectable } from "@angular/core";
3+
import { Observable } from "rxjs";
4+
5+
import { environment } from "../../../environments/environment";
6+
7+
import { News } from "../interfaces/news.interface";
8+
9+
@Injectable({
10+
providedIn: "root",
11+
})
12+
export class UserService {
13+
private serverUrl: string = environment.serverUrl;
14+
15+
constructor(private httpClient: HttpClient) {}
16+
17+
getNewsByUser(): Observable<News[]> {
18+
return this.httpClient
19+
.get<News[]>(`${ this.serverUrl }/api/user/news`);
20+
}
21+
}

‎src/app/layouts/content-layout/header/header.component.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1-
import { Component } from "@angular/core";
1+
import { Component, OnInit } from "@angular/core";
2+
import { AuthService } from "../../../core/services/auth.service";
23

34
@Component({
45
selector: "app-header",
56
templateUrl: "./header.component.html",
67
})
78
export class HeaderComponent {
89
public isAuthenticated: boolean = false;
10+
11+
constructor(
12+
private authService: AuthService
13+
) {
14+
this.authService.authStatus.subscribe({
15+
next: (authStatus: boolean) => {
16+
this.isAuthenticated = authStatus;
17+
}
18+
});
19+
}
920
}

‎src/app/pages/auth/login-page/login-page.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export class LoginPageComponent {
3030
this.loading = false;
3131
this.router.navigateByUrl("/user/news");
3232
},
33-
error: (err) => {
33+
error: () => {
3434
this.loading = false;
3535
}
3636
});

‎src/app/pages/user/news-page/news-page.component.html

Lines changed: 72 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -22,37 +22,78 @@ <h2>Mis Noticias</h2>
2222
</tr>
2323
</thead>
2424
<tbody>
25-
<tr>
26-
<td></td>
27-
<td></td>
28-
<td></td>
29-
<td>
30-
<a>
31-
<button class="!bg-blue-500 hover:!bg-blue-400">
32-
<svg
33-
fill="currentColor"
34-
viewBox="0 0 24 24"
35-
xmlns="http://www.w3.org/2000/svg"
36-
>
37-
<path d="M17.0671 2.27157C17.5 2.09228 17.9639 2 18.4324 2C18.9009 2 19.3648 2.09228 19.7977 2.27157C20.2305 2.45086 20.6238 2.71365 20.9551 3.04493C21.2864 3.37621 21.5492 3.7695 21.7285 4.20235C21.9077 4.63519 22 5.09911 22 5.56761C22 6.03611 21.9077 6.50003 21.7285 6.93288C21.5492 7.36572 21.2864 7.75901 20.9551 8.09029L20.4369 8.60845L15.3916 3.56308L15.9097 3.04493C16.241 2.71365 16.6343 2.45086 17.0671 2.27157Z"></path>
38-
<path d="M13.9774 4.9773L3.6546 15.3001C3.53154 15.4231 3.44273 15.5762 3.39694 15.7441L2.03526 20.7369C1.94084 21.0831 2.03917 21.4534 2.29292 21.7071C2.54667 21.9609 2.91693 22.0592 3.26314 21.9648L8.25597 20.6031C8.42387 20.5573 8.57691 20.4685 8.69996 20.3454L19.0227 10.0227L13.9774 4.9773Z"></path>
39-
</svg>
40-
</button>
41-
</a>
42-
<a>
43-
<button>
44-
<svg
45-
fill="currentColor"
46-
viewBox="0 0 24 24"
47-
xmlns="http://www.w3.org/2000/svg"
48-
>
49-
<path d="M8 1.5V2.5H3C2.44772 2.5 2 2.94772 2 3.5V4.5C2 5.05228 2.44772 5.5 3 5.5H21C21.5523 5.5 22 5.05228 22 4.5V3.5C22 2.94772 21.5523 2.5 21 2.5H16V1.5C16 0.947715 15.5523 0.5 15 0.5H9C8.44772 0.5 8 0.947715 8 1.5Z"></path>
50-
<path d="M3.9231 7.5H20.0767L19.1344 20.2216C19.0183 21.7882 17.7135 23 16.1426 23H7.85724C6.28636 23 4.98148 21.7882 4.86544 20.2216L3.9231 7.5Z"></path>
51-
</svg>
52-
</button>
53-
</a>
54-
</td>
55-
</tr>
25+
@for (news of listNews; track news.idNews; let i = $index) {
26+
<tr>
27+
<td>{{ i + 1 }}</td>
28+
<td>{{ news.title }}</td>
29+
<td>{{ news.createdAt | date: "dd/MM/yyyy" }}</td>
30+
<td>
31+
<a>
32+
<button class="!bg-blue-500 hover:!bg-blue-400">
33+
<svg
34+
fill="currentColor"
35+
viewBox="0 0 24 24"
36+
xmlns="http://www.w3.org/2000/svg"
37+
>
38+
<path d="M17.0671 2.27157C17.5 2.09228 17.9639 2 18.4324 2C18.9009 2 19.3648 2.09228 19.7977 2.27157C20.2305 2.45086 20.6238 2.71365 20.9551 3.04493C21.2864 3.37621 21.5492 3.7695 21.7285 4.20235C21.9077 4.63519 22 5.09911 22 5.56761C22 6.03611 21.9077 6.50003 21.7285 6.93288C21.5492 7.36572 21.2864 7.75901 20.9551 8.09029L20.4369 8.60845L15.3916 3.56308L15.9097 3.04493C16.241 2.71365 16.6343 2.45086 17.0671 2.27157Z"></path>
39+
<path d="M13.9774 4.9773L3.6546 15.3001C3.53154 15.4231 3.44273 15.5762 3.39694 15.7441L2.03526 20.7369C1.94084 21.0831 2.03917 21.4534 2.29292 21.7071C2.54667 21.9609 2.91693 22.0592 3.26314 21.9648L8.25597 20.6031C8.42387 20.5573 8.57691 20.4685 8.69996 20.3454L19.0227 10.0227L13.9774 4.9773Z"></path>
40+
</svg>
41+
</button>
42+
</a>
43+
<a>
44+
<button>
45+
<svg
46+
fill="currentColor"
47+
viewBox="0 0 24 24"
48+
xmlns="http://www.w3.org/2000/svg"
49+
>
50+
<path d="M8 1.5V2.5H3C2.44772 2.5 2 2.94772 2 3.5V4.5C2 5.05228 2.44772 5.5 3 5.5H21C21.5523 5.5 22 5.05228 22 4.5V3.5C22 2.94772 21.5523 2.5 21 2.5H16V1.5C16 0.947715 15.5523 0.5 15 0.5H9C8.44772 0.5 8 0.947715 8 1.5Z"></path>
51+
<path d="M3.9231 7.5H20.0767L19.1344 20.2216C19.0183 21.7882 17.7135 23 16.1426 23H7.85724C6.28636 23 4.98148 21.7882 4.86544 20.2216L3.9231 7.5Z"></path>
52+
</svg>
53+
</button>
54+
</a>
55+
</td>
56+
</tr>
57+
} @empty {
58+
<tr>
59+
<td class="!py-3.5">
60+
<ngx-skeleton-loader
61+
count="1"
62+
[theme]="{
63+
'background-color': '#eef2ff',
64+
width: '2rem',
65+
}"
66+
></ngx-skeleton-loader>
67+
</td>
68+
<td class="!py-3.5">
69+
<ngx-skeleton-loader
70+
count="1"
71+
[theme]="{
72+
'background-color': '#eef2ff',
73+
width: '35rem',
74+
}"
75+
></ngx-skeleton-loader>
76+
</td>
77+
<td class="!py-3.5">
78+
<ngx-skeleton-loader
79+
count="1"
80+
[theme]="{
81+
'background-color': '#eef2ff',
82+
width: '5rem',
83+
}"
84+
></ngx-skeleton-loader>
85+
</td>
86+
<td class="!py-3.5">
87+
<ngx-skeleton-loader
88+
count="1"
89+
[theme]="{
90+
'background-color': '#eef2ff',
91+
width: '4rem',
92+
}"
93+
></ngx-skeleton-loader>
94+
</td>
95+
</tr>
96+
}
5697
</tbody>
5798
</table>
5899
</section>

‎src/app/pages/user/news-page/news-page.component.ts

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,21 @@
1-
import { Component } from "@angular/core";
1+
import { Component, OnInit } from "@angular/core";
2+
import { UserService } from "../../../core/services/user.service";
3+
import { News } from "../../../core/interfaces/news.interface";
24

35
@Component({
46
selector: "user-news-page",
57
templateUrl: "./news-page.component.html",
68
styleUrl: "./news-page.component.scss",
79
})
8-
export class NewsPageComponent {}
10+
export class NewsPageComponent implements OnInit {
11+
public listNews: News[] = [];
12+
13+
constructor(
14+
private userService: UserService
15+
) {}
16+
17+
ngOnInit(): void {
18+
this.userService.getNewsByUser()
19+
.subscribe((news: News[]) => this.listNews = news);
20+
}
21+
}

‎src/app/pages/user/user.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { NgModule } from "@angular/core";
22
import { CommonModule } from "@angular/common";
3+
import { NgxSkeletonLoaderModule } from "ngx-skeleton-loader";
34

45
import { NewsPageComponent } from "./news-page/news-page.component";
56

@@ -11,7 +12,8 @@ import { UserRoutingModule } from "./user-routing.module";
1112
],
1213
imports: [
1314
CommonModule,
14-
UserRoutingModule
15+
UserRoutingModule,
16+
NgxSkeletonLoaderModule,
1517
],
1618
})
1719
export class UserModule {}

‎src/styles.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ section {
3737
@apply border-2 border-slate-200 border-solid focus-within:border-indigo-700 rounded;
3838
margin-top: .5rem;
3939
}
40+
.skeleton-loader {
41+
display: block !important;
42+
margin-bottom: 0 !important;
43+
}
4044
.toast-container {
4145
.ngx-toastr {
4246
border-radius: .4rem;

0 commit comments

Comments
 (0)