clintonyeb

import React from 'react';
import './style.css';
//Empty grid used when app is in loading status
const Loader = ()=> (
  <div className="lds-grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

clintonyeb

.lds-grid {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
  margin: auto;
}
.lds-grid div {
  position: absolute;
  width: 13px;

clintonyeb

import React, { Component } from 'react';
import { Line, Chart } from 'react-chartjs-2';
import Select from 'react-select';

import Loader from '../Loader/index.js'
const GREEN = '#056600';
const GREEN_1 = '#067700';
const GREEN_2 = '#09a900'
const GREEN_3 = '0eeb02'
const GREEN_4 = '12ff06'

clintonyeb

import React, { Component } from "react";
import { fetchCurrency, changeCurrency } from "../Actions/fetchCurrency";
import { connect } from "react-redux";
import GetCurrencyData from "../Components/getCurrData.js";
import "../App.css";

//We are creating a component class CurrencyCardDisplay by extending a react component
// Read more about react components at https://reactjs.org/docs/react-component.html
class CurrencyCardDisplay extends Component {
  //When an instance of a Component is Mounted the following methods are called in order

clintonyeb

.main-app {
	display: flex;
	flex-flow: row wrap;
}
.main-app > div {
  width: 49vw;
}

.singleCard {
	max-width: 50vw;

clintonyeb

/**
 * interfaces fill the role of naming types,
 * and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.
 */
export interface ICurrency {
  readonly label: string;
  readonly value: string;
  readonly currency_name: string;
}
/**

clintonyeb

/**
 * @param {string} array Array
 * @param {string} n  Number of values that needs to be returned from Array
 * @returns return new Array with the size n
 */
export function lastNMembers(array, n) {
  if (array == null) {
    return void 0;
  }
  if (n == null) {

clintonyeb

import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {AppService} from './app.service';
import {ICurrency} from './models/Currency';

/**
 * Main application component
 *  selector: 'app-root', same in index.html element that start to run this component
 */
@Component({

clintonyeb

.dashboard-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.dashboard-column {
  display: flex;
  flex-direction: column;

clintonyeb

<!-- *ngIf - directive that creates elements only if $pairs | async is true  -->
<!-- | async - run the observable and create variable 'let pairs' depends of result  -->
<main *ngIf="$pairs | async; let pairs" class="dashboard-row">
  <div class="dashboard-column">
    <!-- app-dashboard - component that declared inside app.module.ts   -->
    <!-- [currentCurrency] has it`s description  @Input() public currentCurrency: ICurrency; that create bindings to add data into element    -->
    <!-- with [currentCurrency] we send data into this.currentCurrency  -->
    <!-- same with [name] &  [currencyList]  -->
    <app-dashboard
      [currentCurrency]="pairs[0]"