第10回：ニュースフィード投稿サーバIFをWebアプリから呼び出す

[目次：Webアプリ開発ロードマップ](https://qiita.com/radiance1104/private/7c5b04ce4cf8ec7bd708)
# 第10回：ニュースフィード投稿サーバIFをWebアプリから呼び出す

今回は前回作成したニュースフィード投稿IFをフロントエンドから呼び出してみます。

## メッセージをの入力とPOSTボタンを作成する

### とりあえず画面に置いてみる

長文を入力するための`<textarea>`タグと`<button>`タグを追加します。

``` newsfeeds.component.html
<div id="newsfeeds">
  <textarea placeholder="message ..."></textarea><br>
  <button>POST</button>
  <ng-container *ngIf="newsfeeds && newsfeeds.newsfeeds">
```

![スクリーンショット 2021-01-11 19.44.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202428/2edecbb7-86b6-ff50-8f9d-7e3a19ed1554.png)

### ボタンをクリックしたときのイベント登録と、`<textarea>`メッセージを読み取れるようにする。

`<textarea>`に入力した文字をログに出し、正常に取れているか確認します。

``` newsfeeds.component.ts
export class NewsfeedsComponent implements OnInit {

  newsfeeds: Newsfeeds;
  message: string;

・・・

  onClickPost() {
    console.log(this.message);
  }
}
```

``` newsfeeds.component.html
<div id="newsfeeds">
  <textarea placeholder="message ..." [(ngModel)]="message"></textarea>
  <button (click)="onClickPost()">POST</button>

  <ng-container *ngIf="newsfeeds && newsfeeds.newsfeeds">
```

## REST IFを呼んでみる

### POST IFを作成し、画面と繋いでみる

RestServiceに新しいPOST IFを追加し、クリックイベントにて呼び出してみます。

``` rest.service.ts
　・・・

  async searchNewsFeeds(): Promise<Response<Newsfeeds>> {

　  ・・・

  }

  async createNewsFeed(message: string): Promise<Response<null>> {
    return new Promise((resolve, reject) => {
      const url = environment.rest.domain + '/newsfeeds';
      const body = {
        message: message,
        createdAt: new Date()
      };
      this.httpClient.post(url, body).toPromise().then(response => {
        resolve(new Response(null));
      }).catch(error => {
        console.error(error);
        reject(error);
      });
    });
  }

  ・・・
```

``` newsfeeds.component.ts
　・・・

  async onClickPost() {
    try {
      await this.restService.createNewsFeed(this.message);
    } catch (error) {
      // TODO: display alert dialog.
    }
  }
}
```

### 動作確認する

実際に画面からメッセージを入力し、POSTしてみましょう。
サーバ側のログに入力したメッセージが出力されることが確認できます。

![スクリーンショット 2021-01-11 20.04.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202428/ade2dbaa-f33c-b6d7-8886-7abe715b134e.png)

![スクリーンショット 2021-01-11 20.07.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202428/d178d283-8bad-024b-3465-f6d66b5ae257.png)

## POSTボタンの活性状態を制御する

メッセージが入力されていない時にPOSTボタンが押せたり、サーバ通信が動いたりするのは無駄なので、メッセージが入力されていないときはPOSTボタンを非活性になるように制御します。下記の修正を加えてください。

``` newsfeeds.component.html
  <div id="post-button"><button (click)="onClickPost()" [disabled]="!message || message.length === 0">POST</button></div>
```

サインイン画面も同様にID,Passwordが入力されていないときはSign inボタンが活性にならないよう修正してください。

## 見た目を飾る

最後にscssで見た目を飾って終わります。

``` newsfeeds.component.html
  <textarea id="post-message" placeholder="message ..." [(ngModel)]="message"></textarea><br>
  <div id="post-button"><button (click)="onClickPost()">POST</button></div>
```

``` newsfeeds.component.scss
#newsfeeds {

  ・・・

  #post-message {
    width: 100%;
    height: 60px;
    border: 0px none;
    border-radius: 5px;
    resize: none;
    box-sizing: border-box;
  }
  #post-button {
    text-align: right;
    margin-bottom: 40px;
    button {
      width: 120px;
    }
  }
}
```

![スクリーンショット 2021-01-11 20.21.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202428/fdad6f2c-21fb-a81c-c91d-766b3317bb3d.png)

buttonの活性状態によりマウスカーソルもクリックできる見た目に変わるようにします。
すべてのbuttonに適用したいため、共通のスタイルを追加します。

``` src/styles.scss
html, body {
  height: 100%;
}

button {
  cursor: pointer;
  &:disabled {
    cursor: default;
  }
}
```

## 最後に
今回はフロントエンドからニュースフィード投稿のREST APIを呼んでみました。
次回からバックエンドにDBを作成していきます。
今回開発したソースコードは[GitHub](https://github.com/radiance1104/web-learning-loadmap/tree/stage9-create-post-newsfeeds-client)に入っています。