big update && resolve problems and bugs

run.sh

@@ -1,2 +1,3 @@
 sudo sysctl fs.inotify.max_user_watches=524288
+gatsby clean
 gatsby develop

src/components/exchange/indexExchange.js

@@ -13,16 +13,16 @@ import '../../styles/indexExchange.scss'
 
 const IndexExchange = ({
   user,
-  exchange, getChart, getUserTriggers, getUserNotifications,  getUserTransactions }) => {
+  exchange, getChart, getUserTriggers, getUserNotifications, getUserTransactions }) => {
 
   let fifteenMinuts = 1500000
 
-  useInterval( () => {
+  useInterval(() => {
     getChart()
-  }, fifteenMinuts )
+  }, fifteenMinuts)
 
-  const [candleInfo, setCandleInfo] = useState( { Open: 0, Close: 0, Min: 0, Max: 0, Vol: 0 } )
+  const [candleInfo, setCandleInfo] = useState({ Open: 0, Close: 0, Min: 0, Max: 0, Vol: 0 })
-  const [mousePosition, setMousePosition] = useState( { x: 0, y: 0 } )
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
   const [triggerValue, setTriggerValue] = useState(0)
 
   const colorGreen = {
@@ -34,119 +34,129 @@ const IndexExchange = ({
   }
 
   const getCandleInformation = (candle) => {
-    setCandleInfo( {
+    setCandleInfo({
-       Open: candle.Open,
+      Open: candle.Open,
-       Close: candle.Close,
+      Close: candle.Close,
-       Min: candle.Min,
+      Min: candle.Min,
-       Max: candle.Max,
+      Max: candle.Max,
-       Vol: candle.Volume,
+      Vol: candle.Volume,
-       Date: candle.Date
+      Date: candle.Date
-     }
+    }
-   )
+    )
- }
+  }
- let pixelScale = ( exchange.candles.graphMax - exchange.candles.graphMin ) / 590
+  let pixelScale = (exchange.candles.graphMax - exchange.candles.graphMin) / 590
- let cursorValue = exchange.candles.graphMax - ( pixelScale * ( mousePosition.y - 175 ) )
+  let cursorValue = exchange.candles.graphMax - (pixelScale * (mousePosition.y - 175))
 
- const getMousePosition = (event) => {
+  const getMousePosition = (event) => {
-   setMousePosition( { x: event.pageX, y: event.pageY } )
+    setMousePosition({ x: event.pageX, y: event.pageY })
- }
+  }
 
+  useEffect( () => responsiveIntrface())
+
+  const responsiveIntrface = () => {
+    if ( user.id != -1) {
+      let chartHeight = 600
+      let chartPaddingTop = 175
+      let exchangeInterfaceHeight = window.innerHeight - (chartHeight + chartPaddingTop)
+      document.getElementById('exchangeInterfaceTwo').style = 'height: ' + exchangeInterfaceHeight + 'px;'
+    }
+  }
 
   return (
     <div className='indexExchange'>
-      <div className={ user.id > -1 ? 'exchangeChartUser' : 'exchangeChartGuest' }>
+      <div className={user.id > -1 ? 'exchangeChartUser' : 'exchangeChartGuest'}>
         <div className='chart'
-             onMouseOver={ event => getMousePosition(event) }
+          onMouseOver={event => getMousePosition(event)}
-             onClick={ () => setTriggerValue( parseInt(cursorValue) ) }
+          onClick={() => setTriggerValue(parseInt(cursorValue))}
-             style={ { width: exchange.candles.candlesCount * 15 + 'px' } }>
+          style={{ width: exchange.candles.candlesCount * 15 + 'px' }}>
-          { user.id > -1 ? (
+          {user.id > -1 ? (
             <div>
               <div className='exchangeTriggerDativeY'
-                  style={ { transform: 'translateY(' + (mousePosition.y - 175) + 'px)' } }>
+                style={{ transform: 'translateY(' + (mousePosition.y - 175) + 'px)' }}>
-                  <p>{ parseInt(cursorValue) } PLN</p>
+                <p>{parseInt(cursorValue)} PLN</p>
               </div>
               <div className='exchangeTriggerDativeX'
-                   style={ { transform: 'translateX(' + (mousePosition.x) + 'px)' } }>
+                style={{ transform: 'translateX(' + (mousePosition.x) + 'px)' }}>
               </div>
             </div>
           ) : (
-            <div></div>
+              <div></div>
-          ) }
+            )}
-          { exchange.candles.candles.map( (candle, key) => {
+          {exchange.candles.candles.map((candle, key) => {
 
-                const color = candle.Open > candle.Close ? colorRed.background : colorGreen.background
+            const color = candle.Open > candle.Close ? colorRed.background : colorGreen.background
 
-                let highValue = candle.Open > candle.Close ? candle.Open : candle.Close
+            let highValue = candle.Open > candle.Close ? candle.Open : candle.Close
-                let lowValue = candle.Open < candle.Close ? candle.Open : candle.Close
+            let lowValue = candle.Open < candle.Close ? candle.Open : candle.Close
 
-                let scaleProperties = 10
+            let scaleProperties = 10
 
-                let chartScaleY = (exchange.candles.graphMax - candle.Max) / pixelScale
+            let chartScaleY = (exchange.candles.graphMax - candle.Max) / pixelScale
 
-                let onePercentScaleY = 100 / chartScaleY
+            let onePercentScaleY = 100 / chartScaleY
-                let difference = ( highValue - lowValue ) / pixelScale
+            let difference = (highValue - lowValue) / pixelScale
 
-                if ( parseInt(difference) === 0 )
+            if (parseInt(difference) === 0)
-                  difference = 1
+              difference = 1
 
-                return (
+            return (
+              <div
+                key={key}
+                className='sectionChart'
+                onMouseOver={() => getCandleInformation(candle)}>
+
+                <div className='sectionCandle'>
                   <div
-                    key={ key }
+                    className='candle'
-                    className='sectionChart'
+                    style={{ paddingTop: chartScaleY + 'px' }}>
-                    onMouseOver={ () => getCandleInformation(candle) }>
+                    <div
-
+                      className='candleMaxValue'
-                    <div className='sectionCandle'>
+                      style={{ height: parseInt((candle.Max - highValue) / pixelScale) + 'px', background: color }}>
-                      <div
-                        className='candle'
-                        style={ { paddingTop: chartScaleY + 'px' } }>
-                        <div
-                          className='candleMaxValue'
-                          style={ { height: parseInt( (candle.Max - highValue ) / pixelScale ) + 'px', background: color }}>
-                        </div>
-                        <div
-                          className='candleHigh'
-                          style={{ height: parseInt( difference ) + 'px', background: color }}>
-                        </div>
-                        <div
-                          className='candleMinValue'
-                          style={ { height: parseInt( ( lowValue - candle.Min ) / pixelScale ) + 'px', background: color }}>
-                        </div>
-                      </div>
                     </div>
-
+                    <div
-                    <div className='sectionVolumen'>
+                      className='candleHigh'
-                      <div className='volumen'
+                      style={{ height: parseInt(difference) + 'px', background: color }}>
-                      style={ { height: candle.Volume / 1.5 + 'px' } }>
+                    </div>
-                      </div>
+                    <div
+                      className='candleMinValue'
+                      style={{ height: parseInt((lowValue - candle.Min) / pixelScale) + 'px', background: color }}>
                     </div>
-
                   </div>
-                )
+                </div>
-              }
+
+                <div className='sectionVolumen'>
+                  <div className='volumen'
+                    style={{ height: candle.Volume / 1.5 + 'px' }}>
+                  </div>
+                </div>
+
+              </div>
             )
           }
+          )
+          }
         </div>
       </div>
-      <div className={ user.id > -1 ? 'exchangeInterface' : 'exchangeEmptySpace' }>
+      <div className={user.id > -1 ? 'exchangeInterface' : 'exchangeEmptySpace'}>
         <div className='candleInformation'>
-          <p>Open: { candleInfo.Open } PLN,</p>
+          <p>Open: {candleInfo.Open} PLN</p>
-          <p>Close: { candleInfo.Close } PLN,</p>
+          <p>Close: {candleInfo.Close} PLN</p>
-          <p>Max: { candleInfo.Max } PLN,</p>
+          <p>Max: {candleInfo.Max} PLN</p>
-          <p>Min: { candleInfo.Min } PLN,</p>
+          <p>Min: {candleInfo.Min} PLN</p>
-          <p>Volume: { candleInfo.Vol },</p>
+          <p>Volume: {candleInfo.Vol}</p>
-          <p>Date: { candleInfo.Date }</p>
+          <p>Date: {candleInfo.Date}</p>
         </div>
-        { user.id > -1 ? (
-            <div>
-              <ExchangeTriggerAdd triggerValue={ triggerValue } />
-              <ExchangePrognosis />
-              <ExchangeNotifications />
-            </div>
-          ) : (
-            <div></div>
-          )
-        }
       </div>
+      {user.id > -1 ? (
+        <div id='exchangeInterfaceTwo'>
+          <ExchangeTriggerAdd triggerValue={triggerValue} />
+          <ExchangePrognosis />
+          <ExchangeNotifications />
+        </div>
+      ) : (
+          <div></div>
+        )
+      }
     </div>
   )
 }
@@ -158,10 +168,10 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = dispatch => ({
-  getChart: exchange => dispatch( getChart(exchange) ),
+  getChart: exchange => dispatch(getChart(exchange)),
-  getUserTriggers: exchange => dispatch( getUserTriggers(exchange) ),
+  getUserTriggers: exchange => dispatch(getUserTriggers(exchange)),
-  getUserNotifications: exchange => dispatch( getUserNotifications(exchange) ),
+  getUserNotifications: exchange => dispatch(getUserNotifications(exchange)),
-  getUserTransactions: exchange => dispatch( getUserTransactions(exchange) )
+  getUserTransactions: exchange => dispatch(getUserTransactions(exchange))
 })
 
-export default connect(mapStateToProps,mapDispatchToProps)(IndexExchange)
+export default connect(mapStateToProps, mapDispatchToProps)(IndexExchange)

src/components/forum/forumCommentUpdate.js

@@ -16,7 +16,15 @@ const ForumCommentUpdate = ({
 
   const updateCommentTextArea = React.createRef()
 
-  const updateOldComment = (event) => {
+  const sleep = (ms) => {
+    return new Promise(resolve => setTimeout(resolve, ms))
+  }
+
+  let subjectLoad = {
+    id: subjects.actualSubjectID
+  }
+
+  const updateOldComment = async (event) => {
     event.preventDefault()
     if ( updateCommentTextArea.current.value !== '' ) {
       let commentData = {
@@ -25,7 +33,9 @@ const ForumCommentUpdate = ({
         text: updateCommentTextArea.current.value
       }
       updateCommentTextArea.current.value = ''
-      updateComment(commentData)
+      await updateComment(commentData)
+      await sleep(100)
+      await refreshSubjectComments(subjectLoad)
     }
   }
 

src/components/forum/forumComments.js

@@ -23,7 +23,15 @@ const ForumComments = ({
 
   const addCommentTextArea = React.createRef()
 
-  const addNewComment = (event) => {
+  let subjectLoad = {
+    id: subjects.actualSubjectID
+  }
+
+  const sleep = (ms) => {
+    return new Promise(resolve => setTimeout(resolve, ms))
+  }
+
+  const addNewComment = async (event) => {
     event.preventDefault()
     if ( addCommentTextArea.current.value !== '' ) {
       let newComment = {
@@ -33,25 +41,21 @@ const ForumComments = ({
         token: user.token
       }
       addCommentTextArea.current.value = ''
-      addComment(newComment)
+      await addComment( newComment )
+      await sleep(100)
+      await refreshSubjectComments(subjectLoad)
       setFormDiv( !formDiv )
-      let actualSubject = {
-        id: subjects.actualSubjectID
-      }
-      refreshSubjectComments(actualSubject)
     }
   }
 
-  const deleteOldComment = (commentID) => {
+  const deleteOldComment = async(commentID) => {
     let delComment = {
       id: commentID,
       token: user.token
     }
-    deleteComment(delComment)
+    await deleteComment(delComment)
-    let actualSubject = {
+    await sleep(100)
-      id: subjects.actualSubjectID
+    await refreshSubjectComments(subjectLoad)
-    }
-    refreshSubjectComments(actualSubject)
   }
 
   const [commentText, setCommentText] = useState(0)

src/components/forum/forumRatings.js

@@ -57,21 +57,22 @@ const ForumRatings = ({
     let divYPositionOnPage = ratingDiv.getBoundingClientRect().top + 72
     let yPosition = event.screenY - divYPositionOnPage
 
-    if ( yPosition > 200 ) {
+    if ( yPosition > 270 ) {
       setValue(5)
     }
-    else if ( yPosition > 150 && yPosition < 200 ) {
+    else if ( yPosition > 215 && yPosition < 270 ) {
       setValue(4)
     }
-    else if ( yPosition > 100 && yPosition < 150 ) {
+    else if ( yPosition > 168 && yPosition < 215 ) {
       setValue(3)
     }
-    else if ( yPosition > 50 && yPosition < 150 ) {
+    else if ( yPosition > 120 && yPosition < 168 ) {
       setValue(2)
     }
-    else if ( yPosition > 0 && yPosition < 50 ) {
+    else if ( yPosition > 60 && yPosition < 120 ) {
       setValue(1)
     }
+    console.log(yPosition)
   }
 
   const [updateRating, setUpdate] = useState(false)

src/components/forum/forumSubjects.js

@@ -23,6 +23,7 @@ const ForumSubjects = ({
   const addSubjectTitle = React.createRef()
   const addSubjectComment = React.createRef()
 
+  
   const addNewSubject = (event) => {
     event.preventDefault()
     if ( addSubjectTitle.current.value !== '' && addSubjectComment.current.value !== '' ) {

src/stores/comments/duck/actions.js

@@ -4,6 +4,11 @@ const getRatingsComment = item => ({
   type: types.GET_COMMENTS_RATINGS, item
 })
 
+const addComment = item => ({
+  type: types.ADD_COMMENT, item
+})
+
 export default {
-  getRatingsComment
+  getRatingsComment,
+  addComment
 }

src/stores/comments/duck/types.js

@@ -1,5 +1,7 @@
 const GET_COMMENTS_RATINGS = 'GET_COMMENTS_RATINGS'
+const ADD_COMMENT = 'ADD_COMMENT'
 
 export default {
-  GET_COMMENTS_RATINGS
+  GET_COMMENTS_RATINGS,
+  ADD_COMMENT
 }

src/stores/store.js

@@ -11,7 +11,7 @@ const persistedState = loadState();
 
 export const store = createStore(rootReducer, persistedState, composeWithDevTools(applyMiddleware(thunk)))
 
-console.log(store.getState())
+// console.log(store.getState())
 
 store.subscribe(() => {
   saveState({

src/stores/subjects/duck/actions.js

@@ -12,8 +12,13 @@ const deactivate = item => ({
   type: types.DEACTIVATE, item
 })
 
+const addComment = item => ({
+  type: types.ADD_COMMENT, item
+})
+
 export default {
   getSubjectComments,
   activate,
-  deactivate
+  deactivate,
+  addComment
 }

src/stores/subjects/duck/reducers.js

@@ -34,6 +34,11 @@ const subjectReducer = (state = INITIAL_STATE, action) => {
          actualSubjectAuthorID: -1,
          isActive: false
        }
+      case types.ADD_COMMENT:
+        return {
+         ...state,
+         commentsList: [...state.commentsList, action.item] 
+        } 
       default:
         return state;
     }

src/stores/subjects/duck/types.js

@@ -1,9 +1,11 @@
 const GET_SUBJECT_COMMENTS = 'GET_SUBJECT_COMMENTS'
 const ACTIVATE = 'ACTIVATE'
 const DEACTIVATE = 'DEACTIVATE'
+const ADD_COMMENT = 'ADD_COMMENT'
 
 export default{
   GET_SUBJECT_COMMENTS,
   ACTIVATE,
-  DEACTIVATE
+  DEACTIVATE,
+  ADD_COMMENT
 }

src/styles/forumRatings.scss

@@ -14,11 +14,14 @@ $widthRT: 40px;
     width: 1px;
     height: 250px;
 
-    background-color: rgba(117,82,29,1);
+    border: solid 1px;
+    border-color: rgba(117,82,29,1);
     margin: auto;
   }
 
   .ratingValue {
+    width: $widthRT;
+    height: 250px;
     transition-duration: 0.5s;
   }
 

src/styles/indexExchange.scss

@@ -4,12 +4,11 @@
   position: relative;
   z-index: 0;
 
-  overflow-y: hidden;
+  overflow: hidden;
 
   width: 100%;
-  height: auto;
 
-  padding-top: 175px;
+  padding-top: 175px; //175px
 
   margin-left: auto;
   margin-right: auto;
@@ -22,14 +21,14 @@
   @mixin exchangeChart {
 
     width: 100%;
-    height: 600px;
+    height: 600px; //600px
     overflow: hidden;
     overflow-x: scroll;
 
     .chart {
       height: 100%;
 
-      @include centerEx
+      @include centerEx;
       .sectionChart {
         width: 10px;
         height: 100%;
@@ -44,14 +43,14 @@
         .sectionCandle {
           width: 100%;
           height: 400px;
-          @include centerEx
+          @include centerEx;
 
           .candle {
             width: 100%;
             height: auto;
 
             .candleMaxValue {
-              @include centerEx
+              @include centerEx;
 
               width: 1px;
             }
@@ -65,7 +64,7 @@
             }
 
             .candleMinValue {
-              @include centerEx
+              @include centerEx;
 
               width: 1px;
             }
@@ -75,7 +74,7 @@
 
           width: 100%;
           height: 200px;
-          @include centerEx
+          @include centerEx;
 
           .volumen {
             width: 100%;
@@ -88,41 +87,46 @@
   }
 
   .exchangeChartGuest {
-    @include exchangeChart
+    @include exchangeChart;
 
     margin-top: 5vh;
   }
 
   .exchangeChartUser {
-    @include exchangeChart
+    @include exchangeChart;
   }
 
 @mixin exchangeInterface {
+
+  z-index: -1;
   width: 100%;
-  height: auto;
+  height: 70%;
-  background: rgba(0,0,0,0.2);
+  position: fixed;
+  top: 15%;
+  right: 0px;
 
   .candleInformation {
-    width: 1500px;
+    width: 100%;
-    height: 20px;
+    height: auto;
     padding-top: 10px;
-    padding-bottom: 20px;
+    padding-bottom: 30px;
     margin-left: auto;
     margin-right: auto;
 
     p {
-      width: 250px;
+      width: 16.66%;
       text-align: center;
       float: left;
+      font-size: 15px;
     }
   }
 }
 
   .exchangeEmptySpace {
-    @include exchangeInterface
+    @include exchangeInterface;
   }
   .exchangeInterface {
-    @include exchangeInterface
+    @include exchangeInterface;
   }
 
 .exchangeTriggerDativeY {
@@ -143,25 +147,32 @@
   transform: margin 700ms;
 }
 
+#exchangeInterfaceTwo {
+  background: rgba(0,0,0,0.1);
+}
+
 @mixin gapBetweenSectionsEx {
   border-right: 2px dashed;
   border-color: rgba(117,82,29,0.7);
 }
 
 @mixin exchangeDivInterface {
-  width: 32%;
+  width: 31.25%;
-  height: 160px;
+  height: 94%;
-  padding-left: 10px;
+  float: left;
-  padding-right: 10px;
+  padding-left: 1%;
-  float:left;
+  padding-right: 1%;
-  background: rgba(0,0,0,0.2);
+  padding-top: 10px;
   overflow: hidden;
+  p {
+    font-size: 16px;
+  }
 
   @include gapBetweenSectionsEx
 }
 
 .exchangeTriggerDiv {
-  @include exchangeDivInterface
+  @include exchangeDivInterface;
 
   form {
     width: 100%;
@@ -201,7 +212,7 @@
 }
 
 .exchangePrognosisDiv {
-  @include exchangeDivInterface
+  @include exchangeDivInterface;
 
   input {
     width: 100%;
@@ -222,7 +233,7 @@
 }
 
 .exchangeNotificationsDiv {
-  @include exchangeDivInterface
+  @include exchangeDivInterface;
   border-right: 0px;
 
   p {