This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}), |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}`); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// App.js | |
import React, {Component} from 'react'; | |
class App extends Component { | |
render() { | |
return ( | |
<div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ProgressBar.js | |
import React from 'react'; | |
const Range = (props) => { | |
return ( | |
<div/> | |
); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 |
OlderNewer