Skip to content

Commit 809e59e

Browse files
marcode24marcode24
committed
✨ get websites added
1 parent c873286 commit 809e59e

16 files changed

+318
-40
lines changed

‎src/app/core/interfaces/response.interface.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Website } from "@models/website.model";
12
import { Feed } from "../models/feed.model";
23

34
export interface IResponseFeed {
@@ -6,3 +7,8 @@ export interface IResponseFeed {
67
feed: Feed;
78
msg?: string;
89
};
10+
11+
export interface IResponseWebsite {
12+
ok: boolean,
13+
websites: Website[];
14+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { HttpClient } from '@angular/common/http';
2+
import { Injectable } from '@angular/core';
3+
import { map, Observable } from 'rxjs';
4+
import { environment } from 'environments/environment';
5+
6+
import { Website } from '@models/website.model';
7+
import { IResponseWebsite } from '@interfaces/response.interface';
8+
9+
const base_url = environment.base_url;
10+
11+
@Injectable({
12+
providedIn: 'root'
13+
})
14+
export class WebsiteService {
15+
16+
constructor(private http: HttpClient) { }
17+
18+
getWebsites(all: boolean = false, skip: number = 0, limit: number = 5): Observable<Website[]> {
19+
const url = `${base_url}/website?all=${all}&limit=${limit}&skip=${skip}`;
20+
return this.http.get<IResponseWebsite>(url).pipe(map(resp => resp.websites));
21+
}
22+
23+
}

‎src/app/features/features.component.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@
1414
@media (max-width: 768px) {
1515
.wrapper .container {
1616
margin-left: 0 !important;
17+
margin-bottom: 55px !important;
1718
}
1819
}

‎src/app/features/features.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
88
import { ComponentsModule } from '@components/components.module';
99

1010
import { FeedModule } from './feed/feed.module';
11+
import { WebsiteModule } from './website/website.module';
1112

1213
@NgModule({
1314
declarations: [
@@ -19,7 +20,8 @@ import { FeedModule } from './feed/feed.module';
1920
RouterModule,
2021
ComponentsModule,
2122
InfiniteScrollModule,
22-
FeedModule
23+
FeedModule,
24+
WebsiteModule
2325
]
2426
})
2527
export class FeaturesModule { }

‎src/app/features/features.routing.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ const routes: Routes = [
1313
component: FeaturesComponent,
1414
loadChildren: () => import('./feed/feed.routing').then(m => m.UsersRoutingModule),
1515
},
16+
{
17+
path: 'websites',
18+
component: FeaturesComponent,
19+
loadChildren: () => import('./website/website.routing').then(m => m.WebsiteRoutingModule),
20+
},
1621
];
1722

1823
@NgModule({

‎src/app/features/feed/pages/feed/feed.component.css

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
}
3131

3232
.content {
33-
padding: 1rem;
33+
padding: 2rem 5rem;
3434
}
3535

3636
.content .title-new {
@@ -146,4 +146,20 @@
146146
opacity: 0;
147147
display: none;
148148
}
149+
150+
.content {
151+
padding: 1rem 2rem 1.5rem;
152+
}
153+
.feed {
154+
font-size: 16px;
155+
}
156+
}
157+
158+
@media (max-width: 480px) {
159+
.content .title-new {
160+
font-size: 24px;
161+
}
162+
.feed {
163+
font-size: 14px;
164+
}
149165
}

‎src/app/features/home/home.component.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@
106106
padding: 0.5rem 0.8rem;
107107
gap: 5px;
108108
transition: 0.4s;
109+
align-items: center;
109110
}
110111

111112
.card.card-websites .item:hover,
@@ -123,11 +124,11 @@
123124

124125
.card.card-websites .item .item-content .website-name {
125126
font-size: 18px;
126-
font-weight: 500;
127+
font-weight: bold;
127128
}
128129

129130
.card.card-websites .item .item-content .description {
130-
font-size: 12px;
131+
font-size: 13px;
131132
font-weight: 300;
132133
}
133134

‎src/app/features/home/home.component.html

Lines changed: 8 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="home-section" infiniteScroll [infiniteScrollDistance]="1" (scrolled)="onScroll()">
1+
<div class="home-section" infiniteScroll [infiniteScrollDistance]="1" (scrolled)="onScroll()" *ngIf="feeds">
22
<section class="recently">
33
<span class="title-section recently">Latest news</span>
44
<div class="news">
@@ -18,43 +18,18 @@
1818
</div>
1919
</div>
2020
</section>
21-
<section class="websites">
21+
<section class="websites" *ngIf="websites">
2222
<div class="card card-websites">
2323
<span class="card-title">Websites availables</span>
24-
<div class="item">
24+
<div class="item" *ngFor="let website of websites">
2525
<div class="item-content">
26-
<span class="website-name">Xataka</span>
27-
<p class="description">Descripcion del sitio web...</p>
26+
<span class="website-name">{{website.name}}</span>
27+
<p class="description">{{website.description | slice:0:(website.image) ? 35:
28+
80}}{{(website.description.length > 20)?'...':'' }}</p>
2829
<a href="" class="url">ver noticias</a>
2930
</div>
30-
<figure>
31-
<img
32-
src="https://images.unsplash.com/photo-1651424146785-70dd7ba9a9ef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
33-
alt="website-image">
34-
</figure>
35-
</div>
36-
<div class="item">
37-
<div class="item-content">
38-
<span class="website-name">Xataka</span>
39-
<p class="description">Descripcion del sitio web...</p>
40-
<a href="" class="url">ver noticias</a>
41-
</div>
42-
<figure>
43-
<img
44-
src="https://images.unsplash.com/photo-1651424146785-70dd7ba9a9ef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
45-
alt="website-image">
46-
</figure>
47-
</div>
48-
<div class="item">
49-
<div class="item-content">
50-
<span class="website-name">Xataka</span>
51-
<p class="description">Descripcion del sitio web...</p>
52-
<a href="" class="url">ver noticias</a>
53-
</div>
54-
<figure>
55-
<img
56-
src="https://images.unsplash.com/photo-1651424146785-70dd7ba9a9ef?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
57-
alt="website-image">
31+
<figure *ngIf="website.image && website.image.length > 0">
32+
<img [src]="website.image" alt="website-image" onerror="this.src='/assets/images/not-found-image.jpg'">
5833
</figure>
5934
</div>
6035
<div class="more">

