Upgrade Subject section. Add Update Form

src/components/forum/forumSubjectUpdate.js

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+import { connect } from 'react-redux'
+
+import { refreshThreadSubjects } from '../../stores/threads/duck/operations'
+import { getSubjectComments, updateSubject } from '../../stores/subjects/duck/operations'
+
+import '../../styles/indexForum.scss'
+
+const ForumSubjectUpdate = ({
+  user,
+  threads, deactivate,
+  subjects, updateSubject, getSubjectComments,
+  subject, thisSubject }) => {
+
+  const [formDiv, setFormDiv] = useState(false)
+
+  const updateSubjectTitle = React.createRef()
+  const updateSubjectAuthor = React.createRef()
+
+  const updateOldSubject = (event) => {
+    event.preventDefault()
+    if ( updateSubjectTitle.current.value !== '') {
+      let putSubject = {
+        id: subject.id,
+        name: updateSubjectTitle.current.value,
+        user_id: user.id,
+        thread_id: threads.actualThreadID,
+        token: user.token
+      }
+      updateSubject(putSubject)
+      updateSubjectTitle.current.value = ''
+    }
+  }
+
+  const [subjectTitleText, setSubjectTitleText] = useState(0)
+  const [titleText, setTitleText] = useState(0)
+
+  if ( thisSubject.isActive === true && thisSubject.subject_id === subject.id) {
+    return (
+      <div className='forumFormSubject'>
+        <form onSubmit={ updateOldSubject }>
+          <input
+            name='updateSubjectTitleText'
+            placeholder={ subject.name }
+            ref={ updateSubjectTitle }
+            cols='150'
+            maxLength='30'
+            onChange={ e => setSubjectTitleText( e.target.value.length ) }>
+          </input>
+          { (user.privilige >= 2) ? (
+            <div>
+              <select
+                name='updateSubjectAuthorText'
+                value={ user.allUsersList }
+                ref={ updateSubjectAuthor }>
+                { user.allUsersList.map( userObject =>
+                    <option value={userObject.id}>{userObject.login}, Privilige: { userObject.privilige >= 2 ? 'Moderator' : 'Normal User' }</option>
+                  )
+                }
+              </select>
+              <select
+                name='updateSubjectAuthorText'
+                value={ threads.threadsList }>
+                { threads.threadsList.map( threadObject =>
+                    <option value={threadObject.id}>{threadObject.name}, moderator: {threadObject.moderator}</option>
+                  )
+                }
+              </select>
+            </div>
+          ) : (
+              <div></div>
+            )
+          }
+          <p>{subjectTitleText}/30</p>
+          <button>
+            Update Subject
+          </button>
+        </form>
+      </div>
+    )
+  } else {
+    return (
+      <div className='forumHiddenDiv'>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  user: state.user,
+  threads: state.threads,
+  subjects: state.subjects,
+  comments: state.comments
+})
+
+const mapDispatchToProps = dispatch => ({
+  refreshThreadSubjects: threads => dispatch( refreshThreadSubjects(threads) ),
+  getSubjectComments: subjects => dispatch( getSubjectComments(subjects) ),
+  updateSubject: subjects => dispatch( updateSubject(subjects) )
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ForumSubjectUpdate)

src/components/forum/forumSubjects.js

@@ -9,6 +9,7 @@ import actions from '../../stores/threads/duck/actions'
 import '../../styles/indexForum.scss'
 
 import ForumComments from './forumComments'
+import ForumSubjectUpdate from './forumSubjectUpdate'
 
 const ForumSubjects = ({
   user,
@@ -44,6 +45,8 @@ const ForumSubjects = ({
   const [commentText, setCommentText] = useState(0)
   const [titleText, setTitleText] = useState(0)
 
+  const [subjectEdit, setSubjectEdit] = useState( { isActive: false, subject_id: -1 } )
+
   if (threads.isActive === true && subjects.isActive === false) {
     return (
       <div>
@@ -57,34 +60,37 @@ const ForumSubjects = ({
         </div>
         <div className='forumItemsList'>
             { threads.subjectsList.map( subject =>
-              <div
+              <div>
-                className={subject.author_privilige === 3 ? 'forumListItem adminDivColor' :
+                <div
-                  (subject.author_privilige === 2 ? 'forumListItem moderDivColor' : 'forumListItem') }
+                  className={subject.author_privilige === 3 ? 'forumListItem adminDivColor' :
-                key={subject.id}>
+                    (subject.author_privilige === 2 ? 'forumListItem moderDivColor' : 'forumListItem') }
-                  <p onClick={ () => getSubjectComments(subject) }>
+                  key={subject.id}>
-                    {subject.name}
+                    <p onClick={ () => getSubjectComments(subject) }>
-                  </p>
+                      {subject.name}
-                  <div></div>
+                    </p>
-                    { (user.id === subject.user_id ||
+                    <div></div>
-                       user.id === threads.actualThreadModeratorID ||
+                      { (user.id === subject.user_id ||
-                       user.privilige === 3) ? (
+                         user.id === threads.actualThreadModeratorID ||
-                        <div>
+                         user.privilige === 3) ? (
-                          <button>
+                          <div>
-                            Edit Title
+                            <button onClick={ () => setSubjectEdit( { isActive: !subjectEdit.isActive, subject_id: subject.id } ) }>
-                          </button>
+                              { subjectEdit.isActive === true ? 'Close Edit' : 'Edit Subject' }
-                          <button>
+                            </button>
-                            Delete Subject
+                            <button>
-                          </button>
+                              Delete Subject
-                          <img src={subject.author_avatar} />
+                            </button>
-                          <p>{subject.author}</p>
+                            <img src={subject.author_avatar} />
-                        </div>
+                            <p>{subject.author}</p>
-                      ) : (
+                          </div>
-                        <div>
+                        ) : (
-                          <img src={subject.author_avatar} />
+                          <div>
-                          <p>{subject.author}</p>
+                            <img src={subject.author_avatar} />
-                        </div>
+                            <p>{subject.author}</p>
+                          </div>
                       )
                     }
+                  </div>
+                  <ForumSubjectUpdate subject={subject} thisSubject={subjectEdit} />
               </div>
             ) }
         </div>

src/stores/subjects/duck/operations.js

@@ -47,7 +47,7 @@ const fetchPutSubject = async (data) => {
     return response.json()
   }
 
-  export const putSubject = (data) =>
+  export const updateSubject = (data) =>
     async (dispatch) => {
       const comments = await fetchPutSubject(data)
     }

src/stores/user/duck/operations.js

@@ -43,18 +43,36 @@ const fetchRegister = async (user) => {
   )
 }
 
+const fetchGetAllUsers = async () => {
+  const response = await
+  fetch (
+    'http://localhost:8001/index/user', {
+      method: 'GET',
+      credential: 'same-origin'
+    }
+  )
+  const json = await response.json()
+  return json
+}
+
 export const createSession = (data) =>
   async (dispatch) => {
+
     const token = await fetchLogin(data)
     let user = jwtDecode(token.token)
 
+    let allUsers = 'None'
+    if ( user.payload.privilige > 1 )
+      allUsers = await fetchGetAllUsers()
+
     let userFull = {
-      'token': token.token,
+      token: token.token,
-      'id': user.payload.id,
+      id: user.payload.id,
-      'login': user.payload.login,
+      login: user.payload.login,
-      'privilige': user.payload.privilige,
+      privilige: user.payload.privilige,
-      'avatar': user.payload.avatar,
+      avatar: user.payload.avatar,
-      'email': user.payload.email
+      email: user.payload.email,
+      allUsersList: allUsers
     }
 
     dispatch(actions.login(userFull))

src/stores/user/duck/reducers.js

@@ -20,7 +20,8 @@ const userReducer = (state = INITIAL_STATE, action) => {
         email: action.item.email,
         avatar: action.item.avatar,
         token: action.item.token,
-        isActive: true
+        isActive: true,
+        allUsersList: action.item.allUsersList
       }
     case types.LOGOUT_USER:
       return {

src/styles/general.scss

@@ -7,6 +7,10 @@ body {
     @include inputStyle
   }
 
+  select {
+    @include inputStyle
+  }
+
   textarea {
     @include inputStyle
     text-align: left;

src/styles/indexForum.scss

@@ -97,7 +97,9 @@
 
       p:last-child {
         float: right;
+        text-align: right;
         padding-top: 10px;
+        min-width: 130px;
       }
 
 
@@ -186,7 +188,11 @@
       transition-duration: 0.5s;
 
       @include gapTopBetweenElements
-      input {
+      form {
+        width: 100%;
+      }
+
+      input, select {
         width: 100%;
         float: left;
         text-align: left;