ilonacodes

export const t = {
    LOAD_USER_DATA: 'LOAD_USER_DATA',
    LOAD_USER_DATA_SUCCESS: 'LOAD_USER_DATA_SUCCESS'
};

export const actions = ({
    loadUserData: name => ({
        type: t.LOAD_USER_DATA,
        name
    }),

ilonacodes

import axios from 'axios';
import { put, takeLatest } from 'redux-saga/effects'
import {actions, t} from './actions';

// the base URL for your REST API backend
const baseUrl = 'https://api.github.com/users';

// sending request with username and getting user data from GitHub 
function* loadUserData(action) {
    const response = yield axios.get(`${baseUrl}/${action.name}`);

ilonacodes

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {userReducer} from './reducer';
import {applyMiddleware, combineReducers, createStore} from 'redux';
import createSagaMiddleware from 'redux-saga';
import {Provider} from 'react-redux';
import {watchLoadUserData} from './sagas';

ilonacodes

import {t} from './actions';

// starting with no data
const initState = {
    user: null
};

export const userReducer = (state = initState, action) => {
    switch (action.type) {
        // tells the store that the user data is successfully retreived

ilonacodes

import React from 'react';
import {Formik} from 'formik';
import './dashboard.css';
import * as Yup from 'yup';
import {actions} from './actions';
import {connect} from 'react-redux';

class DashboardComponent extends React.Component {

    render() {

ilonacodes

import React, { Component } from 'react';
import './App.css';
import {Dashboard} from './Dashboard';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Dashboard />

ilonacodes

// App.js

import React, {Component} from 'react';

class App extends Component {
    render() {
        return (
            <div>

            </div>

ilonacodes

// ProgressBar.js

import React from 'react';

const Range = (props) => {
    return (
        <div/>
    );
};

ilonacodes

//ProgressBar.js;

// import hook func from react
import React, {useState} from 'react';

...

export const ProgressBarContainer = () => {
    // init state through hook func useState()
    const [percentRange, setProgress] = useState(0);

ilonacodes

// ProgressBar.js

import React from 'react';
// the custom styling for progress bar app
import './progress-bar.css';

// pass percentRange state through props to Range an ProgressBar components
const Range = (props) => {
    return (
        // render current the filled range of progress bar along its width