239 lines
11 KiB
JavaScript
239 lines
11 KiB
JavaScript
import Link from 'next/link'
|
|
import { 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 ReactMarkdown from 'react-markdown'
|
|
import CodeBlock from '../../components/CodeBlock'
|
|
import api from '../../utils/api'
|
|
import { API_URL } from '../../utils/config/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 != null) ? 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 != null) {
|
|
setIsLoading(true)
|
|
const formData = new window.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({}, '/users/login?isSuccessEdit=true')
|
|
})
|
|
.catch((error) => {
|
|
setMessage(`<p class="form-error"><b>Erreur:</b> ${error.response.data.message}</p>`)
|
|
setIsLoading(false)
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<HeadTag title={`${props.name} - FunctionProject`} description={`Profil utilisateur de ${props.name}. ${(props.biography != null) ? props.biography : ''}`} />
|
|
|
|
{/* Édition du profil */}
|
|
{(isOpen)
|
|
? (
|
|
<Modal toggleModal={toggleModal}>
|
|
<div className='Profile__container container-fluid'>
|
|
<div className='Profile__row row'>
|
|
<div className='col-24'>
|
|
<div className='Profile__Modal-top-container row'>
|
|
<div className='col-24'>
|
|
<span onClick={toggleModal} style={{ cursor: 'pointer', position: 'absolute', left: 0 }}>
|
|
<FontAwesomeIcon icon={faTimes} style={{ width: '1.5rem', color: 'red' }} />
|
|
</span>
|
|
<h2 className='text-center'>Éditer le profil</h2>
|
|
<p className='text-center'><em>(Vous devrez vous reconnecter après la sauvegarde) <br /> Si vous changez votre adresse email, vous devrez la confirmer comme à l'inscription (vérifier vos emails).</em></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='col-24'>
|
|
<form onSubmit={handleSubmit}>
|
|
<div className='form-group'>
|
|
<label className='form-label' htmlFor='name'>Nom :</label>
|
|
<input value={inputState.name} onChange={handleChange} type='text' name='name' id='name' className='form-control' placeholder='Divlo' />
|
|
</div>
|
|
|
|
<div className='form-group'>
|
|
<label className='form-label' htmlFor='email'>Email :</label>
|
|
<input value={inputState.email} onChange={handleChange} type='email' name='email' id='email' className='form-control' placeholder='email@gmail.com' />
|
|
</div>
|
|
|
|
<div className='form-group custom-control custom-switch'>
|
|
<input onChange={(event) => handleChange(event, true)} type='checkbox' name='isPublicEmail' checked={inputState.isPublicEmail} className='custom-control-input' id='isPublicEmail' />
|
|
<label className='custom-control-label' htmlFor='isPublicEmail'>Email Public</label>
|
|
</div>
|
|
|
|
<div className='form-group'>
|
|
<label className='form-label' htmlFor='biography'>Biographie :</label>
|
|
<textarea style={{ height: 'auto' }} value={inputState.biography} onChange={handleChange} name='biography' id='biography' className='form-control' rows='5' />
|
|
</div>
|
|
|
|
<div className='form-group'>
|
|
<label className='form-label' htmlFor='logo'>Logo <em>(400x400 recommandé)</em> :</label>
|
|
<p style={{ margin: 0 }}><em>Si aucun fichier est choisi, le logo ne sera pas modifié.</em></p>
|
|
<input onChange={handleChange} accept='image/jpeg,image/jpg,image/png,image/gif' type='file' name='logo' id='logo' />
|
|
</div>
|
|
|
|
<div className='form-group text-center'>
|
|
<button type='submit' className='btn btn-dark'>Sauvegarder</button>
|
|
</div>
|
|
</form>
|
|
<div className='form-result text-center'>
|
|
{
|
|
(isLoading)
|
|
? <Loader />
|
|
: htmlParser(message)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
: (
|
|
<div className='container-fluid Profile__container'>
|
|
<div className='row Profile__row'>
|
|
<div className='col-20'>
|
|
<div className='text-center'>
|
|
<h1>Profil de <span className='important'>{props.name}</span></h1>
|
|
</div>
|
|
<div className='row justify-content-center'>
|
|
|
|
<div className='col-24 text-center'>
|
|
<img className='Profile__logo' src={API_URL + props.logo} alt={props.name} />
|
|
</div>
|
|
|
|
<div className='col-24 text-center'>
|
|
{(props.biography != null) && <p>{props.biography}</p>}
|
|
{(props.email != null) && <p><span className='important'>Email :</span> {props.email}</p>}
|
|
<p><span className='important'>Date de création du compte :</span> {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', true)}</p>
|
|
</div>
|
|
|
|
{(isAuth && user.name === props.name) &&
|
|
<button onClick={toggleModal} style={{ marginBottom: '25px' }} className='btn btn-dark'>
|
|
<FontAwesomeIcon icon={faPen} style={{ cursor: 'pointer', width: '1rem' }} />
|
|
Éditez le profil
|
|
</button>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{(props.favoritesArray.length > 0) &&
|
|
<div className='row justify-content-center'>
|
|
<div className='col-24 text-center'>
|
|
<h2>Dernières fonctions ajoutées aux <span className='important'>favoris</span> :</h2>
|
|
</div>
|
|
<div className='col-24'>
|
|
<div className='row justify-content-center'>
|
|
{props.favoritesArray.map((favorite) => {
|
|
return (
|
|
<FunctionCard key={favorite.id} {...favorite} />
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>}
|
|
|
|
{(props.commentsArray.length > 0) &&
|
|
<div className='row justify-content-center'>
|
|
<div className='col-24 text-center'>
|
|
<h2>Derniers <span className='important'>commentaires</span> :</h2>
|
|
</div>
|
|
<div className='col-24'>
|
|
{props.commentsArray.map((comment) => (
|
|
<div key={comment.id} className='row Profile__row Profile__comment'>
|
|
<div className='col-20'>
|
|
<p style={{ textAlign: 'center', marginTop: '30px' }}>
|
|
Posté sur la fonction
|
|
<Link href={(comment.function.type === 'form' || comment.function.type === 'article') ? '/functions/[slug]' : `/functions/${comment.function.slug}`} as={`/functions/${comment.function.slug}`}>
|
|
<a>{comment.function.title}</a>
|
|
</Link>
|
|
le {date.format(new Date(comment.createdAt), 'DD/MM/YYYY à HH:mm', true)}
|
|
</p>
|
|
<ReactMarkdown source={comment.message} renderers={{ code: CodeBlock }} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>}
|
|
|
|
{(props.quotesArray.length > 0) &&
|
|
<div className='row justify-content-center'>
|
|
<div className='col-24 text-center'>
|
|
<h2>Dernières <span className='important'>citations</span> proposées (et validées) :</h2>
|
|
<p>Citations pour la fonction <Link href='/functions/randomQuote'><a>Générateur de citations</a></Link>.</p>
|
|
</div>
|
|
<div className='col-24 table-column'>
|
|
<table style={{ marginBottom: '50px' }}>
|
|
<thead>
|
|
<tr>
|
|
<th className='table-row' scope='col'>Citation/Proverbe</th>
|
|
<th className='table-row' scope='col'>Auteur</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{props.quotesArray.map((currentQuote, index) => {
|
|
return (
|
|
<tr key={index}>
|
|
<td className='table-row text-center'>{currentQuote.quote}</td>
|
|
<td className='table-row text-center'>{currentQuote.author}</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>}
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
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
|