full ready front-end for TradeApp commit

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 (
+    <div className='exchangeNotificationsDiv'>
+      <p>{ user.login } exchange notifications:</p>
+      <div className='notifyList'>
+        { exchange.userNotifications
+          .sort( (a, b) => b.id - a.id  )
+          .map( (notify, key) => {
+              return (
+                <div key={ key + 1 }>
+                  <p>{ key + 1 }. { notify.message }</p>
+                  <button
+                    className='deleteButton'
+                    onClick={ () => deleteOldNotification(notify.id) }>
+                    x
+                  </button>
+                </div>
+              )
+            }
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+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)

src/components/exchange/exchangeTriggerAdd.js

@@ -40,13 +40,13 @@ const ExchangeTriggerAdd = ({
           Add Trigger
         </button>
       </form>
-      <p>{ user.login } Triggers:</p>
+      <p>{ user.login } triggers:</p>
       <p>{ message }</p>
       <div className='triggerItemList'>
       { exchange.userTriggers
         .sort( (a, b) => b.id - a.id  )
         .map( (trigger, key) => (
-        <div key={ key } className='triggerItem'><p>{ key }. Value: { trigger.course_values_for_trigger } PLN, Date: { trigger.date_of_trigger }, Status { trigger.status === 1 ? 'Enabled' : 'Disabled' }</p></div>
+        <div key={ key + 1 } className='triggerItem'><p>{ key + 1 }. Value: { trigger.course_values_for_trigger } PLN, Date: { trigger.date_of_trigger }, Status { trigger.status === 1 ? 'Enabled' : 'Disabled' }</p></div>
       ) ) }
       </div>
     </div>

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 = ({
             <div>
               <ExchangeTriggerAdd triggerValue={ triggerValue } />
               <ExchangePrognosis />
+              <ExchangeNotifications />
             </div>
           ) : (
             <div></div>

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

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)
+  }

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

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

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;
+}

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;
+    }
+  }
 
 }