Getting articles data from dev.to api

Adding articles state to component store although it was not needed but added as I wanted to learn about the component store

src/app/app.module.ts

@@ -5,16 +5,19 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './global/header/header.component';
 import { ContainerComponent } from './global/container/container.component';
+import { HttpClientModule } from '@angular/common/http';
+
 
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
-    ContainerComponent
+    ContainerComponent,
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/global/header/header.component.html

@@ -1,6 +1,6 @@
 <header>
     <div class="header-container flex align-center">
-        <a href="/" title="DEV Community Home Page" aria-label="DEV Community Home">
+        <a href="/" style="line-height: 0;" title="DEV Community Home Page" aria-label="DEV Community Home">
             <svg width="50" height="40" viewBox="0 0 50 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <rect width="50" height="40" rx="3" style="fill: black;"></rect>
                 <path

src/app/models/Organisation.ts

@@ -0,0 +1,7 @@
+export interface Organization {
+  name: string;
+  username: string;
+  slug: string;
+  profile_image: string;
+  profile_image_90: string;
+}

src/app/models/User.ts

@@ -0,0 +1,9 @@
+export interface User {
+  name: string;
+  username: string;
+  twitter_username: string;
+  github_username: string;
+  website_url: string;
+  profile_image: string;
+  profile_image_90: string;
+}

src/app/models/articles.ts

@@ -0,0 +1,31 @@
+import { Organization } from "./Organisation";
+import { User } from "./User";
+
+export interface Article {
+  type_of: string;
+  id: number;
+  title: string;
+  description: string;
+  cover_image: string;
+  readable_publish_date: string;
+  social_image: string;
+  tag_list: string[];
+  tags: string;
+  slug: string;
+  path: string;
+  url: string;
+  canonical_url: string;
+  comments_count: number;
+  positive_reactions_count: number;
+  public_reactions_count: number;
+  collection_id: null;
+  created_at: Date;
+  edited_at: Date;
+  crossposted_at: null;
+  published_at: Date;
+  last_comment_at: Date;
+  published_timestamp: Date;
+  reading_time_minutes: number;
+  user: User;
+  organization: Organization;
+}

src/app/pages/home/articles/article-card/article-card.component.html

@@ -1 +1 @@
-<p>article-card works!</p>
+<pre>{{article|json}}</pre>

src/app/pages/home/articles/article-card/article-card.component.scss

@@ -0,0 +1,5 @@
+:host{
+    display: block;
+    width:500px;
+    overflow-x: auto;
+}

src/app/pages/home/articles/article-card/article-card.component.ts

@@ -1,12 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Article } from 'src/app/models/articles';
 
 @Component({
   selector: 'app-article-card',
   templateUrl: './article-card.component.html',
   styleUrls: ['./article-card.component.scss']
 })
 export class ArticleCardComponent implements OnInit {
-
+  @Input() article!: Article;
   constructor() { }
 
   ngOnInit(): void {

src/app/pages/home/articles/article-container/article-container.component.html

@@ -1,3 +1,5 @@
 <app-article-header></app-article-header>
-<app-featured-article></app-featured-article>
-<app-article-card></app-article-card>
+<app-featured-article [featured]="featuredArticle$|push"></app-featured-article>
+<ng-container *ngFor="let article of articles$|push">
+    <app-article-card [article]="article"></app-article-card>
+</ng-container>

src/app/pages/home/articles/article-container/article-container.component.ts

@@ -1,15 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { ArticleStore } from '../services/article.store';
 
 @Component({
   selector: 'app-article-container',
   templateUrl: './article-container.component.html',
-  styleUrls: ['./article-container.component.scss']
+  styleUrls: ['./article-container.component.scss'],
 })
-export class ArticleContainerComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+export class ArticleContainerComponent {
+  articles$ = this.articleStore.articles$;
+  featuredArticle$ = this.articleStore.featuredArticle$;
 
+  constructor(private articleStore: ArticleStore) {}
 }

src/app/pages/home/articles/featured-article/featured-article.component.html

@@ -1 +1 @@
-<p>featured-article works!</p>
+<pre>{{featured|json}}</pre>

src/app/pages/home/articles/featured-article/featured-article.component.scss

@@ -0,0 +1,5 @@
+:host{
+    display: block;
+    width:500px;
+    overflow-x: auto;
+}

src/app/pages/home/articles/featured-article/featured-article.component.ts

@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Article } from 'src/app/models/articles';
 
 @Component({
   selector: 'app-featured-article',
   templateUrl: './featured-article.component.html',
-  styleUrls: ['./featured-article.component.scss']
+  styleUrls: ['./featured-article.component.scss'],
 })
-export class FeaturedArticleComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+export class FeaturedArticleComponent {
+  @Input() featured!: Article;
+  constructor() {}
 }

src/app/pages/home/articles/services/article-api.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ArticleApiService } from './article-api.service';
+
+describe('ArticleApiService', () => {
+  let service: ArticleApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ArticleApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/pages/home/articles/services/article-api.service.ts

@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Article } from 'src/app/models/articles';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ArticleApiService {
+  constructor(private http: HttpClient) {}
+
+  getArticles(): Observable<Article[]> {
+    return this.http.get<Article[]>(`${environment.baseApi}articles`);
+  }
+}

src/app/pages/home/articles/services/article.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ArticleStore } from './article.store';
+
+describe('ArticleStore', () => {
+  let service: ArticleStore;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ArticleStore);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/pages/home/articles/services/article.store.ts

@@ -0,0 +1,40 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { ComponentStore, tapResponse } from '@ngrx/component-store';
+import { Article } from '../../../../models/articles';
+import { ArticleApiService } from './article-api.service';
+
+interface ArticlesState {
+  articles: Article[];
+  featured?: Article;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ArticleStore extends ComponentStore<ArticlesState> {
+  readonly articles$ = this.select((state) => state.articles);
+  readonly featuredArticle$ = this.select((state) => state.featured);
+  readonly setArticles = this.updater(
+    (state: ArticlesState, articles: Article[]) => ({
+      ...state,
+      articles: articles.splice(1),
+      featured: articles[0],
+    })
+  );
+  readonly getArticles = this.effect(() =>
+    this.articleApiS.getArticles().pipe(
+      tapResponse(
+        (articles) => this.setArticles(articles),
+        (error) => this.logError(error)
+      )
+    )
+  );
+  constructor(private articleApiS: ArticleApiService) {
+    super({ articles: [] });
+  }
+
+  logError(error: unknown) {
+    console.error(error);
+  }
+}

src/app/pages/home/home.module.ts

@@ -10,6 +10,7 @@ import { ArticleCardComponent } from './articles/article-card/article-card.compo
 import { ArticleContainerComponent } from './articles/article-container/article-container.component';
 import { ArticleHeaderComponent } from './articles/article-header/article-header.component';
 import { HomeComponent } from './home.component';
+import { LetModule, PushModule } from '@rx-angular/template';
 
 @NgModule({
   declarations: [
@@ -24,6 +25,8 @@ import { HomeComponent } from './home.component';
     HomeComponent,
   ],
   imports: [
+    LetModule,
+    PushModule,
     CommonModule,
     RouterModule.forChild([
       {

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  baseApi: 'https://dev.to/api/',
 };

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  baseApi: 'https://dev.to/api/',
 };
 
 /*