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

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

.singleCard {
	max-width: 50vw;

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

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

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

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

// Reducers are used to create state machines.
//They take a state and action as input and return final state as output



const INIT_STATE = {
  loading: false,  //whether app is currently loading
  activeSubscription: [], //list of current subscriptions
  availableCountries:[] //list of available countries
}

clintonyeb

import { combineReducers } from 'redux';
import currency from './currencyReducer';
export default combineReducers({
 currency
});

clintonyeb

//called from CurrencyCardDisplay component calls GET_CURRENCY_PAIR currencyReducer

export const fetchCurrency = () => dispatch => {
  dispatch({type: 'INIT_GET_CURRENCY_NAME_REQUEST'})
  fetch('https://restsimulator.coderiq.io/currency_pairs')
   .then(function(response) {
     return response.json();
   })
   .then(function(currencyJSON) {
     console.log(JSON.stringify(currencyJSON));

clintonyeb

import { createStore, applyMiddleware } from 'redux';
//createStore creates a Redux store that holds the complete state tree of your app
// applyMiddleware is a store enhancer that ships with redux

import thunk from 'redux-thunk';
//Redux Thunk is for communicating asynchronously with an external API to retrieve or save data. 
//Redux Thunk makes it easy to dispatch actions that follow the lifecycle of a request to an external API.

//reducers are statemachines that take a state and action as input and return an output
import rootReducer from './Reducers/rootReducer';