add comments section -> songPanel.js

src/pages/index/indexPanel/panels/songPanel.js

@@ -7,7 +7,8 @@ const SongPanel = () => {
     useEffect( () => generateTitleCode() )
     useEffect( () => setTextHeight() )
 
-    const [openDescription, setOpen] = useState(-1)
+    const [openDescription, setOpenDescription] = useState(-1)
+    const [openComments, setOpenComments] = useState(false)
 
     // ANSI: ▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏░▒▓▐▔▕▖▗▘▙▚▛▜▝▞▟
 
@@ -36,6 +37,26 @@ const SongPanel = () => {
         document.getElementById('songText').style = 'height: ' + (textDivHeight - 50) + 'px;'
     }
 
+    const activeCommentDiv = () => {
+        let commentsDiv = document.getElementById('comments')
+        let commentAddInput = document.getElementById('commentAddInput')
+        let commentAddButton = document.getElementById('commentAddButton')
+        if ( openComments ) {
+            commentAddInput.placeholder = 'type comment (or click to exit)'
+            commentsDiv.style = 'height: ' + ((window.innerHeight / 2) - 50) + 'px;'
+            commentAddInput.style = 'width: 60%;'
+            commentAddButton.style = 'display: block;'
+            setOpenComments( !openComments )
+        }
+        else {
+            commentAddInput.placeholder = '(click to show comments)'
+            commentsDiv.style = 'height: 0px;'
+            commentAddInput.style = 'width: 100%;'
+            commentAddButton.style = 'display: none;'
+            setOpenComments( !openComments )
+        }
+    }
+
     let exampleText = [
         '[Zwrotka Rzukk]\n',
         'Znam wielu co robią zajebistą muzykę, kolego,\n',
@@ -116,6 +137,54 @@ const SongPanel = () => {
         }
     }
 
+    let exampleComments = [
+        {
+            ip: '192.168.0.1',
+            city: 'Rzeszów',
+            text: 'Ciekawe'
+        },
+        {
+            ip: '192.168.1.10',
+            city: 'Arłamów',
+            text: 'ELO lorem ipsum ELO lorem ipsum ELO lorem ipsum ELO lorem ipsum ELO lorem ipsum ELO lorem ipsum'
+        },
+        {
+            ip: '192.168.2.20',
+            city: 'Kraków',
+            text: 'TAKIE życie!!!!'
+        },
+        {
+            ip: '192.168.2.20',
+            city: 'Kraków',
+            text: 'TAKIE życie!!!!'
+        },
+        {
+            ip: '192.168.2.20',
+            city: 'Kraków',
+            text: 'TAKIE życie!!!!'
+        },
+        {
+            ip: '192.168.2.20',
+            city: 'Kraków',
+            text: 'TAKIE życie!!!!'
+        },
+        {
+            ip: '192.168.2.20',
+            city: 'Kraków',
+            text: 'TAKIE życie!!!!'
+        },
+        {
+            ip: '192.168.2.20',
+            city: 'Kraków',
+            text: 'TAKIE życie!!!!'
+        },
+        {
+            ip: '192.168.2.20',
+            city: 'Kraków',
+            text: 'TAKIE życie!!!!'
+        },
+    ]
+
     return (
         <div id='songPanel'>
             <div className='songPanelColumn'>
@@ -146,7 +215,7 @@ const SongPanel = () => {
                                                     <pre 
                                                         id={'row' + key} 
                                                         className='generalText'
-                                                        onClick={ openDescription === key ? () => setOpen( -1 ) : () => setOpen( key )}
+                                                        onClick={ openDescription === key ? () => setOpenDescription( -1 ) : () => setOpenDescription( key )}
                                                         dangerouslySetInnerHTML={ textHighlight(row, exampleRowDetails[key].text) }>
                                                     </pre>
                                                     <pre 
@@ -165,7 +234,7 @@ const SongPanel = () => {
                                                     <pre 
                                                         id={'row' + key} 
                                                         className='generalText'
-                                                        onClick={ openDescription === link ? () => setOpen( -1 ) : () => setOpen( link )}
+                                                        onClick={ openDescription === link ? () => setOpenDescription( -1 ) : () => setOpenDescription( link )}
                                                         dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
                                                     </pre>
                                                 </div>
@@ -178,7 +247,7 @@ const SongPanel = () => {
                                                     <pre 
                                                         id={'row' + key} 
                                                         className='generalText'
-                                                        onClick={ openDescription === key ? () => setOpen( -1 ) : () => setOpen( key )}
+                                                        onClick={ openDescription === key ? () => setOpenDescription( -1 ) : () => setOpenDescription( key )}
                                                         dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
                                                     </pre>
                                                     <pre 
@@ -190,12 +259,13 @@ const SongPanel = () => {
                                             )
                                         }
                                     }
-                                    else
+                                    else {
                                         return (
                                             <pre id={key} className='generalText'>
                                                 {row}
                                             </pre>
                                         )
+                                    }
                                 }
                             ) 
                         }
