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

@@ -51,6 +51,16 @@ const IndexExchange = ({
     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'>
@@ -129,15 +139,16 @@ const IndexExchange = ({
       </div>
       <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>
         </div>
+      </div>
       {user.id > -1 ? (
-            <div>
+        <div id='exchangeInterfaceTwo'>
           <ExchangeTriggerAdd triggerValue={triggerValue} />
           <ExchangePrognosis />
           <ExchangeNotifications />
@@ -147,7 +158,6 @@ const IndexExchange = ({
         )
       }
     </div>
-    </div>
   )
 }
 

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;
-  padding-right: 10px;
   float: left;
-  background: rgba(0,0,0,0.2);
+  padding-left: 1%;
+  padding-right: 1%;
+  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 {