repair bad elements

src/components/forum/forumSubjectUpdate.js

@@ -17,14 +17,27 @@ const ForumSubjectUpdate = ({
   const updateSubjectTitle = React.createRef()
   const updateSubjectAuthor = React.createRef()
 
+  const [selectAuthorID, setSelectAuthorID] = useState(-1)
+  const [selectThreadID, setSelectThreadID] = useState(-1)
+
   const updateOldSubject = (event) => {
     event.preventDefault()
-    if ( updateSubjectTitle.current.value !== '') {
+    if ( updateSubjectTitle.current.value !== '' && selectAuthorID === -1 && selectThreadID === -1 ) {
       let putSubject = {
         id: subject.id,
         name: updateSubjectTitle.current.value,
-        user_id: user.id,
+        user_id: subject.user_id,
-        thread_id: threads.actualThreadID,
+        thread_id: subject.thread_id,
+        token: user.token
+      }
+      updateSubject(putSubject)
+      updateSubjectTitle.current.value = ''
+    } else if ( updateSubjectTitle.current.value !== '' && user.privilige >= 2 ) {
+      let putSubject = {
+        id: subject.id,
+        name: updateSubjectTitle.current.value,
+        user_id: selectAuthorID === -1 ? subject.user_id : selectAuthorID,
+        thread_id: selectThreadID === -1 ? subject.thread_id : selectThreadID,
         token: user.token
       }
       updateSubject(putSubject)
@@ -51,8 +64,8 @@ const ForumSubjectUpdate = ({
             <div>
               <select
                 name='updateSubjectAuthorText'
-                value={ user.allUsersList }
+                onChange={ e => setSelectAuthorID( e.target.value ) }>
-                ref={ updateSubjectAuthor }>
+                  <option value={ subject.user_id }>Choice Author ( actual: { subject.author } )</option>
                 { user.allUsersList.map( userObject =>
                     <option value={userObject.id}>{userObject.login}, Privilige: { userObject.privilige >= 2 ? 'Moderator' : 'Normal User' }</option>
                   )
@@ -60,7 +73,8 @@ const ForumSubjectUpdate = ({
               </select>
               <select
                 name='updateSubjectAuthorText'
-                value={ threads.threadsList }>
+                onChange={ e => setSelectThreadID( e.target.value ) }>
+                  <option value={ threads.actualThreadID }>Choice Thread ( actual: { threads.actualThreadName } )</option>
                 { threads.threadsList.map( threadObject =>
                     <option value={threadObject.id}>{threadObject.name}, moderator: {threadObject.moderator}</option>
                   )

src/components/forum/forumSubjects.js

@@ -2,21 +2,23 @@ import React, { useState } from 'react'
 import { connect } from 'react-redux'
 
 import { refreshThreadSubjects } from '../../stores/threads/duck/operations'
-import { getSubjectComments, addSubject } from '../../stores/subjects/duck/operations'
+import { getSubjectComments, addSubject, deleteSubject } from '../../stores/subjects/duck/operations'
 import { addComment } from '../../stores/comments/duck/operations'
 import actions from '../../stores/threads/duck/actions'
 
 import '../../styles/indexForum.scss'
 
 import ForumComments from './forumComments'
+import ForumSubjectUpdate from './forumSubjectUpdate'
 
 const ForumSubjects = ({
   user,
   threads, deactivate,
-  subjects, addSubject, getSubjectComments,
+  subjects, addSubject, deleteSubject, getSubjectComments,
   comments, addComment }) => {
 
   const [formDiv, setFormDiv] = useState(false)
+  const [updateFormDiv, setUpdateFormDiv] = useState( { isActive: false, subject_id: -1 } )
 
   const addSubjectTitle = React.createRef()
   const addSubjectComment = React.createRef()
@@ -41,6 +43,16 @@ const ForumSubjects = ({
     }
   }
 
+  const deleteOldSubject = (subject) => {
+    if( user.id === subject.user_id || user.id === threads.actualThreadModeratorID || user.privilige === 3 ) {
+      let delSubject = {
+        token: user.token,
+        subject_id: subject.id
+      }
+      deleteSubject(delSubject)
+    }
+  }
+
   const [commentText, setCommentText] = useState(0)
   const [titleText, setTitleText] = useState(0)
 
@@ -57,6 +69,7 @@ const ForumSubjects = ({
         </div>
         <div className='forumItemsList'>
             { threads.subjectsList.map( subject =>
+              <div>
               <div
                 className={subject.author_privilige === 3 ? 'forumListItem adminDivColor' :
                   (subject.author_privilige === 2 ? 'forumListItem moderDivColor' : 'forumListItem') }
@@ -69,10 +82,10 @@ const ForumSubjects = ({
                        user.id === threads.actualThreadModeratorID ||
                        user.privilige === 3) ? (
                         <div>
-                          <button>
+                          <button onClick={ () => setUpdateFormDiv( { isActive: !updateFormDiv.isActive, subject_id: subject.id } )}>
-                            Edit Title
+                            { updateFormDiv.isActive ? 'Close Edit' : 'Edit Subject' }
                           </button>
-                          <button>
+                          <button onClick={ () => deleteOldSubject(subject) }>
                             Delete Subject
                           </button>
                           <img src={subject.author_avatar} />
@@ -86,6 +99,8 @@ const ForumSubjects = ({
                       )
                     }
                 </div>
+                <ForumSubjectUpdate subject={subject} thisSubject={updateFormDiv} />
+              </div>
             ) }
         </div>
         <div className={ formDiv === true ? 'forumFormSubject' : 'forumHiddenDiv' }>
@@ -140,6 +155,7 @@ const mapDispatchToProps = dispatch => ({
   refreshThreadSubjects: threads => dispatch( refreshThreadSubjects(threads) ),
   getSubjectComments: subjects => dispatch( getSubjectComments(subjects) ),
   addSubject: subjects => dispatch( addSubject(subjects) ),
+  deleteSubject: subjects => dispatch( deleteSubject(subjects) ),
   addComment: comments => dispatch( addComment(comments) ),
 
   deactivate: () => dispatch( actions.deactivate() )

src/stores/subjects/duck/operations.js

@@ -47,14 +47,14 @@ const fetchPutSubject = async (data) => {
     return response.json()
   }
 
-  export const putSubject = (data) =>
+  export const updateSubject = (data) =>
     async (dispatch) => {
       const comments = await fetchPutSubject(data)
     }
 
 const fetchDeleteSubject = async (data) => {
   const response = await
-    fetch('http://localhost:8001/index/subject/' + data.id, {
+    fetch('http://localhost:8001/index/subject/' + data.subject_id, {
         method: 'DELETE',
         credentials: 'same-origin',
         body: JSON.stringify(data)

src/stores/user/duck/operations.js

@@ -43,18 +43,33 @@ const fetchRegister = async (user) => {
   )
 }
 
+const fetchGetAllUsers = async () => {
+  const response = await
+  fetch (
+    'http://localhost:8001/index/user', {
+      method: 'GET',
+      credential: 'same-origin'
+    }
+  )
+  const json = response.json()
+  return json
+}
+
 export const createSession = (data) =>
   async (dispatch) => {
     const token = await fetchLogin(data)
     let user = jwtDecode(token.token)
 
+    let 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

@@ -7,7 +7,8 @@ const INITIAL_STATE = {
   privilige: '',
   avatar: '',
   token: '',
-  isActive: false
+  isActive: false,
+  allUsersList: []
 }
 
 const userReducer = (state = INITIAL_STATE, action) => {
@@ -20,6 +21,7 @@ const userReducer = (state = INITIAL_STATE, action) => {
         email: action.item.email,
         avatar: action.item.avatar,
         token: action.item.token,
+        allUsersList: action.item.allUsersList,
         isActive: true
       }
     case types.LOGOUT_USER:

src/styles/general.scss

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

src/styles/indexForum.scss

@@ -98,6 +98,8 @@
       p:last-child {
         float: right;
         padding-top: 10px;
+        min-width: 120px;
+        text-align: right;
       }
 
 
@@ -186,11 +188,19 @@
       transition-duration: 0.5s;
 
       @include gapTopBetweenElements
+      form {
+        width: 100%;
+      }
       input {
         width: 100%;
         float: left;
         text-align: left;
       }
+      select {
+        width: 100%;
+        float: left;
+
+      }
       textarea {
         width: 100%;
         height: 200px;