diff --git a/src/components/exchange/indexExchange.js b/src/components/exchange/indexExchange.js index f48e357..9b3234a 100644 --- a/src/components/exchange/indexExchange.js +++ b/src/components/exchange/indexExchange.js @@ -1,19 +1,135 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import { connect } from 'react-redux' -import '../../styles/index.scss' +import { getChart, getTriggers, getNotifications, getTransactions } from '../../stores/exchange/duck/operations' -const IndexExchange = ({ user }) => { +import '../../styles/indexExchange.scss' + +const IndexExchange = ({ + user, + exchange, getChart, getTriggers, getNotifications, getTransactions }) => { + + useEffect( () => { getChart() }, [] ) + + const [candleInfo, setCandleInfo] = useState( { Open: 0, Close: 0, Min: 0, Max: 0, Vol: 0 } ) + + const colorGreen = { + background: 'green', + } + + const colorRed = { + background: 'red', + } + + const getCandleInformation = (candle) => { + setCandleInfo( { + Open: candle.Open, + Close: candle.Close, + Min: candle.Min, + Max: candle.Max, + Vol: candle.Volume, + Date: candle.Date + } + ) + } return ( -
+
+
-1 ? 'exchangeChartUser' : 'exchangeChartGuest' }> +
+ { exchange.candles.candles.map( (candle, key) => { + + const color = candle.Open > candle.Close ? colorRed.background : colorGreen.background + + let highValue = candle.Open > candle.Close ? candle.Open : candle.Close + let lowValue = candle.Open < candle.Close ? candle.Open : candle.Close + let difference = highValue - lowValue + + let chartScaleY = (exchange.candles.graphMax - candle.Max) / 8 + + if ( difference > 0 && difference < 10 ) + difference *= 2 + else if ( difference > 50 && difference < 100 ) + difference /= 2 + else if ( difference >= 100 && difference <= 200 ) + difference /= 3 + else if ( difference > 200 ) + difference = difference % 100 + + return ( +
getCandleInformation(candle) }> + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+ ) + } + ) + } +
+
+
-1 ? 'exchangeInterface' : 'emptySpaceExchange' }> +
+

Open: { candleInfo.Open }, Close: { candleInfo.Close }

+

Max: { candleInfo.Max }, Min: { candleInfo.Min }

+

Volume: { candleInfo.Vol }

+

Date: { candleInfo.Date }