@@ -204,6 +274,32 @@ const SongPanel = () => {
             </div>
             <div className='songPanelColumn'>
                 <div id='songComments'>
+                    <div id='comments'>
+                        { exampleComments.map( (comment, key) => {
+                                    return (
+                                        <div id={'comment' + key} className='commentDiv'>
+                                            <div className='commentInfo'>
+                                                { comment.ip + ' ( ' + comment.city + ' )' }
+                                            </div>
+                                            <div className='commentText'>
+                                                { comment.text }
+                                            </div>
+                                        </div>
+                                    )
+                                } 
+                            ) 
+                        }
+                    </div>
+                    <div id='commentAdd'>
+                        <input
+                            id='commentAddInput'
+                            placeholder='(click to show comments)'
+                            onClick={ () => activeCommentDiv() }> 
+                        </input>
+                        <div id='commentAddButton'>
+                            Add comment
+                        </div>
+                    </div>
                 </div>
                 <div id='albumSongs'>
                 </div>

src/styles/songPanel.scss

@@ -39,11 +39,13 @@
 
         #songText {
             width: 95%;
-            overflow: hidden;
             overflow-y: scroll;
             padding-right: 5%;
             margin-bottom: 50px;
 
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+
             .textSection {
                 width: 100%;
                 height: auto;
@@ -81,10 +83,75 @@
             }
         }
 
+        #songText::-webkit-scrollbar {
+            display: none;
+        }
+
         #songComments {
             width: 90%;
-            height: auto;
+            height: 50%;
-            padding: 5%;
+            padding-right: 5%;
+            margin-top: 50px;
+
+            #comments {
+                height: 0px; //420px
+                overflow-y: scroll;
+                -ms-overflow-style: none;
+                scrollbar-width: none;
+                transition-duration: 0.5s;
+
+                .commentDiv {
+                    width: 100%;
+                    height: auto;
+                    padding-bottom: 20px;
+
+                    .commentInfo {
+                        padding-bottom: 10px;
+                    }
+
+                    .commentText {
+                        margin-left: 20px;
+                    }
+                }
+            }
+
+            #comments::-webkit-scrollbar {
+                display: none;
+            }
+
+            #commentAdd {
+                width: 100%;
+                height: 50px;
+                display: flex;
+
+                input {
+                    width: 100%;
+                    padding-right: 5%;
+                    padding-left: 5%;
+                    height: 50px;
+                    color: rgba(172,36,36,1);
+                    font-family: Ubuntu;
+                    background-color: black;
+                    border: solid 1px rgba(172,36,36,1);
+                }
+
+                input::placeholder {
+                    font-family: Ubuntu;
+                    color: rgba(172,36,36,1);
+                }
+
+                #commentAddButton {
+                    width: 25%;
+                    height: 32.5px;
+                    padding-top: 18.5px;
+                    margin-left: 5%;
+                    display: none;
+
+                    font-size: 12px;
+                    text-align: center;
+                    border: solid 1px rgba(172,36,36,1);
+                }
+            }
         }
 
         #albumSongs {