change test

src/actions/admin/user/deleteUser.js

@@ -0,0 +1,19 @@
+import * as actionTypes from '../../../constants/admin';
+
+export const deleteUsersRequest = payload => {
+    console.log(payload)
+    return{
+
+        type: actionTypes.DELETE_USERS_REQUEST,
+        payload
+    }
+    
+}
+export const deleteUsersSuccess = payload => ({
+    type: actionTypes.DELETE_USERS_REQUEST_SUCCESS,
+    payload
+});
+export const deleteUsersFailure = error => ({
+    type: actionTypes.DELETE_USERS_REQUEST_FAILURE,
+    error
+});

src/components/admin/CreateTest/CreateTopic.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Field, reduxForm, formValueSelector } from 'redux-form';
 import formInput from '../../common/formInput';
 import { connect } from 'react-redux';
+import validate from '../../../configs/validate'
 
 class CreateTopic extends React.Component {
 
@@ -87,7 +88,7 @@ console.log(this.state)
                     {
                         !click
                             ?
-                            <button
+                            <button className= "btn  btn-outline-light bg-stone"
                                 onClick={() => {
                                     handelClick()
                                     submit()
@@ -98,7 +99,7 @@ console.log(this.state)
                             <div>
                                 <h4 className="text-white font-ci"> Enter question and set the difficulty level</h4>
                                 <div className="d-flex w-100 ">
-                                    <Field className="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded w-100 " name="questions" type="questions" placeholder="Create Qestions" component={formInput} />
+                                    <Field className="bg-stone bg-mist-op text-white mt-3 mb-3 border rounded w-100 " name="questions" type="questions" placeholder="Create Qestions" component={formInput} />
                                     <Field className="bg-mist bg-mist-op text-white mt-4 pb-1  border rounded w-25 flex-row align-items-end check" name="simple" type="checkbox" checked={simple} onChange={handelChange} component={formInput} />
                                 </div>
                                 {
@@ -124,9 +125,8 @@ console.log(this.state)
                                             <button type="button" onClick={handleSubmit(formSubmitinput)}>Add answer</button>
                                             :
                                             <React.Fragment>
-                                                <button type="button " onClick={handleClick_3}>Create answers</button>
-                                                <button className="form__submit-button form__submit-button--reset" onClick ={handelClick_2} >Create Questions</button>
-
+                                                <button className= "btn  btn-outline-light bg-stone m-3" type="button " onClick={handleClick_3}>Create answers</button>
+                                                <button className= "btn  btn-outline-light bg-stone m-3" onClick ={handelClick_2} >Create Questions</button>
                                             </React.Fragment>
                                     }
 
@@ -135,7 +135,7 @@ console.log(this.state)
                                 </React.Fragment>
 
 
-                                }
+                        
 
                             </div>
                     }
@@ -157,4 +157,5 @@ const mapStateToProps = state => ({
 
 export default connect(mapStateToProps, null)(reduxForm({
     form: "createTopicForm",
+    validate
 })(CreateTopic));

src/components/admin/CreateTest/index.js

@@ -28,7 +28,7 @@ class CreateTest extends React.Component {
 
 
     render() {
-        const { category: { data }, createTopicsRequest, createTestRequest, topicId:{ topic } } = this.props;
+        const { category: { data }, createTopicsRequest, createTestRequest, topicId: { topic } } = this.props;
         const { categoryId } = this.state
         const { onClick } = this;
 
@@ -36,21 +36,20 @@ class CreateTest extends React.Component {
         console.log(topic)
 
         return (
-            <div className=" profile-page p-4 d-flex flex-row font-ci">
-                <div className='w-50 p-3 bg-gradient border rounded'  >
-                    <h3 className="text-white font-ci">Select category for creating tests</h3>
-                    <select class="custom-select bg-mist bg-mist-op text-white mt-3 mb-3" onChange={onClick} value={categoryId}>
-                        <option selected>Open this Category menu</option>
-                        {
-                            data && data.map(mass => <option key={mass._id} value={mass._id}>{mass.name}</option>)
-
-                        }
-                    </select>
-                    <CreateTopic categoryId={categoryId} topic={topic} actions={{ createTopicsRequest, createTestRequest }} ></CreateTopic>
+            <div className=" padding profile-page  d-flex flex-row font-ci">
+                <div className="w-100 m-5 bg-gradient border rounded">
+                    <div className=" m-5 text-center  text-white font-ci font-ci-bold ">
+                        <h4 className="text-white font-ci">Select category for creating tests</h4>
+                        <select class="custom-select bg-mist bg-mist-op text-white mt-3 mb-3" onChange={onClick} value={categoryId}>
+                            <option selected>Open this Category menu</option>
+                            {
+                                data && data.map(mass => <option key={mass._id} value={mass._id}>{mass.name}</option>)
+
+                            }
+                        </select>
+                        <CreateTopic categoryId={categoryId} topic={topic} actions={{ createTopicsRequest, createTestRequest }} ></CreateTopic>
+                    </div>
                 </div>
-                <div>
-                    ffff
-            </div>
             </div>
 
         )

src/components/admin/deleteUser/DeleteUserForm/index.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { Field, reduxForm } from 'redux-form';
-
-import formInput from '../../../common/formInput';
-
-class DeleteUserForm extends React.Component {
-
-    render() {
-        return (
-            <form>
-                <Field name="name" type="name" placeholder="Enter login" component={formInput} />
-                <button
-                    type="button" className="link link--btn right"
-                >
-                    Search
-                </button>
-            </form >
-        )
-    }
-}
-
-export default reduxForm({
-    form: "deleteUserForm",
-})(DeleteUserForm);

src/components/admin/deleteUser/GetUsers.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux'
+import { getUserRequest } from '../../../actions/admin/user/getUser';
+import { changeUserRequest } from '../../../actions/admin/user/changeUser';
+import ChangeUser from './changeUsers';
+
+
+
+class GetUser extends React.Component {
+    state = {
+        arrayUsers: []
+    }
+    componentDidMount() {
+        const { user } = this.props;
+        this.setState({ arrayUsers: user })
+
+    }
+    componentWillReceiveProps(nextProps) {
+        const { isFetching, data, deleteUsers, initialValues} = nextProps;
+        const { arrayUsers } = this.state;
+        if (isFetching){
+            for (let key in arrayUsers) {
+                if (arrayUsers[key]._id == data._id) {
+                    this.setState(prevState => {
+                        const newArray = prevState.arrayUsers.slice();
+                        newArray.splice(key, 1, data)
+                        return {
+                            arrayUsers: newArray
+                        }
+                    })
+                    break;
+
+                }
+            }
+        }
+        if(deleteUsers.isFetching){
+            for (let key in arrayUsers) {
+                if (arrayUsers[key]._id ==initialValues._id) {
+                    this.setState(prevState => {
+                        const newArray = prevState.arrayUsers.slice();
+                        newArray.splice(key, 1)
+                        return {
+                            arrayUsers: newArray
+                        }
+                    })
+                    break;
+                }
+
+        }
+        }
+    }
+
+
+        render() {
+            // const { handelClick } = this
+            const { handlers: { handelClick } } = this.props;
+            const { arrayUsers } = this.state;
+            // console.log(initialValues, console.log(user))
+
+
+            return (
+                <div class="list-group">
+
+                    {arrayUsers && arrayUsers.map(el =>
+                        <button type="button" class="text-center overflow-hidden rounded-pill btn-outline-light btn mb-4 borber bg-rgba border-0  font-ci font-ci-bold " id={el._id} onClick={handelClick.bind(null, { el })}>{el.name}</button>
+                    )}
+                </div>
+
+            )
+        }
+    }
+
+
+
+
+    export default GetUser

src/components/admin/deleteUser/changeUsers.js

@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux'
 import { changeUserRequest } from '../../../actions/admin/user/changeUser';
 import formInput from '../../common/formInput';
 import { Field, reduxForm } from 'redux-form';
+import validate from '../../../configs/validate'
 
 
 class ChangeUsers extends React.Component {
@@ -20,23 +21,34 @@ class ChangeUsers extends React.Component {
             _id
         })
     }
+    deleteUser=()=>{
+        // console.log(this.props)
+        const {action:{deleteUsersRequest},initialValues: { _id }}=this.props
+        deleteUsersRequest({_id})
+        
+    }
 
 
 
     render() {
         const { initialValues, handleSubmit } = this.props;
-        const { submit } = this
+        const { submit, deleteUser } = this
         console.log(initialValues)
 
         return (
             <div>
 
-                <form onSubmit={handleSubmit(submit)}>
-                    <Field name="name" type="name" component={formInput} />
-                    <Field name="email" type="email" component={formInput} />
-                    <Field name="newPassword" type="password" placeholder="Enter login" component={formInput} />
-                    <Field name="confirmPassword" type="password" placeholder="Enter login" component={formInput} />
-                    <button>Change</button>
+                <form onSubmit={handleSubmit(submit)} className="ml-3 mr-3 mt-3">
+                    <h5 className="font-ci font-ci-bold text-white mb-3">User Name</h5>
+                    <Field name="name" type="name" component={formInput} className="form-control mb-3" />
+                    <h5 className="font-ci font-ci-bold text-white mb-3">Email</h5>
+                    <Field name="email" type="email" component={formInput} className="form-control mb-3"/>
+                    <h5 className="font-ci font-ci-bold text-white mb-3">Password</h5>
+                    <Field name="newPassword" type="password" placeholder="Enter login" component={formInput} className="form-control mb-3"/>
+                    <h5 className="font-ci font-ci-bold text-white mb-3">Confirm Password</h5>
+                    <Field name="confirmPassword" type="password" placeholder="Enter login" component={formInput} className="form-control mb-3"/>
+                    <button className= "btn  btn-outline-light bg-stone">Change</button>
+                    <button type="button" className= "btn  btn-outline-light bg-stone" onClick ={handleSubmit(deleteUser)} >Delete</button>
                 </form >
             </div>
 
@@ -49,5 +61,6 @@ class ChangeUsers extends React.Component {
 
 export default reduxForm({
     form: "ChangeUserForm",
-    enableReinitialize: true
+    enableReinitialize: true,
+    validate
 })(ChangeUsers)

src/components/admin/deleteUser/index.js

@@ -3,8 +3,11 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux'
 import { getUserRequest } from '../../../actions/admin/user/getUser';
 import { changeUserRequest } from '../../../actions/admin/user/changeUser';
+import {deleteUsersRequest} from '../../../actions/admin/user/deleteUser'
 import ChangeUser from './changeUsers';
-import DeleteUserForm from './DeleteUserForm/index'
+import GetUser from './GetUsers';
+import PropagateLoader from 'react-spinners/PropagateLoader';
+
 
 
 
@@ -19,34 +22,41 @@ class DeleteUser extends React.Component {
 
     }
     handelClick = ({ el }) => {
+        console.log(el)
         this.setState({ initialValues: el });
         this.setState((prevState) => ({ flag: !prevState.flag }))
     }
 
     render() {
         const { handelClick } = this
-        const { users: { user }, changeUserRequest } = this.props;
+        const { users: { user }, changeUserRequest, changeUser: { data, isFetching }, deleteUsers, deleteUsersRequest } = this.props;
         const { initialValues, flag } = this.state;
-        console.log(initialValues, console.log(user))
+        console.log(initialValues)
+         console.log(user)
 
 
         return (
             <div className=" profile-page d-flex flex-row font-ci padding ">
-                <div className='w-50 p-3 bg-rgba border rounded'  >
+                <div className='w-25 p-3 bg-rgba border rounded'  >
+                    <h4 class="text-center  text-white font-ci font-ci-bold">USERS</h4>
                     <div class="list-group">
-
-                        {user && user.map(el =>
-                            <button type="button" class=" list-group-item-action mb-4 borber bg-rgba1 border-0 text-white font-ci font-ci-bold " id={el._id} onClick={handelClick.bind(null, { el })}>{el.email}</button>
-                        )}
+                        {
+                            user !== null
+                            ?
+                        <GetUser data={data} deleteUsers={deleteUsers} initialValues={initialValues} user={user} isFetching ={isFetching } handlers={{handelClick}}></GetUser>
+                        :
+                        <PropagateLoader />
+                        }
                     </div>
                 </div>
-                <div className='w-50 p-3 bg-rgba ml-3 border rounded'  >
-                    <DeleteUserForm></DeleteUserForm>
+                <div className='w-75 p-3 bg-rgba ml-3 border rounded'  >
+
                     {
                         flag
                             ?
-                            <ChangeUser initialValues={initialValues} action={{ changeUserRequest }} ></ChangeUser>
-                            : null
+                                <ChangeUser initialValues={initialValues} action={{ changeUserRequest,deleteUsersRequest }} ></ChangeUser>
+                            : 
+                            null
                     }
                 </div>
             </div>
@@ -58,8 +68,10 @@ class DeleteUser extends React.Component {
 const
     mapStateToProps = state => ({
         users: state.users,
+        changeUser: state.changeUser,
+        deleteUsers:state.deleteUsers
     });
 
-const mapDispatchToProps = dispatch => bindActionCreators({ getUserRequest, changeUserRequest }, dispatch);
+const mapDispatchToProps = dispatch => bindActionCreators({ getUserRequest, changeUserRequest, deleteUsersRequest }, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(DeleteUser);

src/components/admin/getChangeDeleteTest/index.js

@@ -104,7 +104,7 @@ class ChangeTest extends React.Component {
                                     ?
                                     <React.Fragment>
                                         <GetTopic handlers={{ openEditModal }} topic={topic}></GetTopic>
-                                        <EditModal visible={openModal} handlers={{ handelClick }} click={click} answers={answers} actions={{ getAnswersRequest, changeTestRequest }} arrayQuestions={arrayQuestions} initialValues={initialValues}
+                                        <EditModal className="bg-mist" visible={openModal} handlers={{ handelClick }} click={click} answers={answers} actions={{ getAnswersRequest, changeTestRequest }} arrayQuestions={arrayQuestions} initialValues={initialValues}
                                             handleClose={{ closeModal }}></EditModal>
                                     </React.Fragment>
                                     :

src/components/common/formInput.js

@@ -4,6 +4,6 @@ export default ({ input, className, placeholder, required, type, meta: { touched
     <Fragment>
         <input className={className} placeholder={placeholder} type={type} {...input} required/>
         {touched && (error && <p className="text-af pt-2 text-uppercase">⚠ {error}</p>)}
-        {/* {required ? <p className="text-af pt-2 text-uppercase">⚠ Reqired</p> : null} */}
+        {required ? <p className="text-af pt-2 text-uppercase">⚠ Reqired</p> : null}
     </Fragment>
 )

src/components/user/ProfilePage/index.js

@@ -64,7 +64,7 @@ class ProfilePage extends React.Component {
                         :
                         <div className ="d-flex mb-3">
                         <h3 className = " p-2 flex-fill bd-highlight">Name</h3>
-                        <ChangeLoginForm className="p-2 font-po-bold flex-fill bd-highlight align-self-end" data ={data} initialValues={data} token={token} actions ={{changeLoginRequest}} handlers={{ handleClick}}> </ChangeLoginForm>
+                        <ChangeLoginForm  data ={data} initialValues={data} token={token} actions ={{changeLoginRequest}} handlers={{ handleClick}}> </ChangeLoginForm>
                         </div>
                             }
                             {!klick

src/configs/validate.js

@@ -1,25 +1,47 @@
 export default function validate(values) {
-    const {  password, passwordConfirmation } = values;
-    console.log(values)
-    const errors = {};
-
-if (!password) {
-    errors.password = "Required"
-}
-else if (/[,]/.test(password)) {
-    errors.password = "Invalid symbol: \",\" is not allowed!";
-}
-else if (password.length < 8 || password.length > 20) {
-    errors.password = "Invalid password length: password should be from 8 to 20 symbols";
-}
-else if (!/^[a-z0-9_-]{8,20}$/i.test(password)) {
-    errors.password = "Invalid password, try another one";
-}
-
-if (!passwordConfirmation) {
-    errors.passwordConfirmation = "Required";
-}
-else if (password !== passwordConfirmation) {
-    errors.passwordConfirmation = "Passwords don't match each other!";
-}
+    const { name, email, password, passwordConfirmation } = values;
+        const errors = {};
+    
+        if (!email) {
+            errors.email = "Required";
+        }
+        else if (email.length < 8 || email.length > 20) {
+            errors.email = "Invalid email length: email should be from 8 to 20 symbols";
+        }
+        else if (
+            !/^(([^<>()\]\\.,;:\s@"](\.[^<>()\]\\.,;:\s@"])*)|("."))@(([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]\.)[a-zA-Z]{2,}))$/.test(email)) {
+            errors.email = "Invalid email, try another one";
+        }
+    
+        if (!name) {
+            errors.name = "Required";
+        }
+        else if (name.length < 6 || name.length > 10) {
+            errors.name = "Invalid name length: name should be from 6 to 10 symbols";
+        }
+        else if (!/^[_A-z0-9]*((-|\s)*[_A-z0-9])*$/.test(name)) {
+            errors.name = "Invalid name, try another one"
+        }
+        
+        if (!password) {
+            errors.password = "Required"
+        }
+        else if (/[,]/.test(password)) {
+            errors.password = "Invalid symbol: \",\" is not allowed!";
+        }
+        else if (password.length < 8 || password.length > 20) {
+            errors.password = "Invalid password length: password should be from 8 to 20 symbols";
+        }
+        else if (!/^[a-z0-9_-]{8,20}$/i.test(password)) {
+            errors.password = "Invalid password, try another one";
+        }
+    
+        if (!passwordConfirmation) {
+            errors.passwordConfirmation = "Required";
+        }
+        else if (password !== passwordConfirmation) {
+            errors.passwordConfirmation = "Passwords don't match each other!";
+        }
+    
+      return errors;
     }

src/constants/admin.js

@@ -46,6 +46,10 @@ export const CHANGE_USERS_REQUEST = 'CHANGE_USERS_REQUEST';
 export const CHANGE_USERS_REQUEST_SUCCESS = 'CHANGE_USERS_REQUEST_SUCCESS';
 export const CHANGE_USERS_REQUEST_FAILURE = 'CHANGE_USERS_REQUEST_FAILURE';
 
+export const DELETE_USERS_REQUEST = 'DELETE_USERS_REQUEST';
+export const DELETE_USERS_REQUEST_SUCCESS = 'DELETE_USERS_REQUEST_SUCCESS';
+export const DELETE_USERS_REQUEST_FAILURE = 'DELETE_USERS_REQUEST_FAILURE';
+
 
 export const GET_TOPIC_REQUEST = 'GET_TOPIC_REQUEST';
 export const GET_TOPIC_REQUEST_SUCCESS = 'GET_TOPIC_REQUEST_SUCCESS';

src/reducers/admin/test/changeUser.js

@@ -0,0 +1,36 @@
+import * as actionTypes from '../../../constants/admin';
+import initialState from '../../initialState';
+
+export default function changeUserReducer(state = initialState.changeUser, {  type, payload }) {
+    switch (type) {
+        case actionTypes.CHANGE_USERS_REQUEST: {
+            console.log(payload)
+            return {
+                ...state,
+                isFetching: false,
+                payload
+            }
+        }
+        case actionTypes.CHANGE_USERS_REQUEST_SUCCESS: {
+            const { data:{user} } = payload;
+
+            return {
+                ...state,
+                isFetching: true,
+                data:user
+            }
+        }
+        case actionTypes.CHANGE_USERS_REQUEST_FAILURE: {
+            const { error } = payload;
+
+            return {
+                ...state,
+                isFetching: false,
+                error
+            }
+        }
+        default: {
+            return state;
+        }
+    }
+}

src/reducers/admin/test/deleteUsers.js

@@ -0,0 +1,37 @@
+import * as actionTypes from '../../../constants/admin';
+import initialState from '../../initialState';
+
+export default function changeEmailReducer(state = initialState.deleteUsers, {  type, payload }) {
+    switch (type) {
+        case actionTypes.DELETE_USERS_REQUEST: {
+            console.log(payload)
+            return {
+                ...state,
+                isFetching: false,
+                payload
+            }
+        }
+        case actionTypes.DELETE_USERS_REQUEST_SUCCESS: {
+            // const { user:{email} } = payload;
+            // console.log(email)
+
+            return {
+                ...state,
+                isFetching: true,
+                data:payload
+            }
+        }
+        case actionTypes.DELETE_USERS_REQUEST_FAILURE: {
+            const { error } = payload;
+
+            return {
+                ...state,
+                isFetching: false,
+                error
+            }
+        }
+        default: {
+            return state;
+        }
+    }
+}

src/reducers/index.js

@@ -12,6 +12,8 @@ import deleteTopic from './admin/test/deleteTopic';
 import deleteQuestion from './admin/test/deleteQuestion';
 import  initialValues from './admin/initialValues';
 import arrayAnswers from './admin/test/getAnswers'
+import changeUser from './admin/test/changeUser';
+import deleteUsers from './admin/test/deleteUsers'
 
 import changeCategory from './admin/changeCategory';
 import arrayQuestions from './admin/test/getQuestions'
@@ -36,5 +38,7 @@ export default combineReducers({
     deleteTopic,
     deleteQuestion,
     initialValues, 
-    arrayAnswers
+    arrayAnswers,
+    changeUser,
+    deleteUsers
 })

src/reducers/initialState.js

@@ -84,5 +84,15 @@ export default {
         isFlag: false,
         answers: null,
         error: null
+    }, 
+    changeUser:{
+        data: null,
+        isFetching: false,
+        error: null
+    },
+    deleteUsers:{
+        data: null,
+        isFetching: false,
+        error: null
     }
 }

src/sagas/admin/users/deleteUsers.js

@@ -0,0 +1,29 @@
+import { put, call } from 'redux-saga/effects';
+import axios from 'axios';
+
+import { CHANGE_USER } from './../../../constants/admin';
+import { deleteUsersSuccess, deleteUsersFailure } from './../../../actions/admin/user/deleteUser';
+import storageKey from '../../../utils/storageKey';
+
+const getItem = localStorage.getItem(storageKey);
+
+export default function* ({payload:{ _id}}) {
+    // console.log(name, newPassword,email, _id)
+    try {
+        const config = {
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${getItem}`
+            }
+        }
+
+        const user = yield call(() =>
+            axios.delete(`${CHANGE_USER}${_id}`, config)
+        )
+
+        yield put(deleteUsersSuccess(user));
+    }
+    catch ({ message }) {
+        yield put(deleteUsersFailure(message));
+    }
+}

src/sagas/admin/users/index.js

@@ -2,9 +2,12 @@ import * as actionTypes from '../../../constants/admin';
 
 import { takeEvery } from 'redux-saga/effects';
 import changeUser from './changeUser';
+import deleteUsers from './deleteUsers';
 import getUser from './getUser';
 
 export default function* () {
     yield takeEvery(actionTypes.GET_USERS_REQUEST, getUser);
     yield takeEvery(actionTypes.CHANGE_USERS_REQUEST,changeUser);
+    yield takeEvery(actionTypes.DELETE_USERS_REQUEST,deleteUsers);
+
 }

src/styles/abstracts/_theme.scss

@@ -33,7 +33,7 @@
     }    
         
     &-gradient{
-        background:linear-gradient(to top, $color-shadow, $color-stone );
+        background:linear-gradient(to top, rgba(42, 49, 50, 1), rgba(51, 107, 135, 0.7) );
     }
     &-gradient1{
         background:linear-gradient(to bottom, $color-stone, transparent 100% );
@@ -70,4 +70,4 @@
 }
 .padding{
     padding: 15vh
-}
+}

src/styles/style/_styles.scss

@@ -3,3 +3,6 @@
     right: 20px;
     top: -30px;
 }
+button:active, button:focus {
+    outline: none !important;
+  }