dileno

import React, { useState, useEffect } from 'react';

export default function RandomUser() {
    const [user, setUser] = useState([]);
    const [error, setError] = useState([]);
    const [isLoading, setIsLoading] = useState(true);

    async function fetchRandomUser() {
        try {
            await fetch('https://randomuser.me/api/')

dileno

useEffect(() => {
  fetchRandomUser();
}, []);

dileno

import React from 'react';
import RandomUser from './RandomUser';

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <RandomUser />

dileno

import React, {Component} from 'react';

class RandomUser extends Component {
    constructor() {
        super();
        this.state = {
            user: [],
            isLoading: false,
            error: null
        }

dileno

<h1>{{actionType}} blog post</h1>
<form [formGroup]="form" (ngSubmit)="save()" #formDir="ngForm" novalidate>
  <div class="form-group row">
    <label class=" control-label col-md-12">Title</label>
    <div class="col-md-12">
      <input class="form-control" type="text" formControlName="title">
    </div>
    <span class="text-danger ml-3" *ngIf="title.invalid && formDir.submitted">
      Title is required.
    </span>

dileno

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { BlogPostService } from '../services/blog-post.service';
import { BlogPost } from '../models/blogpost';

@Component({
  selector: 'app-blog-post-add-edit',
  templateUrl: './blog-post-add-edit.component.html',
  styleUrls: ['./blog-post-add-edit.component.scss']

dileno

<ng-container *ngIf="(blogPost$ | async) as blogPost; else loading">

  <h1>{{ blogPost.title }}</h1>
  <div>{{ blogPost.body }}</div>
  <ul>
    <li>{{ blogPost.creator }}</li>
    <li>{{ blogPost.dt }}</li>
  </ul>

</ng-container>

dileno

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { BlogPostService } from '../services/blog-post.service';
import { BlogPost } from '../models/blogpost';

@Component({
  selector: 'app-blog-post',
  templateUrl: './blog-post.component.html',
  styleUrls: ['./blog-post.component.scss']

dileno

<h1>Blog posts</h1>

<p *ngIf="!(blogPosts$ | async)"><em>Loading...</em></p>
<p>
  <a [routerLink]="['/add']" class="btn btn-primary float-right mb-3">New post</a>
</p>

<table class="table table-sm table-hover" *ngIf="(blogPosts$ | async)?.length>0">
  <thead>
    <tr>

dileno

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { BlogPostService } from '../services/blog-post.service';
import { BlogPost } from '../models/blogpost';

@Component({
  selector: 'app-blog-posts',
  templateUrl: './blog-posts.component.html',
  styleUrls: ['./blog-posts.component.scss']
})