Add all forum functionality

2020-01-15 19:15:07 +01:00 · 2020-01-15 19:15:07 +01:00 · a731739178
parent 0f92e28ea6
commit a731739178
5 changed files with 246 additions and 15 deletions
--- a/src/components/forum/forumSubjects.js
+++ b/src/components/forum/forumSubjects.js
@ -128,9 +128,9 @@ const ForumSubjects = ({
          </form>
        </div>
        <div className='forumFoot'>
-        <button onClick={ () => setFormDiv( !formDiv ) }>
-          { formDiv === true ? 'Close Add Subject' : 'Add Subject' }
-        </button>
+          <button onClick={ () => setFormDiv( !formDiv ) }>
+            { formDiv === true ? 'Close Add Subject' : 'Add Subject' }
+          </button>
        </div>
      </div>
    )
--- a/src/components/forum/indexForum.js
+++ b/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
-                  className={thread.moderator_privilige === 3 ? 'forumListItem adminDivColor' :
-                    (thread.moderator_privilige === 2 ? 'forumListItem moderDivColor' : 'forumListItem') }
-                  key={thread.id}
-                  onClick={ () => getThreadSubjects(thread) }>
-                    <p>{thread.name}</p>
-                    <p>moderator: {thread.moderator}</p>
+                <div>
+                  <div
+                    className={thread.moderator_privilige === 3 ? 'forumListItem adminDivColor' :
+                      (thread.moderator_privilige === 2 ? 'forumListItem moderDivColor' : 'forumListItem') }
+                    key={thread.id}>
+                      <p onClick={ () => getThreadSubjects(thread) }>{thread.name}</p>
+                      { (user.id === thread.user_id ||
+                         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)
--- a/src/components/forum/indexForumUpdate.js
+++ b/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)
--- a/src/stores/threads/duck/operations.js
+++ b/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)
+  }
--- a/src/styles/general.scss
+++ b/src/styles/general.scss
@ -2,7 +2,11 @@

 body {
  margin: 0 auto;
+  overflow-y: hidden;

+  ::-webkit-scrollbar {
+    display: none;
+  }
  input {
    @include inputStyle
  }