Verified Commit 8df4bfa5 authored by reprograma's avatar reprograma
Browse files

update: apply eslint and move hardcoded values to .env

parent 28076e41
[*]
end_of_line = lf
charset = utf-8
indent_style = space
tab_width = 2
\ No newline at end of file
config/**
scripts/**
src/sw/**
\ No newline at end of file
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"parser": "babel-eslint",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"settings": {
"import/resolver": {
"node": {
"paths": [
"src"
]
}
}
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"prettier",
"react-hooks",
"import",
"jsx-a11y"
],
"rules": {
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": true
}
],
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/prop-types": "off",
"react/state-in-constructor": "off",
"react/destructuring-assignment": "off",
"react/jsx-props-no-spreading": "off",
"prettier/prettier": [
"error",
{
"singleQuote": true
}
],
"comma-dangle": "off",
"prefer-destructuring": "off",
"prefer-rest-params": "off",
"prefer-spread": "off",
"no-plusplus": "off",
"no-underscore-dangle": "off",
"import/prefer-default-export": "off",
"consistent-return": "off",
"no-continue": "off",
"no-shadow": "off",
"jsx-a11y/label-has-associated-control": "off",
"global-require": "off",
"no-param-reassign": "off",
"react/forbid-prop-types": "off",
"camelcase": "off"
}
}
\ No newline at end of file
{
"name": "botc-frontend",
"version": "0.0.1",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
"dependencies": {
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"axios": "^0.19.0",
"chart.js": "^2.7.3",
"chartist": "^0.11.0",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.6.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"history": "^4.10.1",
"perfect-scrollbar": "^1.4.0",
"prettier": "^1.19.1",
"prop-types": "^15.7.2",
"qrcode.react": "^0.9.3",
"react": "^16.11.0",
"react-bootstrap-sweetalert": "^4.4.1",
......@@ -23,15 +41,6 @@
"redux-actions": "^2.6.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
......@@ -39,6 +48,19 @@
"not op_mini all"
],
"devDependencies": {
"husky": "^3.1.0",
"lint-staged": "^9.5.0",
"redux-devtools-extension": "^2.13.8"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix",
"git add"
]
}
}
\ No newline at end of file
# https://create-react-app.dev/docs/adding-custom-environment-variables/
# the places where these variables are used are indicated in the comments below
# src/pages/login/constants.js
REACT_APP_CLIENT_ID="<< client id here >>"
REACT_APP_CLIENT_SECRET="<< client secret here >>"
# src/components/widgets/WalletActions/CashIn/methods/actions.js
# src/utils.js
REACT_APP_BACKEND_URL="<< api base url here >>"
REACT_APP_WALLET_PATH="<< wallet api path here >>"
# src/pages/login/actions.js
REACT_APP_LOGIN_PATH="<< login api path here >>"
# src/components/widgets/Transactions/actions.js
REACT_APP_TRANSACTIONS_PATH="<< transactions api path here >>"
# src/components/widgets/MonthEarnings/actions.js
REACT_APP_MONTH_EARNINGS_PATH="<< month earnings api path here >>"
# src/components/widgets/LastTransactions/actions.js
REACT_APP_LAST_TRANSACTIONS_PATH="<< last transactions api path here >>"
# src/components/widgets/Earnings/actions.js
REACT_APP_EARNINGS_PATH="<< earnings api path here >>"
# src/components/widgets/CurrenciesValue/actions.js
REACT_APP_CURRENCIES_VALUE_PATH="<< currencies value api path here >>"
\ No newline at end of file
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Router from './routes';
import './App.css';
class App extends Component {
render() {
return (
<Provider store={store}>
<Router />
</Provider>
);
}
}
export default App;
import React from 'react';
import { Provider } from 'react-redux';
import store from 'store';
import Router from 'routes';
import 'App.css';
const App = () => (
<Provider store={store}>
<Router />
</Provider>
);
export default App;
import { createAction } from 'redux-actions';
import CURRENCIES_VALUE from './constants';
import { fetchApi } from 'utils';
import { CURRENCIES_VALUE } from './constants';
const CURRENCIES_VALUE_URL = "exchange/v1/ticker/eur";
const CURRENCIES_VALUE_PATH = process.env.REACT_APP_CURRENCIES_VALUE_PATH;
const reset = createAction(CURRENCIES_VALUE, () => ({
status: 'initial',
status: 'initial'
}));
const begin = createAction(CURRENCIES_VALUE, () => ({
status: 'pending',
status: 'pending'
}));
const fail = createAction(CURRENCIES_VALUE, error => ({
error,
status: 'error',
status: 'error'
}));
const success = createAction(CURRENCIES_VALUE, values => ({
......@@ -23,25 +22,27 @@ const success = createAction(CURRENCIES_VALUE, values => ({
status: 'success'
}));
const getValues = () =>
(dispatch) => {
dispatch(begin);
fetchApi({
path: CURRENCIES_VALUE_URL
}).then(response => {
let values = response;
dispatch(success(values.data));
}).catch(error => {
console.error("ERROR");
const getValues = () => dispatch => {
dispatch(begin);
fetchApi({
path: CURRENCIES_VALUE_PATH
})
.then(response => {
const values = response;
dispatch(success(values.data));
})
// TODO: handle error
.catch(error => {
throw error;
});
};
};
const actions = {
reset,
begin,
fail,
success,
getValues
reset,
begin,
fail,
success,
getValues
};
export default actions;
const CURRENCIES_VALUE = "CURRECIES_VALUE";
export default CURRENCIES_VALUE;
export const CURRENCIES_VALUE = 'CURRENCIES_VALUE';
import React, { Component } from 'react'
import actions from './actions';
import { connect } from 'react-redux';
import GridContainer from "components/atoms/Grid/GridContainer.jsx";
import GridItem from "components/atoms/Grid/GridItem.jsx";
import Card from "components/atoms/Card/Card.jsx";
import CardHeader from "components/atoms/Card/CardHeader.jsx";
import CardBody from "components/atoms/Card/CardBody.jsx";
class CurrenciesValue extends Component {
constructor(){
super()
this.state = {
loading: true,
}
}
componentWillMount(){
this.props.getValues();
}
componentWillReceiveProps(nextProps){
if(nextProps.status === "success"){
this.setState({ loading: false});
}
}
render() {
const { values = {} } = this.props;
if(this.state.loading && Object.keys(values).length === 0) return "Loading";
let values_list = Object.keys(values).map( key => {
return (
<GridItem key={key} >
<CardBody>
{key}
<br/>
{values[key]}
</CardBody>
</GridItem>
)
})
return (
<div>
<Card>
<CardHeader>Currencies value</CardHeader>
<GridContainer>
{ values_list }
</GridContainer>
</Card>
</div>
)
}
}
const mapStateToProps = (state) => ({
values: state.currencies_value.values,
status: state.currencies_value.status
})
export default connect(mapStateToProps, actions)(CurrenciesValue);
import React, { Component } from 'react';
import { connect } from 'react-redux';
import GridContainer from 'components/atoms/Grid/GridContainer';
import GridItem from 'components/atoms/Grid/GridItem';
import Card from 'components/atoms/Card/Card';
import CardHeader from 'components/atoms/Card/CardHeader';
import CardBody from 'components/atoms/Card/CardBody';
import actions from './actions';
class CurrenciesValue extends Component {
constructor() {
super();
this.state = {
loading: true
};
}
// TODO: fix me
UNSAFE_componentWillMount() {
this.props.getValues();
}
// TODO: fix me
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.status === 'success') {
this.setState({ loading: false });
}
}
render() {
const { values = {} } = this.props;
if (this.state.loading && Object.keys(values).length === 0)
return 'Loading';
const values_list = Object.keys(values).map(key => {
return (
<GridItem key={key}>
<CardBody>
{key}
<br />
{values[key]}
</CardBody>
</GridItem>
);
});
return (
<div>
<Card>
<CardHeader>Currencies value</CardHeader>
<GridContainer>{values_list}</GridContainer>
</Card>
</div>
);
}
}
const mapStateToProps = state => ({
values: state.currencies_value.values,
status: state.currencies_value.status
});
export default connect(mapStateToProps, actions)(CurrenciesValue);
import CURRENCIES_VALUE from './constants';
import { CURRENCIES_VALUE } from './constants';
export default function currencies_value(state = { status: 'initial' }, action) {
export default function currencies_value(
state = { status: 'initial' },
action
) {
switch (action.type) {
case CURRENCIES_VALUE : {
const {
case CURRENCIES_VALUE: {
const {
values = state.values,
error = state.error,
status = state.status
} = action.payload
} = action.payload;
return {
values,
error,
status,
status
};
}
default:
return state;
}
}
\ No newline at end of file
}
import { createAction } from 'redux-actions';
import EARNINGS from './constants';
import { fetchApi } from 'utils';
import { EARNINGS } from './constants';
const EARNINGS_URL = 'user/v1/wallet/earnings';
const EARNINGS_PATH = process.env.REACT_APP_EARNINGS_PATH;
const reset = createAction(EARNINGS, () => ({
status: 'initial',
status: 'initial'
}));
const begin = createAction(EARNINGS, () => ({
status: 'pending',
status: 'pending'
}));
const fail = createAction(EARNINGS, error => ({
error,
status: 'error',
error,
status: 'error'
}));
const success = createAction(EARNINGS, earnings=> ({
earnings,
status: 'success'
const success = createAction(EARNINGS, earnings => ({
earnings,
status: 'success'
}));
const getEarnings = () =>
(dispatch) => {
dispatch(begin);
fetchApi({
path: EARNINGS_URL
}).then(response => {
let earnings = response;
dispatch(success(earnings.data));
}).catch(error => {
console.error("ERROR");
});
};
const getEarnings = () => dispatch => {
dispatch(begin);
fetchApi({
path: EARNINGS_PATH
})
.then(response => {
const earnings = response;
dispatch(success(earnings.data));
})
// TODO: handle error
.catch(error => {
throw error;
});
};
const actions = {
reset,
begin,
fail,
success,
getEarnings
reset,
begin,
fail,
success,
getEarnings
};
export default actions;
const EARNINGS = "EARNINGS";
export default EARNINGS;
export const EARNINGS = 'EARNINGS';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import actions from './actions';
import CardHeader from "components/atoms/Card/CardHeader.jsx";
import CardBody from "components/atoms/Card/CardBody.jsx";
import Button from "components/atoms/CustomButtons/Button.jsx";
import { Popover, Paper } from '@material-ui/core';
import Refresh from "@material-ui/icons/Refresh";
class Earnings extends Component {
constructor(){
super();
this.state = {
loading: true,
anchorEl: null
};
}
componentWillMount() {
this.props.getEarnings();
}
componentWillReceiveProps(nextProps){
if(nextProps.status === "success") {
this.setState({loading: false});
}
}
handlePopoverOpen = event => {
this.setState({ anchorEl: event.currentTarget });
};
handlePopoverClose = () => {
this.setState({ anchorEl: null });
};
render() {
const { earnings = {} } = this.props;
const { anchorEl } = this.state;
let earningComponent = "";
if(!earnings) {
earningComponent = (<span>No data found</span>)
} else {
const { day, week, month, currency, scale = 0 } = earnings;
earningComponent = (
<CardBody>
<div>Day: {day / Math.pow(10, scale).toFixed(scale)} {currency}</div>
<div>Week: {week / Math.pow(10, scale).toFixed(scale)} {currency}</div>
<div>Month: {month / Math.pow(10, scale).toFixed(scale)} {currency}</div>
</CardBody>
)
}
return (
<div
onMouseEnter={this.handlePopoverOpen}
onMouseLeave={this.handlePopoverClose}
>
<Paper>
<CardHeader>
Earnings
</CardHeader>
{earningComponent}
</Paper>
<Popover
anchorEl={anchorEl}