Probllems to update user

src/Admin/Components/Components/Inputs/EditUser.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, { useState, useEffect, useContext } from 'react';
+//imports material ui components
+import { Typography, TextField, Button, Grid } from '@material-ui/core';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import CardAction from '@material-ui/core/CardActions';
+import ListRoundedIcon from '@material-ui/icons/ListRounded';
+import Chip from '@material-ui/core/Chip';
+import { makeStyles } from '@material-ui/core/styles';
+import SaveIcon from '@material-ui/icons/Save';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import MenuItem from '@material-ui/core/MenuItem';
+//imports local files
+import SnackBar from '../../../../Components/SnackbarComponent';
+import { Store } from '../../../../Store';
+import LoadingSpinner from '../../../../Components/LoadingSpinner';
+//imports services 
+import { getRequest, putRequest, deleteRequest } from '../../../../Components/HelperFunctions/getAxiosConfig'
+import { EditFilter, GetAData, DeleteFilter } from '../../../Filters';
+//routers
+import { Link } from 'react-router-dom';
+import Unauthorized from '../Unauthorized';
+import styled from 'styled-components';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        listStyle: 'none',
+        padding: theme.spacing(0.5),
+        margin: 0,
+    },
+    chip: {
+        margin: theme.spacing(0.5),
+    },
+}));
+
+const EditUser = ({ match }) => {
+    const classes = useStyles();
+    const { state, dispatch } = useContext(Store);
+
+    const [error, setError] = useState(null); //Necessary to consult the API, catch errors
+    const [isLoaded, setIsLoaded] = useState(false); //Necessary to consult the API, wait until complete
+
+    const [isLoading, setIsLoading] = useState(false);
+    const id = match.params.id
+    const [name, setName] = useState("")
+    const [email, setEmail] = useState("")
+    const [description, setDescription] = useState("")
+    const [pass, setPass] = useState("")
+    const [confirmPass, setConfirmPass] = useState("")
+    const [rolesList, setRolesList] = useState([
+        {
+            id: 1,
+            value: "teacher"
+        },
+        {
+            id: 2,
+            value: "student"
+        },
+        {
+            id: 3,
+            value: "admin"
+        },
+        {
+            id: 4,
+            value: "curator"
+        },
+        {
+            id: 5,
+            value: "moderator"
+        },
+        {
+            id: 6,
+            value: "supervisor"
+        },
+        {
+            id: 7,
+            value: "editor"
+        },
+        {
+            id: 9,
+            value: "partner"
+        },
+        {
+            id: 10,
+            value: "publisher"
+        },
+        {
+            id: 11,
+            value: "submitter"
+        },
+    ])
+    const [userRoles, setUserRoles] = useState([])
+
+
+    const [errorInName, setErrorInName] = useState({
+        error: false,
+        message: ''
+    })
+    const [errorInEmail, setErrorInEmail] = useState({
+        error: false,
+        message: ''
+    })
+    const [errorInDesc, setErrorInDesc] = useState({
+        error: false,
+        message: ''
+    })
+    const [errorInPass, setErrorInPass] = useState({
+        error: false,
+        message: ''
+    })
+    const [errorInConfirmPass, setErrorInConfirmPass] = useState({
+        error: false,
+        message: ''
+    })
+
+    const [snackInfo, setSnackInfo] = useState({
+        message: '',
+        icon: '',
+        open: false,
+        color: '',
+    })
+
+    const NameHandler = (e) => {
+        if (errorInName.error) {
+            setErrorInName({
+                error: false,
+                message: ''
+            })
+        }
+        setName(e.target.value)
+    }
+
+    const EmailHandler = (e) => {
+        if (errorInEmail.error) {
+            setErrorInEmail({
+                error: false,
+                message: ''
+            })
+        }
+        setEmail(e.target.value)
+    }
+
+    const DescHandler = (e) => {
+        if (errorInDesc.error) {
+            setErrorInDesc({
+                error: false,
+                message: ''
+            })
+        }
+        setDescription(e.target.value)
+    }
+
+    const PassHandler = (e) => {
+        if (errorInPass.error) {
+            setErrorInPass({
+                error: false,
+                message: ''
+            })
+        }
+        setPass(e.target.value)
+    }
+
+    const ConfirmPassHandler = (e) => {
+        if (errorInConfirmPass.error) {
+            setErrorInConfirmPass({
+                error: false,
+                message: ''
+            })
+        }
+        setConfirmPass(e.target.value)
+    }
+
+    //Verify if the string is empty
+    const isEmpty = (text) => {
+        return text.length === 0 ? true : false;
+    }
+
+    // Fields
+    const fields = [
+        {
+            label: 'ID',
+            value: id,
+            default: true,
+            type: 'text'
+        },
+        {
+            label: 'Nome',
+            value: name,
+            error: errorInName.error,
+            errorMessage: errorInName.message,
+            onChange: (event) => NameHandler(event),
+            default: false,
+            type: 'text',
+        },
+        {
+            label: 'Email',
+            value: email,
+            error: errorInEmail.error,
+            errorMessage: errorInEmail.message,
+            onChange: (event) => EmailHandler(event),
+            default: false,
+            type: 'text'
+        },
+        {
+            label: 'Descrição',
+            value: description,
+            error: errorInDesc.error,
+            errorMessage: errorInDesc.message,
+            onChange: (event) => DescHandler(event),
+            default: false,
+            type: 'text'
+        },
+        {
+            label: 'Senha',
+            value: pass,
+            error: errorInPass.error,
+            errorMessage: errorInPass.message,
+            onChange: (event) => PassHandler(event),
+            default: false,
+            type: 'text'
+        },
+        {
+            label: 'Confirmar senha',
+            value: confirmPass,
+            error: errorInConfirmPass.error,
+            errorMessage: errorInConfirmPass.message,
+            onChange: (event) => ConfirmPassHandler(event),
+            default: false,
+            type: 'text'
+        },
+    ]
+
+    // Handle snack infos
+    const HandleSnack = (message, state, icon, color) => {
+        setSnackInfo({
+            message: message,
+            icon: icon,
+            open: state,
+            color: color
+        })
+    }
+
+    const CheckUserPermission = () => {
+        let canUserEdit = false;
+
+        if (state.userIsLoggedIn) {
+            const roles = [...state.currentUser.roles];
+            for (let i = 0; i < roles.length; i++)
+                if (roles[i].name === 'admin' || roles[i].name === 'editor')
+                    canUserEdit = true;
+        }
+        else {
+            canUserEdit = false;
+        }
+
+        return canUserEdit;
+    }
+
+    const handleDelete = (chipToDelete) => () => {
+        const currRolesList = [...rolesList];
+        currRolesList.push({
+            id: chipToDelete.id,
+            value: chipToDelete.name
+        })
+        setRolesList(currRolesList)
+        setUserRoles((chips) => chips.filter((chip) => chip.id !== chipToDelete.id));
+    };
+
+    const deleteUser = (userId) => {
+        deleteRequest(
+            DeleteFilter(`/users/${userId}`),
+            (data) => {
+                HandleSnack(`${name} deletado com sucesso!`, true, "success", "#228B22");
+            },
+            (error) => {
+                HandleSnack("Erro!", true, "warning", "#FA8072");
+            }
+        )
+    }
+
+    const onSubmit = async () => {
+        // setIsLoading(true)
+        let userRolesID = [];
+        if (!isEmpty(name) && !isEmpty(email)) {
+            const api = EditFilter('user', id)
+            userRoles.map((role) => {
+                userRolesID.push(role.id);
+            })
+            const body = {
+                "user": {
+                    "name": name,
+                    "subjects" : [],
+                    "role_ids": userRolesID,
+                    "institution_ids" : []
+                }
+            }
+            console.log(body);
+            putRequest(
+                api,
+                body,
+                (data) => {
+                    HandleSnack('A linguagem foi alterada com sucesso', true, 'success', '#228B22')
+                    setIsLoading(false)
+                },
+                (error) => {
+                    HandleSnack('Ocorreu algum erro', true, 'warning', '#FA8072')
+                    setIsLoading(false)
+                }
+            )
+        }
+        else {
+            HandleSnack('Você precisa preencher algumas informações obrigatórias', true, 'warning', '#FFC125')
+            if (isEmpty(name)) {
+                setErrorInName({
+                    error: true,
+                    message: 'Este campo precisa ser preenchido'
+                })
+            }
+            if (isEmpty(email)) {
+                setErrorInEmail({
+                    error: true,
+                    message: 'Este campo precisa ser preenchido'
+                })
+            }
+            setIsLoading(false)
+        }
+    }
+
+    const handleChange = (id, value) => {
+        const currUserRoles = [...userRoles];
+        currUserRoles.push(
+            {
+                id: id,
+                name: value,
+            }
+        )
+        setRolesList((chips) => chips.filter((chip) => chip.id !== id));
+        setUserRoles(currUserRoles);
+    };
+
+    useEffect(() => {
+        getRequest(
+            GetAData("users", match.params.id),
+            (data, header) => {
+                const currRolesList = [...rolesList];
+                const auxiliarRolesId = [
+                    1, 2, 3, 4, 5, 6, 7, 9, 10, 11
+                ]
+                data.role_ids.map((data) => {
+                    const index = auxiliarRolesId.indexOf(data);
+                    currRolesList.splice(index, 1);
+                })
+                setRolesList(currRolesList);
+                setName(data.name)
+                setEmail(data.email)
+                setDescription(data.description)
+                setUserRoles(data.roles)
+                setIsLoaded(true);
+            },
+            (error) => {
+                setIsLoaded(true);
+                setError(error);
+            }
+        )
+    }, []);
+
+    if (error) {
+        return <div> Houve um erro... </div>
+    } else if (!isLoaded) {
+        return <LoadingSpinner text="Carregando..." />
+    } else if (CheckUserPermission()) {
+        return (
+            <Card>
+                <SnackBar
+                    severity={snackInfo.icon}
+                    text={snackInfo.message}
+                    snackbarOpen={snackInfo.open}
+                    color={snackInfo.color}
+                    handleClose={() => setSnackInfo({
+                        message: '',
+                        icon: '',
+                        open: false,
+                        color: ''
+                    })}
+                />
+                <CardContent>
+                    <Grid container direction='row' justify='space-between' alignItems="center">
+                        <Grid item>
+                            <Typography variant='h4'>
+                                {name}
+                            </Typography>
+                        </Grid>
+                        <Grid item>
+                            <Grid container direction="row">
+                                <Grid item>
+                                    <Link style={{ textDecoration: 'none' }} to={'/admin/users/teacher_requests'}>
+                                        <Button
+                                            startIcon={<ListRoundedIcon />}
+                                            variant='outlined'
+                                            color='primary'
+                                        >
+                                            Listar
+                                    </Button>
+                                    </Link>
+                                </Grid>
+                                <Grid item>
+                                    <Button
+                                        startIcon={<DeleteRoundedIcon />}
+                                        color="secondary"
+                                        variant="outlined"
+                                        onClick={() => { deleteUser(id) }}
+                                    >
+                                        Deletar
+                                </Button>
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                    <div style={{ height: '1em' }}></div>
+                    <form style={{ display: 'flex', flexDirection: 'column' }}>
+                        {fields.map((field, index) => (
+                            <TextField
+                                key={index}
+                                required={field.required}
+                                disabled={field.default}
+                                error={field.error}
+                                helperText={field.error ? field.errorMessage : ''}
+                                style={{ width: '250px', marginBottom: '1em' }}
+                                label={field.label}
+                                value={field.value}
+                                onChange={field.onChange}
+                                type="search"
+                                multiline={true}
+                            />
+                        ))}
+                        {userRoles.map((data) => {
+                            return (
+                                <li key={data.id} style={{ listStyleType: "none" }}>
+                                    <Chip
+                                        label={data.name}
+                                        onDelete={data === 'React' ? undefined : handleDelete(data)}
+                                        className={classes.chip}
+                                    />
+                                </li>
+                            );
+                        })}
+                        <TextField
+                            id="standard-select-currency"
+                            select
+                            label="Permissões"
+                            style={{ width: '250px', marginBottom: '1em' }}
+                        >
+                            {rolesList.map((option) => (
+                                <MenuItem key={option.id} value={option.value} onClick={() => { handleChange(option.id, option.value) }}>
+                                    {option.value}
+                                </MenuItem>
+                            ))}
+                        </TextField>
+                    </form>
+                </CardContent>
+                <CardAction>
+                    <Button
+                        onClick={() => {
+                            onSubmit();
+                        }}
+                        variant="contained"
+                        color="primary"
+                        disabled={isLoading}
+                        startIcon={isLoading ? null : <SaveIcon />}
+                    >
+                        {
+                            isLoading ? <CircularProgress size={24} /> : 'Salvar'
+                        }
+                    </Button>
+                </CardAction>
+            </Card>
+        )
+    } else return <Unauthorized />
+}
+
+export default EditUser;
+
+const SizedBox = styled.div`
+    height : 3em;
+`
\ No newline at end of file