From 43fbcd15fb0d3a92b67baa3a7e2c5e4979e2400a Mon Sep 17 00:00:00 2001 From: TBS093A Date: Sat, 18 Jan 2020 14:50:07 +0100 Subject: [PATCH] full ready front-end for TradeApp commit --- .../exchange/exchangeNotifications.js | 57 +++++++++++++++++++ src/components/exchange/exchangeTriggerAdd.js | 4 +- src/components/exchange/indexExchange.js | 2 + src/stores/exchange/duck/actions.js | 5 ++ src/stores/exchange/duck/operations.js | 18 ++++++ src/stores/exchange/duck/reducers.js | 24 +++++++- src/stores/exchange/duck/types.js | 2 + src/styles/elements.scss | 8 +++ src/styles/indexExchange.scss | 25 ++++++++ 9 files changed, 141 insertions(+), 4 deletions(-) create mode 100644 src/components/exchange/exchangeNotifications.js diff --git a/src/components/exchange/exchangeNotifications.js b/src/components/exchange/exchangeNotifications.js new file mode 100644 index 0000000..8f73a44 --- /dev/null +++ b/src/components/exchange/exchangeNotifications.js @@ -0,0 +1,57 @@ +import React, { useState, useEffect } from 'react' +import { connect } from 'react-redux' + +import { deleteNotification, getUserNotifications } from '../../stores/exchange/duck/operations' + +import '../../styles/indexExchange.scss' + +const ExchangeNotifications = ({ + user, + exchange, deleteNotification, getUserNotifications }) => { + + useEffect( () => { getUserNotifications(user.id) }, [] ) + + const deleteOldNotification = (notifyID) => { + let notify = { + id: notifyID, + token: user.token + } + deleteNotification(notify) + } + + return ( +
+

{ user.login } exchange notifications:

+
+ { exchange.userNotifications + .sort( (a, b) => b.id - a.id ) + .map( (notify, key) => { + return ( +
+

{ key + 1 }. { notify.message }

+ +
+ ) + } + ) + } +
+
+ ) +} + +const mapStateToProps = state => ({ + user: state.user, + exchange: state.exchange +}) + +const mapDispatchToProps = dispatch => ({ + getUserNotifications: exchange => dispatch( getUserNotifications(exchange) ), + deleteNotification: exchange => dispatch( deleteNotification(exchange) ) +}) + +export default connect(mapStateToProps,mapDispatchToProps)(ExchangeNotifications) diff --git a/src/components/exchange/exchangeTriggerAdd.js b/src/components/exchange/exchangeTriggerAdd.js index cb06edd..f53935e 100644 --- a/src/components/exchange/exchangeTriggerAdd.js +++ b/src/components/exchange/exchangeTriggerAdd.js @@ -40,13 +40,13 @@ const ExchangeTriggerAdd = ({ Add Trigger -

{ user.login } Triggers:

+

{ user.login } triggers:

{ message }

{ exchange.userTriggers .sort( (a, b) => b.id - a.id ) .map( (trigger, key) => ( -

{ key }. Value: { trigger.course_values_for_trigger } PLN, Date: { trigger.date_of_trigger }, Status { trigger.status === 1 ? 'Enabled' : 'Disabled' }

+

{ key + 1 }. Value: { trigger.course_values_for_trigger } PLN, Date: { trigger.date_of_trigger }, Status { trigger.status === 1 ? 'Enabled' : 'Disabled' }

) ) }
diff --git a/src/components/exchange/indexExchange.js b/src/components/exchange/indexExchange.js index 0ed0fbc..580db53 100644 --- a/src/components/exchange/indexExchange.js +++ b/src/components/exchange/indexExchange.js @@ -7,6 +7,7 @@ import { useInterval } from '../useInterval' import ExchangeTriggerAdd from './exchangeTriggerAdd' import ExchangePrognosis from './exchangePrognosis' +import ExchangeNotifications from './exchangeNotifications' import '../../styles/indexExchange.scss' @@ -139,6 +140,7 @@ const IndexExchange = ({
+
) : (
diff --git a/src/stores/exchange/duck/actions.js b/src/stores/exchange/duck/actions.js index 0772058..9ab2402 100644 --- a/src/stores/exchange/duck/actions.js +++ b/src/stores/exchange/duck/actions.js @@ -16,6 +16,10 @@ const setTransactions = item => ({ type: types.GET_USER_TRANSACTIONS, item }) +const deleteOldNotification = item => ({ + type: types.DELETE_NOTIFICATION, item +}) + const addNewTrigger = item => ({ type: types.ADD_NEW_TRIGGER, item }) @@ -33,6 +37,7 @@ export default { setTriggers, setNotifications, setTransactions, + deleteOldNotification, addNewTrigger, setNewPrognosis, reset diff --git a/src/stores/exchange/duck/operations.js b/src/stores/exchange/duck/operations.js index c88ca70..b830d79 100644 --- a/src/stores/exchange/duck/operations.js +++ b/src/stores/exchange/duck/operations.js @@ -65,6 +65,18 @@ const fetchPrognosis = async (data) => { return json } +const fetchDeleteNotification = async (data) => { + const response = await fetch ( + 'http://localhost:8001/index/notification/' + data.id, { + method: 'DELETE', + credential: 'same-origin', + body: JSON.stringify(data) + } + ) + const json = response.json() + return json +} + export const getChart = () => async (dispatch) => { const chart = await fetchGetChart() @@ -99,3 +111,9 @@ export const checkPrognosis = (data) => const prognosis = await fetchPrognosis(data) dispatch(actions.setNewPrognosis(prognosis)) } + +export const deleteNotification = (data) => + async (dispatch) => { + dispatch(actions.deleteOldNotification(data)) + await fetchDeleteNotification(data) + } diff --git a/src/stores/exchange/duck/reducers.js b/src/stores/exchange/duck/reducers.js index c3a61ab..911fd32 100644 --- a/src/stores/exchange/duck/reducers.js +++ b/src/stores/exchange/duck/reducers.js @@ -5,7 +5,13 @@ const INITIAL_STATE = { userTriggers: [], userNotifications: [], userTransactions: [], - prognosis: {} + prognosis: { + price_forecast: 0, + percent_of_difference: 0, + course_on_payment: 0, + svg_of_all: 0, + date_of_transaction: '' + } } const exchangeReducer = (state = INITIAL_STATE, action) => { @@ -30,6 +36,13 @@ const exchangeReducer = (state = INITIAL_STATE, action) => { ...state, userTransactions: action.item } + case types.DELETE_NOTIFICATION: + return { + ...state, + userNotifications: state.userNotifications.filter( + notify => notify.id !== action.item.id + ) + } case types.NEW_PROGNOSIS: return { ...state, @@ -40,7 +53,14 @@ const exchangeReducer = (state = INITIAL_STATE, action) => { ...state, userTriggers: [], userNotifications: [], - userTransactions: [] + userTransactions: [], + prognosis: { + price_forecast: 0, + percent_of_difference: 0, + course_on_payment: 0, + svg_of_all: 0, + date_of_transaction: '' + } } default: return state diff --git a/src/stores/exchange/duck/types.js b/src/stores/exchange/duck/types.js index 9c5d3ae..c32669c 100644 --- a/src/stores/exchange/duck/types.js +++ b/src/stores/exchange/duck/types.js @@ -2,6 +2,7 @@ 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 DELETE_NOTIFICATION = 'DELETE_NOTIFICATION' const ADD_NEW_TRIGGER = 'ADD_NEW_TRIGGER' const NEW_PROGNOSIS = 'NEW_PROGNOSIS' const RESET = 'RESET' @@ -11,6 +12,7 @@ export default { GET_USER_TRIGGERS, GET_USER_NOTIFICATIONS, GET_USER_TRANSACTIONS, + DELETE_NOTIFICATION, ADD_NEW_TRIGGER, NEW_PROGNOSIS, RESET diff --git a/src/styles/elements.scss b/src/styles/elements.scss index 86090b2..76d2508 100644 --- a/src/styles/elements.scss +++ b/src/styles/elements.scss @@ -99,3 +99,11 @@ rgba(9,17,121,0.1) 10%, rgba(0,212,255,0) 50%); } + +.deleteButton { + width: 20px; + height: 20px; + background-color: rgba(131, 28, 20, 1); + border-radius: 2px; + color: white; +} diff --git a/src/styles/indexExchange.scss b/src/styles/indexExchange.scss index 40cc920..74afd78 100644 --- a/src/styles/indexExchange.scss +++ b/src/styles/indexExchange.scss @@ -4,6 +4,8 @@ position: relative; z-index: 0; + overflow-y: hidden; + width: 100%; height: auto; @@ -217,5 +219,28 @@ width: 100%; } } +} + +.exchangeNotificationsDiv { + @include exchangeDivInterface + border-right: 0px; + + p { + text-align: center; + } + + .notifyList { + overflow-y: scroll; + height: 120px; + + p { + width: 90%; + float: left; + } + button { + margin-left: 2.5%; + float: left; + } + } }