From 105ca9e02de76e9203295e536ebbe578f65ac5c4 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Tue, 14 Jan 2020 10:36:21 +0100 Subject: [PATCH] Upgrade Subject section. Add Update Form --- src/components/forum/forumSubjectUpdate.js | 102 +++++++++++++++++++++ src/components/forum/forumSubjects.js | 58 ++++++------ src/stores/subjects/duck/operations.js | 2 +- src/stores/user/duck/operations.js | 30 ++++-- src/stores/user/duck/reducers.js | 3 +- src/styles/general.scss | 4 + src/styles/indexForum.scss | 8 +- 7 files changed, 172 insertions(+), 35 deletions(-) create mode 100644 src/components/forum/forumSubjectUpdate.js diff --git a/src/components/forum/forumSubjectUpdate.js b/src/components/forum/forumSubjectUpdate.js new file mode 100644 index 0000000..1d20122 --- /dev/null +++ b/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 ( +
+
+ setSubjectTitleText( e.target.value.length ) }> + + { (user.privilige >= 2) ? ( +
+ + +
+ ) : ( +
+ ) + } +

{subjectTitleText}/30

+ +
+
+ ) + } else { + return ( +
+
+ ) + } +} + +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) diff --git a/src/components/forum/forumSubjects.js b/src/components/forum/forumSubjects.js index cf7f61e..de52a6a 100644 --- a/src/components/forum/forumSubjects.js +++ b/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 (
@@ -57,34 +60,37 @@ const ForumSubjects = ({
{ threads.subjectsList.map( subject => -
-

getSubjectComments(subject) }> - {subject.name} -

-
- { (user.id === subject.user_id || - user.id === threads.actualThreadModeratorID || - user.privilige === 3) ? ( -
- - - -

{subject.author}

-
- ) : ( -
- -

{subject.author}

-
+
+
+

getSubjectComments(subject) }> + {subject.name} +

+
+ { (user.id === subject.user_id || + user.id === threads.actualThreadModeratorID || + user.privilige === 3) ? ( +
+ + + +

{subject.author}

+
+ ) : ( +
+ +

{subject.author}

+
) } +
+
) }
diff --git a/src/stores/subjects/duck/operations.js b/src/stores/subjects/duck/operations.js index fa1da0a..9e456ff 100644 --- a/src/stores/subjects/duck/operations.js +++ b/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) } diff --git a/src/stores/user/duck/operations.js b/src/stores/user/duck/operations.js index 5d78bf2..aa0ccc5 100644 --- a/src/stores/user/duck/operations.js +++ b/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, - 'id': user.payload.id, - 'login': user.payload.login, - 'privilige': user.payload.privilige, - 'avatar': user.payload.avatar, - 'email': user.payload.email + token: token.token, + id: user.payload.id, + login: user.payload.login, + privilige: user.payload.privilige, + avatar: user.payload.avatar, + email: user.payload.email, + allUsersList: allUsers } dispatch(actions.login(userFull)) diff --git a/src/stores/user/duck/reducers.js b/src/stores/user/duck/reducers.js index f5775f0..f72f3e1 100644 --- a/src/stores/user/duck/reducers.js +++ b/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 { diff --git a/src/styles/general.scss b/src/styles/general.scss index 6360a06..b5fe1a1 100644 --- a/src/styles/general.scss +++ b/src/styles/general.scss @@ -7,6 +7,10 @@ body { @include inputStyle } + select { + @include inputStyle + } + textarea { @include inputStyle text-align: left; diff --git a/src/styles/indexForum.scss b/src/styles/indexForum.scss index 9cbb93c..7549326 100644 --- a/src/styles/indexForum.scss +++ b/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;