‎src/app/features/home/home.component.ts

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@ import { Router } from '@angular/router';
33
import { IResponseFeed } from '@interfaces/response.interface';
44

55
import { Feed } from '@models/feed.model';
6+
import { Website } from '@models/website.model';
67

78
import { FeedService } from '@services/feed.service';
9+
import { WebsiteService } from '@services/website.service';
10+
import { forkJoin, map, Observable } from 'rxjs';
811

912
@Component({
1013
selector: 'app-home',
@@ -23,22 +26,44 @@ export class HomeComponent implements OnInit {
2326
private limit: number = 20;
2427

2528
public feeds: Feed[] = [];
29+
public websites: Website[] = [];
2630

2731
constructor(
2832
private feedService: FeedService,
33+
private websiteService: WebsiteService,
2934
private router: Router,
3035
) { }
3136

3237

3338
ngOnInit(): void {
34-
this.feedService.getFeeds(this.skip, this.limit).subscribe((resp: IResponseFeed) => {
35-
this.feeds = [...this.feeds, ...resp.feeds];
39+
this.getDataInitial();
40+
}
41+
42+
getDataInitial() {
43+
forkJoin({
44+
feeds: this.getFeeds(),
45+
websites: this.websiteService.getWebsites(),
46+
}).subscribe({
47+
next: ({ feeds, websites }) => {
48+
this.feeds = feeds;
49+
this.websites = websites;
50+
console.log(this.feeds, this.websites);
51+
},
52+
error: (e) => {
53+
console.log(e);
54+
}
3655
})
3756
}
3857

58+
getFeeds(): Observable<Feed[]> {
59+
return this.feedService.getFeeds(this.skip, this.limit).pipe(map(resp => resp.feeds));
60+
}
61+
3962
onScroll() {
4063
this.skip += this.limit;
41-
this.ngOnInit();
64+
this.getFeeds().subscribe(feeds => {
65+
this.feeds = [...this.feeds, ...feeds];
66+
})
4267
}
4368

4469
scrollTop() {

‎src/app/features/website/pages/websites/websites.component.css

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
.websites-wrapper {
2+
max-width: 70%;
3+
margin: 0 auto;
4+
}
5+
6+
.title {
7+
font-size: 32px;
8+
font-weight: bold;
9+
}
10+
11+
.card.card-website {
12+
display: flex;
13+
margin: 1rem 0;
14+
transition: 0.5s;
15+
}
16+
17+
.card.card-website:hover {
18+
cursor: pointer;
19+
box-shadow: rgb(0 0 0 / 20%) 1px 1px 24px 1px;
20+
}
21+
22+
.card.card-website figure {
23+
width: 100%;
24+
max-width: 15rem;
25+
border-radius: 10px 0 0 10px;
26+
}
27+
28+
.card.card-website figure img {
29+
width: 100%;
30+
height: 100%;
31+
object-fit: cover;
32+
border-radius: inherit;
33+
}
34+
35+
.card.card-website .card-body {
36+
display: flex;
37+
padding: 1rem;
38+
flex-grow: 1;
39+
flex-direction: column;
40+
}
41+
42+
.card-body .w-title {
43+
font-size: 26px;
44+
font-weight: bold;
45+
}
46+
47+
.card-body .w-desc {
48+
font-size: 16px;
49+
color: var(--font-color-secondary);
50+
}
51+
52+
.card-body .bottom {
53+
display: flex;
54+
align-items: flex-end;
55+
flex-grow: 1;
56+
margin-top: 1rem;
57+
}
58+
59+
.card-body .bottom .buttons {
60+
flex-wrap: wrap;
61+
display: flex;
62+
align-items: center;
63+
justify-content: space-between;
64+
width: 100%;
65+
gap: 5px;
66+
}
67+
68+
.card-body .bottom .buttons .w-link {
69+
display: flex;
70+
align-items: flex-end;
71+
text-decoration: none;
72+
color: var(--primary-color);
73+
font-size: 16px;
74+
}
75+
76+
.card-body .bottom .buttons .btn {
77+
flex-grow: 1;
78+
max-width: 10rem;
79+
}
80+
81+
@media (max-width: 768px) {
82+
.card.card-website {
83+
flex-direction: column;
84+
}
85+
86+
.card.card-website figure {
87+
max-width: 100%;
88+
height: 10rem;
89+
border-radius: 10px 10px 0 0;
90+
}
91+
92+
.card-body .bottom .buttons .w-link {
93+
font-size: 14px;
94+
}
95+
}
96+
97+
@media (max-width: 480px) {
98+
.websites-wrapper {
99+
max-width: 100%;
100+
}
101+
}

0 commit comments

Comments
 (0)