import Link from 'next/link'; import { Fragment, useContext, useState, useEffect } from 'react'; import { UserContext } from '../../contexts/UserContext'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faPen, faTimes } from '@fortawesome/free-solid-svg-icons'; import date from 'date-and-time'; import HeadTag from '../../components/HeadTag'; import FunctionCard from '../../components/FunctionCard/FunctionCard'; import Modal from '../../components/Modal'; import redirect from '../../utils/redirect'; import htmlParser from 'html-react-parser'; import Loader from '../../components/Loader'; import api from '../../utils/api'; import { API_URL } from '../../utils/config'; import '../../public/css/pages/profile.css'; const Profile = (props) => { const { isAuth, user, logoutUser } = useContext(UserContext); const [isOpen, setIsOpen] = useState(false); const [inputState, setInputState] = useState({}); const [message, setMessage] = useState(""); const [isLoading, setIsLoading] = useState(false); useEffect(() => { if (isAuth) { setInputState({ name: user.name, email: user.email, biography: user.biography, isPublicEmail: user.isPublicEmail }); } }, [isAuth]); const toggleModal = () => setIsOpen(!isOpen); const handleChange = (event, isTypeCheck = false) => { const inputStateNew = { ...inputState }; inputStateNew[event.target.name] = (event.target.files != undefined) ? event.target.files[0] : (isTypeCheck) ? event.target.checked : event.target.value; setInputState(inputStateNew); } const handleSubmit = (event) => { event.preventDefault(); const token = user.token; if (isAuth && token != undefined) { setIsLoading(true); const formData = new FormData(); formData.append('name', inputState.name); formData.append('email', inputState.email); formData.append('biography', inputState.biography); formData.append('isPublicEmail', inputState.isPublicEmail); formData.append('logo', inputState.logo); api.put('/users/', formData, { headers: { 'Authorization': token } }) .then(() => { setIsLoading(false); logoutUser(); redirect({}, '/login?isSuccessEdit=true'); }) .catch((error) => { setMessage(`

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

`); setIsLoading(false); }); } } return ( {/* Édition du profil */} {(isOpen) ?

Éditer le profil

(Vous devrez vous reconnecter après la sauvegarde)
Si vous changez votre adresse email, vous devrez la confirmer comme à l'inscription (vérifier vos emails).

handleChange(event, true)} type="checkbox" name="isPublicEmail" checked={inputState.isPublicEmail} className="custom-control-input" id="isPublicEmail" />

Si aucun fichier est choisi, le logo ne sera pas modifié.

{ (isLoading) ? : htmlParser(message) }
:

Profil de {props.name}

{props.name}
{(props.biography != undefined) &&

{props.biography}

} {(props.email != undefined) &&

Email : {props.email}

}

Date de création du compte : {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}

{(isAuth && user.name === props.name) && }
{(props.favoritesArray.length > 0) &&

Dernières fonctions ajoutées aux favoris :

{props.favoritesArray.map((favorite) => { return ( ); })}
} {(props.commentsArray.length > 0) &&

Derniers commentaires :

{props.commentsArray.map((comment) => (

Posté sur la fonction  {comment.function.title}  le {date.format(new Date(comment.createdAt), 'DD/MM/YYYY à HH:mm', true)}

"{comment.message}"

))}
} {(props.quotesArray.length > 0) &&

Dernières citations proposées (et validées) :

Citations pour la fonction Générateur de citations.

{props.quotesArray.map((currentQuote, index) => { return ( ); })}
Citation/Proverbe Auteur
{currentQuote.quote} {currentQuote.author}
}
}
); } export async function getServerSideProps(context) { const { name } = context.params; return api.get(`/users/${name}`) .then((response) => ({ props: response.data })) .catch(() => redirect(context, '/404')); } export default Profile;