From 96ea3e47cbe740b10645e0f2a5bb27c74308b811 Mon Sep 17 00:00:00 2001
From: "Wataru.Kasahara" <kasahara1019@gmail.com>
Date: Tue, 17 Sep 2024 12:40:57 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20component=20=E3=81=A8=20usecase=20?=
 =?UTF-8?q?=E3=81=8C=E5=8F=82=E7=85=A7=E3=81=99=E3=82=8B=20store=20?=
 =?UTF-8?q?=E3=82=92=20DeprecatedArticleStore=20=E3=81=8B=E3=82=89=20Artic?=
 =?UTF-8?q?leStore=20=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../blog/applications/article.usecase.spec.ts |  4 ++--
 .../blog/applications/article.usecase.ts      | 12 +++++-------
 .../articles/articles.component.html          |  2 +-
 .../containers/articles/articles.component.ts | 19 +++++++++----------
 4 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/app/features/blog/applications/article.usecase.spec.ts b/src/app/features/blog/applications/article.usecase.spec.ts
index 5589b5fb..720a1084 100644
--- a/src/app/features/blog/applications/article.usecase.spec.ts
+++ b/src/app/features/blog/applications/article.usecase.spec.ts
@@ -1,6 +1,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import { DeprecatedArticleStore } from '../containers/articles/article.store';
+import { ArticleStore } from '../containers/articles/article.store';
 import { ArticleUsecase } from './article.usecase';
 
 describe('ArticleUsecase', () => {
@@ -9,7 +9,7 @@ describe('ArticleUsecase', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
-      providers: [ArticleUsecase, DeprecatedArticleStore],
+      providers: [ArticleUsecase, ArticleStore],
       teardown: { destroyAfterEach: false },
     });
     usecase = TestBed.inject(ArticleUsecase);
diff --git a/src/app/features/blog/applications/article.usecase.ts b/src/app/features/blog/applications/article.usecase.ts
index bb95abb0..4f4af02c 100644
--- a/src/app/features/blog/applications/article.usecase.ts
+++ b/src/app/features/blog/applications/article.usecase.ts
@@ -1,22 +1,20 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { firstValueFrom } from 'rxjs';
 import XMLParser from 'xml2js';
-import { DeprecatedArticleStore } from '../containers/articles/article.store';
+import { ArticleStore } from '../containers/articles/article.store';
 import { FeedValueObject, RssFeed } from '../domain/feed';
 import { FeedGateway } from '../infrastructures/gateways/feed.gateway';
 
 @Injectable()
 export class ArticleUsecase {
-  constructor(
-    private readonly componentStore: DeprecatedArticleStore,
-    private readonly feedGateway: FeedGateway,
-  ) {}
+  private readonly store = inject(ArticleStore);
+  private readonly feedGateway = inject(FeedGateway);
 
   async fetchFeed() {
     const rssFeed = await firstValueFrom(this.feedGateway.getRssResponse());
     const parsed: RssFeed = await XMLParser.parseStringPromise(rssFeed);
     const feedValueObject = FeedValueObject.createFromRssResponse(parsed);
 
-    this.componentStore.setFeed(feedValueObject.plainObject());
+    this.store.setFeed(feedValueObject.plainObject());
   }
 }
diff --git a/src/app/features/blog/containers/articles/articles.component.html b/src/app/features/blog/containers/articles/articles.component.html
index 9822f56b..f0612580 100644
--- a/src/app/features/blog/containers/articles/articles.component.html
+++ b/src/app/features/blog/containers/articles/articles.component.html
@@ -2,7 +2,7 @@
 
 <p>はてなブログに投稿された最新の 30 件を表示</p>
 
-@if (articles$ | async; as articles) {
+@if (articles(); as articles) {
   <div class="feed-wrapper">
     @for (article of articles; track article) {
       <app-article [feedItem]="article"></app-article>
diff --git a/src/app/features/blog/containers/articles/articles.component.ts b/src/app/features/blog/containers/articles/articles.component.ts
index 61688e44..a390b6b2 100644
--- a/src/app/features/blog/containers/articles/articles.component.ts
+++ b/src/app/features/blog/containers/articles/articles.component.ts
@@ -1,25 +1,24 @@
-import { AsyncPipe, NgFor, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { NgFor, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { PageTitleComponent } from '../../../../shared/page-title/page-title/page-title.component';
 import { ArticleUsecase } from '../../applications/article.usecase';
 import { ArticleComponent } from '../../ui/article/article.component';
-import { DeprecatedArticleStore } from './article.store';
+import { ArticleStore } from './article.store';
 
 @Component({
   selector: 'app-articles',
   templateUrl: './articles.component.html',
   styleUrls: ['./articles.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [DeprecatedArticleStore, ArticleUsecase],
+  providers: [ArticleStore, ArticleUsecase],
   standalone: true,
-  imports: [PageTitleComponent, NgIf, NgFor, ArticleComponent, AsyncPipe],
+  imports: [PageTitleComponent, NgIf, NgFor, ArticleComponent],
 })
 export class ArticlesComponent implements OnInit {
-  constructor(
-    private readonly _componentStore: DeprecatedArticleStore,
-    private _usecase: ArticleUsecase,
-  ) {}
-  articles$ = this._componentStore.blogItems$;
+  private readonly store = inject(ArticleStore);
+  private readonly _usecase = inject(ArticleUsecase);
+
+  articles = this.store.items;
 
   ngOnInit(): void {
     this._usecase.fetchFeed();