Add all forum functionality

src/components/forum/indexForum.js

@@ -1,16 +1,49 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
 
-import { getAllThreads, getThreadSubjects } from '../../stores/threads/duck/operations'
+import { getAllThreads, getThreadSubjects, addThread, deleteThread } from '../../stores/threads/duck/operations'
 
 import '../../styles/indexForum.scss'
 
 import ForumSubjects from './forumSubjects'
+import ForumThreadUpdate from './indexForumUpdate'
 
-const IndexForum = ({ user, threads, getAllThreads, getThreadSubjects }) => {
+const IndexForum = ({
+  user,
+  threads, getAllThreads, getThreadSubjects, addThread, deleteThread }) => {
 
   useEffect( () => { getAllThreads() }, [] )
 
+  const [formDiv, setFormDiv] = useState(false)
+  const [updateFormDiv, setUpdateFormDiv] = useState( { isActive: false, thread_id: -1 } )
+
+  const [titleText, setTitleText] = useState(0)
+
+  const addThreadTitle = React.createRef()
+
+  const addNewThread = (event) => {
+    event.preventDefault()
+    if ( addThreadTitle.current.value !== '' ) {
+      let newThread = {
+        name: addThreadTitle.current.value,
+        user_id: user.id,
+        token: user.token
+      }
+      addThread(newThread)
+      addThreadTitle.current.value = ''
+    }
+  }
+
+  const deleteOldThread = (thread) => {
+    if( user.privilige === 3 ) {
+      let delSubject = {
+        token: user.token,
+        thread_id: thread.id
+      }
+      deleteThread(delSubject)
+    }
+  }
+
   if (threads.isActive === false) {
     return (
       <div>
@@ -24,18 +57,63 @@ const IndexForum = ({ user, threads, getAllThreads, getThreadSubjects }) => {
           </div>
           <div className='forumItemsList'>
               { threads.threadsList.map( thread =>
+                <div>
                   <div
                     className={thread.moderator_privilige === 3 ? 'forumListItem adminDivColor' :
                       (thread.moderator_privilige === 2 ? 'forumListItem moderDivColor' : 'forumListItem') }
-                  key={thread.id}
+                    key={thread.id}>
-                  onClick={ () => getThreadSubjects(thread) }>
+                      <p onClick={ () => getThreadSubjects(thread) }>{thread.name}</p>
-                    <p>{thread.name}</p>
+                      { (user.id === thread.user_id ||
-                    <p>moderator: {thread.moderator}</p>
+                         user.privilige === 3) ? (
+                          <div>
+                            <button onClick={ () => setUpdateFormDiv( { isActive: !updateFormDiv.isActive, thread_id: thread.id } )}>
+                              { updateFormDiv.isActive ? 'Close Edit' : 'Edit Thread' }
+                            </button>
+                            { user.privilige === 3 ? (
+                                <button onClick={ () => deleteOldThread( thread )}>
+                                  Delete Thread
+                                </button>
+                              ) : (
+                                <div></div>
+                            ) }
+                            <img src={ thread.moderator_avatar } />
+                            <p>{ thread.moderator }</p>
+                          </div>
+                        ) : (
+                          <div>
+                            <img src={ thread.moderator_avatar } />
+                            <p>{ thread.moderator }</p>
+                          </div>
+                        )
+                      }
+                  </div>
+                  <ForumThreadUpdate thread={ thread } thisThread={ updateFormDiv }/>
                 </div>
               ) }
           </div>
+          <div className={ formDiv === true ? 'forumFormSubject' : 'forumHiddenDiv' }>
+            <form onSubmit={ addNewThread }>
+              <input
+                name='addThreadTitle'
+                placeholder='Write a thread title'
+                maxLength='30'
+                ref={ addThreadTitle }
+                onChange={ e => setTitleText(e.target.value.length) }>
+              </input>
+              <p>Title: {titleText}/30</p>
+              <button>
+                Add Thread
+              </button>
+            </form>
+          </div>
           <div className='forumFoot'>
-            Foot
+            { user.privilige === 3 ? (
+              <button onClick={ () => setFormDiv( !formDiv ) }>
+                { formDiv === true ? 'Close Add Thread' : 'Add Thread' }
+              </button>
+            ) : (
+              <div></div>
+            ) }
           </div>
         </div>
         <div className='indexForumMarginTop'>
@@ -64,8 +142,10 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = dispatch => ({
+  addThread: threads => dispatch( addThread(threads) ),
+  deleteThread: threads => dispatch( deleteThread(threads) ),
   getAllThreads: () => dispatch( getAllThreads() ),
-  getThreadSubjects: thread => dispatch( getThreadSubjects(thread) )
+  getThreadSubjects: threads => dispatch( getThreadSubjects(threads) )
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(IndexForum)

src/components/forum/indexForumUpdate.js

@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { connect } from 'react-redux'
+
+import { updateThread } from '../../stores/threads/duck/operations'
+
+import '../../styles/indexForum.scss'
+
+const IndexForumUpdate = ({
+  user,
+  threads, getAllThreads, getThreadSubjects, updateThread,
+  thread, thisThread }) => {
+
+  const updateThreadTitle = React.createRef()
+  const [threadTitleText, setThreadTitleText] = useState(0)
+
+  const [selectThreadModeratorID, setSelectThreadModeratorID] = useState(-1)
+
+  const updateOldThread = (event) => {
+    event.preventDefault()
+    if ( updateThreadTitle.current.value !== '' && selectThreadModeratorID === -1 && user.privilige >= 2) {
+      let putThread = {
+        id: thread.id,
+        name: updateThreadTitle.current.value,
+        user_id: thread.user_id,
+        token: user.token
+      }
+      updateThread(putThread)
+      updateThreadTitle.current.value = ''
+    } else if ( updateThreadTitle.current.value !== '' && user.privilige === 3 ) {
+      let putThread = {
+        id: thread.id,
+        name: updateThreadTitle.current.value,
+        user_id: selectThreadModeratorID === -1 ? thread.user_id : selectThreadModeratorID,
+        token: user.token
+      }
+      updateThread(putThread)
+      updateThreadTitle.current.value = ''
+    }
+  }
+
+  if ( thisThread.isActive === true && thisThread.thread_id === thread.id ) {
+    return (
+      <div className='forumFormSubject'>
+        <form onSubmit={ updateOldThread }>
+          <input
+            name='updateThreadTitleText'
+            placeholder={ thread.name }
+            ref={ updateThreadTitle }
+            cols='150'
+            maxLength='30'
+            onChange={ e => setThreadTitleText( e.target.value.length ) }>
+          </input>
+          { (user.privilige === 3) ? (
+            <div>
+              <select
+                name='updateThreadModerator'
+                onChange={ e => setSelectThreadModeratorID( e.target.value ) }>
+                  <option value={ thread.user_id }>Choice Moderator ( actual: { thread.moderator } )</option>
+                { user.allUsersList
+                  .filter( userObject => userObject.privilige >= 2 )
+                  .map( userObject =>
+                    <option value={userObject.id}>{userObject.login}</option>
+                  )
+                }
+              </select>
+            </div>
+          ) : (
+              <div></div>
+            )
+          }
+          <p>{threadTitleText}/30</p>
+          <button>
+            Update thread
+          </button>
+        </form>
+      </div>
+    )
+  } else {
+    return (
+      <div className='forumHiddenDiv'>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  user: state.user,
+  threads: state.threads
+})
+
+const mapDispatchToProps = dispatch => ({
+  updateThread: threads => dispatch( updateThread(threads) )
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(IndexForumUpdate)

src/stores/threads/duck/operations.js

@@ -22,6 +22,43 @@ const fetchGetSubjects = async (threadID) => {
   return response.json()
 }
 
+const fetchAddThread = async (data) => {
+  const response = await
+  fetch(
+    'http://localhost:8001/index/thread', {
+      method: 'POST',
+      credential: 'same-origin',
+      body: JSON.stringify(data)
+    }
+  )
+  return response.json()
+}
+
+const fetchUpdateThread = async (data) => {
+  const response = await
+  fetch(
+    'http://localhost:8001/index/thread/' + data.id, {
+      method: 'PUT',
+      credential: 'same-origin',
+      body: JSON.stringify(data)
+    }
+  )
+  return response.json()
+}
+
+const fetchDeleteThread = async (data) => {
+  const response = await
+  fetch(
+    'http://localhost:8001/index/thread/' + data.thread_id, {
+      method: 'DELETE',
+      credential: 'same-origin',
+      body: JSON.stringify(data)
+    }
+  )
+  return response.json()
+}
+
+
 export const getAllThreads = () =>
   async (dispatch) => {
     const allThreads = await fetchGetAll()
@@ -41,3 +78,18 @@ export const getThreadSubjects = (data) =>
     dispatch( actions.activate(data) )
     dispatch( actions.getThreadSubjects(subjects) )
   }
+
+export const addThread = (data) =>
+  async (dispatch) => {
+    const subjects = await fetchAddThread(data)
+  }
+
+export const updateThread = (data) =>
+  async (dispatch) => {
+    const subjects = await fetchUpdateThread(data)
+  }
+
+export const deleteThread = (data) =>
+  async (dispatch) => {
+    const subjects = await fetchDeleteThread(data)
+  }

src/styles/general.scss

@@ -2,7 +2,11 @@
 
 body {
   margin: 0 auto;
+  overflow-y: hidden;
 
+  ::-webkit-scrollbar {
+    display: none;
+  }
   input {
     @include inputStyle
   }