+
+
) } const mapStateToProps = state => ({ user: state.user, + exchange: state.exchange }) +const mapDispatchToProps = dispatch => ({ + getChart: exchange => dispatch( getChart(exchange) ), + getTriggers: exchange => dispatch( getTriggers(exchange) ), + getNotifications: exchange => dispatch( getNotifications(exchange) ), + getTransactions: exchange => dispatch( getTransactions(exchange) ) +}) -export default connect(mapStateToProps,null)(IndexExchange) +export default connect(mapStateToProps,mapDispatchToProps)(IndexExchange) diff --git a/src/components/indexInterface.js b/src/components/indexInterface.js index 75f120f..be5bb9c 100644 --- a/src/components/indexInterface.js +++ b/src/components/indexInterface.js @@ -1,9 +1,10 @@ -import React from 'react' +import React, {useEffect} from 'react' import { connect } from 'react-redux' // Operations Redux import { createSession, deleteSession, updateSession, registerUser } from '../stores/user/duck/operations' +import { getChart } from '../stores/exchange/duck/operations' // Actions Redux @@ -28,9 +29,12 @@ import BtcLogo from '../images/BtcLogo.png' import ForumLogo from '../images/ForumLogo.png' const IndexInterface = ({ - user, movements, + user, movements, exchange, createSession, deleteSession, updateSession, registerUser, - setRegister, setEdit, setForum, setExchange, setAdminPanel, resetMovements}) => { + setRegister, setEdit, setForum, setExchange, setAdminPanel, resetMovements, + getChart }) => { + + useEffect( () => { getChart() }, [] ) const loginInput = React.createRef() const passwordInput = React.createRef() @@ -304,6 +308,7 @@ const IndexInterface = ({ const mapStateToProps = state => ({ user: state.user, + exchange: state.exchange, movements: state.movements }) @@ -318,7 +323,9 @@ const mapDispatchToProps = dispatch => ({ setExchange: movements => dispatch( actions.exchange() ), setForum: movements => dispatch( actions.forum() ), setAdminPanel: movements => dispatch( actions.adminPanel() ), - resetMovements: movements => dispatch( actions.reset() ) + resetMovements: movements => dispatch( actions.reset() ), + + getChart: exchange => dispatch( getChart(exchange) ) }) export default connect(mapStateToProps, mapDispatchToProps)(IndexInterface) diff --git a/src/stores/exchange/duck/actions.js b/src/stores/exchange/duck/actions.js new file mode 100644 index 0000000..51a9698 --- /dev/null +++ b/src/stores/exchange/duck/actions.js @@ -0,0 +1,29 @@ +import types from './types' + +const setChart = item => ({ + type: types.GET_CANDLES_CHART, item +}) + +const setTriggers = item => ({ + type: types.GET_USER_TRIGGERS, item +}) + +const setNotifications = item => ({ + type: types.GET_USER_NOTIFICATIONS, item +}) + +const setTransactions = item => ({ + type: types.GET_USER_TRANSACTIONS, item +}) + +const reset = item => ({ + type: types.RESET, item +}) + +export default { + setChart, + setTriggers, + setNotifications, + setTransactions, + reset +} diff --git a/src/stores/exchange/duck/index.js b/src/stores/exchange/duck/index.js new file mode 100644 index 0000000..0a0cfe8 --- /dev/null +++ b/src/stores/exchange/duck/index.js @@ -0,0 +1,5 @@ +import exchangeReducer from './reducers' +export { default as exchangeTypes } from './types' +export { default as exchangeActions } from './actions' + +export default exchangeReducer diff --git a/src/stores/exchange/duck/operations.js b/src/stores/exchange/duck/operations.js new file mode 100644 index 0000000..dda6760 --- /dev/null +++ b/src/stores/exchange/duck/operations.js @@ -0,0 +1,69 @@ +import actions from './actions' + +const fetchGetChart = async () => { + const response = await + fetch ( + 'http://localhost:8001/index/exchange/' + 1800, { + method: 'GET', + credential: 'same-origin' + }) + const json = await response.json() + return json +} + +const fetchGetUserTriggers = async (userID) => { + const response = await + fetch ( + 'http://localhost:8001/index/trigger/' + userID, { + method: 'GET', + credential: 'same-origin' + }) + const json = await response.json() + return json +} + +const fetchGetUserTransactions = async (userID) => { + const response = await + fetch ( + 'http://localhost:8001/index/user/' + userID + '/transaction', { + method: 'GET', + credential: 'same-origin' + }) + const json = await response.json() + return json +} + +const fetchGetUserNotifications = async (userID) => { + const response = await + fetch ( + 'http://localhost:8001/index/user/' + userID + '/notification', { + method: 'GET', + credential: 'same-origin' + }) + const json = await response.json() + return json +} + +export const getChart = () => + async (dispatch) => { + const chart = await fetchGetChart() + dispatch(actions.setChart(chart)) + } + +export const getGetUserTriggers = () => + async (dispatch) => { + const triggers = await fetchGetUserTriggers() + dispatch(actions.setUserTriggers(triggers)) + } + +export const getUserTransactions = () => + async (dispatch) => { + const transactions = await fetchGetUserTransactions() + dispatch(actions.setUserTransactions(transactions)) + } + +export const getUserNotifications = () => + async (dispatch) => { + const notifications = await fetchGetUserNotifications() + dispatch(actions.setUserNotifications(notifications)) + } diff --git a/src/stores/exchange/duck/reducers.js b/src/stores/exchange/duck/reducers.js new file mode 100644 index 0000000..c9ef8e4 --- /dev/null +++ b/src/stores/exchange/duck/reducers.js @@ -0,0 +1,44 @@ +import types from './types' + +const INITIAL_STATE = { + candles: [], + userTriggers: [], + userNotifications: [], + userTransactions: [] +} + +const exchangeReducer = (state = INITIAL_STATE, action) => { + switch(action.type) { + case types.GET_CANDLES_CHART: + return { + ...state, + candles: action.item + } + case types.GET_USER_TRIGGERS: + return { + ...state, + userTriggers: action.item + } + case types.GET_USER_NOTIFICATIONS: + return { + ...state, + userNotifications: action.item + } + case types.GET_USER_TRANSACTIONS: + return { + ...state, + userTransactions: action.item + } + case types.RESET: + return { + ...state, + userTriggers: [], + userNotifications: [], + userTransactions: [] + } + default: + return state + } +} + +export default exchangeReducer diff --git a/src/stores/exchange/duck/types.js b/src/stores/exchange/duck/types.js new file mode 100644 index 0000000..226e7d2 --- /dev/null +++ b/src/stores/exchange/duck/types.js @@ -0,0 +1,13 @@ +const GET_CANDLES_CHART = 'GET_CANDLES_CHART' +const GET_USER_TRIGGERS = 'GET_USER_TRIGGERS' +const GET_USER_NOTIFICATIONS = 'GET_USER_NOTIFICATIONS' +const GET_USER_TRANSACTIONS = 'GET_USER_TRANSACTIONS' +const RESET = 'RESET' + +export default { + GET_CANDLES_CHART, + GET_USER_TRIGGERS, + GET_USER_NOTIFICATIONS, + GET_USER_TRANSACTIONS, + RESET +} diff --git a/src/stores/reducers.js b/src/stores/reducers.js index b510d9b..ec6d58c 100644 --- a/src/stores/reducers.js +++ b/src/stores/reducers.js @@ -1,16 +1,21 @@ import { combineReducers } from 'redux' + import movementsReducer from './movements/duck' import commentReducer from './comments/duck' import subjectReducer from './subjects/duck' import threadReducer from './threads/duck' import userReducer from './user/duck' +import exchangeReducer from './exchange/duck' + const rootReducer = combineReducers({ user: userReducer, threads: threadReducer, subjects: subjectReducer, comments: commentReducer, - movements: movementsReducer + movements: movementsReducer, + + exchange: exchangeReducer }) export default rootReducer diff --git a/src/stores/user/duck/reducers.js b/src/stores/user/duck/reducers.js index 7fb8772..1596141 100644 --- a/src/stores/user/duck/reducers.js +++ b/src/stores/user/duck/reducers.js @@ -26,6 +26,7 @@ const userReducer = (state = INITIAL_STATE, action) => { } case types.LOGOUT_USER: return { + id: -1, isActive: false } default: diff --git a/src/styles/elements.scss b/src/styles/elements.scss index 1798473..cfa2cab 100644 --- a/src/styles/elements.scss +++ b/src/styles/elements.scss @@ -5,6 +5,17 @@ margin: auto; } +@mixin scrollStyle { + margin-top: 5px; + margin-bottom: 5px; + border: 0px; + border-radius: 10px; + font-size: 12pt; + text-align: center; + color: rgba(111,108,106,1); + background-color: rgba(22,28,29,0.6); +} + @mixin inputStyle { width: 200px; height: 35px; diff --git a/src/styles/general.scss b/src/styles/general.scss index 5c13fce..a19b076 100644 --- a/src/styles/general.scss +++ b/src/styles/general.scss @@ -5,7 +5,7 @@ body { overflow-y: hidden; ::-webkit-scrollbar { - display: none; + @include scrollStyle } input { @include inputStyle diff --git a/src/styles/indexExchange.scss b/src/styles/indexExchange.scss new file mode 100644 index 0000000..46b7c61 --- /dev/null +++ b/src/styles/indexExchange.scss @@ -0,0 +1,92 @@ +@import 'elements'; + +.indexExchange { + position: relative; + z-index: 0; + + width: 100%; + height: auto; + + padding-top: 20vh; + + margin-left: auto; + margin-right: auto; +} + @mixin centerEx { + margin-left: auto; + margin-right: auto; + } + + @mixin exchangeChart { + + width: 100%; + height: 600px; + overflow-y: hidden; + overflow-x: scroll; + + .chart { + height: 100%; + + @include centerEx + .sectionChart { + width: 10px; + height: 100%; + margin-right: 5px; + float: left; + + .sectionCandle { + width: 100%; + height: 400px; + @include centerEx + + .candle { + width: 100%; + height: auto; + + .candleMaxValue { + @include centerEx + + width: 1px; + } + + .candleHigh { + width: 100%; + } + + .candleLow { + width: 100%; + } + + .candleMinValue { + @include centerEx + + width: 1px; + } + } + } + .sectionVolumen { + + width: 100%; + height: 200px; + @include centerEx + + .volumen { + width: 100%; + height: 20px; + background: gray; + opacity: 0.8; + } + } + } + } + } + + .exchangeChartGuest { + @include exchangeChart + + margin-top: 5vh; + } + + .exchangeChartUser { + @include exchangeChart + }