import { useState } from 'react' import Cookies from 'universal-cookie' import date from 'date-and-time' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faPen, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons' import { PhotoshopPicker } from 'react-color' import HeadTag from '../../components/HeadTag' import Modal from '../../components/Modal' import redirect from '../../utils/redirect' import htmlParser from 'html-react-parser' import Loader from '../../components/Loader' import useAPI from '../../hooks/useAPI' import api from '../../utils/api' import '../../public/css/pages/admin.css' const defaultCategoryState = { name: '', color: '#ffffff' } const AddEditCategory = props => { const [inputState, setInputState] = useState(props.defaultInputState) const [message, setMessage] = useState('') const [isLoading, setIsLoading] = useState(false) const handleChange = (event, isTypeCheck = false) => { const inputStateNew = { ...inputState } inputStateNew[event.target.name] = event.target.files != null ? event.target.files[0] : isTypeCheck ? event.target.checked : event.target.value setInputState(inputStateNew) } const apiCallCategory = () => { if (props.isEditing) { return api.put( `/admin/categories/${inputState.id}`, { name: inputState.name, color: inputState.color }, { headers: { Authorization: props.user.token } } ) } return api.post('/admin/categories', inputState, { headers: { Authorization: props.user.token } }) } const handleSubmit = event => { event.preventDefault() setIsLoading(true) apiCallCategory() .then(() => { setIsLoading(false) window.location.reload(true) }) .catch(error => { setMessage( `

Erreur: ${error.response.data.message}

` ) setIsLoading(false) }) } return (

{props.isEditing ? 'Modifier la catégorie' : 'Crée une nouvelle catégorie'}

handleChange({ target: { name: 'color', value: color.hex } })} />
{isLoading ? : htmlParser(message)}
) } const manageCategories = props => { const [, categories] = useAPI('/categories') const [isOpen, setIsOpen] = useState(false) const [isEditing, setIsEditing] = useState(false) const [defaultInputState, setDefaultInputState] = useState( defaultCategoryState ) const toggleModal = () => setIsOpen(!isOpen) const handleRemoveCategory = async categoryId => { try { await api.delete(`/admin/categories/${categoryId}`, { headers: { Authorization: props.user.token } }) window.location.reload(true) } catch {} } const handleEditCategory = categoryInfo => { setDefaultInputState(categoryInfo) setIsEditing(true) toggleModal() } return ( <> {isOpen ? ( ) : (

Gérer les catégories

{categories.map(category => { return ( ) })}
id name color createdAt updatedAt Modifier Supprimer
{category.id} {category.name} {category.color} {date.format( new Date(category.createdAt), 'DD/MM/YYYY à HH:mm', false )} {date.format( new Date(category.updatedAt), 'DD/MM/YYYY à HH:mm', false )} handleEditCategory({ name: category.name, color: category.color, id: category.id })} > handleRemoveCategory(category.id)} >
)} ) } export async function getServerSideProps (context) { const cookies = new Cookies(context.req.headers.cookie) const user = { ...cookies.get('user') } if (!user.isAdmin) { return redirect(context, '/404') } return { props: { user } } } export default manageCategories